@vs-form/vs-form
Version:
A schema-based form generator component for React using material-ui
100 lines (97 loc) • 3.42 kB
JavaScript
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;