vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
82 lines (80 loc) • 2.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.arrayifyResponsiveValue = arrayifyResponsiveValue;
exports.getBaseStyle = getBaseStyle;
exports.getRenderedElement = getRenderedElement;
exports.getStylesForEachBreakpoint = getStylesForEachBreakpoint;
exports.mergeStyles = mergeStyles;
exports.normalizeResponsiveValue = normalizeResponsiveValue;
exports.populateResponsiveArray = populateResponsiveArray;
exports.stripFlowElement = stripFlowElement;
function stripFlowElement(el) {
return /^(p|h[1-6])$/.test(el) ? 'span' : el;
}
// TODO: can we refactor this to not look that ugly?
function arrayifyResponsiveValue(value) {
if (typeof value === 'object') {
if (!Array.isArray(value)) {
const {
default: defaultValue,
fromM,
fromL,
fromXL
} = value;
return [defaultValue, fromM, fromL, fromXL];
}
const [defaultValue, fromM, fromL, fromXL] = value;
return [defaultValue, fromM, fromL, fromXL];
}
return [value, value, value, value];
}
function populateResponsiveArray(value) {
return value.reduce((filled, item, index) => [...filled, item || filled[index - 1]], []);
}
function normalizeResponsiveValue(value) {
return populateResponsiveArray(arrayifyResponsiveValue(value));
}
function getBaseStyle() {
let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const {
fromM,
fromL,
fromXL,
...baseStyle
} = style;
return baseStyle;
}
const breakpoints = ['fromM', 'fromL', 'fromXL'];
function getStylesForEachBreakpoint(styles, breakpoint) {
const breakpointSpan = breakpoints.indexOf(breakpoint) + 1;
return breakpoints.slice(0, breakpointSpan).reduce((mergedStyles, breakpoint) => {
if (styles[breakpoint]) {
return {
...mergedStyles,
...styles[breakpoint]
};
}
return mergedStyles;
}, {});
}
function mergeStyles(_ref, subStyle, breakpoint) {
let {
standard: {
styles
},
...subStyles
} = _ref;
const baseStyle = getBaseStyle(styles);
const baseSubStyle = getBaseStyle(subStyles[subStyle] ? subStyles[subStyle].styles : {});
return {
...baseStyle,
...baseSubStyle,
...getStylesForEachBreakpoint(styles, breakpoint)
};
}
function getRenderedElement(isRootElement, as, variant, subStyle, theme) {
let defaultElement = as || typeof variant === 'string' && typeof subStyle === 'string' && theme.typeScale[variant][subStyle] && theme.typeScale[variant][subStyle].element || 'p';
return isRootElement ? defaultElement : stripFlowElement(defaultElement);
}