@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
34 lines (33 loc) • 2.28 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const tooltip_1 = __importDefault(require("./tooltip"));
const Panel = ({ title, tooltip = '', collapsible = false, initialCollapsed = false, children, }) => {
const intl = (0, react_intl_1.useIntl)();
const idRef = (0, react_1.useRef)((0, lodash_1.uniqueId)('panel_body'));
const [collapsed, setCollapsed] = (0, react_1.useState)(initialCollapsed);
if (!collapsible && collapsed) {
setCollapsed(false);
}
const headerProps = collapsible
? {
onClick: () => setCollapsed(!collapsed),
role: 'button',
['aria-expanded']: collapsed ? 'false' : 'true',
['aria-controls']: idRef.current,
}
: {};
const collapseTitle = intl.formatMessage({ id: "iX0YPY", defaultMessage: [{ type: 5, value: "collapsed", options: { true: { value: [{ type: 0, value: "Expand panel" }] }, other: { value: [{ type: 0, value: "Collapse panel" }] } } }] }, { collapsed });
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "mb-2 card border" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card-header bg-default" }, headerProps, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "mb-0 card-title" }, { children: [collapsible ? ((0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('formio-collapse-icon', 'text-muted', 'fa', 'fa-regular', {
'fa-plus-square': collapsed,
'fa-minus-square': !collapsed,
}), title: collapseTitle })) : null, title, tooltip && ' ', (0, jsx_runtime_1.jsx)(tooltip_1.default, { text: tooltip })] })) })), collapsed ? null : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card-body", id: idRef.current }, { children: children })))] })));
};
exports.default = Panel;