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;