UNPKG

@vs-form/vs-form

Version:

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

158 lines (155 loc) 6.21 kB
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;