@tomino/dynamic-form-semantic-ui/dist/mjs/semantic/tab_view.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import { Menu, Segment } from 'semantic-ui-react';
import { names, valueSource, css } from '../common';
import { getValue } from '../helpers';
import { DynamicComponent } from '../wrapper';
import { Context } from '../context';
export const verticalStyle = 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);
    const { formElement, owner, EmptyCell } = props;
    const { menuItems, vertical, value } = formElement.props;
    let menus;
    let currentOwner;
    const textField = getValue(props, context, 'textField');
    const valueField = getValue(props, context, 'valueField');
    const bound = value && value.source && valueField && textField;
    const source = valueSource(formElement);
    if (bound) {
        let values = 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(DynamicComponent, Object.assign({}, props, { styleName: vertical ? verticalStyle : 'none' }),
        React.createElement(Menu, { attached: vertical ? undefined : 'top', tabular: !vertical, vertical: !!vertical, className: "tabMenu" }, menus.map((m, i) => (React.createElement(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(Segment, { attached: vertical ? undefined : 'bottom', basic: !!vertical, className: 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)))));
};
export const TabView = {
    Component: observer(TabComponent)
};
//# sourceMappingURL=tab_view.js.map