Spaces:
Sleeping
Sleeping
pythonic-rag-FastAPIReact
/
frontend
/node_modules
/@mui
/system
/esm
/createTheme
/createBreakpoints.js
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["values", "unit", "step"]; | |
| // Sorted ASC by size. That's important. | |
| // It can't be configured as it's used statically for propTypes. | |
| export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; | |
| const sortBreakpointsValues = values => { | |
| const breakpointsAsArray = Object.keys(values).map(key => ({ | |
| key, | |
| val: values[key] | |
| })) || []; | |
| // Sort in ascending order | |
| breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val); | |
| return breakpointsAsArray.reduce((acc, obj) => { | |
| return _extends({}, acc, { | |
| [obj.key]: obj.val | |
| }); | |
| }, {}); | |
| }; | |
| // Keep in mind that @media is inclusive by the CSS specification. | |
| export default function createBreakpoints(breakpoints) { | |
| const { | |
| // The breakpoint **start** at this value. | |
| // For instance with the first breakpoint xs: [xs, sm). | |
| values = { | |
| xs: 0, | |
| // phone | |
| sm: 600, | |
| // tablet | |
| md: 900, | |
| // small laptop | |
| lg: 1200, | |
| // desktop | |
| xl: 1536 // large screen | |
| }, | |
| unit = 'px', | |
| step = 5 | |
| } = breakpoints, | |
| other = _objectWithoutPropertiesLoose(breakpoints, _excluded); | |
| const sortedValues = sortBreakpointsValues(values); | |
| const keys = Object.keys(sortedValues); | |
| function up(key) { | |
| const value = typeof values[key] === 'number' ? values[key] : key; | |
| return `@media (min-width:${value}${unit})`; | |
| } | |
| function down(key) { | |
| const value = typeof values[key] === 'number' ? values[key] : key; | |
| return `@media (max-width:${value - step / 100}${unit})`; | |
| } | |
| function between(start, end) { | |
| const endIndex = keys.indexOf(end); | |
| return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`; | |
| } | |
| function only(key) { | |
| if (keys.indexOf(key) + 1 < keys.length) { | |
| return between(key, keys[keys.indexOf(key) + 1]); | |
| } | |
| return up(key); | |
| } | |
| function not(key) { | |
| // handle first and last key separately, for better readability | |
| const keyIndex = keys.indexOf(key); | |
| if (keyIndex === 0) { | |
| return up(keys[1]); | |
| } | |
| if (keyIndex === keys.length - 1) { | |
| return down(keys[keyIndex]); | |
| } | |
| return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and'); | |
| } | |
| return _extends({ | |
| keys, | |
| values: sortedValues, | |
| up, | |
| down, | |
| between, | |
| only, | |
| not, | |
| unit | |
| }, other); | |
| } |