Merge pull request #2963 from SUI-Components/feat/setup-readonly-inputs

Feat/setup readonly inputs

Author: xmurcia

components/molecule/autosuggest/src/components/SingleSelection/index.js

@@ -31,6 +31,7 @@ const MoleculeAutosuggestSingleSelection = ({
   onSelect,
   onToggle,
   placeholder,
+  readOnly,
   required,
   rightButton,
   rightIcon,
@@ -39,7 +40,8 @@ const MoleculeAutosuggestSingleSelection = ({
   tabIndex,
   type,
   value = '',
-  noBorder
+  noBorder,
+  ...rest
 }) => {
   const handleSelection = (ev, {value, ...args}) => {
     typeof onChange === 'function' && onChange(ev, {value, ...args})
@@ -53,7 +55,7 @@ const MoleculeAutosuggestSingleSelection = ({
   }
 
   const handleClear = (ev, args = {}) => {
-    if (!disabled) {
+    if (!disabled && !readOnly) {
       typeof onChange === 'function' && onChange(null, {...args, value: ''})
       typeof onClear === 'function' && onClear(ev)
     }
@@ -76,7 +78,7 @@ const MoleculeAutosuggestSingleSelection = ({
         autoFocus={autoFocus}
         button={rightButton}
         disabled={disabled}
-        iconClear={!disabled && iconClear}
+        iconClear={!disabled && !readOnly && iconClear}
         id={id}
         reference={refInput}
         inputMode={inputMode}
@@ -89,6 +91,7 @@ const MoleculeAutosuggestSingleSelection = ({
         onClickRightIcon={handleRightClick}
         onKeyDown={onInputKeyDown}
         placeholder={placeholder}
+        readOnly={readOnly}
         required={required}
         rightIcon={rightIcon}
         shape={shape}

components/molecule/autosuggest/src/index.js

@@ -38,6 +38,7 @@ const MoleculeAutosuggest = ({
   onFocus,
   onSelect,
   onToggle,
+  readOnly = false,
   refMoleculeAutosuggest: refMoleculeAutosuggestFromProps = {},
   refMoleculeAutosuggestInput: refMoleculeAutosuggestInputFromProps = {},
   state,
@@ -215,6 +216,7 @@ const MoleculeAutosuggest = ({
     onKeyDown: handleKeyDown,
     onSelect,
     onToggle: handleToggle,
+    readOnly,
     state,
     ...(!multiselection && {...accessibilityProps}),
     ...restProps
@@ -315,6 +317,9 @@ MoleculeAutosuggest.propTypes = {
   /** list of values to be displayed on the select */
   options: PropTypes.array,
 
+  /** if the component is read-only or not */
+  readOnly: PropTypes.bool,
+
   /** object generated w/ React.createRef method to get a DOM reference of wrapper div */
   refMoleculeAutosuggest: PropTypes.object,
 

components/molecule/select/src/components/MoleculeInputSelect.js

@@ -6,16 +6,21 @@ import Injector from '@s-ui/react-primitive-injector'
 import {CLASS_ARROW, CLASS_ARROW_DOWN, CLASS_ARROW_UP, CLASS_CONTAINER} from './config.js'
 
 const MoleculeInputSelect = props => {
-  const {onClick, iconArrowDown: iconArrow, isOpen, disabled, children, ...rest} = props
+  const {onClick, iconArrowDown: iconArrow, isOpen, disabled, readOnly, children, ...rest} = props
 
   const classNames = cx(CLASS_ARROW, {
     [CLASS_ARROW_DOWN]: !isOpen,
     [CLASS_ARROW_UP]: isOpen
   })
 
+  const onClickInputHandler = ev => {
+    if (readOnly) return
+    onClick(ev)
+  }
+
   return (
-    <div className={CLASS_CONTAINER} onClick={!disabled ? onClick : null}>
-      <Injector onClick={onClick} disabled={disabled} {...rest}>
+    <div className={CLASS_CONTAINER} onClick={!disabled && !readOnly ? onClick : null}>
+      <Injector onClick={onClickInputHandler} disabled={disabled} readOnly={readOnly} {...rest}>
         {children}
       </Injector>
       <span className={classNames}>{iconArrow}</span>
@@ -38,7 +43,10 @@ MoleculeInputSelect.propTypes = {
   isOpen: PropTypes.bool,
 
   /** This Boolean attribute prevents the user from interacting with the input */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /** This Boolean attribute prevents the user from interacting with the input */
+  readOnly: PropTypes.bool
 }
 
 export default MoleculeInputSelect

components/molecule/select/src/components/SingleSelection.js

@@ -86,6 +86,7 @@ const MoleculeSelectSingleSelection = forwardRef(
           required={required}
           size={selectSize}
           tabIndex={tabIndex}
+          {...props}
         >
           <AtomInput ref={forwardedRef} inputMode={inputTypes.NONE} noBorder {...props} />
         </MoleculeInputSelect>

components/molecule/select/src/config.js

@@ -9,6 +9,7 @@ import {moleculeDropdownListSizes} from '@s-ui/react-molecule-dropdown-list'
 export const BASE_CLASS = `sui-MoleculeSelect`
 export const CLASS_FOCUS = `${BASE_CLASS}--focus`
 export const CLASS_DISABLED = `is-disabled`
+export const CLASS_READ_ONLY = `is-read-only`
 
 export const SELECT_STATES = {
   ERROR: 'error',
@@ -36,15 +37,16 @@ export const getOptionData = children => {
   return optionsData
 }
 
-export const getClassName = ({state, errorState, disabled, className, isBorderless}) =>
+export const getClassName = ({state, errorState, disabled, readOnly, className, isBorderless}) =>
   cx(
     BASE_CLASS,
     errorState && `${BASE_CLASS}--${SELECT_STATES.ERROR}`,
     errorState === false && `${BASE_CLASS}--${SELECT_STATES.SUCCESS}`,
     state && `${BASE_CLASS}--${state}`,
     isBorderless && `${BASE_CLASS}--isBorderless`,
     {
-      [CLASS_DISABLED]: disabled
+      [CLASS_DISABLED]: disabled,
+      [CLASS_READ_ONLY]: readOnly
     },
     className
   )

components/molecule/select/src/index.js

@@ -115,7 +115,7 @@ const MoleculeSelect = forwardRef(
 
     const numOptions = Children.toArray(extendedChildren).length
 
-    const className = getClassName({state, errorState, disabled, className: classNameFromProps, isBorderless})
+    const className = getClassName({state, errorState, disabled, readOnly, className: classNameFromProps, isBorderless})
 
     const handleToggle = useCallback(
       (ev, {isOpen, isOutsideEvent} = {isOutsideEvent: false}) => {
@@ -151,13 +151,13 @@ const MoleculeSelect = forwardRef(
 
     const handleOutsideClick = useCallback(
       ev => {
-        if (disabled) return
+        if (disabled || readOnly) return
         if (refMoleculeSelect.current && !refMoleculeSelect.current.contains(ev.target)) {
           // outside click
           closeList(ev, {isOutsideEvent: true})
         }
       },
-      [closeList, disabled]
+      [closeList, disabled, readOnly]
     )
 
     const focusFirstOption = useCallback(
@@ -240,7 +240,7 @@ const MoleculeSelect = forwardRef(
       typeof onBlur === 'function' && onBlur(event)
     }
 
-    const handleFocusIn = () => !disabled && !hasSearch && onFocus && onFocus()
+    const handleFocusIn = () => !disabled && !readOnly && !hasSearch && onFocus && onFocus()
 
     const handleClick = ev => {
       ev.persist()

components/molecule/select/src/styles/index.scss

@@ -52,6 +52,15 @@ $class-select-atom-search-container: '#{$class-select-atom-search}-container';
     }
   }
 
+  &.is-read-only {
+    #{$class-input}-arrow {
+      cursor: default;
+      svg {
+        fill: $c-molecule-select-arrow-disabled !important;
+      }
+    }
+  }
+
   .sui-MoleculeDropdownList {
     //position: absolute;
     z-index: $z-select-list;
@@ -97,6 +106,12 @@ $class-select-atom-search-container: '#{$class-select-atom-search}-container';
         opacity: 1;
         -webkit-appearance: none;
       }
+
+      #{$class-select-atom-input-input}--readOnly {
+        caret-color: transparent;
+        background: $bgc-atom-input-read-only;
+        color: $c-atom-input-read-only;
+      }
     }
 
     &-arrow {