UNPKG

@vs-form/vs-form

Version:

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

111 lines (108 loc) 4.35 kB
import { Component, createElement } 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 '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 'lodash/toNumber'; import 'lodash/trimEnd'; import 'lodash/uniq'; import 'lodash/debounce'; import 'lodash/throttle'; import '@material-ui/core/Tooltip'; import classNames from 'classnames'; import '@material-ui/core/Icon'; import '@material-ui/core/SvgIcon'; import { a as BaseIcon } from './chunk-9f5de191.js'; import '@material-ui/core/Typography'; import { a as Text } from './chunk-4358fb9c.js'; import { a as chevronDown } from './chunk-dab541a3.js'; import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; const styles = { root: { width: '100%' }, dense: { padding: '5px', } }; class VsExpansionPanel extends Component { constructor(props) { super(props); this.ExpansionPanelProps = {}; this.ExpansionPanelSummaryProps = {}; this.ExpansionPanelDetailsProps = {}; this.TypographyProps = {}; this.componentEventParams = this.props.schemaManager.getComponentEventParams(this.props.comp); this.changeExpanded = (_event, expanded) => { let canChange = true; const params = { ...this.componentEventParams, expanded }; if (this.comp.onBeforeChange) { const p = { ...params, canChange: true }; this.comp.onBeforeChange(p); canChange = p.canChange; } if (canChange) { this.setState({ expanded }); this.props.schemaManager.changeExpanded(this.comp, expanded, !!this.props.designMode); if (this.comp.onChange) { this.comp.onChange(params); } } }; this.initProps(); this.state = { expanded: !!(this.comp.expanded) }; } get comp() { return this.props.comp; } render() { return (createElement(ExpansionPanel, Object.assign({}, this.ExpansionPanelProps, { expanded: this.state.expanded }), createElement(ExpansionPanelSummary, Object.assign({}, this.ExpansionPanelSummaryProps), createElement(Text, Object.assign({ text: this.comp.label }, this.TypographyProps))), createElement(ExpansionPanelDetails, Object.assign({}, this.ExpansionPanelDetailsProps), this.props.children))); } initProps() { const { ExpansionPanelSummaryProps, ExpansionPanelDetailsProps, TypographyProps, IconProps, ...ExpansionPanelProps } = this.comp.props; if (ExpansionPanelProps) { this.ExpansionPanelProps = ExpansionPanelProps; } if (ExpansionPanelSummaryProps) { this.ExpansionPanelSummaryProps = ExpansionPanelSummaryProps; } if (ExpansionPanelDetailsProps) { this.ExpansionPanelDetailsProps = ExpansionPanelDetailsProps; } if (TypographyProps) { this.TypographyProps = TypographyProps; } this.ExpansionPanelProps.onChange = this.changeExpanded; this.ExpansionPanelProps.className = classNames(this.props.classes.root, this.ExpansionPanelProps.className); if (this.comp.dense) { this.ExpansionPanelDetailsProps.className = classNames(this.props.classes.dense, this.ExpansionPanelDetailsProps.className); } this.ExpansionPanelSummaryProps.expandIcon = createElement(BaseIcon, { svg: chevronDown }); if (isUndefined(this.ExpansionPanelProps.expanded)) { this.ExpansionPanelProps.expanded = false; } } } export default VsExpansionPanel; export { styles };