@up-group-ui/react-controls
Version:
Up shared react controls
26 lines • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Collapsable = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var useTheme_1 = require("../../../Common/hooks/useTheme");
var Collapsable_style_1 = require("./Collapsable.style");
var Collapsable = function (_a) {
var title = _a.title, _b = _a.defaultOpened, defaultOpened = _b === void 0 ? false : _b, _c = _a.statusIndicator, statusIndicator = _c === void 0 ? true : _c, onClick = _a.onClick, children = _a.children;
var theme = (0, useTheme_1.useTheme)();
var _d = (0, react_1.useState)(defaultOpened), isOpened = _d[0], setIsOpened = _d[1];
var handleClick = function (e) {
e.preventDefault();
setIsOpened(!isOpened);
onClick === null || onClick === void 0 ? void 0 : onClick(isOpened);
};
var wrapperStyles = (0, Collapsable_style_1.getWrapperStyles)(theme);
var headerStyles = (0, Collapsable_style_1.getHeaderStyles)(theme);
var titleStyles = (0, Collapsable_style_1.getTitleStyles)(theme);
var statusIndicatorStyles = (0, Collapsable_style_1.getStatusIndicatorStyles)(theme, isOpened);
var contentStyles = (0, Collapsable_style_1.getContentStyles)();
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: wrapperStyles }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: headerStyles, onClick: handleClick }, { children: [title && (0, jsx_runtime_1.jsx)("h2", (0, tslib_1.__assign)({ className: titleStyles }, { children: title }), void 0), statusIndicator && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: statusIndicatorStyles }, { children: ">" }), void 0)] }), void 0), isOpened && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: contentStyles }, { children: children }), void 0)] }), void 0));
};
exports.Collapsable = Collapsable;
//# sourceMappingURL=Collapsable.js.map