@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
59 lines (57 loc) • 1.92 kB
JavaScript
import { useValidChildren } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { cloneElement, useMemo } from "react";
//#region src/components/group/use-group.ts
const useGroup = (children) => {
const validChildren = useValidChildren(children);
const omittedChildren = useMemo(() => validChildren.filter((child) => {
const ungrouped = child.props["data-ungrouped"];
return (0, utils_exports.isUndefined)(ungrouped) || (0, utils_exports.isNull)(ungrouped);
}), [validChildren]);
const count = omittedChildren.length;
return useMemo(() => validChildren.map((child) => {
const index = omittedChildren.indexOf(child);
if (index === -1) return child;
return cloneElement(child, {
...child.props,
style: {
"--group-count": count,
"--group-index": index,
...child.props?.style ?? {}
},
"data-group-between": (0, utils_exports.dataAttr)(index > 0 && index < count - 1),
"data-group-end": (0, utils_exports.dataAttr)(index === count - 1),
"data-group-start": (0, utils_exports.dataAttr)(index === 0),
"data-peer": ""
});
}), [
validChildren,
omittedChildren,
count
]);
};
const useGroupItemProps = ({ style: { "--group-count": groupCount, "--group-index": groupIndex,...style } = {}, "data-group-between": dataGroupBetween, "data-group-end": dataGroupEnd, "data-group-start": dataGroupStart, "data-peer": dataPeer,...rest }) => {
return [useMemo(() => ({
style: {
"--group-count": groupCount,
"--group-index": groupIndex
},
"data-group-between": dataGroupBetween,
"data-group-end": dataGroupEnd,
"data-group-start": dataGroupStart,
"data-peer": dataPeer
}), [
groupCount,
groupIndex,
dataGroupBetween,
dataGroupEnd,
dataGroupStart,
dataPeer
]), useMemo(() => ({
style,
...rest
}), [style, rest])];
};
//#endregion
export { useGroup, useGroupItemProps };
//# sourceMappingURL=use-group.js.map