removeAlpha

hmeerlo · Jun 9, 2016 · 364fd11 · 364fd11
1 parent 8129bed
commit 364fd11
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.2.0 (8 June 2016)
+
+- `disableAlpha` on Chrome and Sketch pickers
+
 ## 2.1.1 (8 June 2016)
 
 - Fix ChromeFields icon highlight

diff --git a/build/bundle.js b/build/bundle.js
diff --git a/docs/documentation/03.04-disableAlpha.md b/docs/documentation/03.04-disableAlpha.md
@@ -0,0 +1,22 @@
+---
+id: api-disableAlpha
+title: disableAlpha
+---
+
+Use `disableAlpha` to remove the alpha fields on Chrome and Sketch color pickers.
+
+```
+import React from 'react';
+import { SketchPicker } from 'react-color';
+
+class Component extends React.Component {
+  render() {
+    return (
+      <SketchPicker
+        disableAlpha={ true }
+        onChangeComplete={ this.handleChangeComplete }
+      />
+    );
+  }
+}
+```
diff --git a/lib/components/chrome/Chrome.js b/lib/components/chrome/Chrome.js
@@ -105,7 +105,8 @@ var Chrome = exports.Chrome = function (_ReactCSS$Component) {
             Absolute: '0px 0px 0px 0px',
             borderRadius: '8px',
             boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
-            background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')'
+            background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
+            zIndex: '2'
           },
           toggles: {
             flex: '1'
@@ -125,12 +126,29 @@ var Chrome = exports.Chrome = function (_ReactCSS$Component) {
           Alpha: {
             radius: '2px'
           }
+        },
+        'disableAlpha': {
+          color: {
+            width: '22px'
+          },
+          alpha: {
+            display: 'none'
+          },
+          hue: {
+            marginBottom: '0px'
+          },
+          swatch: {
+            width: '10px',
+            height: '10px',
+            marginTop: '0px'
+          }
         }
       };
     }
   }, {
     key: 'render',
     value: function render() {
+      console.log(this.props.rgb);
       return _react2.default.createElement(
         'div',
         { style: this.styles().picker },
@@ -170,7 +188,7 @@ var Chrome = exports.Chrome = function (_ReactCSS$Component) {
               )
             )
           ),
-          _react2.default.createElement(_ChromeFields2.default, _extends({}, this.props, { onChange: this.handleChange }))
+          _react2.default.createElement(_ChromeFields2.default, _extends({}, this.props, { onChange: this.handleChange, disableAlpha: this.props.disableAlpha }))
         )
       );
     }

diff --git a/lib/components/chrome/ChromeFields.js b/lib/components/chrome/ChromeFields.js
@@ -125,6 +125,10 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
             paddingLeft: '6px',
             width: '100%'
           },
+          alpha: {
+            paddingLeft: '6px',
+            width: '100%'
+          },
           toggle: {
             width: '32px',
             textAlign: 'right',
@@ -169,6 +173,11 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
               }
             }
           }
+        },
+        'disableAlpha': {
+          alpha: {
+            display: 'none'
+          }
         }
       };
     }
@@ -223,7 +232,7 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
           ),
           _react2.default.createElement(
             'div',
-            { style: this.styles().field },
+            { style: this.styles().alpha },
             _react2.default.createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'a', value: this.props.rgb.a, arrowOffset: .01, onChange: this.handleChange }))
           )
         );
@@ -248,7 +257,7 @@ var ChromeFields = exports.ChromeFields = function (_ReactCSS$Component) {
           ),
           _react2.default.createElement(
             'div',
-            { style: this.styles().field },
+            { style: this.styles().alpha },
             _react2.default.createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'a', value: this.props.hsl.a, arrowOffset: .01, onChange: this.handleChange }))
           )
         );

diff --git a/lib/components/material/Material.js b/lib/components/material/Material.js
@@ -90,7 +90,7 @@ var Material = exports.Material = function (_ReactCSS$Component) {
                 color: '#333',
                 padding: '0px',
                 border: '0px',
-                borderBottom: '2px solid #' + this.props.hex,
+                borderBottom: '2px solid ' + this.props.hex,
                 outline: 'none',
                 height: '30px'
               },

diff --git a/lib/components/sketched/Sketch.js b/lib/components/sketched/Sketch.js
@@ -121,6 +121,17 @@ var Sketch = exports.Sketch = function (_ReactCSS$Component) {
             radius: '2px',
             shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
           }
+        },
+        'disableAlpha': {
+          color: {
+            height: '10px'
+          },
+          hue: {
+            height: '10px'
+          },
+          alpha: {
+            display: 'none'
+          }
         }
       };
     }
@@ -162,7 +173,7 @@ var Sketch = exports.Sketch = function (_ReactCSS$Component) {
         _react2.default.createElement(
           'div',
           { style: this.styles().fields },
-          _react2.default.createElement(_SketchFields2.default, _extends({}, this.props, { onChange: this.handleChange }))
+          _react2.default.createElement(_SketchFields2.default, _extends({}, this.props, { onChange: this.handleChange, disableAlpha: this.props.disableAlpha }))
         ),
         _react2.default.createElement(
           'div',

diff --git a/lib/components/sketched/SketchFields.js b/lib/components/sketched/SketchFields.js
@@ -94,6 +94,10 @@ var ShetchFields = exports.ShetchFields = function (_ReactCSS$Component) {
             flex: '1',
             paddingLeft: '6px'
           },
+          alpha: {
+            flex: '1',
+            paddingLeft: '6px'
+          },
           double: {
             flex: '2'
           },
@@ -117,6 +121,11 @@ var ShetchFields = exports.ShetchFields = function (_ReactCSS$Component) {
               }
             }
           }
+        },
+        'disableAlpha': {
+          alpha: {
+            display: 'none'
+          }
         }
       };
     }
@@ -148,7 +157,7 @@ var ShetchFields = exports.ShetchFields = function (_ReactCSS$Component) {
         ),
         _react2.default.createElement(
           'div',
-          { style: this.styles().single },
+          { style: this.styles().alpha },
           _react2.default.createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'a', value: Math.round(this.props.rgb.a * 100), onChange: this.handleChange, dragLabel: 'true', dragMax: '100' }))
         )
       );

diff --git a/src/components/chrome/Chrome.js b/src/components/chrome/Chrome.js
@@ -55,6 +55,7 @@ export class Chrome extends ReactCSS.Component {
           borderRadius: '8px',
           boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
           background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
+          zIndex: '2',
         },
         toggles: {
           flex: '1',
@@ -75,6 +76,22 @@ export class Chrome extends ReactCSS.Component {
           radius: '2px',
         },
       },
+      'disableAlpha': {
+        color: {
+          width: '22px',
+        },
+        alpha: {
+          display: 'none',
+        },
+        hue: {
+          marginBottom: '0px',
+        },
+        swatch: {
+          width: '10px',
+          height: '10px',
+          marginTop: '0px',
+        },
+      },
     }
   }
 
@@ -83,6 +100,7 @@ export class Chrome extends ReactCSS.Component {
   }
 
   render(): any {
+    console.log(this.props.rgb)
     return (
       <div is="picker">
         <div is="saturation">
@@ -105,7 +123,7 @@ export class Chrome extends ReactCSS.Component {
               </div>
             </div>
           </div>
-          <ChromeFields {...this.props} onChange={ this.handleChange } />
+          <ChromeFields {...this.props} onChange={ this.handleChange } disableAlpha={ this.props.disableAlpha } />
         </div>
       </div>
     )

diff --git a/src/components/chrome/ChromeFields.js b/src/components/chrome/ChromeFields.js
@@ -30,6 +30,10 @@ export class ChromeFields extends ReactCSS.Component {
           paddingLeft: '6px',
           width: '100%',
         },
+        alpha: {
+          paddingLeft: '6px',
+          width: '100%',
+        },
         toggle: {
           width: '32px',
           textAlign: 'right',
@@ -39,7 +43,7 @@ export class ChromeFields extends ReactCSS.Component {
           marginRight: '-4px',
           marginTop: '12px',
           cursor: 'pointer',
-          position: 'relative'
+          position: 'relative',
         },
         iconHighlight: {
           position: 'absolute',
@@ -75,6 +79,11 @@ export class ChromeFields extends ReactCSS.Component {
           },
         },
       },
+      'disableAlpha': {
+        alpha: {
+          display: 'none',
+        },
+      },
     }
   }
 
@@ -175,7 +184,7 @@ export class ChromeFields extends ReactCSS.Component {
         <div is="field">
           <EditableInput is="Input" label="b" value={ this.props.rgb.b } onChange={ this.handleChange } />
         </div>
-        <div is="field">
+        <div is="alpha">
           <EditableInput is="Input" label="a" value={ this.props.rgb.a } arrowOffset={ .01 } onChange={ this.handleChange } />
         </div>
       </div>
@@ -190,7 +199,7 @@ export class ChromeFields extends ReactCSS.Component {
         <div is="field">
           <EditableInput is="Input" label="l" value={ Math.round(this.props.hsl.l * 100) + '%' } onChange={ this.handleChange } />
         </div>
-        <div is="field">
+        <div is="alpha">
           <EditableInput is="Input" label="a" value={ this.props.hsl.a } arrowOffset={ .01 } onChange={ this.handleChange } />
         </div>
       </div>
@@ -201,7 +210,7 @@ export class ChromeFields extends ReactCSS.Component {
         { fields }
         <div is="toggle">
           <div is="icon" onClick={ this.toggleViews } ref="icon">
-            <svg style={{ width:'24px', height:'24px', border: '1px transparent solid', borderRadius: '5px'}}
+            <svg style={{ width:'24px', height:'24px', border: '1px transparent solid', borderRadius: '5px' }}
               viewBox="0 0 24 24"
               onMouseOver={ this.showHighlight }
               onMouseEnter={ this.showHighlight }

diff --git a/src/components/material/Material.js b/src/components/material/Material.js
@@ -32,7 +32,7 @@ export class Material extends ReactCSS.Component {
               color: '#333',
               padding: '0px',
               border: '0px',
-              borderBottom: '2px solid #' + this.props.hex,
+              borderBottom: '2px solid ' + this.props.hex,
               outline: 'none',
               height: '30px',
             },

diff --git a/src/components/sketched/Sketch.js b/src/components/sketched/Sketch.js
@@ -51,7 +51,7 @@ export class Sketch extends ReactCSS.Component {
           Absolute: '0px 0px 0px 0px',
           borderRadius: '2px',
           background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
-          boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+          boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
         },
         hue: {
           position: 'relative',
@@ -74,6 +74,17 @@ export class Sketch extends ReactCSS.Component {
           shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
         },
       },
+      'disableAlpha': {
+        color: {
+          height: '10px',
+        },
+        hue: {
+          height: '10px',
+        },
+        alpha: {
+          display: 'none',
+        },
+      },
     }
   }
 
@@ -102,7 +113,7 @@ export class Sketch extends ReactCSS.Component {
           </div>
         </div>
         <div is="fields">
-          <SketchFields {...this.props} onChange={ this.handleChange } />
+          <SketchFields {...this.props} onChange={ this.handleChange } disableAlpha={ this.props.disableAlpha } />
         </div>
         <div is="presets">
           <SketchPresetColors colors={ this.props.presetColors } onClick={ this.handleChange } />

diff --git a/src/components/sketched/SketchFields.js b/src/components/sketched/SketchFields.js
@@ -21,6 +21,10 @@ export class ShetchFields extends ReactCSS.Component {
           flex: '1',
           paddingLeft: '6px',
         },
+        alpha: {
+          flex: '1',
+          paddingLeft: '6px',
+        },
         double: {
           flex: '2',
         },
@@ -45,6 +49,11 @@ export class ShetchFields extends ReactCSS.Component {
           },
         },
       },
+      'disableAlpha': {
+        alpha: {
+          display: 'none',
+        },
+      },
     }
   }
 
@@ -95,7 +104,7 @@ export class ShetchFields extends ReactCSS.Component {
         <div is="single">
           <EditableInput is="Input" label="b" value={ this.props.rgb.b } onChange={ this.handleChange } dragLabel="true" dragMax="255"/>
         </div>
-        <div is="single">
+        <div is="alpha">
           <EditableInput is="Input" label="a" value={ Math.round(this.props.rgb.a * 100) } onChange={ this.handleChange } dragLabel="true" dragMax="100"/>
         </div>
       </div>