Merge pull request #85 from osstotalsoft/textfield-adornment-overwrit…

…e-fix TextFields adornments no longer overwriting base ones (stepper and clearable)
osstotalsoft · Nov 9, 2023 · 79d4332 · 79d4332
2 parents e6fe3f4 + d4c406f
commit 79d4332
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 67 deletions.
diff --git a/src/components/inputs/DateTime/DateTime.tsx b/src/components/inputs/DateTime/DateTime.tsx
@@ -101,21 +101,29 @@ const DateTime: React.FC<DateTimeProps> = ({
           required={required}
           error={error}
           helperText={helperText}
-          InputProps={{
-            endAdornment: (
-              <DateTimeEndAdornment
-                isClearable={internalIsClearable}
-                onClear={handleClear}
-                onOpen={handleOpen}
-                OpenPickerIcon={OpenPickerIcon}
-                disabled={disabled}
-              />
-            )
-          }}
+          endAdornment={
+            <DateTimeEndAdornment
+              isClearable={internalIsClearable}
+              onClear={handleClear}
+              onOpen={handleOpen}
+              OpenPickerIcon={OpenPickerIcon}
+              disabled={disabled}
+            />
+          }
         />
       )
     },
-    [disabled, error, handleClear, handleOpen, helperText, inputProps, required, internalIsClearable, mergedComponents.OpenPickerIcon]
+    [
+      disabled,
+      error,
+      handleClear,
+      handleOpen,
+      helperText,
+      inputProps,
+      required,
+      internalIsClearable,
+      mergedComponents.OpenPickerIcon
+    ]
   )
 
   const localeUsed = useMemo(() => localeMap[format] ?? adapterLocale ?? localeMap.ro, [format, adapterLocale])

diff --git a/src/components/inputs/DateTime/DateTimeEndAdornment.tsx b/src/components/inputs/DateTime/DateTimeEndAdornment.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputAdornment from '@mui/material/InputAdornment'
 import { ClearSmallIcon, IconButton } from './DateTimeStyles'
 import { DateTimeEndAdornmentProps } from './types'
 
 const DateTimeEndAdornment = ({ isClearable, onClear, onOpen, OpenPickerIcon, disabled }: DateTimeEndAdornmentProps) => {
   return (
-    <InputAdornment position="end">
+    <>
       {isClearable && (
         <IconButton onClick={onClear} disabled={disabled} aria-label="Clear">
           <ClearSmallIcon />
@@ -15,7 +14,7 @@ const DateTimeEndAdornment = ({ isClearable, onClear, onOpen, OpenPickerIcon, di
       <IconButton onClick={onOpen} disabled={disabled} aria-label="Open">
         <OpenPickerIcon />
       </IconButton>
-    </InputAdornment>
+    </>
   )
 }
 

diff --git a/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx b/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx
@@ -1,23 +1,53 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputAdornment from '@mui/material/InputAdornment'
 import { FullTextFilterEndAdornmentProps } from './types'
 import FilterListIcon from '@mui/icons-material/FilterList'
 import { IconButton } from '../../../components'
 
-const FullTextFilterEndAdornment = ({ localizedStrings, resetTextFilter, expandFilters, expanded, openVisibleFiltersMenu, hasChildren, hasVisibleFilters } : FullTextFilterEndAdornmentProps) => {
+const FullTextFilterEndAdornment = ({
+  localizedStrings,
+  resetTextFilter,
+  expandFilters,
+  expanded,
+  openVisibleFiltersMenu,
+  hasChildren,
+  hasVisibleFilters
+}: FullTextFilterEndAdornmentProps) => {
   return (
-  <InputAdornment position="end">
-    <IconButton size='small' type='cancel' color='transparent' aria-label='Reset Filters' aria-description={localizedStrings.ResetFilters} tooltip={localizedStrings.ResetFilters} onClick={resetTextFilter} />
-    {hasChildren && (
-      <IconButton size='small' type={expanded ? 'expandLess': 'expandMore'} color='transparent' aria-label='Show Filters' aria-description={localizedStrings.ShowFilters} tooltip={localizedStrings.ShowFilters} onClick={expandFilters} />
-    )}
-    {hasChildren && expanded && hasVisibleFilters && (
-      <IconButton size='small' color='transparent' aria-label='Visible Filters' aria-description={localizedStrings.ChooseFilters} tooltip={localizedStrings.ChooseFilters} onClick={openVisibleFiltersMenu}>
-        <FilterListIcon/>
-      </IconButton>
-    )}
-  </InputAdornment>
+    <>
+      <IconButton
+        size="small"
+        type="cancel"
+        color="transparent"
+        aria-label="Reset Filters"
+        aria-description={localizedStrings.ResetFilters}
+        tooltip={localizedStrings.ResetFilters}
+        onClick={resetTextFilter}
+      />
+      {hasChildren && (
+        <IconButton
+          size="small"
+          type={expanded ? 'expandLess' : 'expandMore'}
+          color="transparent"
+          aria-label="Show Filters"
+          aria-description={localizedStrings.ShowFilters}
+          tooltip={localizedStrings.ShowFilters}
+          onClick={expandFilters}
+        />
+      )}
+      {hasChildren && expanded && hasVisibleFilters && (
+        <IconButton
+          size="small"
+          color="transparent"
+          aria-label="Visible Filters"
+          aria-description={localizedStrings.ChooseFilters}
+          tooltip={localizedStrings.ChooseFilters}
+          onClick={openVisibleFiltersMenu}
+        >
+          <FilterListIcon />
+        </IconButton>
+      )}
+    </>
   )
 }
 

diff --git a/src/components/inputs/ListFilter/ListFilter.tsx b/src/components/inputs/ListFilter/ListFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import { TextField, Autocomplete, Button, Dialog } from '../../../components'
-import { Toolbar, Collapse, Menu, MenuItem, InputAdornment, Grid } from '@mui/material'
+import { Toolbar, Collapse, Menu, MenuItem, Grid } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
 import { ListFilterProps, UserPreference } from './types'
 import UserPreferencesModalContent from './UserPreferencesModalContent'
@@ -224,24 +224,18 @@ const ListFilter: React.FC<ListFilterProps> = ({
                   maxLength: searchTextMaxLength,
                   placeholder: searchPlaceholder
                 }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <SearchIcon />
-                    </InputAdornment>
-                  ),
-                  endAdornment: (
-                    <FullTextFilterEndAdornment
-                      localizedStrings={localizedStrings}
-                      resetTextFilter={resetTextFilter}
-                      expandFilters={expandFilters}
-                      expanded={expanded}
-                      openVisibleFiltersMenu={openVisibleFiltersMenu}
-                      hasChildren={hasChildren}
-                      hasVisibleFilters={hasVisibleFilters}
-                    />
-                  )
-                }}
+                startAdornment={<SearchIcon />}
+                endAdornment={
+                  <FullTextFilterEndAdornment
+                    localizedStrings={localizedStrings}
+                    resetTextFilter={resetTextFilter}
+                    expandFilters={expandFilters}
+                    expanded={expanded}
+                    openVisibleFiltersMenu={openVisibleFiltersMenu}
+                    hasChildren={hasChildren}
+                    hasVisibleFilters={hasVisibleFilters}
+                  />
+                }
               />
             </Grid>
           )}

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,17 +174,32 @@ 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 = {
     className: `${isStepper && !fullWidth ? classes.stepperFixedWidth : ''}`,
     ...InputProps,
+    startAdornment: internalStartAdornment,
+    endAdornment: internalEndAdornment,
     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>
   )
 }