@gravity-ui/uikit
Version:
Gravity UI base styling and components
85 lines (84 loc) • 4.4 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionItem = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../../hooks/index.js");
const Disclosure_1 = require("../../Disclosure/index.js");
const DisclosureSummary_1 = require("../../Disclosure/DisclosureSummary/DisclosureSummary.js");
const AccordionContext_1 = require("../AccordionContext.js");
const AccordionSummary_1 = require("../AccordionSummary/AccordionSummary.js");
const constants_1 = require("../constants.js");
require("./AccordionItem.css");
exports.AccordionItem = React.forwardRef(function AccordionItem(props, _ref) {
const { children, expanded, defaultExpanded, disabled, keepMounted, value, summary, onUpdate, qa, className, } = props;
const attributes = (0, AccordionContext_1.useAccordion)();
const { id, isExpanded, handleUpdate } = useAccordionItemState({
expanded,
defaultExpanded,
value,
onUpdate,
});
const disclosureExpanded = expanded !== undefined || defaultExpanded !== true ? isExpanded : undefined;
const [preparedSummary, details] = React.useMemo(() => {
return prepareChildren(children, qa);
}, [children, qa]);
return ((0, jsx_runtime_1.jsxs)(Disclosure_1.Disclosure, { arrowPosition: attributes?.arrowPosition, keepMounted: keepMounted, onUpdate: handleUpdate, expanded: disclosureExpanded, defaultExpanded: defaultExpanded, summary: summary, disabled: disabled, qa: qa, className: (0, constants_1.accordionItemBlock)({
size: attributes?.size,
view: attributes?.view,
disabled,
}, className), children: [preparedSummary, (0, jsx_runtime_1.jsx)(Disclosure_1.Disclosure.Details, { className: constants_1.accordionDetailsBlock, children: details })] }, value ?? id));
});
function useAccordionItemState({ expanded, defaultExpanded, value, onUpdate, }) {
const id = (0, hooks_1.useUniqId)();
const { items, updateItems } = (0, AccordionContext_1.useAccordion)();
const isControlledItem = expanded !== undefined;
const hasDefaultExpanded = defaultExpanded === true;
const isExpanded = React.useMemo(() => {
if (isControlledItem) {
return expanded;
}
if (hasDefaultExpanded) {
return false;
}
if (Array.isArray(items)) {
return items.includes(value ?? id);
}
return items === (value ?? id);
}, [isControlledItem, expanded, hasDefaultExpanded, items, value, id]);
const handleUpdate = React.useCallback((next) => {
onUpdate?.(next);
if (!isControlledItem && !hasDefaultExpanded) {
updateItems(value ?? id);
}
}, [onUpdate, isControlledItem, hasDefaultExpanded, updateItems, value, id]);
return { id, isExpanded, handleUpdate };
}
function prepareChildren(children, qa) {
const items = React.Children.toArray(children);
let accordionSummaryElement;
let details;
const content = [];
for (const item of items) {
const isAccordionSummary = (0, AccordionSummary_1.isAccordionSummaryComponent)(item);
if (isAccordionSummary) {
if (accordionSummaryElement) {
throw new Error('Only one <Accordion.Summary> component is allowed');
}
accordionSummaryElement = item;
continue;
}
content.push(item);
}
if (content.length > 0) {
details = (0, jsx_runtime_1.jsx)(React.Fragment, { children: content });
}
const summaryQa = qa ? `${qa}-summary` : undefined;
const summaryChildren = accordionSummaryElement?.props?.children ??
((props) => ((0, jsx_runtime_1.jsx)(DisclosureSummary_1.DefaultDisclosureSummary, { ...props, qa: summaryQa, className: constants_1.accordionSummaryTriggerBlock })));
const summary = ((0, jsx_runtime_1.jsx)(Disclosure_1.Disclosure.Summary, { qa: accordionSummaryElement?.props?.qa ?? summaryQa, children: (disclosureProps, defaultSummary) => ((0, jsx_runtime_1.jsx)(AccordionSummary_1.AccordionSummaryContent, { disclosureProps: disclosureProps, defaultSummary: defaultSummary, children: summaryChildren })) }));
return [summary, details];
}
//# sourceMappingURL=AccordionItem.js.map