UNPKG

@vs-form/vs-form

Version:

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

100 lines (97 loc) 3.42 kB
import { Component, createElement } 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 'lodash/isString'; import 'lodash/isUndefined'; import 'lodash/merge'; import set from '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 { g as dataTypeIsArray, f as VsBaseInput } from './chunk-cbe9c61d.js'; import '@material-ui/core/styles'; import '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 Checkbox from '@material-ui/core/Checkbox'; import MenuItem from '@material-ui/core/MenuItem'; class VsSelect extends Component { constructor(props) { super(props); this.changeValue = (dataProps) => (evt) => { const value = evt.target.value; dataProps.updateValue(value); }; this.getProps = () => { set(this.comp, 'props.select', true); if (dataTypeIsArray(this.comp.data.dataType)) { set(this.comp, 'props.SelectProps.multiple', true); set(this.comp, 'props.SelectProps.renderValue', this.renderValue); } }; this.renderValue = (selected) => { const items = this.comp.data.items; const findItem = (s) => items.find(i => i.value === s) || { text: '' }; const find = (s) => findItem(s).text; const res = selected.map(s => find(s)); return res.join(', '); }; this.getItems = (value) => { const items = this.comp.data.items; return items.map((item) => { return (createElement(MenuItem, { key: item.value, value: item.value }, isArray(value) && createElement(Checkbox, { checked: value.indexOf(item.value) > -1 }), item.text)); }); }; this.getProps(); } get comp() { return this.props.comp; } render() { return createElement(VsBaseInput, Object.assign({ value: this.getValue, onChange: this.changeValue, renderItems: this.getItems }, this.props)); } getValue(dataProps) { let defaultValue; if (dataTypeIsArray(this.comp.data.dataType)) { defaultValue = []; } else { defaultValue = ''; } return dataProps.state.value || defaultValue; } } export default VsSelect;