[components] ReadOnly support for searchable-select (#1092)

* [components] ReadOnly support for searchable-select * [components] Don't pass change handlers at all when readOnly
sanity-io · Dec 18, 2018 · a41265a · a41265a
1 parent b3991cf
commit a41265a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/packages/@sanity/components/src/selects/SearchableSelect.js b/packages/@sanity/components/src/selects/SearchableSelect.js
@@ -19,7 +19,8 @@ export default class SearchableSelect extends React.PureComponent {
     isLoading: PropTypes.bool,
     renderItem: PropTypes.func.isRequired,
     items: PropTypes.array,
-    dropdownPosition: PropTypes.string
+    dropdownPosition: PropTypes.string,
+    readOnly: PropTypes.bool
   }
 
   static defaultProps = {
@@ -127,24 +128,33 @@ export default class SearchableSelect extends React.PureComponent {
 
   render() {
     const {isOpen, highlightIndex, isInputSelected, inputValue, hasFocus} = this.state
-    const {onSearch, className, ...rest} = this.props
+    const {onSearch, className, readOnly, placeholder, ...rest} = this.props
+
+    const changeHandlers = readOnly
+      ? {}
+      : {
+          onInputChange: this.handleInputChange,
+          onChange: this.handleChange
+        }
+
     return (
       <div ref={this.setRootElement} className={className}>
         <StatelessSearchableSelect
           {...rest}
+          {...changeHandlers}
+          placeholder={readOnly ? 'No value' : placeholder}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onHighlightIndexChange={this.handleHighlightIndexChange}
           onOpen={this.handleOpen}
           onClose={this.handleClose}
-          onChange={this.handleChange}
           isOpen={isOpen}
           highlightIndex={highlightIndex}
           isInputSelected={isInputSelected}
           inputValue={inputValue}
-          onInputChange={this.handleInputChange}
           isSelected={hasFocus}
           ref={this.setInput}
+          readOnly={readOnly}
         />
       </div>
     )

diff --git a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
@@ -169,34 +169,38 @@ export default class StatelessSearchableSelect extends React.PureComponent {
                 disabled={disabled}
                 ref={this.setInput}
                 spellCheck="false"
+                readOnly={readOnly}
               />
               <div className={styles.functions}>
                 {openItemElement &&
                   value && <span className={styles.openItem}>{openItemElement(value)}</span>}
-                {onClear &&
+                {!readOnly &&
+                  onClear &&
                   value && (
                     <button type="button" className={styles.clearButton} onClick={onClear}>
                       <CloseIcon color="inherit" />
                     </button>
                   )}
-                <div className={styles.arrowAndSpinnerContainer}>
-                  {!isLoading && (
-                    <div
-                      className={styles.arrow}
-                      onClick={disabled ? null : this.handleArrowClick}
-                      tabIndex={0}
-                      onKeyPress={disabled ? null : this.handleArrowKeyPress}
-                    >
-                      <FaAngleDown color="inherit" />
-                      <Ink duration={200} opacity={0.1} radius={200} />
-                    </div>
-                  )}
-                  {isLoading && (
-                    <div className={styles.spinner}>
-                      <Spinner />
-                    </div>
-                  )}
-                </div>
+                {!readOnly && (
+                  <div className={styles.arrowAndSpinnerContainer}>
+                    {!isLoading && (
+                      <div
+                        className={styles.arrow}
+                        onClick={disabled ? null : this.handleArrowClick}
+                        tabIndex={0}
+                        onKeyPress={disabled ? null : this.handleArrowKeyPress}
+                      >
+                        <FaAngleDown color="inherit" />
+                        <Ink duration={200} opacity={0.1} radius={200} />
+                      </div>
+                    )}
+                    {isLoading && (
+                      <div className={styles.spinner}>
+                        <Spinner />
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
             </div>
           )}

diff --git a/packages/@sanity/components/src/selects/styles/SearchableSelect.css b/packages/@sanity/components/src/selects/styles/SearchableSelect.css
@@ -102,6 +102,10 @@
   cursor: pointer;
   outline: none;
 
+  @nest &:last-child {
+    margin-right: var(--medium-padding);
+  }
+
   @nest & a, & button {
     outline: none;
   }