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