feat(TextField): Use BottomDrawer on mobile for Select input

`options` must be passed to "activate" the feature

Author: JF-Cozy

react/TextField/MobileSelect.jsx

@@ -0,0 +1,125 @@
+import React, { forwardRef, useEffect, useState } from 'react'
+import MuiTextField from '@material-ui/core/TextField'
+import PropTypes from 'prop-types'
+
+import Icon from '../Icon'
+import BottomIcon from '../Icons/Bottom'
+import InputAdornment from '../InputAdornment'
+import ListItemText from '../ListItemText'
+import ListItemIcon from '../ListItemIcon'
+import Radio from '../Radios'
+import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
+import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
+
+const MobileSelect = forwardRef(
+  (
+    { name, options, disabled, value, children, onClick, onChange, ...props },
+    ref
+  ) => {
+    // As they are controlled input, we have to set empty string as default
+    // because values can't be undefined and then defined
+    const [state, setState] = useState({ label: '', value: '' })
+    const [showDrawer, setShowDrawer] = useState(false)
+
+    const initialLabel = options.find(option => {
+      return option.value === value
+    })?.label
+
+    const handleClick = () => {
+      setShowDrawer(true)
+      onClick?.()
+    }
+
+    const handleItemClick = ({ value, children, onClick }) => {
+      if (onClick) {
+        return onClick()
+      }
+      setState({ label: children, value })
+      onChange?.({ target: { value } })
+    }
+
+    const handleClose = () => {
+      setShowDrawer(false)
+    }
+
+    useEffect(() => {
+      setState({ label: initialLabel || '', value: value || '' })
+    }, [initialLabel, value])
+
+    return (
+      <>
+        <MuiTextField
+          style={{ display: 'none' }}
+          type="hidden"
+          name={name}
+          value={state.value}
+        />
+        <MuiTextField
+          {...props}
+          ref={ref}
+          type="button"
+          aria-controls="simple-menu"
+          aria-haspopup="true"
+          name="dummy"
+          value={state.label}
+          disabled={disabled}
+          inputProps={{ className: 'u-ta-left' }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <Icon
+                  icon={BottomIcon}
+                  color={
+                    disabled
+                      ? 'var(--disabledTextColor)'
+                      : 'var(--iconTextColor)'
+                  }
+                />
+              </InputAdornment>
+            )
+          }}
+          onClick={handleClick}
+        />
+
+        {showDrawer && (
+          <ActionsMenuWrapper open autoClose onClose={handleClose}>
+            {React.Children.map(children, child => {
+              return React.isValidElement(child) ? (
+                <ActionsMenuItem
+                  {...child.props}
+                  size="small"
+                  autoFocus={child.props.value === value}
+                  onClick={() => handleItemClick(child.props)}
+                >
+                  <ListItemIcon>
+                    <Radio
+                      aria-hidden="true"
+                      tabIndex="-1"
+                      checked={child.props.value === state.value}
+                    />
+                  </ListItemIcon>
+                  <ListItemText primary={child.props.children} />
+                </ActionsMenuItem>
+              ) : null
+            })}
+          </ActionsMenuWrapper>
+        )}
+      </>
+    )
+  }
+)
+
+MobileSelect.propTypes = {
+  name: PropTypes.string,
+  options: PropTypes.array,
+  disabled: PropTypes.bool,
+  value: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]),
+  onClick: PropTypes.func,
+  onChange: PropTypes.func
+}
+
+export default MobileSelect

react/TextField/Readme.md

@@ -174,6 +174,7 @@ const handleChange = (event) => {
         <div className="u-mb-1 u-mt-2">Select</div>
         <TextField
           select
+          options={options}
           value={state.option}
           error={variant.error}
           size={variant.small ? 'small' : 'medium'}
@@ -192,6 +193,7 @@ const handleChange = (event) => {
         <TextField
           className="u-ml-1"
           select
+          options={options}
           value={state.option}
           disabled
           error={variant.error}

react/TextField/index.jsx

@@ -4,15 +4,29 @@ import MuiTextField from '@material-ui/core/TextField'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import { getRandomUUID } from '../helpers/getRandomUUID'
+import { useBreakpoints } from '../providers/Breakpoints'
+import MobileSelect from './MobileSelect'
 
-const TextField = forwardRef(({ children, ...props }, ref) => {
+const TextField = forwardRef(({ select, options, children, ...props }, ref) => {
   // A11Y, https://v4.mui.com/api/text-field/#props
   const uuid = getRandomUUID()
+  const { isMobile } = useBreakpoints()
+
+  // options is not required to avoid breaking change but needed to have the mobile behavior
+  if (isMobile && select && options) {
+    return (
+      <MobileSelect {...props} ref={ref} id={uuid} options={options}>
+        {children}
+      </MobileSelect>
+    )
+  }
 
   return (
     <MuiTextField
+      {...props}
       ref={ref}
       id={uuid}
+      select={select}
       SelectProps={{
         IconComponent: iconProps => (
           <Icon
@@ -26,7 +40,6 @@ const TextField = forwardRef(({ children, ...props }, ref) => {
           />
         )
       }}
-      {...props}
     >
       {children}
     </MuiTextField>