@mapbox/mr-ui
Version:
UI components for Mapbox projects
83 lines (82 loc) • 4.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Accordion;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var AccordionPrimitive = _interopRequireWildcard(require("@radix-ui/react-accordion"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Accordion(_ref) {
let {
items,
onToggle,
activeItem,
themeItem,
themeItemBody,
themeItemHeader = 'txt-s txt-bold txt-truncate link link--gray py6',
themeItemHeaderDisabled = 'color-gray-light'
} = _ref;
const renderItems = item => {
const {
id,
header,
body,
disabled
} = item;
const active = id === activeItem;
const themeHeader = (0, _classnames.default)(`w-full ${themeItemHeader}`, {
[`cursor-default ${themeItemHeaderDisabled}`]: disabled,
'cursor-pointer': !disabled
});
return /*#__PURE__*/_react.default.createElement(AccordionPrimitive.Item, {
className: themeItem,
key: id,
value: id
}, /*#__PURE__*/_react.default.createElement(AccordionPrimitive.Trigger, {
disabled: disabled,
"data-testid": `accordion-trigger-${id}`,
className: themeHeader
}, header(active)), /*#__PURE__*/_react.default.createElement(AccordionPrimitive.Content, null, active && /*#__PURE__*/_react.default.createElement("div", {
className: themeItemBody
}, body)));
};
return /*#__PURE__*/_react.default.createElement(AccordionPrimitive.Root, {
type: "single",
value: activeItem,
onValueChange: onToggle,
collapsible: true
}, items.map(renderItems));
}
Accordion.propTypes = {
/** An array of items that represents each tab. Each entry supports:
* 1. `id` Identifying value for accordion item.
* 2. `header` Contents that are always shown.
* 3. `body` Contents that are shown when the accorion is active.
* 4. `disabled` Flag to disable the clickability of an accorion item (optional). */
items: _propTypes.default.arrayOf(_propTypes.default.shape({
/** Identifying value for accordion item. */
id: _propTypes.default.string.isRequired,
/** Contents that are always shown. */
header: _propTypes.default.func.isRequired,
/** Contents that shown when the accordion is active. */
body: _propTypes.default.node.isRequired,
/** Flag to disable the clickability of an accordion item. */
disabled: _propTypes.default.bool
})).isRequired,
/** Callback when an accordion header item is clicked. */
onToggle: _propTypes.default.func.isRequired,
/** Value should coorespond to an `id` within the items array. */
activeItem: _propTypes.default.string,
/** CSS classes to apply to the accordion item container */
themeItem: _propTypes.default.string,
/** CSS classes to apply to the accordion header */
themeItemHeader: _propTypes.default.string,
/** CSS classes to apply to the disabled accordion header */
themeItemHeaderDisabled: _propTypes.default.string,
/** CSS classes to apply to the accordion body */
themeItemBody: _propTypes.default.string
};