@vs-form/vs-form/dist/es/chunk-d6109844.js

A schema-based form generator component for React using material-ui

import { Component, createElement } from 'react';
import 'lodash/capitalize';
import 'lodash/cloneDeep';
import 'lodash/get';
import 'lodash/has';
import 'lodash/isArray';
import 'lodash/isDate';
import 'lodash/isBoolean';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import 'lodash/isInteger';
import 'lodash/isNull';
import 'lodash/isNumber';
import 'lodash/isObject';
import 'lodash/isPlainObject';
import 'lodash/isRegExp';
import 'lodash/isString';
import isUndefined from 'lodash/isUndefined';
import 'lodash/merge';
import 'lodash/set';
import 'lodash/toInteger';
import 'lodash/toNumber';
import 'lodash/trimEnd';
import 'lodash/uniq';
import 'lodash/debounce';
import 'lodash/throttle';
import './chunk-6c10537c.js';
import '@material-ui/core/FormControl';
import '@material-ui/core/FormHelperText';
import '@material-ui/core/FormLabel';
import '@material-ui/core/TextField';
import '@material-ui/core/InputAdornment';
import './chunk-68362596.js';
import '@material-ui/core/Tooltip';
import { a as getIcon, b as Item } from './chunk-cbe9c61d.js';
import '@material-ui/core/styles';
import classNames from 'classnames';
import '@material-ui/core/Icon';
import '@material-ui/core/SvgIcon';
import './chunk-9f5de191.js';
import './chunk-3774fd4c.js';
import 'date-fns';
import 'events';
import '@material-ui/core/Typography';
import './chunk-4358fb9c.js';
import '@material-ui/core/Grid';
import '@material-ui/core/IconButton';
import './chunk-dab541a3.js';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';

const styles = {
    tabIcon: {
        fontSize: '2em',
        paddingRight: '5px',
        paddingBottom: '35px'
    }
};
class VsTabs extends Component {
    constructor(props) {
        super(props);
        this.PaperProps = {};
        this.AppBarProps = {};
        this.TabsProps = {};
        this.TabProps = {};
        this.IconProps = {};
        this.componentEventParams = this.props.schemaManager.getComponentEventParams(this.props.comp);
        this.handleChange = (_event, value) => {
            let canChange = true;
            const params = { ...this.componentEventParams, newTab: value };
            if (this.comp.onBeforeChange) {
                const p = { ...params, canChange: true };
                this.comp.onBeforeChange(p);
                canChange = p.canChange;
            }
            if (canChange) {
                this.setState({ activeTab: value });
                this.props.schemaManager.changeActiveTab(this.comp, value, this.props.designMode);
                if (this.comp.onChange) {
                    this.comp.onChange(params);
                }
            }
        };
        this.getTabs = () => {
            const list = this.comp.tabs.filter((key) => {
                const comp = this.props.schema.components[key];
                return comp && !comp.hidden;
            }).map((key) => this.props.schema.components[key]);
            if (list.length === 0) {
                return null;
            }
            const compList = [];
            list.forEach((t) => {
                const { comp, ...other } = this.props;
                const c = t;
                const Icon = getIcon({ comp: c, ...other });
                const entry = (createElement(Tab, Object.assign({ key: c.id, label: c.label, icon: Icon && createElement(Icon, Object.assign({}, this.IconProps)) }, this.TabProps)));
                compList.push(entry);
            });
            return compList;
        };
        this.getComponent = () => {
            let c = null;
            if (this.comp.tabs.length > this.state.activeTab) {
                const tab = this.comp.tabs[this.state.activeTab];
                const { classes, ...other } = this.props;
                c = createElement(Item, Object.assign({}, other, { node: tab, comp: this.props.schema.components[tab] }));
            }
            return c;
        };
        this.initProps();
        if (isUndefined(this.comp.activeTab)) {
            this.comp.activeTab = 0;
        }
        const activeTab = this.comp.activeTab || 0;
        this.state = {
            activeTab
        };
    }
    get comp() { return this.props.comp; }
    render() {
        return (createElement(Paper, Object.assign({}, this.PaperProps),
            createElement(AppBar, Object.assign({}, this.AppBarProps),
                createElement(Tabs, Object.assign({ value: this.state.activeTab, onChange: this.handleChange }, this.TabsProps), this.getTabs())),
            this.getComponent()));
    }
    initProps() {
        const { AppBarProps, TabsProps, TabProps, IconProps, ...PaperProps } = this.comp.props;
        if (PaperProps) {
            this.PaperProps = PaperProps;
        }
        if (AppBarProps) {
            this.AppBarProps = AppBarProps;
        }
        if (TabsProps) {
            this.TabsProps = TabsProps;
        }
        if (TabProps) {
            this.TabProps = TabProps;
        }
        if (IconProps) {
            this.IconProps = IconProps;
        }
        this.IconProps.className = classNames(this.IconProps.className, this.props.classes.tabIcon);
        if (isUndefined(this.AppBarProps.position)) {
            this.AppBarProps.position = 'static';
        }
        if (isUndefined(this.AppBarProps.color)) {
            this.AppBarProps.color = 'default';
        }
    }
}

export default VsTabs;
export { styles };