import PropTypes from 'prop-types'; import { DEFAULT_BREAKPOINTS, DEFAULT_MIN_BREAKPOINT } from './ThemeProvider'; export function responsivePropType(propType) { return PropTypes.oneOfType([propType, PropTypes.shape({ xs: propType, sm: propType, md: propType, lg: propType, xl: propType, xxl: propType })]); } export default function createUtilityClassName(utilityValues, breakpoints = DEFAULT_BREAKPOINTS, minBreakpoint = DEFAULT_MIN_BREAKPOINT) { const classes = []; Object.entries(utilityValues).forEach(([utilName, utilValue]) => { if (utilValue != null) { if (typeof utilValue === 'object') { breakpoints.forEach(brkPoint => { const bpValue = utilValue[brkPoint]; if (bpValue != null) { const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : ''; classes.push(`${utilName}${infix}-${bpValue}`); } }); } else { classes.push(`${utilName}-${utilValue}`); } } }); return classes; }