Color Picker now works for widgets using edit-widget-color-control #251

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 <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
           <form>
               <SketchPicker
-                  color={this.state.color}
+                  color={isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]}
                   onChangeComplete={ this.handleChangeComplete }
                   width={"300"}
               />

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 (
       <FormGroup>
@@ -71,7 +86,7 @@ class EditWidgetColorControl extends Component {
 
         <div className='section-buttons-group-right'>
         <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> Change color </Tooltip>} >
-        <Button key={2} style={{ width: '260px', height: '40px', color:{currentColor} }} onClick={this.openColorPicker.bind(this)}  >
+        <Button key={2} style={style} onClick={this.openColorPicker.bind(this)}  >
           <Icon icon="paint-brush"/>
         </Button>
         </OverlayTrigger>

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;

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,
     }
 

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 (

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,

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'
     };