@spaced-out/ui-design-system
Version:
Sense UI components library
70 lines (69 loc) • 3.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Accordion = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Button = require("../Button");
var _Toggle = require("../Toggle");
var _AccordionModule = _interopRequireDefault(require("./Accordion.module.css"));
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,
children
} = _ref;
const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
const [checked, setChecked] = React.useState(false);
const handleToggle = () => {
setChecked(!checked);
onToggle?.(id, !checked);
};
const handleAccordionClick = () => {
if (!disabled) {
onChange?.(id, !accordionIsOpen);
setAccordionIsOpen(prev => !prev);
}
};
React.useEffect(() => {
setAccordionIsOpen(isOpen);
}, [isOpen]);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
"data-testid": "Accordion",
className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper)
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
onClick: handleAccordionClick
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header)
}, showToggle && /*#__PURE__*/React.createElement("div", {
onClick: e => {
e.stopPropagation(); // prevent toggle click from triggering accordion toggle
}
}, /*#__PURE__*/React.createElement(_Toggle.Toggle, {
checked: checked,
onChange: handleToggle,
ariaLabel: 'toggle'
})), header), /*#__PURE__*/React.createElement(_Button.Button, {
iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
disabled: disabled,
size: "small",
type: "ghost",
className: _AccordionModule.default.icon,
ariaLabel: 'Collapse button'
// we are not defining onClick here as we are using onClick of the parent here.
})), accordionIsOpen && /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content)
}, children));
});
Accordion.displayName = 'Accordion';