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

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

import {
  Children,
  cloneElement,
  isValidElement
} from "react";
import { Divider } from "../../layout";
import { composeStyles } from "@crossed/styled";
import { CardRoot } from "./Root";
import { cardStyles } from "./styles";
const CardGroup = ({ children }) => {
  const childTmp = Children.toArray(children);
  const size = childTmp.length;
  const mappedChildren = childTmp.reduce((acc, child, index) => {
    if (!isValidElement(child))
      return acc;
    if (child.type === Divider)
      return [...acc, child];
    if (child.type === CardRoot) {
      const isFirst = index === 0;
      const isLast = index === size - 1;
      const isMiddle = !isFirst && !isLast;
      return [
        ...acc,
        cloneElement(child, {
          style: composeStyles(
            isFirst && !isLast && cardStyles.first,
            isLast && !isFirst && cardStyles.last,
            isMiddle && cardStyles.middle,
            child.props.style
          )
        })
      ];
    }
    throw new Error("Direct children of CardGroup should be Divider or Card");
  }, []);
  return mappedChildren;
};
CardGroup.displayName = "Card.Group";
export {
  CardGroup
};
//# sourceMappingURL=Group.js.map