@crossed/ui/lib/module/display/Group.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { cloneElement, isValidElement, memo, useMemo, Children } from "react";
import { withStaticProperties } from "@crossed/core";
import { Divider, XBox, YBox } from "../layout";
import { composeStyles, createStyles } from "@crossed/styled";
const stylesVertical = createStyles(() => ({
  first: {
    base: {
      borderBottomWidth: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0
    }
  },
  middle: {
    base: { borderBottomWidth: 0, borderRadius: 0, borderTopWidth: 0 }
  },
  last: {
    base: {
      borderTopWidth: 0,
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0
    }
  }
}));
const stylesHorizontal = createStyles(() => ({
  first: {
    base: {
      borderRightWidth: 0,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0
    }
  },
  middle: {
    base: { borderLeftWidth: 0, borderRadius: 0, borderRightWidth: 0 }
  },
  last: {
    base: {
      borderLeftWidth: 0,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0
    }
  }
}));
const GroupRoot = memo(
  ({ orientation = "vertical", children, ...props }) => {
    const childrenModified = useMemo(() => {
      return Children.toArray(children).map((child, i, a) => {
        if (!isValidElement(child))
          return child;
        const size = a.length;
        const isFirst = i === 0;
        const isLast = i === size - 1;
        const isMiddle = !isFirst && !isLast;
        const props2 = {
          style: composeStyles(
            child.props.style,
            orientation === "vertical" && [
              isFirst && !isLast && stylesVertical.first,
              isLast && !isFirst && stylesVertical.last,
              isMiddle && stylesVertical.middle
            ],
            orientation === "horizontal" && [
              isFirst && !isLast && stylesHorizontal.first,
              isLast && !isFirst && stylesHorizontal.last,
              isMiddle && stylesHorizontal.middle
            ]
          )
        };
        if (child.type === Divider) {
          props2.direction = orientation === "horizontal" ? "vertical" : "horizontal";
          delete props2.style;
        }
        return cloneElement(child, props2);
      });
    }, [children, orientation]);
    const Container = useMemo(
      () => orientation === "vertical" ? YBox : XBox,
      [orientation]
    );
    return /* @__PURE__ */ jsx(Container, { ...props, children: childrenModified });
  }
);
const Group = withStaticProperties(GroupRoot, {});
export {
  Group,
  GroupRoot
};
//# sourceMappingURL=Group.js.map