[all] Adding support for and styling readOnly fields. #440 (#574)

* [all] Adding support for and styling readOnly fields. #440 * [import] Refactored to alllow importing from tarballs * [components] Changes requested in PR * [form-builder] More readOnly improvements - Inherit readOnly on container type inputs - Support visual readOnly state on image types * [form-builder] Cleanup * [form-builder] Improve display of array of primitives input when in read only * [form-builder] Display icon on details button for image/file fields when in read only * [form-builder] Improve display of array of predefined values when in read only
sanity-io · Feb 16, 2018 · c716c93 · c716c93
1 parent 292ed3b
commit c716c93
Show file tree

Hide file tree

Showing 42 changed files with 566 additions and 169 deletions.
diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -17,6 +17,10 @@
   @nest &:disabled {
     opacity: 0.5;
   }
+
+  @nest &:read-only {
+    opacity: 0.5;
+  }
 }
 
 .textInput {
@@ -26,17 +30,19 @@
   box-shadow: var(--input-box-shadow);
 
   @nest &:not(:disabled) {
-    @nest &:hover {
-      box-shadow: var(--input-box-shadow--hover);
-    }
+    @nest &:not(:read-only) {
+      @nest &:hover {
+        box-shadow: var(--input-box-shadow--hover);
+      }
 
-    @nest &:focus, &:focus-within {
-      /* border-color: var(--input-border-color-focus); */
-      box-shadow: var(--input-box-shadow--focus);
-    }
+      @nest &:focus, &:focus-within {
+        /* border-color: var(--input-border-color-focus); */
+        box-shadow: var(--input-box-shadow--focus);
+      }
 
-    @nest &:active {
-      /* border-color: var(--input-border-color-active); */
+      @nest &:active {
+        /* border-color: var(--input-border-color-active); */
+      }
     }
   }
 }

diff --git a/packages/@sanity/base/src/styles/forms/textarea.css b/packages/@sanity/base/src/styles/forms/textarea.css
@@ -27,4 +27,8 @@
   @nest &:disabled {
     background-color: var(--input-bg-disabled);
   }
+
+  @nest &:read-only {
+    opacity: 0.5;
+  }
 }
diff --git a/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css b/packages/@sanity/components/src/radiobutton/styles/RadioButtonDefault.css
@@ -33,6 +33,11 @@
   composes: root;
 }
 
+.isDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .input {
   line-height: var(--radio-label-height);
 
@@ -45,10 +50,6 @@
   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
@@ -12,6 +12,7 @@ export default class DefaultSelect extends React.Component {
     onBlur: PropTypes.func,
     hasFocus: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -23,6 +24,7 @@ export default class DefaultSelect extends React.Component {
     onChange() {},
     onBlur() {},
     onFocus() {},
+    readOnly: false,
     hasError: false,
     hasFocus: false,
     value: {},
@@ -44,26 +46,27 @@ export default class DefaultSelect extends React.Component {
   }
 
   render() {
-    const {hasError, items, value, disabled, hasFocus, ...rest} = this.props
+    const {hasError, items, value, disabled, hasFocus, readOnly, ...rest} = this.props
     return (
-      <div className={disabled ? styles.disabled : styles.root}>
+      <div className={disabled || readOnly ? styles.disabled : styles.root}>
         <select
           {...rest}
           className={styles.select}
           onChange={this.handleChange}
-          disabled={disabled}
+          disabled={disabled || readOnly}
           value={value && items.indexOf(value)}
           autoComplete="off"
           ref={this.setInput}
         >
           {!value && <option />}
-          {
-            items && items.length > 0 && items.map((item, i) => {
+          {items.length &&
+            items.map((item, i) => {
               return (
-                <option key={i} value={i}>{item.title}</option>
+                <option key={i} value={i}>
+                  {item.title}
+                </option>
               )
-            })
-          }
+            })}
         </select>
         <div className={styles.functions}>
           <span className={styles.arrow}>

diff --git a/packages/@sanity/components/src/selects/RadioSelect.js b/packages/@sanity/components/src/selects/RadioSelect.js
@@ -9,6 +9,7 @@ export default class RadioSelect extends React.Component {
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
     onChange: PropTypes.func,
     value: PropTypes.object,
+    readOnly: PropTypes.bool,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -45,7 +46,7 @@ export default class RadioSelect extends React.Component {
   }
 
   render() {
-    const {items, value, name, direction} = this.props
+    const {items, value, name, direction, readOnly} = this.props
     const {focusedItem} = this.state
 
     return (
@@ -60,6 +61,7 @@ export default class RadioSelect extends React.Component {
               return (
                 <div className={styles.item} key={i}>
                   <RadioButton
+                    disabled={readOnly}
                     name={name}
                     key={i}
                     label={item.title}

diff --git a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'part:@sanity/components/selects/searchable-style'
@@ -34,7 +35,8 @@ export default class StatelessSearchableSelect extends React.PureComponent {
     isInputSelected: PropTypes.bool,
     width: PropTypes.number,
     disabled: PropTypes.bool,
-    dropdownPosition: PropTypes.string
+    dropdownPosition: PropTypes.string,
+    readOnly: PropTypes.bool
   }
 
   static defaultProps = {
@@ -43,6 +45,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
     onClose: noop,
     onInputChange: noop,
     isLoading: false,
+    readOnly: false,
     renderItem: item => item,
     items: [],
     width: 100,
@@ -140,6 +143,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
       highlightIndex,
       isInputSelected,
       inputValue,
+      readOnly,
       onChange,
       onInputChange,
       onOpen,
@@ -149,6 +153,7 @@ export default class StatelessSearchableSelect extends React.PureComponent {
       disabled,
       onHighlightIndexChange,
       openItemElement,
+      readOnly,
       ...rest
     } = this.props
 
@@ -165,7 +170,9 @@ export default class StatelessSearchableSelect extends React.PureComponent {
             value={inputValue || ''}
             selected={isInputSelected}
             disabled={disabled}
+            readOnly={readOnly}
             ref={this.setInput}
+            readOnly={readOnly}
           />
           <div className={styles.functions}>
             {
@@ -174,13 +181,13 @@ export default class StatelessSearchableSelect extends React.PureComponent {
               )
             }
             {
-              onClear && value && (
+              onClear && value && !readOnly && (
                 <button type="button" className={styles.clearButton} onClick={onClear}>
                   <CloseIcon color="inherit" />
                 </button>
               )
             }
-            {!isLoading && (
+            {!isLoading && !readOnly && (
               <div
                 className={styles.arrow}
                 onClick={disabled ? null : this.handleArrowClick}

diff --git a/packages/@sanity/components/src/selects/styles/DefaultSelect.css b/packages/@sanity/components/src/selects/styles/DefaultSelect.css
@@ -6,8 +6,8 @@
   outline: none;
 }
 
-.label {
-  /* Nothing here yet */
+.disabled {
+  composes: root;
 }
 
 .select {
@@ -46,6 +46,10 @@
   }
 }
 
+.disabled .arrow {
+  opacity: 0.2;
+}
+
 .root:hover .arrow {
   color: var(--input-border-color-focus);
 }

diff --git a/packages/@sanity/components/src/tags/TextField.js b/packages/@sanity/components/src/tags/TextField.js
@@ -13,11 +13,13 @@ export default class TagsTextField extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func,
+    readOnly: PropTypes.bool,
     value: PropTypes.arrayOf(PropTypes.string)
   }
 
   static defaultProps = {
     value: [],
+    readOnly: false,
     onBlur: () => {}
   }
 
@@ -91,6 +93,7 @@ export default class TagsTextField extends React.Component {
     const {
       onChange,
       value,
+      readOnly,
       ...rest
     } = this.props
 
@@ -100,24 +103,26 @@ export default class TagsTextField extends React.Component {
           <div className={styles.content}>
             <ul className={styles.tags}>
               {
-                value && value.map((tag, i) => {
+                value.map((tag, i) => {
                   return (
-                    <li key={i} className={styles.tag}>
+                    <li key={i} className={readOnly ? styles.tag : styles.tagWithClear}>
                       {tag}
-                      <a
-                        onClick={this.handleRemoveTagClick}
-                        data-index={i}
-                        className={styles.clearTag}
-                      >
-                        ×
-                      </a>
+                      {!readOnly && (
+                        <a
+                          onClick={this.handleRemoveTagClick}
+                          data-index={i}
+                          className={styles.clearTag}
+                        >
+                          ×
+                        </a>
+                      )}
                     </li>
                   )
-                })
-              }
+                })}
             </ul>
             <input
               {...rest}
+              readOnly={readOnly}
               value={inputValue}
               className={styles.input}
               onKeyDown={this.handleKeyDown}

diff --git a/packages/@sanity/components/src/tags/styles/TextField.css b/packages/@sanity/components/src/tags/styles/TextField.css
@@ -25,6 +25,10 @@
   user-select: none;
   cursor: default;
   position: relative;
+}
+
+.tagWithClear {
+  composes: tag;
   padding-right: 1.4em;
 }
 

diff --git a/packages/@sanity/components/src/toggles/Checkbox.js b/packages/@sanity/components/src/toggles/Checkbox.js
@@ -7,6 +7,7 @@ export default class Checkbox extends React.Component {
     label: PropTypes.string,
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
     children: PropTypes.any,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -47,7 +48,7 @@ export default class Checkbox extends React.Component {
   }
 
   render() {
-    const {disabled, checked, label, children, ...rest} = this.props
+    const {disabled, checked, label, children, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let checkedClass = checked ? styles.isChecked : styles.unChecked
@@ -60,9 +61,10 @@ export default class Checkbox extends React.Component {
       <label
         title={label}
         className={`
-          ${styles.root}
-          ${disabled ? styles.isDisabled : styles.isEnabled}
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
           ${checkedClass}
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
+          ${checked ? styles.isChecked : styles.unChecked}
           ${hasFocus ? styles.hasFocus : ''}
         `}
         onBlur={this.handleBlur}
@@ -71,8 +73,8 @@ export default class Checkbox extends React.Component {
           {...rest}
           className={styles.input}
           type="checkbox"
-          disabled={disabled}
-          checked={!!checked}
+          disabled={disabled || readOnly}
+          checked={checked}
           ref={this.setInput}
           onFocus={this.handleFocus}
         />

diff --git a/packages/@sanity/components/src/toggles/Switch.js b/packages/@sanity/components/src/toggles/Switch.js
@@ -9,6 +9,7 @@ export default class Switch extends React.Component {
     disabled: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    readOnly: PropTypes.bool
   }
 
   state = {
@@ -42,7 +43,7 @@ export default class Switch extends React.Component {
   }
 
   render() {
-    const {disabled, checked, label, ...rest} = this.props
+    const {disabled, checked, label, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let thumbClass = checked ? styles.thumbChecked : styles.thumb
@@ -54,8 +55,8 @@ export default class Switch extends React.Component {
     return (
       <label
         className={`
+          ${disabled || readOnly ? styles.isDisabled : styles.isEnabled}
           ${typeof checked === 'undefined' ? styles.indeterminate : styles.root}
-          ${disabled ? styles.isDisabled : styles.isEnabled}
           ${checked ? styles.isChecked : styles.unChecked}
           ${hasFocus ? styles.hasFocus : ''}
         `}
@@ -70,15 +71,12 @@ export default class Switch extends React.Component {
           {...rest}
           className={styles.input}
           type="checkbox"
-          disabled={disabled}
-          checked={!!checked}
+          disabled={disabled || readOnly}
+          checked={checked}
           ref={this.setInput}
           onFocus={this.handleFocus}
         />
-        <div className={styles.label}>
-          {label}
-        </div>
-
+        <div className={styles.label}>{label}</div>
       </label>
     )
   }