@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
62 lines (60 loc) • 2.25 kB
JavaScript
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_utils_index = require('../../utils/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/group/use-group.ts
const useGroup = (children) => {
const validChildren = require_children.useValidChildren(children);
const omittedChildren = (0, react.useMemo)(() => validChildren.filter((child) => {
const ungrouped = child.props["data-ungrouped"];
return (0, require_utils_index.utils_exports.isUndefined)(ungrouped) || (0, require_utils_index.utils_exports.isNull)(ungrouped);
}), [validChildren]);
const count = omittedChildren.length;
return (0, react.useMemo)(() => validChildren.map((child) => {
const index = omittedChildren.indexOf(child);
if (index === -1) return child;
return (0, react.cloneElement)(child, {
...child.props,
style: {
"--group-count": count,
"--group-index": index,
...child.props?.style ?? {}
},
"data-group-between": (0, require_utils_index.utils_exports.dataAttr)(index > 0 && index < count - 1),
"data-group-end": (0, require_utils_index.utils_exports.dataAttr)(index === count - 1),
"data-group-start": (0, require_utils_index.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 [(0, react.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
]), (0, react.useMemo)(() => ({
style,
...rest
}), [style, rest])];
};
//#endregion
exports.useGroup = useGroup;
exports.useGroupItemProps = useGroupItemProps;
//# sourceMappingURL=use-group.cjs.map