[components] Respect disabled prop on input components and cleanup (#286

) * [components] Respect disabled prop on input components. Also cleanup other pros. Removing hasFocus etc that is no longer in use * [form-builder] Disabled on DefaultTextInput instead of isDisabled
sanity-io · Oct 19, 2017 · 9c5c16e · 9c5c16e
1 parent 76218b0
commit 9c5c16e
Show file tree

Hide file tree

Showing 16 changed files with 143 additions and 156 deletions.
diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -18,21 +18,22 @@
   box-shadow: 0 0 4px color(#000 a(5%));
   transition: all 0.1s linear;
 
-  &:hover {
-    border-color: var(--input-border-color-hover);
-  }
+  @nest &:not(:disabled) {
+    @nest &:hover {
+      border-color: var(--input-border-color-hover);
+    }
 
-  &:focus {
-    border-color: var(--input-border-color-focus);
-    box-shadow: 0 0 8px color(var(--input-border-color-focus) a(35%));
-  }
+    @nest &:focus {
+      border-color: var(--input-border-color-focus);
+      box-shadow: 0 0 8px color(var(--input-border-color-focus) a(35%));
+    }
 
-  &:active {
-    border-color: var(--input-border-color-active);
+    @nest &:active {
+      border-color: var(--input-border-color-active);
+    }
   }
-}
 
-.disabled {
-  composes: textInput;
-  background-color: var(--input-bg-disabled);
+  @nest &:disabled {
+    opacity: 0.5;
+  }
 }
diff --git a/packages/@sanity/base/src/styles/forms/textarea.css b/packages/@sanity/base/src/styles/forms/textarea.css
@@ -14,31 +14,21 @@
   background-color: var(--input-bg);
   border-radius: var(--input-border-radius);
 
-  &:hover {
-    border-color: var(--input-border-color-hover);
-  }
+  @nest &:not(:disabled) {
+    @nest &:hover {
+      border-color: var(--input-border-color-hover);
+    }
 
-  &:focus {
-    border-color: var(--input-border-color-focus);
-  }
+    @nest &:focus {
+      border-color: var(--input-border-color-focus);
+    }
 
-  &:active {
-    border-color: var(--input-border-color-active);
+    @nest &:active {
+      border-color: var(--input-border-color-active);
+    }
   }
-}
 
-.focusHelper {
-  display: block;
-  width: calc(100% + (var(--extra-small-padding) * 2));
-  height: calc(100% + (var(--extra-small-padding) * 2));
-  position: absolute;
-  top: calc(var(--extra-small-padding) * -1);
-  left: calc(var(--extra-small-padding) * -1);
-  z-index: 0;
-  background-color: transparent;
-}
-
-.disabled {
-  composes: root;
-  background-color: var(--input-bg-disabled);
+  @nest &:disabled {
+    background-color: var(--input-bg-disabled);
+  }
 }
diff --git a/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css b/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css
@@ -33,10 +33,6 @@
   composes: root;
 }
 
-.isDisabled {
-  opacity: 0.2;
-}
-
 .input {
   line-height: var(--radio-label-height);
 
@@ -49,6 +45,10 @@
   opacity: 0;
   appearance: none;
   border: none;
+
+  @nest &:disabled {
+    opacity: 0.2;
+  }
 }
 
 .circleOutline {

diff --git a/packages/@sanity/components/src/selects/DefaultSelect.js b/packages/@sanity/components/src/selects/DefaultSelect.js
@@ -11,6 +11,7 @@ export default class DefaultSelect extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     hasFocus: PropTypes.bool,
+    disabled: PropTypes.bool,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -33,11 +34,11 @@ export default class DefaultSelect extends React.Component {
   }
 
   render() {
-    const {hasError, items, value, onFocus, onBlur, hasFocus} = this.props
+    const {hasError, items, value, onFocus, onBlur, hasFocus, disabled, ...rest} = this.props
     return (
       <div
         className={`
-        ${styles.selectContainer}
+        ${disabled ? styles.selectContainerDisabled : styles.selectContainer}
         ${hasFocus ? styles.hasFocus : ''}
         ${hasError ? styles.hasError : ''}
       `}
@@ -49,6 +50,8 @@ export default class DefaultSelect extends React.Component {
           onBlur={onBlur}
           value={value && items.indexOf(value)}
           autoComplete="off"
+          disabled={disabled}
+          {...rest}
         >
           {!value && <option />}
           {

diff --git a/packages/@sanity/components/src/selects/SearchableSelect.js b/packages/@sanity/components/src/selects/SearchableSelect.js
@@ -41,7 +41,8 @@ export default class SearchableSelect extends React.Component {
       highlightIndex: -1,
       isInputSelected: false,
       arrowNavigationPosition: 0,
-      width: 448
+      width: 448,
+      hasFocus: false
     }
   }
 
@@ -132,8 +133,20 @@ export default class SearchableSelect extends React.Component {
     }
   }
 
+  handleFocus = event => {
+    this.setState({
+      hasFocus: true
+    })
+  }
+
+  handleBlur = event => {
+    this.setState({
+      hasFocus: false
+    })
+  }
+
   render() {
-    const {isOpen, highlightIndex, isInputSelected, inputValue, scrollContainer, width} = this.state
+    const {isOpen, highlightIndex, isInputSelected, inputValue, scrollContainer, width, hasFocus} = this.state
     const {onSearch, ...rest} = this.props
     return (
       <div ref={this.setRootElement}>
@@ -152,6 +165,7 @@ export default class SearchableSelect extends React.Component {
           onInputChange={this.handleInputChange}
           scrollContainer={scrollContainer}
           width={width}
+          isSelected={hasFocus}
         />
       </div>
     )

diff --git a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
@@ -29,7 +29,8 @@ class StatelessSearchableSelect extends React.PureComponent {
     onHighlightIndexChange: PropTypes.func,
     isInputSelected: PropTypes.bool,
     scrollContainer: PropTypes.object,
-    width: PropTypes.number
+    width: PropTypes.number,
+    disabled: PropTypes.bool
   }
 
   static defaultProps = {
@@ -121,13 +122,14 @@ class StatelessSearchableSelect extends React.PureComponent {
       onOpen,
       onClose,
       scrollContainer,
+      disabled,
       onHighlightIndexChange,
       ...rest
     } = this.props
 
     return (
       <div>
-        <div className={styles.selectContainer}>
+        <div className={disabled ? styles.selectContainerDisabled : styles.selectContainer}>
           <DefaultTextInput
             {...rest}
             className={styles.select}
@@ -137,6 +139,7 @@ class StatelessSearchableSelect extends React.PureComponent {
             onKeyUp={this.handleKeyUp}
             value={inputValue || ''}
             selected={isInputSelected}
+            disabled={disabled}
           />
           {
             onClear && inputValue && (
@@ -147,7 +150,7 @@ class StatelessSearchableSelect extends React.PureComponent {
           }
           {isLoading && <div className={styles.spinner}><Spinner /></div>}
           {!isLoading && (
-            <div className={styles.arrow} onClick={this.handleArrowClick}>
+            <div className={styles.arrow} onClick={disabled ? null : this.handleArrowClick}>
               <FaAngleDown color="inherit" />
             </div>
           )}

diff --git a/packages/@sanity/components/src/selects/story.js b/packages/@sanity/components/src/selects/story.js
@@ -189,6 +189,7 @@ storiesOf('Selects')
             onBlur={action('onBlur')}
             items={items}
             value={items[valueIndex]}
+            disabled={boolean('disabled (default prop)', false)}
           />
         </Sanity>
       )
@@ -207,6 +208,7 @@ storiesOf('Selects')
             onBlur={action('onBlur')}
             value={items[10]}
             items={items}
+            disabled={boolean('disabled (default prop)', false)}
           />
         </Sanity>
       )
@@ -242,10 +244,11 @@ storiesOf('Selects')
             onBlur={action('onBlur')}
             onOpen={action('onOpen')}
             value={selectedItem}
-            valueAsString={text('Value as string', selectedItem && selectedItem.title)}
+            inputValue={text('Inputvalue (prop)', selectedItem && selectedItem.title)}
             renderItem={renderItem}
             items={items}
-            isLoading={boolean('is loading', false)}
+            isLoading={boolean('isLoading (prop)', false)}
+            disabled={boolean('disabled (prop)', false)}
             onClear={hasOnclear ? action('onClear') : undefined}
           />
         </Sanity>

diff --git a/packages/@sanity/components/src/selects/styles/DefaultSelect.css b/packages/@sanity/components/src/selects/styles/DefaultSelect.css
@@ -22,7 +22,7 @@
   position: relative;
   color: var(--input-border-color);
 
-  &:hover {
+  @nest &:hover {
     color: var(--input-border-color-focus);
   }
 
@@ -31,12 +31,17 @@
   }
 }
 
-.focusHelper {
-  composes: focusHelper from 'part:@sanity/base/theme/forms/text-input-style';
-  background-color: transparent;
+.selectContainerDisabled {
+  composes: selectContainer;
+  opacity: 0.5;
+  color: var(--input-color);
+
+  @nest &:hover {
+    color: inherit;
+  }
 
   @nest .hasFocus & {
-    background-color: var(--focus-color);
+    color: inherit;
   }
 }
 
@@ -55,4 +60,8 @@
   @nest & svg {
     color: inherit;
   }
+
+  @nest .selectContainerDisabled & {
+    opacity: 0.5;
+  }
 }
diff --git a/packages/@sanity/components/src/selects/styles/SearchableSelect.css b/packages/@sanity/components/src/selects/styles/SearchableSelect.css
@@ -8,8 +8,8 @@
   composes: selectContainer from 'part:@sanity/components/selects/default-style';
 }
 
-.selectContainer {
-  composes: selectContainer from 'part:@sanity/components/selects/default-style';
+.selectContainerDisabled {
+  composes: selectContainerDisabled from 'part:@sanity/components/selects/default-style';
 }
 
 .arrow {

diff --git a/packages/@sanity/components/src/textareas/DefaultTextArea.js b/packages/@sanity/components/src/textareas/DefaultTextArea.js
@@ -12,19 +12,16 @@ export default class DefaultTextArea extends React.Component {
     onBlur: PropTypes.func,
     onClear: PropTypes.func,
     value: PropTypes.string,
-    error: PropTypes.bool,
-    placeholder: PropTypes.string,
     isClearable: PropTypes.bool,
     rows: PropTypes.number,
-    hasFocus: PropTypes.bool
+    hasFocus: PropTypes.bool,
+    disabled: PropTypes.bool
   }
 
   static defaultProps = {
     value: '',
     rows: 10,
-    placeholder: '',
     isClearable: false,
-    hasFocus: false,
     onKeyPress: NOOP,
     onChange: NOOP,
     onFocus: NOOP,
@@ -37,33 +34,37 @@ export default class DefaultTextArea extends React.Component {
   }
 
   render() {
-    const {value, placeholder, error, isClearable, id, rows, onKeyPress, onChange, onFocus, onBlur, hasFocus} = this.props
+    const {
+      value,
+      isClearable,
+      rows,
+      onKeyPress,
+      onChange,
+      onFocus,
+      onBlur,
+      onClear,
+      ...rest
+    } = this.props
 
     return (
-      <div
-        className={`
-          ${error ? styles.error : styles.root}
-          ${hasFocus ? styles.hasFocus : ''}
-        `}
-      >
+      <div className={styles.root}>
         <textarea
-          className={`
-            ${styles.textarea}
-            ${error ? styles.inputError : styles.input}
-            ${isClearable ? styles.hasClearButton : ''}
-          `}
+          className={styles.textarea}
           rows={rows}
           value={value}
-          placeholder={placeholder}
           onChange={onChange}
           onKeyPress={onKeyPress}
           onFocus={onFocus}
           onBlur={onBlur}
           autoComplete="off"
+          {...rest}
         />
-        <div className={styles.focusHelper} />
         {
-          isClearable && <button className={styles.clearButton} onClick={this.handleClear}><IoAndroidClose color="inherit" /></button>
+          isClearable && !this.props.disabled && (
+            <button className={styles.clearButton} onClick={onClear}>
+              <IoAndroidClose color="inherit" />
+            </button>
+          )
         }
       </div>
     )