Color input with unset fixes #584 (#593)

* [color-input] Adding other values to schema * [color-input] Support unset color (and unset as default) * [color-input] Wider preview and other styles
sanity-io · Feb 15, 2018 · ab8cdfa · ab8cdfa
1 parent 74ef6b7
commit ab8cdfa
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 23 deletions.
diff --git a/packages/@sanity/color-input/src/ColorInput.js b/packages/@sanity/color-input/src/ColorInput.js
@@ -1,21 +1,24 @@
+/* eslint-disable id-length */
 import React, {PureComponent} from 'react'
+import Button from 'part:@sanity/components/buttons/default'
 import PropTypes from 'prop-types'
 import {PatchEvent, patches} from 'part:@sanity/form-builder'
 import Fieldset from 'part:@sanity/components/fieldsets/default'
 import ColorPicker from './ColorPicker'
 
-const {set} = patches
+const {set, unset} = patches
 
 export default class ColorInput extends PureComponent {
-
   static propTypes = {
     type: PropTypes.shape({
       name: PropTypes.string,
       title: PropTypes.string,
       description: PropTypes.string,
-      fields: PropTypes.arrayOf(PropTypes.shape({
-        name: PropTypes.string.isRequired
-      }))
+      fields: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired
+        })
+      )
     }).isRequired,
     onChange: PropTypes.func,
     value: PropTypes.shape({
@@ -25,7 +28,7 @@ export default class ColorInput extends PureComponent {
   }
 
   state = {
-    value: this.props.value || {hsl: {h: 180, s: 0, l: 0, a: 1}}
+    value: this.props.value
   }
 
   componentWillReceiveProps(nextProps) {
@@ -49,22 +52,56 @@ export default class ColorInput extends PureComponent {
 
     const value = Object.assign({_type: type.name, alpha: color.rgb.a}, color)
 
-    onChange(PatchEvent.from(
-      Object.keys(value).map(key => set(value[key], [key]))
-    ))
+    onChange(PatchEvent.from(Object.keys(value).map(key => set(value[key], [key]))))
+  }
+
+  handleUnset = () => {
+    const {onChange} = this.props
+
+    this.setState({
+      value: undefined
+    })
+
+    onChange(PatchEvent.from(unset()))
+  }
+
+  handleCreateColor = () => {
+    const {onChange, type} = this.props
+
+    const value = {
+      _type: type.name,
+      alpha: type.options && type.options.disableAlpha ? undefined : 1,
+      hex: '#24a3e3',
+      oldHue: 200,
+      hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},
+      hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},
+      rgb: {r: 46, g: 163, b: 227, a: 1},
+      source: 'hex'
+    }
+
+    onChange(PatchEvent.from(set(value)))
   }
 
   render() {
     const {type} = this.props
     const {value} = this.state
+
     return (
       <Fieldset legend={type.title} description={type.description}>
-        <ColorPicker
-          color={value.hsl || value.hex}
-          onChange={this.handleColorChange}
-          onChangeComplete={this.handleColorChangeComplete}
-          disableAlpha={type.options && type.options.disableAlpha}
-        />
+        {!value && (
+          <div>
+            <Button onClick={this.handleCreateColor}>Create color</Button>
+          </div>
+        )}
+        {value && (
+          <ColorPicker
+            color={value.hsl || value.hex}
+            onChange={this.handleColorChange}
+            onChangeComplete={this.handleColorChangeComplete}
+            disableAlpha={type.options && type.options.disableAlpha}
+            onUnset={this.handleUnset}
+          />
+        )}
       </Fieldset>
     )
   }

diff --git a/packages/@sanity/color-input/src/ColorPicker.css b/packages/@sanity/color-input/src/ColorPicker.css
@@ -4,10 +4,21 @@
   height: 5em;
   margin-bottom: var(--small-padding);
   position: relative;
-  margin-left: calc(var(--medium-padding) * -1);
-  margin-top: calc(var(--medium-padding) * -1);
-  margin-right: calc(var(--medium-padding) * -1);
+  margin-left: calc(var(--small-padding) * -1);
+  margin-top: calc(var(--small-padding) * -1);
+  margin-right: calc(var(--small-padding) * -1);
   overflow: hidden;
+  border-radius:
+    var(--border-radius-small)
+    var(--border-radius-small)
+    0
+    0;
+
+  @media (--screen-medium) {
+    margin-left: calc(var(--medium-padding) * -1);
+    margin-top: calc(var(--medium-padding) * -1);
+    margin-right: calc(var(--medium-padding) * -1);
+  }
 }
 
 .hue {
@@ -32,6 +43,7 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.7em;
+  align-items: stretch;
 }
 
 .color {
@@ -43,11 +55,19 @@
 }
 
 .preview {
-  height: 3em;
-  width: 3em;
+  flex-grow: 1;
+  min-width: 4em;
   position: relative;
-  border-radius: 3em;
+  border-radius: var(--border-radius-large);
   overflow: hidden;
   box-shadow: 0 0 3px color(var(--gray) a(50%));
   margin-right: 1em;
 }
+
+.fields {
+  display: flex;
+
+  @nest & button:last-child {
+    margin-left: var(--small-padding);
+  }
+}
diff --git a/packages/@sanity/color-input/src/ColorPicker.js b/packages/@sanity/color-input/src/ColorPicker.js
@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Button from 'part:@sanity/components/buttons/default'
 import {ColorWrap, Checkboard, Saturation, Hue, Alpha} from 'react-color/lib/components/common'
 import ColorPickerFields from './ColorPickerFields'
+import TrashIcon from 'part:@sanity/base/trash-icon'
 import styles from './ColorPicker.css'
 
-const ColorPicker = ({width, rgb, hex, hsv, hsl, onChange, disableAlpha, renderers}) => {
+const ColorPicker = ({width, rgb, hex, hsv, hsl, onChange, onUnset, disableAlpha, renderers}) => {
   return (
     <div style={{width}}>
       <div className={styles.saturation}>
@@ -63,6 +65,7 @@ const ColorPicker = ({width, rgb, hex, hsv, hsl, onChange, disableAlpha, rendere
             onChange={onChange}
             disableAlpha={disableAlpha}
           />
+          <Button onClick={onUnset} title="Delete color" icon={TrashIcon} color="danger" />
         </div>
       </div>
     </div>
@@ -77,7 +80,8 @@ ColorPicker.propTypes = {
   rgb: PropTypes.object,
   onChange: PropTypes.func,
   disableAlpha: PropTypes.bool,
-  renderers: PropTypes.func
+  renderers: PropTypes.func,
+  onUnset: PropTypes.func
 }
 
 ColorPicker.defaultProps = {

diff --git a/packages/@sanity/color-input/src/schema.js b/packages/@sanity/color-input/src/schema.js
@@ -17,6 +17,39 @@ export default {
       title: 'Alpha',
       name: 'alpha',
       type: 'number'
+    },
+    {
+      title: 'Hue Saturation Lightness',
+      name: 'hsl',
+      type: 'object',
+      fields: [
+        {name: 'h', type: 'number', title: 'Hue'},
+        {name: 's', type: 'number', title: 'Saturation'},
+        {name: 'l', type: 'number', title: 'Lightness'},
+        {name: 'a', type: 'number', title: 'Alpha'}
+      ]
+    },
+    {
+      title: 'Hue Saturation Value',
+      name: 'hsv',
+      type: 'object',
+      fields: [
+        {name: 'h', type: 'number', title: 'Hue'},
+        {name: 's', type: 'number', title: 'Saturation'},
+        {name: 'v', type: 'number', title: 'Value'},
+        {name: 'a', type: 'number', title: 'Alpha'}
+      ]
+    },
+    {
+      title: 'Red Green Blue (rgb)',
+      name: 'rgb',
+      type: 'object',
+      fields: [
+        {name: 'r', type: 'number', title: 'Red'},
+        {name: 'g', type: 'number', title: 'Green'},
+        {name: 'b', type: 'number', title: 'Blue'},
+        {name: 'a', type: 'number', title: 'Alpha'}
+      ]
     }
   ],
   preview: {