@workday/canvas-kit-react/dist/commonjs/layout/lib/utils/mergeStyles.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyles = void 0;
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const Box_1 = require("../Box");
const background_1 = require("./background");
const border_1 = require("./border");
const color_1 = require("./color");
const depth_1 = require("./depth");
const flex_1 = require("./flex");
const flexItem_1 = require("./flexItem");
const grid_1 = require("./grid");
const gridItem_1 = require("./gridItem");
const layout_1 = require("./layout");
const other_1 = require("./other");
const position_1 = require("./position");
const space_1 = require("./space");
const text_1 = require("./text");
// get a hash of all the style props for a faster lookup
const stylePropHash = [
    ...background_1.backgroundStyleFnConfigs,
    ...border_1.borderStyleFnConfigs,
    ...color_1.colorStyleFnConfigs,
    ...depth_1.depthStyleFnConfigs,
    ...flex_1.flexStyleFnConfigs,
    ...flexItem_1.flexItemStyleFnConfigs,
    ...grid_1.gridStyleFnConfigs,
    ...gridItem_1.gridItemStyleFnConfigs,
    ...layout_1.layoutStyleFnConfigs,
    ...other_1.otherStyleFnConfigs,
    ...position_1.positionStyleFnConfigs,
    ...space_1.spaceStyleFnConfigs,
    ...text_1.textStyleFnConfigs,
].reduce((result, prop) => {
    //@ts-ignore
    result[prop.name] = true;
    return result;
}, {});
function isStyleProps(prop) {
    return stylePropHash[prop] || false;
}
/**
 * This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
 * adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
 */
function mergeStyles(
/**
 * All the props to be spread onto an element. The `cs` prop will be removed an reduced to
 * `className` and `style` props which should be safe on every element.
 */
allProps, 
/**
 * Optional local style created by `createStyles`. Using this parameter, you can style your
 * element while supporting proper style merging order.
 */
localCs) {
    const styleProps = {};
    let shouldRuntimeMergeStyles = false;
    // separate style props from all other props. `cs` is special and should be forwarded to the
    // `handleCsProp` function.
    const elemProps = Object.keys(allProps).reduce((result, prop) => {
        if (isStyleProps(prop)) {
            shouldRuntimeMergeStyles = true;
            // @ts-ignore
            styleProps[prop] = allProps[prop];
        }
        else {
            // @ts-ignore
            result[prop] = allProps[prop];
        }
        return result;
    }, {});
    let styles = {};
    // We have style props currently and we will need to create style and merge with our `csToProps` to get the correct
    // merging order for styles. This includes box, flex and grid styles.
    if (shouldRuntimeMergeStyles) {
        styles = { ...(0, Box_1.boxStyleFn)(styleProps), ...(0, flex_1.flex)(styleProps), ...(0, grid_1.grid)(styleProps) };
    }
    return (0, canvas_kit_styling_1.handleCsProp)(elemProps, [localCs, styles]);
}
exports.mergeStyles = mergeStyles;