@tomino/dynamic-form-semantic-ui/dist/cjs/properties/group.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const common_1 = require("../common");
const control_factory_helpers_1 = require("./control_factory_helpers");
const semantic_ui_react_1 = require("semantic-ui-react");
const editor_context_1 = require("../editor/editor_context");
const helpers_1 = require("../helpers");
exports.groupLabel = (theme) => common_1.css `
  height: 30px;
  color: ${theme.headerColor};
  background-color: ${theme.headerBackground};
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  white-space: nowrap;
  label: groupLabel;

  &.h1 {
    .group-label {
      font-size: 16px !important;
    }
  }
  &.h2 {
    padding: 0px !important;
    .group-label {
      font-size: 14px;
      margin-bottom: 3px;
    }
  }
  &.h3 {
    padding: 0px;
    .group-label {
      font-size: 12px;
      margin-bottom: 3px;
    }
  }
  i {
    flex: 0 0 18px;
  }
  span {
    flex: 1 1 100%;
  }
  .group-label.h3 {
    font-size: 12px !important;
  }
`;
const groupContent = common_1.css `
  padding: 6px 12px;
`;
exports.PropertyHeader = mobx_react_1.observer(({ children, label, buttons, bare = false, className }) => {
    const context = React.useContext(editor_context_1.EditorContext);
    const groups = JSON.parse(localStorage.getItem('CORPIX_GROUPS') || '{}');
    const [expanded, setExpanded] = React.useState(groups[label] == null ? true : groups[label]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: exports.groupLabel(context.theme) },
            React.createElement(semantic_ui_react_1.Icon, { className: common_1.pointer, onClick: () => {
                    const groups = JSON.parse(localStorage.getItem('CORPIX_GROUPS') || '{}');
                    groups[label] = !expanded;
                    localStorage.setItem('CORPIX_GROUPS', JSON.stringify(groups));
                    setExpanded(!expanded);
                }, name: expanded ? 'caret down' : 'caret right' }),
            label,
            React.createElement("span", null),
            buttons),
        expanded && children && (React.createElement("div", { className: common_1.names({ [groupContent]: !bare }, className) }, children))));
});
exports.Group = mobx_react_1.observer((controlProps) => {
    const { formElement, owner, handlers, catalogue } = controlProps;
    const editorState = React.useContext(editor_context_1.EditorContext);
    const { elements, props: props = {} } = formElement;
    const text = props.text;
    const label = helpers_1.getPropValue(controlProps, elements[0], editorState, 'label');
    return (React.createElement(exports.PropertyHeader, { label: text, bare: props.bare || (elements.length === 1 && !label) }, elements &&
        control_factory_helpers_1.renderElements(editorState, elements, owner, handlers, catalogue, editorState, controlProps.uid, controlProps.filter)));
});
exports.Group.displayName = 'Group';
//# sourceMappingURL=group.js.map