From 45d7e554496c1d253a7077d48ad32fd811c98e84 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Fri, 31 Jul 2020 14:35:59 +0200 Subject: [PATCH] Color Picker now works for widgets using edit-widget-color-control #251 --- src/widget/edit-widget/color-picker.js | 29 +++++++---- .../edit-widget/edit-widget-color-control.js | 51 ++++++++++++------- src/widget/widget-factory.js | 16 +++--- src/widget/widgets/box.js | 7 +-- src/widget/widgets/label.js | 3 +- src/widget/widgets/lamp.js | 6 +-- src/widget/widgets/line.js | 4 +- 7 files changed, 65 insertions(+), 51 deletions(-) diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index a4b84a1..b150f33 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -27,25 +27,27 @@ class ColorPicker extends React.Component { super(props); this.state = { - color: null + widget: {} }; } static getDerivedStateFromProps(props, state){ - let parts = props.controlId.split('.'); - let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; - } - let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]); return { - color: color + widget: props.widget }; } handleChangeComplete = (color) => { - this.setState({ color: color.hex }); + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + + let temp = this.state.widget; + isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; + this.setState({ widget: temp }); }; onClose = canceled => { @@ -58,15 +60,20 @@ class ColorPicker extends React.Component { } if (this.valid && this.props.onClose != null) { - this.props.onClose(this.state.color); + this.props.onClose(this.state.widget); } }; render() { + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } return this.onClose(c)} valid={true}>
diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index f5039d2..407a970 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -17,8 +17,6 @@ import React, { Component } from 'react'; import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; -import { scaleOrdinal } from 'd3-scale'; -import {schemeCategory10} from 'd3-scale-chromatic'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; @@ -26,22 +24,13 @@ import Icon from "../../common/icon"; class EditWidgetColorControl extends Component { - static get ColorPalette() { - let colorCount = 0; - const colors = []; - const colorScale = scaleOrdinal(schemeCategory10); - while (colorCount < 10) { colors.push(colorScale(colorCount)); colorCount++; } - colors.unshift('#000', '#FFF'); // include black and white - - return colors; - } - constructor(props) { super(props); this.state = { widget: {}, - showColorPicker: false + showColorPicker: false, + originalColor: null }; } @@ -52,18 +41,44 @@ class EditWidgetColorControl extends Component { } openColorPicker = () =>{ - this.setState({showColorPicker: true}) + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); + + this.setState({showColorPicker: true, originalColor: color}); } closeEditModal = (data) => { this.setState({showColorPicker: false}) - if(data){ - this.props.handleChange({target: { id: this.props.controlId, value: data}}); + if(typeof data === 'undefined'){ + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1) { + isCustomProperty = false; + } + + let temp = this.state.widget; + isCustomProperty ? temp[parts[0]][parts[1]] = this.state.originalColor : temp[this.props.controlId] = this.state.originalColor; + this.setState({ widget: temp }); } } render() { - const currentColor = this.state.widget[this.props.controlId]; + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; + if (parts.length === 1){ + isCustomProperty = false; + } + let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]); + let style = { + backgroundColor: color, + width: '260px', + height: '40px' + } + return ( @@ -71,7 +86,7 @@ class EditWidgetColorControl extends Component {
Change color } > - diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index 3fe95e6..dd2c77b 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -63,8 +63,8 @@ class WidgetFactory { widget.minHeight = 5; widget.width = 20; widget.height = 20; - widget.customProperties.on_color = 6; - widget.customProperties.off_color = 8; + widget.customProperties.on_color = '#4287f5'; + widget.customProperties.off_color = '#4287f5'; widget.customProperties.threshold = 0.5; break; case 'Value': @@ -102,7 +102,7 @@ class WidgetFactory { widget.height = 35; widget.name = 'Label'; widget.customProperties.textSize = 32; - widget.customProperties.fontColor = 0; + widget.customProperties.fontColor = '#4287f5'; widget.customProperties.resizeTopBottomLock = true; break; case 'Image': @@ -118,8 +118,8 @@ class WidgetFactory { widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.customProperties.background_color = 1; - widget.customProperties.font_color = 0; + widget.customProperties.background_color = '#4287f5'; + widget.customProperties.font_color = '#4287f5'; widget.customProperties.on_value = 1; widget.customProperties.off_value = 0; widget.customProperties.toggle = false; @@ -167,8 +167,8 @@ class WidgetFactory { widget.minHeight = 50; widget.width = 100; widget.height = 100; - widget.customProperties.border_color = 0; - widget.customProperties.background_color = 9; + widget.customProperties.border_color = '#4287f5'; + widget.customProperties.background_color = '#961520'; widget.customProperties.background_color_opacity = 0.5; widget.z = 0; break; @@ -183,7 +183,7 @@ class WidgetFactory { case 'Line': widget.height = 30; widget.width = 150; - widget.customProperties.border_color = 0; + widget.customProperties.border_color = '#4287f5'; widget.customProperties.border_width = 2; widget.customProperties.margin_top = 15; widget.customProperties.rotation = 0; diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js index 88e7c67..bd0dbee 100644 --- a/src/widget/widgets/box.js +++ b/src/widget/widgets/box.js @@ -17,16 +17,13 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetBox extends Component { render() { - let colors = EditWidgetColorControl.ColorPalette; - let colorStyle = { - borderColor: colors[this.props.widget.customProperties.border_color], - backgroundColor: colors[this.props.widget.customProperties.background_color], + borderColor: this.props.widget.customProperties.border_color, + backgroundColor: this.props.widget.customProperties.background_color, opacity: this.props.widget.customProperties.background_color_opacity, } diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index a7431e2..048e0e1 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -17,13 +17,12 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetLabel extends Component { render() { const style = { fontSize: this.props.widget.customProperties.textSize + 'px', - color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor] + color: this.props.widget.customProperties.fontColor }; return ( diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js index c6fd5e6..a686f37 100644 --- a/src/widget/widgets/lamp.js +++ b/src/widget/widgets/lamp.js @@ -17,7 +17,6 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetLamp extends Component { constructor(props) { @@ -61,13 +60,12 @@ class WidgetLamp extends Component { render() { - let colors = EditWidgetColorControl.ColorPalette; let color; if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)) - color = colors[this.props.widget.customProperties.on_color]; + color = this.props.widget.customProperties.on_color; else - color = colors[this.props.widget.customProperties.off_color]; + color = this.props.widget.customProperties.off_color; let style = { backgroundColor: color, diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js index 680ca03..bee3112 100644 --- a/src/widget/widgets/line.js +++ b/src/widget/widgets/line.js @@ -17,12 +17,10 @@ import React, { Component } from 'react'; -import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; - class WidgetLine extends Component { render() { const lineStyle = { - borderColor: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color], + borderColor: this.props.widget.customProperties.border_color, transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)', borderWidth: '' + this.props.widget.customProperties.border_width + 'px' };