@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
29 lines (28 loc) • 1.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { uniqueId } from 'lodash';
import { useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import Tooltip from './tooltip';
const Panel = ({ title, tooltip = '', collapsible = false, initialCollapsed = false, children, }) => {
const intl = useIntl();
const idRef = useRef(uniqueId('panel_body'));
const [collapsed, setCollapsed] = 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 (_jsxs("div", Object.assign({ className: "mb-2 card border" }, { children: [_jsx("div", Object.assign({ className: "card-header bg-default" }, headerProps, { children: _jsxs("span", Object.assign({ className: "mb-0 card-title" }, { children: [collapsible ? (_jsx("i", { className: clsx('formio-collapse-icon', 'text-muted', 'fa', 'fa-regular', {
'fa-plus-square': collapsed,
'fa-minus-square': !collapsed,
}), title: collapseTitle })) : null, title, tooltip && ' ', _jsx(Tooltip, { text: tooltip })] })) })), collapsed ? null : (_jsx("div", Object.assign({ className: "card-body", id: idRef.current }, { children: children })))] })));
};
export default Panel;