@vs-form/vs-form
Version:
A schema-based form generator component for React using material-ui
158 lines (155 loc) • 6.21 kB
JavaScript
import { Component, createElement, createRef } from 'react';
import 'lodash/capitalize';
import 'lodash/cloneDeep';
import 'lodash/get';
import 'lodash/has';
import isArray from '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 isString from '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 { b as VsBaseFormControl } from './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 { b as Item } from './chunk-cbe9c61d.js';
import '@material-ui/core/styles';
import 'classnames';
import '@material-ui/core/Icon';
import '@material-ui/core/SvgIcon';
import { a as BaseIcon } from './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 IconButton from '@material-ui/core/IconButton';
import './chunk-dab541a3.js';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
const cssFlex = {
display: 'flex',
};
const cssShiftRight = {
flexGrow: 1
};
class VsChecklistBox extends Component {
constructor(props) {
super(props);
this.FormGroupProps = {};
this.CheckboxProps = {};
this.FormControlLabelProps = {};
this.IconButtonProps = {};
this.componentEventParams = this.props.schemaManager.getComponentEventParams(this.props.comp);
this.renderComp = (dataProps) => {
return (createElement(FormGroup, Object.assign({}, this.FormGroupProps), this.renderItems(dataProps)));
};
this.renderItems = (dataProps) => {
return this.comp.data.items.map((item) => {
return (createElement("div", { key: item.value, style: cssFlex },
createElement(FormControlLabel, Object.assign({ label: item.text, control: createElement(Checkbox, Object.assign({ checked: dataProps.state.value.indexOf(item.value) !== -1, onChange: this.handleToggle(item.value, dataProps) }, this.CheckboxProps)), inputRef: this.inputRef }, this.FormControlLabelProps)),
createElement("div", { style: cssShiftRight }),
this.actionButton(dataProps, item)));
});
};
this.actionButton = (dataProps, item) => {
let iconComp = this.getIcon(item.actionIcon);
if (!iconComp) {
iconComp = this.getIcon(this.comp.actionIcon);
}
if (iconComp) {
return (createElement(IconButton, Object.assign({ onClick: this.actionBtnClick(dataProps, item) }, this.IconButtonProps), iconComp));
}
else {
return null;
}
};
this.getIcon = (icon) => {
if (isArray(icon) && icon.length > 0) {
const iconComp = this.props.schema.components[icon[0]];
if (iconComp) {
return createElement(Item, Object.assign({}, iconComp.props, { schemaManager: this.props.schemaManager, schema: this.props.schema, node: iconComp.node, comp: iconComp }));
}
else {
return createElement("div", null,
"Icon not found ",
icon[0]);
}
}
else if (isString(icon)) {
return createElement(BaseIcon, { icon: icon, color: "primary" });
}
else {
return null;
}
};
this.handleToggle = (value, dataProps) => () => {
const currentIndex = dataProps.state.value.indexOf(value);
const newValue = [...dataProps.state.value];
if (currentIndex === -1) {
newValue.push(value);
}
else {
newValue.splice(currentIndex, 1);
}
dataProps.updateValue(newValue);
};
this.actionBtnClick = (dataProps, item) => () => {
if (this.comp.onActionClick) {
const params = { value: dataProps.state.value, ...this.componentEventParams, item };
this.comp.onActionClick(params);
}
};
this.initProps();
this.inputRef = createRef();
props.schemaManager.addInputRef(props.comp, this.inputRef);
}
get comp() { return this.props.comp; }
render() {
return (createElement(VsBaseFormControl, Object.assign({ showLabel: true }, this.props), this.renderComp));
}
initProps() {
const { FormControlProps, FormHelperTextProps, FormLabelProps, CheckboxProps, FormControlLabelProps, IconButtonProps, ...FormGroupProps } = this.comp.props;
if (FormGroupProps) {
this.FormGroupProps = FormGroupProps;
}
if (FormControlLabelProps) {
this.FormControlLabelProps = FormControlLabelProps;
}
if (CheckboxProps) {
this.CheckboxProps = CheckboxProps;
}
if (IconButtonProps) {
this.IconButtonProps = IconButtonProps;
}
if (isUndefined(this.FormGroupProps.row)) {
this.FormGroupProps.row = this.comp.rowDisplay;
}
if (isUndefined(this.CheckboxProps.disableRipple)) {
this.CheckboxProps.disableRipple = true;
}
}
}
export default VsChecklistBox;