@wix/design-system/dist/esm/FillPreview/hooks/useStyledContent.js

@wix/design-system

import React, { useMemo } from 'react';
import { st, classes, vars } from '../FillPreview.st.css.js';
import { getBackgroundStyles } from '../FillPreview.utils';
import classNames from 'classnames';
export const useStyledContent = ({ contentClassName, disabled, fill, }) => {
    return useMemo(() => {
        if (!fill) {
            return {};
        }
        if (React.isValidElement(fill)) {
            return { children: fill };
        }
        const backgroundStyles = getBackgroundStyles(fill);
        const isMultiColor = Array.isArray(backgroundStyles);
        const colorCount = isMultiColor ? backgroundStyles.length : 1;
        const baseContentClassName = classNames(contentClassName, st(classes.content, { colorCount }));
        if (disabled) {
            return { contentClassName: baseContentClassName };
        }
        if (isMultiColor) {
            const varMap = backgroundStyles.reduce((cssVarMap, bg, idx) => ({
                ...cssVarMap,
                [vars[`fill-preview-background-color-${idx}`]]: bg.backgroundColor,
            }), {});
            return {
                contentClassName: classNames(baseContentClassName, classes.colorBackdrop),
                style: varMap,
                children: backgroundStyles.map((_, idx) => React.createElement("span", { key: idx })),
            };
        }
        return {
            contentClassName: classNames(baseContentClassName, classes.imageBackdrop),
            style: {
                ...backgroundStyles,
                [vars['fill-preview-background-image']]: backgroundStyles?.backgroundImage,
            },
        };
    }, [fill, disabled, contentClassName]);
};
//# sourceMappingURL=useStyledContent.js.map