Spaces:
Sleeping
Sleeping
| import capitalize from '@mui/utils/capitalize'; | |
| import responsivePropType from './responsivePropType'; | |
| import { handleBreakpoints } from './breakpoints'; | |
| export function getPath(obj, path, checkVars = true) { | |
| if (!path || typeof path !== 'string') { | |
| return null; | |
| } | |
| // Check if CSS variables are used | |
| if (obj && obj.vars && checkVars) { | |
| const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj); | |
| if (val != null) { | |
| return val; | |
| } | |
| } | |
| return path.split('.').reduce((acc, item) => { | |
| if (acc && acc[item] != null) { | |
| return acc[item]; | |
| } | |
| return null; | |
| }, obj); | |
| } | |
| export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) { | |
| let value; | |
| if (typeof themeMapping === 'function') { | |
| value = themeMapping(propValueFinal); | |
| } else if (Array.isArray(themeMapping)) { | |
| value = themeMapping[propValueFinal] || userValue; | |
| } else { | |
| value = getPath(themeMapping, propValueFinal) || userValue; | |
| } | |
| if (transform) { | |
| value = transform(value, userValue, themeMapping); | |
| } | |
| return value; | |
| } | |
| function style(options) { | |
| const { | |
| prop, | |
| cssProperty = options.prop, | |
| themeKey, | |
| transform | |
| } = options; | |
| // false positive | |
| // eslint-disable-next-line react/function-component-definition | |
| const fn = props => { | |
| if (props[prop] == null) { | |
| return null; | |
| } | |
| const propValue = props[prop]; | |
| const theme = props.theme; | |
| const themeMapping = getPath(theme, themeKey) || {}; | |
| const styleFromPropValue = propValueFinal => { | |
| let value = getStyleValue(themeMapping, transform, propValueFinal); | |
| if (propValueFinal === value && typeof propValueFinal === 'string') { | |
| // Haven't found value | |
| value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal); | |
| } | |
| if (cssProperty === false) { | |
| return value; | |
| } | |
| return { | |
| [cssProperty]: value | |
| }; | |
| }; | |
| return handleBreakpoints(props, propValue, styleFromPropValue); | |
| }; | |
| fn.propTypes = process.env.NODE_ENV !== 'production' ? { | |
| [prop]: responsivePropType | |
| } : {}; | |
| fn.filterProps = [prop]; | |
| return fn; | |
| } | |
| export default style; |