@vs-form/vs-form
Version:
A schema-based form generator component for React using material-ui
163 lines (158 loc) • 6.05 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
require('lodash/capitalize');
require('lodash/cloneDeep');
require('lodash/get');
require('lodash/has');
require('lodash/isArray');
require('lodash/isDate');
require('lodash/isBoolean');
require('lodash/isEmpty');
require('lodash/isFunction');
require('lodash/isInteger');
require('lodash/isNull');
require('lodash/isNumber');
require('lodash/isObject');
require('lodash/isPlainObject');
require('lodash/isRegExp');
require('lodash/isString');
var isUndefined = _interopDefault(require('lodash/isUndefined'));
require('lodash/merge');
require('lodash/set');
require('lodash/toInteger');
require('lodash/toNumber');
require('lodash/trimEnd');
require('lodash/uniq');
require('lodash/debounce');
require('lodash/throttle');
require('./chunk-e8808437.js');
require('@material-ui/core/FormControl');
require('@material-ui/core/FormHelperText');
require('@material-ui/core/FormLabel');
require('@material-ui/core/TextField');
require('@material-ui/core/InputAdornment');
require('./chunk-7581cbb1.js');
require('@material-ui/core/Tooltip');
var __chunk_4 = require('./chunk-364f6801.js');
require('@material-ui/core/styles');
var classNames = _interopDefault(require('classnames'));
require('@material-ui/core/Icon');
require('@material-ui/core/SvgIcon');
require('./chunk-41ea4037.js');
require('./chunk-2f21f066.js');
require('date-fns');
require('events');
require('@material-ui/core/Typography');
require('./chunk-819d0a62.js');
require('@material-ui/core/Grid');
require('@material-ui/core/IconButton');
require('./chunk-f9facc49.js');
var AppBar = _interopDefault(require('@material-ui/core/AppBar'));
var Tabs = _interopDefault(require('@material-ui/core/Tabs'));
var Tab = _interopDefault(require('@material-ui/core/Tab'));
var Paper = _interopDefault(require('@material-ui/core/Paper'));
const styles = {
tabIcon: {
fontSize: '2em',
paddingRight: '5px',
paddingBottom: '35px'
}
};
class VsTabs extends React.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 = __chunk_4.getIcon({ comp: c, ...other });
const entry = (React.createElement(Tab, Object.assign({ key: c.id, label: c.label, icon: Icon && React.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 = React.createElement(__chunk_4.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 (React.createElement(Paper, Object.assign({}, this.PaperProps),
React.createElement(AppBar, Object.assign({}, this.AppBarProps),
React.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';
}
}
}
exports.default = VsTabs;
exports.styles = styles;