@re-flex/styles/styledFlex.js

Core Style Util Package

import { isArray } from "@re-flex/utils";
import clsx from "clsx";
import React, { forwardRef, useMemo, } from "react";
import { useTheme } from "./Core";
import { css } from "./Gooberize";
import ShouldForwardProp from "./ShouldForwardProp";
import { sxPropInitializer } from "./sx";
const styledFlex = (Component, forwardableRef, defaultProps) => {
    return (renderClasses) => {
        const StyledComp = ({ sx: SXInProp, component: ComponentInProp, ...definedProps }, ref) => {
            const theme = useTheme();
            let ProtoProps = Object.assign({}, defaultProps, definedProps);
            const memoizedClassName = useMemo(() => {
                let renderedStyles = renderClasses;
                if (typeof renderClasses === "function") {
                    renderedStyles = renderClasses({ ...ProtoProps, theme });
                }
                if (isArray(renderedStyles)) {
                    renderedStyles = renderedStyles.filter(Boolean);
                }
                let classNames = "";
                const getCssProps = typeof renderClasses === "string"
                    ? renderedStyles
                    : isArray(renderedStyles)
                        ? renderedStyles.map((style) => sxPropInitializer(style))
                        : sxPropInitializer(renderedStyles);
                if (isArray(getCssProps)) {
                    for (let classesObject of getCssProps) {
                        classNames += " " + css(classesObject);
                    }
                }
                else {
                    classNames = css(getCssProps);
                }
                if (SXInProp && Object.keys(SXInProp).length > 0) {
                    let sxClassObject = sxPropInitializer(SXInProp);
                    classNames += " " + css(sxClassObject);
                }
                return classNames;
            }, [definedProps, theme]);
            ProtoProps.className = clsx(defaultProps?.className, definedProps?.className, memoizedClassName);
            if (forwardableRef && !!ref) {
                ProtoProps.ref = ref;
            }
            ShouldForwardProp(ProtoProps);
            let COMPONENT_ALIAS = useMemo(() => {
                if (!!ComponentInProp) {
                    return ComponentInProp;
                }
                return Component;
            }, [ComponentInProp]);
            return React.createElement(COMPONENT_ALIAS, { ...ProtoProps });
        };
        return forwardableRef ? forwardRef(StyledComp) : StyledComp;
    };
};
export default styledFlex;