UNPKG

@vs-form/vs-form

Version:

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

89 lines (86 loc) 3.45 kB
import { Component, createElement, createRef } from 'react'; import 'lodash/capitalize'; import 'lodash/cloneDeep'; import 'lodash/get'; import 'lodash/has'; import 'lodash/isArray'; import 'lodash/isDate'; import 'lodash/isBoolean'; import 'lodash/isEmpty'; import 'lodash/isFunction'; import 'lodash/isInteger'; import isNull from 'lodash/isNull'; import 'lodash/isNumber'; import 'lodash/isObject'; import 'lodash/isPlainObject'; import 'lodash/isRegExp'; import 'lodash/isString'; import isUndefined from 'lodash/isUndefined'; import 'lodash/merge'; import 'lodash/set'; import 'lodash/toInteger'; import toNumber from '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 { a as DataType } from './chunk-68362596.js'; import classNames from 'classnames'; import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; const styles = { radioHeight: { height: '30px' } }; class VsRadioGroup extends Component { constructor(props) { super(props); this.RadioGroupProps = {}; this.RadioProps = {}; this.FormControlLabelProps = {}; this.renderComp = (dataProps) => { return (createElement(RadioGroup, Object.assign({ value: this.getValue(dataProps.state.value), onChange: this.changeValue(dataProps) }, this.RadioGroupProps), this.renderItems(dataProps))); }; this.renderItems = (_dataProps) => { const items = this.comp.data.items; return items.map((item, ind) => { return createElement(FormControlLabel, Object.assign({ inputRef: ind === 0 && this.inputRef, value: item.value.toString(), key: item.value, control: createElement(Radio, Object.assign({}, this.RadioProps)), label: item.text }, this.FormControlLabelProps)); }); }; this.changeValue = (dataProps) => (_evt, value) => { const schemaValue = this.comp.data.dataType === DataType.number ? toNumber(value) : value; dataProps.updateValue(value, schemaValue); }; this.initProps(); this.inputRef = createRef(); props.schemaManager.addInputRef(props.comp, this.inputRef); } get comp() { return this.props.comp; } render() { return (createElement(VsBaseFormControl, Object.assign({}, this.props, { showLabel: true }), this.renderComp)); } getValue(value) { return (isUndefined(value) || isNull(value)) ? '' : value.toString(); } initProps() { const { FormControlProps, FormHelperTextProps, FormLabelProps, RadioProps, FormControlLabelProps, ...RadioGroupProps } = this.comp.props; if (RadioGroupProps) { this.RadioGroupProps = RadioGroupProps; } if (RadioProps) { this.RadioProps = RadioProps; } if (FormControlLabelProps) { this.FormControlLabelProps = FormControlLabelProps; } this.RadioProps.className = classNames(this.props.classes.radioHeight, this.RadioProps.className); } } export default VsRadioGroup; export { styles };