Commit 834efecb authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

Slider Widget now works in vertical mode

parent f3d0576d
...@@ -38,9 +38,15 @@ class EditWidgetOrientation extends Component { ...@@ -38,9 +38,15 @@ class EditWidgetOrientation extends Component {
} }
handleOrientationChange(orientation) { handleOrientationChange(orientation) {
console.log("handle OrinetationChange was called. the orientation: " + orientation);
this.props.handleChange({ target: { id: 'customProperties.orientation', value: orientation } }); this.props.handleChange({ target: { id: 'customProperties.orientation', value: orientation } });
this.handleNewDimensions(this.state.widget.width,this.state.widget.height,this.state.widget.minWidth,this.state.widget.minHeight);
}
handleNewDimensions(width,height,minWidth,minHeight){
this.props.handleChange({ target: { id: 'height', value: width } });
this.props.handleChange({ target: { id: 'width', value: height } });
this.props.handleChange({ target: { id: 'minHeight', value: minWidth } });
this.props.handleChange({ target: { id: 'minWidth', value: minHeight } });
} }
render() { render() {
...@@ -57,7 +63,6 @@ class EditWidgetOrientation extends Component { ...@@ -57,7 +63,6 @@ class EditWidgetOrientation extends Component {
Object.keys(WidgetSlider.OrientationTypes).map( (type) => { Object.keys(WidgetSlider.OrientationTypes).map( (type) => {
let value = WidgetSlider.OrientationTypes[type].value; let value = WidgetSlider.OrientationTypes[type].value;
let name = WidgetSlider.OrientationTypes[type].name; let name = WidgetSlider.OrientationTypes[type].name;
console.log("value: " + value + " name: " + name)
return ( return (
<FormCheck inline label={name} key={value} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}> <FormCheck inline label={name} key={value} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}>
......
...@@ -57,7 +57,7 @@ class WidgetSlider extends Component { ...@@ -57,7 +57,7 @@ class WidgetSlider extends Component {
if (props.widget.customProperties.default_value && state.value === undefined) { if (props.widget.customProperties.default_value && state.value === undefined) {
returnState["value"] = props.widget.customProperties.default_value; returnState["value"] = props.widget.customProperties.default_value;
} }
// Update unit (assuming there is exactly one signal for this widget) // Update unit (assuming there is exactly one signal for this widget)
let signalID = props.widget.signalIDs[0]; let signalID = props.widget.signalIDs[0];
let signal = props.signals.find(sig => sig.id === signalID); let signal = props.signals.find(sig => sig.id === signalID);
...@@ -76,6 +76,7 @@ class WidgetSlider extends Component { ...@@ -76,6 +76,7 @@ class WidgetSlider extends Component {
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void { componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
// Check if the orientation changed, update the size if it did // Check if the orientation changed, update the size if it did
// this part didn't work -> dimensions and constraints are now handled by the edit orientation component
if (this.props.widget.customProperties.orientation !== prevProps.widget.customProperties.orientation) { if (this.props.widget.customProperties.orientation !== prevProps.widget.customProperties.orientation) {
let baseWidget = this.props.widget; let baseWidget = this.props.widget;
...@@ -125,33 +126,14 @@ class WidgetSlider extends Component { ...@@ -125,33 +126,14 @@ class WidgetSlider extends Component {
}); });
return ( return (
!isVertical? (
<div className={widgetClasses}> <div className={widgetClasses}>
<label>{ fields.name }</label> <label>{ fields.name }</label>
<div className='slider'>{ fields.control }</div> { fields.control }
<span>{ fields.value }</span> <span>{ fields.value }</span>
{this.props.widget.customProperties.showUnit && fields.unit}
</div> </div>
) : (
<div className={widgetClasses}>
<Slider vertical min={ this.props.widget.customProperties.rangeMin } max={ this.props.widget.customProperties.rangeMax } step={ this.props.widget.customProperties.step } value={ this.state.value } disabled={ this.props.editing } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
</div>
)
); );
} }
} }
export default WidgetSlider; export default WidgetSlider;
/*!isVertical? (
<div className={widgetClasses}>
<label>{ fields.name }</label>
<div className='slider'>{ fields.control }</div>
<span>{ fields.value }</span>
</div>
) : (
<div className={widgetClasses}>
<label>{ fields.name }</label>
{ fields.control }
{ fields.value }
{ this.props.widget.customProperties.showUnit && fields.unit }
</div>
)*/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment