Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 1x 8x 56x 16x 40x 13x 27x 8x 56x 8x 8x 48x 56x 8x | import {BASE_CLASS, BREAKPOINTS, CELL_NUMBERS} from '../settings.js'
/**
* getColSpanClassNamesTransform: gets the classes of each media query
* depending on the combination of its values. breakpoint key values
* are preferred over colSpan values
* @param colSpan
* @param otherProps {xxs, xs, s, m, l, xl, xxl}
* @returns {null|string} – classnames for the column span
*/
export const getColSpanClassNamesTransform = ({colSpan, ...otherProps}) => {
const getValidBreakpointValue = (colSpanValue, breakpointValue) => {
if (CELL_NUMBERS.includes(breakpointValue)) {
return breakpointValue
} else if (CELL_NUMBERS.includes(colSpanValue)) {
return colSpanValue
}
return false
}
const response = Object.values(BREAKPOINTS).reduce((acc, breakpointName) => {
let value
if (breakpointName === 'xxs') {
const colSpanValue =
typeof colSpan === 'number' && CELL_NUMBERS.includes(colSpan) ? colSpan : colSpan?.[breakpointName]
value = getValidBreakpointValue(colSpanValue, otherProps[breakpointName])
} else {
value = getValidBreakpointValue(colSpan?.[breakpointName], otherProps[breakpointName])
}
return value ? `${acc} ${BASE_CLASS}-item--${breakpointName}-${value}`.trim() : acc
}, '')
return response === '' ? null : response
}
|