@vs-form/vs-form
Version:
A schema-based form generator component for React using material-ui
346 lines (340 loc) • 17.1 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');
var cloneDeep = _interopDefault(require('lodash/cloneDeep'));
var get = _interopDefault(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');
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');
var __chunk_3 = require('./chunk-7581cbb1.js');
require('@material-ui/core/Tooltip');
var __chunk_4 = require('./chunk-364f6801.js');
require('@material-ui/core/styles');
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');
var __chunk_7 = require('./chunk-819d0a62.js');
require('@material-ui/core/Grid');
require('@material-ui/core/IconButton');
var __chunk_8 = require('./chunk-f9facc49.js');
var PanelWithLabel_tsx = require('./chunk-85f60c6f.js');
var Paper = _interopDefault(require('@material-ui/core/Paper'));
var Checkbox = _interopDefault(require('@material-ui/core/Checkbox'));
var Divider = _interopDefault(require('@material-ui/core/Divider'));
var Table = _interopDefault(require('@material-ui/core/Table'));
var TableBody = _interopDefault(require('@material-ui/core/TableBody'));
var TableCell = _interopDefault(require('@material-ui/core/TableCell'));
var TableHead = _interopDefault(require('@material-ui/core/TableHead'));
var TablePagination = _interopDefault(require('@material-ui/core/TablePagination'));
var TableRow = _interopDefault(require('@material-ui/core/TableRow'));
var TableSortLabel = _interopDefault(require('@material-ui/core/TableSortLabel'));
var Toolbar = _interopDefault(require('@material-ui/core/Toolbar'));
var __chunk_9 = require('./chunk-e28442a5.js');
var SortDirection;
(function (SortDirection) {
SortDirection["asc"] = "asc";
SortDirection["desc"] = "desc";
})(SortDirection || (SortDirection = {}));
class SubSchemaArray extends React.Component {
constructor(props) {
super(props);
this.insertMode = false;
this.oldData = {};
this.dataComponents = [];
this.Body = () => {
const sortedData = this.sortedData();
return (sortedData.slice(this.state.page * this.state.rowsPerPage, this.state.page * this.state.rowsPerPage + this.state.rowsPerPage).map((rec) => {
const id = rec[this.props.schemaManager.getSubschemaKeyField(this.props.comp, true)];
return (React.createElement(React.Fragment, { key: id },
React.createElement(TableRow, { hover: true, onClick: this.handleSelectClick(id), onDoubleClick: this.handleSelectDoubleClick(id), selected: this.isSelected(id) },
React.createElement(TableCell, { style: this.applyCellStyle(true) },
React.createElement(Checkbox, { checked: this.isSelected(id) })),
this.state.columnSettings.map(c => {
const cd = __chunk_4.checkIsDataComponent(this.props.schema.components[c.compId]);
if (cd) {
let val;
try {
val = rec[cd.data.field].toString();
}
catch (error) {
val = '';
}
return (React.createElement(TableCell, { key: c.compId, component: "th", align: get(cd, 'data.dataType') === __chunk_3.DataType.number ? 'right' : 'left', style: this.applyCellStyle(false, c) }, val));
}
})),
this.ErrorRow(id)));
}));
};
this.getDefaultColumnSettings = () => {
let columnSettings = this.props.comp.columnSettings;
if (!columnSettings || columnSettings.length === 0) {
columnSettings = this.dataComponents.map(c => ({ compId: c.node, alignRight: c.data.dataType === __chunk_3.DataType.number, autowidth: true, sortable: true, widthUnit: 'px' }));
}
return columnSettings;
};
this.addRecord = () => {
const data = this.props.schemaManager.insertSubschemaArrayRecord(this.props.comp, this.dataComponents);
this.setData(data);
if (data.length > 0) {
this.setState({ selected: [data[data.length - 1][this.props.schemaManager.getSubschemaKeyField(this.props.comp, true)]] });
this.insertMode = true;
this.setState({ showForm: true });
}
};
this.editRecord = () => {
this.insertMode = false;
this.oldData = cloneDeep(this.state.data);
this.setState({ showForm: true });
};
this.deleteRecords = () => {
if (this.state.selected.length > 0) {
const data = this.state.data.filter((r) => this.state.selected.indexOf(r[this.props.schemaManager.getSubschemaKeyField(this.props.comp, true)]) === -1);
this.setData(data);
this.setState({ selected: [] });
}
};
this.cancelEditing = () => {
if (this.insertMode) {
this.deleteRecords();
}
else {
this.setData(this.oldData);
}
this.setState({ showForm: false });
};
this.setData = (data) => {
this.props.schemaManager.updateSchemaValue(this.props.comp, data);
this.setState({ data });
};
this.updateValue = () => {
this.props.schemaManager.updateSchemaValue(this.props.comp, this.state.data);
const errors = this.props.schemaManager.getValueErrorsComp(this.props.comp, this.props.arrayId);
this.setState({ errors });
return errors.length === 0;
};
this.showTable = () => {
this.updateValue();
this.setState({ showForm: false });
};
this.isSelected = (id) => this.state.selected.indexOf(id) !== -1;
this.handleSelectClick = (id) => () => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, id);
}
else {
newSelected = selected.filter(i => i !== id);
}
this.setState({ selected: newSelected });
};
this.handleSelectDoubleClick = (index) => () => {
this.setState({ selected: [index] }, () => this.editRecord());
};
this.handleSelectAllClick = (_event, checked) => {
if (checked) {
this.setState({ selected: this.state.data.map((r) => r[this.props.schemaManager.getSubschemaKeyField(this.props.comp, true)]) });
}
else {
this.setState({ selected: [] });
}
};
this.handleChangePage = (_event, page) => {
this.setState({ page });
};
this.handleChangeRowsPerPage = (event) => {
this.setState({ rowsPerPage: event.target.value });
};
this.updateSort = (comp) => () => {
let orderBy = comp;
let order = SortDirection.asc;
if (this.state.orderBy === comp) {
if (this.state.order === SortDirection.asc) {
order = SortDirection.desc;
}
else {
order = SortDirection.asc;
orderBy = null;
}
}
this.setState({ order, orderBy });
};
this.sortedData = () => {
if (this.state.orderBy) {
const comp = this.state.orderBy;
let dataType = __chunk_3.DataType.string;
const cd = __chunk_4.checkIsDataComponent(comp);
if (cd) {
dataType = get(cd, 'data.dataType');
const field = cd.data.field;
const sortFn = this.state.order === SortDirection.desc
? dataType === __chunk_3.DataType.number
? (a, b) => (b[field] - a[field])
: (a, b) => (a[field] > b[field] ? -1 : a[field] < b[field] ? 1 : 0)
: dataType === __chunk_3.DataType.number
? (a, b) => (a[field] - b[field])
: (a, b) => (a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0);
return this.state.data.map(r => r).sort(sortFn);
}
else {
return [];
}
}
else {
return this.state.data;
}
};
this.applyCellStyle = (selectionCell, setting) => {
if (selectionCell) {
return { width: '30px' };
}
else {
if (setting) {
if (!setting.autowidth && setting.width && setting.widthUnit) {
return { width: setting.width.toString() + setting.widthUnit };
}
}
}
return {};
};
this.Toolbar = () => (React.createElement(Toolbar, null,
this.props.comp.label && React.createElement(__chunk_7.Text, { variant: "h6", text: this.props.comp.label }),
this.state.showForm ? this.ToolbarForm() : this.ToolbarTable()));
this.ToolbarForm = () => (React.createElement(React.Fragment, null,
React.createElement(Divider, { variant: "inset" }),
React.createElement(__chunk_4.IconButton, { svg: __chunk_8.check, onClick: this.showTable }),
React.createElement(__chunk_4.IconButton, { svg: __chunk_8.close, onClick: this.cancelEditing })));
this.ToolbarTable = () => (React.createElement(React.Fragment, null,
!this.props.designMode && React.createElement(__chunk_4.IconButton, { svg: __chunk_8.plus, onClick: this.addRecord }),
!this.props.designMode && this.numSelected === 1 && React.createElement(__chunk_4.IconButton, { svg: __chunk_8.pencil, onClick: this.editRecord }),
!this.props.designMode && this.numSelected > 0 && React.createElement(__chunk_4.IconButton, { svg: __chunk_8.del, style: { color: 'red' }, onClick: this.deleteRecords }),
!this.props.designMode && this.numSelected > 0 && React.createElement(__chunk_7.Text, { variant: "caption", text: this.numSelected === 1 ? this.numSelected.toString() + __chunk_9.form.recordSelected : this.numSelected.toString() + __chunk_9.form.recordsSelected })));
this.Head = () => (React.createElement(TableHead, null,
React.createElement(TableRow, null,
React.createElement(TableCell, { style: this.applyCellStyle(true) }, this.state.data.length > 0 ?
React.createElement(Checkbox, { indeterminate: this.numSelected > 0 && this.numSelected < this.state.data.length, checked: this.numSelected > 0 && this.numSelected === this.state.data.length, onChange: this.handleSelectAllClick })
: null),
this.state.columnSettings.map(c => {
const comp = this.props.schema.components[c.compId];
if (comp) {
return (React.createElement(TableCell, { key: c.compId, align: c.alignRight ? 'right' : 'left', style: this.applyCellStyle(false, c) }, c.sortable ?
React.createElement(TableSortLabel, { active: comp === this.state.orderBy, direction: this.state.order, onClick: this.updateSort(comp) },
React.createElement(__chunk_7.Text, { text: comp.label }))
:
React.createElement(__chunk_7.Text, { text: comp.label })));
}
}))));
this.Pagination = () => {
const comp = this.props.comp;
if (comp.hidePagination) {
return null;
}
return (React.createElement(TablePagination, { component: "div", count: this.state.data.length, rowsPerPage: this.state.rowsPerPage, page: this.state.page, onChangePage: this.handleChangePage, onChangeRowsPerPage: this.handleChangeRowsPerPage }));
};
this.EmptyRows = () => {
const emptyRows = this.state.rowsPerPage - Math.min(this.state.rowsPerPage, this.state.data.length - this.state.page * this.state.rowsPerPage);
if (emptyRows) {
return (React.createElement(TableRow, { style: { height: 49 * emptyRows } },
React.createElement(TableCell, { colSpan: this.state.columnSettings.length + 1 })));
}
else {
return null;
}
};
this.ErrorRow = (arrayId) => {
let length = 1;
const cs = this.props.comp.columnSettings;
if (cs) {
length = cs.length + 1;
}
const errs = this.state.errors.filter(e => e.arrayId === arrayId);
if (errs.length > 0) {
return (React.createElement(TableRow, null,
React.createElement(TableCell, { colSpan: length },
React.createElement(__chunk_7.Text, { text: errs.map(e => e.error).join('\n'), color: "error", variant: "caption" }))));
}
else {
return null;
}
};
this.dataComponents = __chunk_4.SchemaManager.getDataComponents(this.props.schema);
const comp = this.props.comp;
const data = this.props.schemaManager.initSubschemaArrayRecords(this.props.comp);
this.state = {
columnSettings: this.getDefaultColumnSettings(),
showForm: false,
order: SortDirection.asc,
orderBy: null,
selected: [],
data,
page: 0,
rowsPerPage: comp.rowsPerPage || 5,
errors: this.props.schemaManager.validateValueComp(this.props.comp, data),
};
}
render() {
const { classes, ...other } = this.props;
return (React.createElement(Paper, { style: { width: '100%', overflowX: 'auto' } },
this.Toolbar(),
this.state.showForm
? React.createElement(__chunk_4.Item, Object.assign({}, other, { schema: this.props.schema, node: "root", comp: this.props.schema.components.root, arrayId: this.state.selected[0] }))
: React.createElement(React.Fragment, null,
React.createElement(Table, null,
this.Head(),
React.createElement(TableBody, null,
this.Body(),
this.EmptyRows())),
this.Pagination())));
}
get numSelected() {
return this.state.selected.length;
}
}
const getComponent = (props) => {
const comp = props.comp;
const { classes, ...other } = props;
if (comp.data.dataType === __chunk_3.DataType.object) {
return (React.createElement(PanelWithLabel_tsx.default, Object.assign({}, other),
React.createElement(__chunk_4.Item, Object.assign({}, other, { schema: comp.schema, node: "root", comp: comp.schema.components.root }))));
}
else {
return (React.createElement(SubSchemaArray, Object.assign({}, other, { schema: comp.schema })));
}
};
const SubSchema = props => {
return getComponent(props);
};
exports.default = SubSchema;