@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
105 lines (104 loc) • 3.65 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const Blades_styles = require("./Blades.styles.cjs");
function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
const childrenArray = react.Children.toArray(children);
const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
const childIsControlled = child?.props?.expanded !== void 0;
const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
return childIsExpanded ? i : void 0;
}).filter((v) => v !== void 0);
const numberOfExpandedBlades = expandedBlades.length;
if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
return [0];
}
if (atMostOneExpanded && numberOfExpandedBlades > 1) {
return [expandedBlades[0]];
}
return expandedBlades;
}
const HvBlades = (props) => {
const {
id,
className,
classes: classesProp,
children,
expanded: expandedProp,
defaultExpanded,
atMostOneExpanded = false,
atLeastOneExpanded = false,
fullWidthBlades = false,
onChange,
...others
} = uikitReactCore.useDefaultProps("HvBlades", props);
const { classes, cx } = Blades_styles.useClasses(classesProp);
const [expanded, setExpanded] = uikitReactCore.useControlled(
expandedProp,
() => getExpandedBlades(
defaultExpanded,
children,
atMostOneExpanded,
atLeastOneExpanded
)
);
const onChildChangeInterceptor = react.useCallback(
(index, childOnChange, event, isExpanded) => {
const newValue = [];
if (atMostOneExpanded) {
if (isExpanded) {
newValue.push(index);
}
} else {
newValue.push(...expanded);
if (isExpanded) {
newValue.push(index);
} else {
newValue.splice(newValue.indexOf(index), 1);
}
}
if (atLeastOneExpanded && newValue.length === 0) {
newValue.push(index);
}
childOnChange?.(event, isExpanded);
onChange?.(event, newValue);
setExpanded(newValue);
},
[onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
);
const modifiedChildren = react.useMemo(() => {
return react.Children.map(children, (child, i) => {
const childIsExpanded = expanded.includes(i);
return react.cloneElement(child, {
expanded: childIsExpanded,
fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
buttonProps: {
...child?.props?.buttonProps,
"aria-disabled": (
// If the accordion panel associated with an accordion header is visible,
// and if the accordion does not permit the panel to be collapsed, the header
// button element has aria-disabled set to true.
child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
)
},
onChange: (event, isExpanded) => onChildChangeInterceptor(
i,
child?.props?.onChange,
event,
isExpanded
)
});
});
}, [
children,
expanded,
fullWidthBlades,
atMostOneExpanded,
onChildChangeInterceptor
]);
return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
};
exports.bladesClasses = Blades_styles.staticClasses;
exports.HvBlades = HvBlades;