@spaced-out/ui-design-system
Version:
Sense UI components library
103 lines (102 loc) • 4.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Accordion = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _Toggle = require("../Toggle");
var _AccordionModule = _interopRequireDefault(require("./Accordion.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
id,
header,
onChange,
onToggle,
disabled = false,
classNames,
isOpen = false,
showToggle = false,
checked = false,
children,
testId
} = _ref;
const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
const handleToggle = () => {
onToggle?.(!checked);
};
const handleAccordionClick = () => {
if (!disabled) {
onChange?.(id, !accordionIsOpen);
setAccordionIsOpen(prev => !prev);
}
};
React.useEffect(() => {
setAccordionIsOpen(isOpen);
}, [isOpen]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'wrapper'
}),
className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
onClick: handleAccordionClick,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'header-wrapper'
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header),
children: [showToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onClick: e => {
e.stopPropagation(); // prevent toggle click from triggering accordion toggle
},
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'toggle-container'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, {
checked: checked,
onChange: handleToggle,
ariaLabel: 'toggle',
disabled: disabled,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'toggle'
})
})
}), header]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
disabled: disabled,
size: "small",
type: "ghost",
classNames: {
wrapper: _AccordionModule.default.icon
},
ariaLabel: 'Collapse button',
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'collapse-button'
})
// we are not defining onClick here as we are using onClick of the parent here.
})]
}), accordionIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content),
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'content'
}),
children: children
})]
});
});
Accordion.displayName = 'Accordion';