Move styles out of Input, janky slidable labels

casesandberg · Aug 10, 2015 · 6a9757b · 6a9757b
1 parent f152d4f
commit 6a9757b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 25 deletions.
diff --git a/src/components/Sketch/SketchFields.jsx b/src/components/Sketch/SketchFields.jsx
@@ -28,13 +28,25 @@ class ShetchFields extends ReactCSS.Component {
         double: {
           flex: '2',
         },
-        label: {
-          display: 'block',
-          textAlign: 'center',
-          fontSize: '11px',
-          color: '#222',
-          paddingTop: '3px',
-          paddingBottom: '4px',
+        Input: {
+          style: {
+            input: {
+              width: '80%',
+              padding: '3px 10%',
+              border: 'none',
+              boxShadow: 'inset 0 0 0 1px #ddd',
+              fontSize: '11px',
+            },
+            label: {
+              display: 'block',
+              textAlign: 'center',
+              fontSize: '11px',
+              color: '#222',
+              paddingTop: '3px',
+              paddingBottom: '4px',
+              textTransform: 'capitalize',
+            },
+          },
         },
       },
     };
@@ -70,24 +82,19 @@ class ShetchFields extends ReactCSS.Component {
     return (
       <div is="fields">
         <div is="double">
-          <EditableInput label="hex" value={ color.toHexString().replace('#', '') } onChange={ this.handleChange }/>
-          <span is="label">Hex</span>
+          <EditableInput is="Input" label="hex" value={ color.toHexString().replace('#', '') } onChange={ this.handleChange }/>
         </div>
         <div is="single">
-          <EditableInput label="r" value={ color.toRgb().r } onChange={ this.handleChange }/>
-          <span is="label">R</span>
+          <EditableInput is="Input" label="r" value={ color.toRgb().r } onChange={ this.handleChange } dragLabel="true" dragMax="255"/>
         </div>
         <div is="single">
-          <EditableInput label="g" value={ color.toRgb().g } onChange={ this.handleChange }/>
-          <span is="label">G</span>
+          <EditableInput is="Input" label="g" value={ color.toRgb().g } onChange={ this.handleChange } dragLabel="true" dragMax="255"/>
         </div>
         <div is="single">
-          <EditableInput label="b" value={ color.toRgb().b } onChange={ this.handleChange }/>
-          <span is="label">B</span>
+          <EditableInput is="Input" label="b" value={ color.toRgb().b } onChange={ this.handleChange } dragLabel="true" dragMax="255"/>
         </div>
         <div is="single">
-          <EditableInput label="a" value={ this.props.a } onChange={ this.handleChange }/>
-          <span is="label">A</span>
+          <EditableInput is="Input" label="a" value={ this.props.a } onChange={ this.handleChange } dragLabel="true" dragMax="100"/>
         </div>
       </div>
     );

diff --git a/src/components/common/EditableInput.jsx b/src/components/common/EditableInput.jsx
@@ -13,23 +13,30 @@ class EditableInput extends ReactCSS.Component {
     },
 
     this.handleChange = this.handleChange.bind(this);
+    this.handleDrag = this.handleDrag.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
   }
 
   classes() {
     return {
-      'default': {
-        input: {
-          width: '80%',
-          padding: '3px 10%',
-          border: 'none',
-          boxShadow: 'inset 0 0 0 1px #ddd',
-          fontSize: '11px',
+      'user-override': {
+        input: this.props.style.input,
+        label: this.props.style.label,
+      },
+      'dragLabel-true': {
+        label: {
+          cursor: 'ew-resize',
         },
       },
     };
   }
 
+  styles() {
+    return this.css({
+      'user-override': true,
+    });
+  }
+
   componentWillReceiveProps(nextProps) {
     var input = React.findDOMNode(this.refs.input);
     if (nextProps.value !== this.state.value) {
@@ -61,10 +68,32 @@ class EditableInput extends ReactCSS.Component {
     this.setState({ value: e.target.value });
   }
 
+  handleDrag(e) {
+    if (this.props.dragLabel) {
+      var container = React.findDOMNode(this.refs.container);
+      var containerWidth = container.clientWidth;
+      var left = e.pageX - container.getBoundingClientRect().left;
+
+      var newValue = Math.round(this.props.value + left);
+
+      if (newValue >= 0 && newValue <= this.props.dragMax) {
+        var obj = {};
+        obj[this.props.label] = Math.round(newValue / 1);
+        this.props.onChange(obj);
+      }
+    }
+  }
+
   render() {
+    var label;
+    if (this.props.label) {
+      label = <span is="label" draggable onDrag={ this.handleDrag }>{ this.props.label }</span>;
+    }
+
     return (
-      <div is="wrap">
+      <div is="wrap" ref="container">
         <input is="input" ref="input" value={ this.state.value } onChange={ this.handleChange } onBlur={ this.handleBlur }/>
+        { label }
       </div>
     );
   }