@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/tab_view.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 semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../common");
const helpers_1 = require("../helpers");
const wrapper_1 = require("../wrapper");
const context_1 = require("../context");
exports.verticalStyle = common_1.css `
  /* name:vertical */
  display: flex;

  .tabMenu {
    flex: 1 auto;
  }

  .tabDivider {
    flex: 1 16px;
  }

  .tabContent {
    flex: 1 100%;
    margin-top: 0px;
  }
  label: vertical;
`;
const TabComponent = props => {
    const [selection, setSelection] = React.useState(0);
    const context = React.useContext(context_1.Context);
    const { formElement, owner, EmptyCell } = props;
    const { menuItems, vertical, value } = formElement.props;
    let menus;
    let currentOwner;
    const textField = helpers_1.getValue(props, context, 'textField');
    const valueField = helpers_1.getValue(props, context, 'valueField');
    const bound = value && value.source && valueField && textField;
    const source = common_1.valueSource(formElement);
    if (bound) {
        let values = helpers_1.getValue(props, context) || [];
        menus = values.map((v) => ({ text: v[textField], value: v[valueField] }));
        currentOwner = owner.getValue(`${source}.${selection}`);
        if (bound && menus.length === 0) {
            menus = [{ text: '<Bound>', value: '' }];
        }
    }
    else
        menus = [];
    if (menuItems) {
        menus = menus.concat(menuItems);
        if (!bound) {
            currentOwner = owner;
        }
    }
    let element = bound
        ? formElement.elements[0]
        : formElement.elements.length > selection
            ? formElement.elements[selection]
            : undefined;
    return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { styleName: vertical ? exports.verticalStyle : 'none' }),
        React.createElement(semantic_ui_react_1.Menu, { attached: vertical ? undefined : 'top', tabular: !vertical, vertical: !!vertical, className: "tabMenu" }, menus.map((m, i) => (React.createElement(semantic_ui_react_1.Menu.Item, { icon: m.icon ? m.icon : undefined, content: m.text, key: i, onClick: () => {
                setSelection(i);
            }, active: selection === i })))),
        vertical && React.createElement("div", { className: "tabDivider" }),
        React.createElement(semantic_ui_react_1.Segment, { attached: vertical ? undefined : 'bottom', basic: !!vertical, className: common_1.names({ noPadding: vertical }, 'tabContent') }, !element && EmptyCell ? (React.createElement(EmptyCell, Object.assign({}, props, { elementIndex: selection }))) : (props.catalogue.createComponent({
            ...props,
            owner: currentOwner || owner
        }, formElement.elements[bound ? 0 : selection], context)))));
};
exports.TabView = {
    Component: mobx_react_1.observer(TabComponent)
};
//# sourceMappingURL=tab_view.js.map