@spaced-out/ui-design-system
Version:
Sense UI components library
90 lines (89 loc) • 4.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsibleCardContent = exports.CollapsibleCardAction = exports.CollapsibleCard = exports.COLLAPSIBLE_CARD_SEMANTIC = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Button = require("../Button");
var _Icon = require("../Icon");
var _Truncate = require("../Truncate");
var _CollapsibleCardModule = _interopRequireDefault(require("./CollapsibleCard.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 COLLAPSIBLE_CARD_SEMANTIC = exports.COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
neutral: 'neutral',
success: 'success',
information: 'information',
warning: 'warning',
danger: 'danger'
});
const CollapsibleCardAction = _ref => {
let {
children,
className
} = _ref;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_CollapsibleCardModule.default.actionContainer, className)
}, children);
};
exports.CollapsibleCardAction = CollapsibleCardAction;
const CollapsibleCardContent = _ref2 => {
let {
children,
className
} = _ref2;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_CollapsibleCardModule.default.contentContainer, className)
}, children);
};
exports.CollapsibleCardContent = CollapsibleCardContent;
const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
let {
id,
isOpen,
onChange,
classNames,
title,
children,
semantic = 'neutral',
headerIconName,
headerIconType = 'solid'
} = _ref3;
const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
React.useEffect(() => {
setCollapsibleCardIsOpen(Boolean(isOpen));
}, [isOpen]);
return /*#__PURE__*/React.createElement("div", {
"data-testid": "CollapsibleCard",
className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),
ref: ref
}, /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
[_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
}, classNames?.title),
onClick: e => {
onChange?.(e, !collapsibleCardIsOpen, id);
setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
}
}, /*#__PURE__*/React.createElement("div", {
className: _CollapsibleCardModule.default.headerContent
}, !!headerIconName && /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_CollapsibleCardModule.default.iconContainer, _CollapsibleCardModule.default[semantic])
}, /*#__PURE__*/React.createElement(_Icon.Icon, {
name: headerIconName,
type: headerIconType,
size: "small",
className: _CollapsibleCardModule.default[semantic]
})), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, title)), collapsibleCardIsOpen ? /*#__PURE__*/React.createElement(_Icon.Icon, {
name: "chevron-up",
color: "secondary",
size: "small"
}) : /*#__PURE__*/React.createElement(_Icon.Icon, {
name: "chevron-down",
color: "secondary",
size: "small"
})), collapsibleCardIsOpen && /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content)
}, children));
});