@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
92 lines (91 loc) • 3.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildStylePropFn = exports.buildStyleFns = void 0;
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const getColor = (value) => {
return tokens_1.colors[value] || (0, canvas_kit_styling_1.wrapProperty)(value);
};
const getDepth = (value) => {
return tokens_1.depth[value];
};
const getShape = (value) => {
return tokens_1.borderRadius[value] || (0, canvas_kit_styling_1.wrapProperty)(value);
};
const getSpace = (value) => {
return tokens_1.space[value] || (0, canvas_kit_styling_1.wrapProperty)(value);
};
const getFont = (value) => {
return (tokens_1.type.properties.fontFamilies[value] ||
(0, canvas_kit_styling_1.wrapProperty)(value));
};
const getFontSize = (value) => {
return (tokens_1.type.properties.fontSizes[value] ||
(0, canvas_kit_styling_1.wrapProperty)(value));
};
const getFontWeight = (value) => {
return (tokens_1.type.properties.fontWeights[value] ||
(0, canvas_kit_styling_1.wrapProperty)(value));
};
function buildStyleFns(styleFnConfigs) {
return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
const styleFn = (value) => {
return styleFnConfig.properties.reduce((styles = {}, property) => {
if (styleFnConfig.system === 'color') {
return { ...styles, [property]: getColor(value) };
}
if (styleFnConfig.system === 'depth') {
// Depth tokens return the style property (box-shadow) and the value
const depthStyle = getDepth(value);
return { ...styles, ...depthStyle };
}
if (styleFnConfig.system === 'font') {
return {
...styles,
[property]: getFont(value),
};
}
if (styleFnConfig.system === 'fontSize') {
return {
...styles,
[property]: getFontSize(value),
};
}
if (styleFnConfig.system === 'fontWeight') {
return {
...styles,
[property]: getFontWeight(value),
};
}
if (styleFnConfig.system === 'shape') {
return {
...styles,
[property]: getShape(value),
};
}
if (styleFnConfig.system === 'space') {
return { ...styles, [property]: getSpace(value) };
}
return { ...styles, [property]: value };
}, {});
};
return { ...styleFns, [styleFnConfig.name]: styleFn };
}, {});
}
exports.buildStyleFns = buildStyleFns;
function buildStylePropFn(styleFns) {
return (props) => {
let styles = {};
for (const key in props) {
if (key in props && key in styleFns) {
const styleFn = styleFns[key];
const value = props[key];
const style = styleFn(value);
styles = { ...styles, ...style };
continue;
}
}
return styles;
};
}
exports.buildStylePropFn = buildStylePropFn;