TextFields adornments no longer overwriting base ones (stepper and cl…

…earable)
osstotalsoft · Nov 6, 2023 · 2a0afbe · 2a0afbe
1 parent e6fe3f4
commit 2a0afbe
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/src/components/inputs/TextField/TextField.tsx b/src/components/inputs/TextField/TextField.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react'
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import NumberFormat, { NumberFormatValues, SourceInfo } from 'react-number-format'
 import { TextField as MuiTextField, StepButton, classes } from './TextFieldStyles'
 import InputAdornment from '@mui/material/InputAdornment'
-import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
+import IconButton from '../../buttons/IconButton'
 import { is, isNil } from 'ramda'
 import i18n from 'i18next'
 import { AddButtonProps, ClearButtonProps, NumberTextFieldProps, SubtractButtonProps, TextFieldProps } from './types'
@@ -93,11 +93,9 @@ NumberTextField.propTypes = {
 }
 
 const ClearButton: React.FC<ClearButtonProps> = ({ onClearInput, disabled }) => (
-  <InputAdornment position="end">
-    <IconButton disabled={disabled} aria-label="Clear" size="small" onClick={onClearInput}>
-      <CloseIcon fontSize="small" />
-    </IconButton>
-  </InputAdornment>
+  <IconButton disabled={disabled} aria-label="Clear" size="tiny" color="primary" variant="text" onClick={onClearInput}>
+    <CloseIcon fontSize="small" />
+  </IconButton>
 )
 ClearButton.propTypes = {
   onClearInput: PropTypes.func,
@@ -176,15 +174,30 @@ const TextField: React.FC<TextFieldProps> = ({
     if (nextValue <= maxValue) onChange(nextValue)
   }, [maxValue, onChange, step, value])
 
-  const muiInputProps = {
-    startAdornment: isStepper ? <SubtractButton onSubtract={handleSubtract} /> : startAdornment,
-    endAdornment: isStepper ? (
-      <AddButton onAdd={handleAdd} />
-    ) : isClearable ? (
-      <ClearButton onClearInput={handleClearInput} disabled={disabled} />
-    ) : (
-      endAdornment
+  const internalStartAdornment = useMemo(
+    () => (
+      <InputAdornment position="start">
+        {isStepper && <SubtractButton onSubtract={handleSubtract} />}
+        {startAdornment}
+      </InputAdornment>
     ),
+    [handleSubtract, isStepper, startAdornment]
+  )
+
+  const internalEndAdornment = useMemo(
+    () => (
+      <InputAdornment position="end">
+        {isStepper && <AddButton onAdd={handleAdd} />}
+        {isClearable && <ClearButton onClearInput={handleClearInput} disabled={disabled} />}
+        {endAdornment}
+      </InputAdornment>
+    ),
+    [disabled, endAdornment, handleAdd, handleClearInput, isClearable, isStepper]
+  )
+
+  const muiInputProps = {
+    startAdornment: internalStartAdornment,
+    endAdornment: internalEndAdornment,
     className: `${isStepper && !fullWidth ? classes.stepperFixedWidth : ''}`,
     ...InputProps,
     style: InputProps?.style

diff --git a/src/components/inputs/TextField/types.ts b/src/components/inputs/TextField/types.ts
@@ -1,4 +1,4 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material'
+import { FilledInputProps, InputProps, TextFieldProps as MuiTextFieldProps, OutlinedInputProps } from '@mui/material'
 import { InputBaseComponentProps } from '@mui/material'
 import { NumberFormatProps } from 'react-number-format'
 
@@ -63,7 +63,7 @@ export type NumberTextFieldProps = InputBaseComponentProps &
     thousandSeparator?: string | boolean
   }
 
-export type TextFieldProps = Omit<MuiTextFieldProps, 'onChange' | 'variant'> &
+export type TextFieldProps = Omit<MuiTextFieldProps, 'onChange' | 'variant' | 'InputProps'> &
   NumberTextFieldProps & {
     /**
      * Callback fired when the value is changed.
@@ -77,11 +77,18 @@ export type TextFieldProps = Omit<MuiTextFieldProps, 'onChange' | 'variant'> &
      */
     isNumeric?: boolean
     /**
-     * Start adornment of component. (Usually an InputAdornment from Material-UI)
+     * Props applied to the Input element.
+     */
+    InputProps?:
+      | Omit<Partial<FilledInputProps>, 'startAdornment' | 'endAdornment'>
+      | Omit<Partial<OutlinedInputProps>, 'startAdornment' | 'endAdornment'>
+      | Omit<Partial<InputProps>, 'startAdornment' | 'endAdornment'>
+    /**
+     * Start adornment of component.
      */
     startAdornment?: React.ReactNode
     /**
-     * End adornment of component. (Usually an InputAdornment from Material-UI)
+     * End adornment of component.
      */
     endAdornment?: React.ReactNode
     /**

diff --git a/src/stories/inputs/TextField/ClearablePreview.tsx b/src/stories/inputs/TextField/ClearablePreview.tsx
@@ -2,8 +2,10 @@
 // This source code is licensed under the MIT license.
 
 import React, { useState } from 'react'
-import { TextField } from 'components'
+import { IconButton, TextField, Typography } from 'components'
 import { Grid } from '@mui/material'
+import AssignmentIcon from '@mui/icons-material/Assignment'
+import SaveIcon from '@mui/icons-material/Save'
 
 const ClearablePreview = () => {
   const [clearableValue, setClearableValue] = useState('can be cleared')
@@ -14,6 +16,9 @@ const ClearablePreview = () => {
 
   return (
     <Grid container spacing={4} justifyItems={'flex-start'}>
+      <Grid item xs={12}>
+        <Typography>Variants:</Typography>
+      </Grid>
       <Grid item xs={4}>
         <TextField
           label="Standard (default)"
@@ -43,6 +48,29 @@ const ClearablePreview = () => {
           isClearable
         />
       </Grid>
+      <Grid item xs={12}>
+        <Typography>With end adornments:</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <TextField
+          label="Filled"
+          variant="filled"
+          fullWidth
+          value={clearableValue || ''}
+          onChange={handleClearable}
+          isClearable
+          endAdornment={
+            <>
+              <IconButton tooltip="Copy" variant="text" size="tiny" color="primary">
+                <AssignmentIcon fontSize="small" />
+              </IconButton>
+              <IconButton tooltip="Save" variant="text" size="tiny" color="primary">
+                <SaveIcon fontSize="small" />
+              </IconButton>
+            </>
+          }
+        />
+      </Grid>
     </Grid>
   )
 }