[Feature] Color fields

dev-server/src/index.js

@@ -180,6 +180,8 @@ ReactDom.render(
 function getExampleJson1() {
     return {
         string: 'this is a test string',
+        colorHash: '#00ff33',
+        colorRgb: 'rgba(255,0,0,0.5)',
         integer: 42,
         empty_array: [],
         empty_object: {},

package.json

@@ -5,6 +5,7 @@
     "main": "dist/main.js",
     "dependencies": {
         "flux": "^4.0.1",
+        "color-string": "^1.5.3",
         "react-base16-styling": "^0.6.0",
         "react-lifecycles-compat": "^3.0.4",
         "react-textarea-autosize": "^6.1.0"

src/js/components/DataTypes/Color.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import DataTypeLabel from './DataTypeLabel';
+import { toType } from './../../helpers/util';
+
+//theme
+import Theme from './../../themes/getStyle';
+
+//attribute store for storing collapsed state
+import AttributeStore from './../../stores/ObjectAttributes';
+import { relative } from 'path';
+
+class ColorValue extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            collapsed: AttributeStore.get(
+                props.rjvId,
+                props.namespace,
+                'collapsed',
+                true
+            )
+        };
+    }
+
+    toggleCollapsed = () => {
+        this.setState({
+            collapsed: !this.state.collapsed
+        }, () => {
+            AttributeStore.set(
+                this.props.rjvId,
+                this.props.namespace,
+                'collapsed',
+                this.state.collapsed
+            );
+        });
+    }
+
+    render() {
+        const type_name = 'color';
+        const { collapsed } = this.state;
+        const { props } = this;
+        const { collapseStringsAfterLength, theme } = props;
+        let { value } = props;
+        const initValue = value;
+        let collapsible = toType(collapseStringsAfterLength) === 'integer';
+        let style = { style: { cursor: 'default' } };
+
+        if (collapsible && value.length > collapseStringsAfterLength) {
+            style.style.cursor = 'pointer';
+            if (this.state.collapsed) {
+                value = (
+                    <span>
+                        {value.substring(0, collapseStringsAfterLength)}
+                        <span {...Theme(theme, 'ellipsis')}> ...</span>
+                    </span>
+                );
+            }
+        }
+
+        return (
+            <div {...Theme(theme, 'string')}>
+                <DataTypeLabel type_name={type_name} {...props} />
+                <span
+                    class="string-value"
+                    {...style}
+                    onClick={this.toggleCollapsed}
+                >
+                    <span style={{width: 16, height: 1, display: 'inline-block', position: 'relative', margin: '0 4px'}}>
+                        <span style={{width: 14, height: 14, backgroundColor: initValue, display: 'block', position: 'absolute', bottom: -2}}></span>
+                        </span>
+                    </span>
+                    <span>"{value}"</span>
+            </div>
+        );
+    }
+}
+
+export default ColorValue;

src/js/components/DataTypes/DataTypes.js

@@ -8,4 +8,5 @@ export { default as JsonInteger } from './Integer';
 export { default as JsonObject } from './Object';
 export { default as JsonRegexp } from './Regexp';
 export { default as JsonString } from './String';
+export { default as JsonColor } from './Color';
 export { default as JsonUndefined } from './Undefined';

src/js/components/VariableEditor.js

@@ -18,6 +18,7 @@ import {
     JsonNull,
     JsonRegexp,
     JsonString,
+    JsonColor,
     JsonUndefined
 } from './DataTypes/DataTypes';
 
@@ -224,6 +225,8 @@ class VariableEditor extends React.PureComponent {
                 return this.getEditInput();
             case 'string':
                 return <JsonString value={variable.value} {...props} />;
+            case 'color':
+                return <JsonColor value={variable.value} {...props} />;
             case 'integer':
                 return <JsonInteger value={variable.value} {...props} />;
             case 'float':
@@ -249,6 +252,7 @@ class VariableEditor extends React.PureComponent {
                         {JSON.stringify(variable.value)}
                     </div>
                 );
+
         }
     };
 

src/js/helpers/util.js

@@ -1,3 +1,5 @@
+import colorString from 'color-string';
+
 //returns a string "type" of input object
 export function toType(obj) {
     let type = getType(obj);
@@ -12,6 +14,12 @@ export function toType(obj) {
             type = 'integer';
         }
     }
+    if (type === 'string') {
+        const color = colorString.get(obj);
+        if (color) {
+            type = 'color';
+        }
+    }
     return type;
 }