From d1dc3e92de8886c665885d1df0ac101286916ddb Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Fri, 27 Mar 2020 16:53:21 +0100 Subject: [PATCH] fix for min-max-edit, can now be selected and unselected, min and max values can be changed --- .../edit-widget-min-max-control.js | 81 ++++++++++++------- 1 file changed, 54 insertions(+), 27 deletions(-) diff --git a/src/widget/edit-widget/edit-widget-min-max-control.js b/src/widget/edit-widget/edit-widget-min-max-control.js index 945f036..f25f23a 100644 --- a/src/widget/edit-widget/edit-widget-min-max-control.js +++ b/src/widget/edit-widget/edit-widget-min-max-control.js @@ -22,36 +22,65 @@ class EditWidgetMinMaxControl extends React.Component { constructor(props) { super(props); - this.state = { - widget: props.widget - } - } - - static getDerivedStateFromProps(props, state){ - return{ - widget: props.widget - }; - } - - render() { - - let parts = this.props.controlId.split('.'); + let parts = props.controlId.split('.'); let isCustomProperty = true; if (parts.length === 1){ isCustomProperty = false; } - console.log("min max edit: ", isCustomProperty); + let useMinMax; + let minValue = 0; + let maxValue = 0; + if (isCustomProperty){ + useMinMax = props.widget[parts[0]][parts[1]+"UseMinMax"]; + if (useMinMax) { + minValue = props.widget[parts[0]][parts[1] + 'Min']; + maxValue = props.widget[parts[0]][parts[1] + 'Max']; + } + + } else { + useMinMax = props.widget[props.controlId + "UseMinMax"] + if (useMinMax){ + minValue = props.widget[props.controlId + "Min"] + maxValue = props.widget[props.controlId + "Max"] + } + } + + this.state = { + useMinMax, + minValue, + maxValue, + } + + } + + handleCheckboxChange(e){ + + // toggle boolean variable + let status = this.state.useMinMax; + this.setState({useMinMax: !status}); + this.props.handleChange({target: { id: this.props.controlId + "UseMinMax", value: !status} }) + } + + handleMinChange(e){ + this.setState({minValue: e.target.value}); + this.props.handleChange({target: { id: this.props.controlId + "Min", value: Number(e.target.value)} }) + } + + handleMaxChange(e){ + this.setState({maxValue: e.target.value}); + this.props.handleChange({target: { id: this.props.controlId + "Max", value: Number(e.target.value)} }) + } + + render() { return {this.props.label} this.props.handleChange(e)}> + defaultChecked={this.state.useMinMax} + onChange={e => this.handleCheckboxChange(e)}> @@ -62,22 +91,20 @@ class EditWidgetMinMaxControl extends React.Component { this.props.handleChange(e)} /> + value={this.state.minValue} + onChange={e => this.handleMinChange(e)} />
Max: this.props.handleChange(e)} /> + value={ this.state.maxValue} + onChange={e => this.handleMaxChange(e)} />