From 2a0afbeb4995ff8fcb3de59dbe981b57406a4d42 Mon Sep 17 00:00:00 2001 From: Angelo Statescu Date: Mon, 6 Nov 2023 13:41:27 +0200 Subject: [PATCH 1/3] TextFields adornments no longer overwriting base ones (stepper and clearable) --- src/components/inputs/TextField/TextField.tsx | 43 ++++++++++++------- src/components/inputs/TextField/types.ts | 15 +++++-- .../inputs/TextField/ClearablePreview.tsx | 30 ++++++++++++- 3 files changed, 68 insertions(+), 20 deletions(-) diff --git a/src/components/inputs/TextField/TextField.tsx b/src/components/inputs/TextField/TextField.tsx index 3b766db3..39274157 100644 --- 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 = ({ onClearInput, disabled }) => ( - - - - - + + + ) ClearButton.propTypes = { onClearInput: PropTypes.func, @@ -176,15 +174,30 @@ const TextField: React.FC = ({ if (nextValue <= maxValue) onChange(nextValue) }, [maxValue, onChange, step, value]) - const muiInputProps = { - startAdornment: isStepper ? : startAdornment, - endAdornment: isStepper ? ( - - ) : isClearable ? ( - - ) : ( - endAdornment + const internalStartAdornment = useMemo( + () => ( + + {isStepper && } + {startAdornment} + ), + [handleSubtract, isStepper, startAdornment] + ) + + const internalEndAdornment = useMemo( + () => ( + + {isStepper && } + {isClearable && } + {endAdornment} + + ), + [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 index d8ed4f3b..ce4d2194 100644 --- 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 & +export type TextFieldProps = Omit & NumberTextFieldProps & { /** * Callback fired when the value is changed. @@ -77,11 +77,18 @@ export type TextFieldProps = Omit & */ isNumeric?: boolean /** - * Start adornment of component. (Usually an InputAdornment from Material-UI) + * Props applied to the Input element. + */ + InputProps?: + | Omit, 'startAdornment' | 'endAdornment'> + | Omit, 'startAdornment' | 'endAdornment'> + | Omit, '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 index 1bb1bd2f..d8c31f1b 100644 --- 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 ( + + Variants: + { isClearable /> + + With end adornments: + + + + + + + + + + + } + /> + ) } From d813a716a9417a0806e284447ab8cc72be2dcbd2 Mon Sep 17 00:00:00 2001 From: Angelo Statescu Date: Mon, 6 Nov 2023 13:45:22 +0200 Subject: [PATCH 2/3] disallow adornment overwriting from InputProps --- src/components/inputs/TextField/TextField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/inputs/TextField/TextField.tsx b/src/components/inputs/TextField/TextField.tsx index 39274157..2e0f953a 100644 --- a/src/components/inputs/TextField/TextField.tsx +++ b/src/components/inputs/TextField/TextField.tsx @@ -196,10 +196,10 @@ const TextField: React.FC = ({ ) const muiInputProps = { - startAdornment: internalStartAdornment, - endAdornment: internalEndAdornment, className: `${isStepper && !fullWidth ? classes.stepperFixedWidth : ''}`, ...InputProps, + startAdornment: internalStartAdornment, + endAdornment: internalEndAdornment, style: InputProps?.style } From d4c406f8467f28853988d4b4f26d75cd7f432b5d Mon Sep 17 00:00:00 2001 From: Angelo Statescu Date: Mon, 6 Nov 2023 14:23:31 +0200 Subject: [PATCH 3/3] Fix ListFilter and DateTime adornment errors --- src/components/inputs/DateTime/DateTime.tsx | 32 +++++++---- .../inputs/DateTime/DateTimeEndAdornment.tsx | 5 +- .../ListFilter/FullTextFilterEndAdornment.tsx | 56 ++++++++++++++----- .../inputs/ListFilter/ListFilter.tsx | 32 +++++------ 4 files changed, 78 insertions(+), 47 deletions(-) diff --git a/src/components/inputs/DateTime/DateTime.tsx b/src/components/inputs/DateTime/DateTime.tsx index 98a9d78b..bf0b5632 100644 --- a/src/components/inputs/DateTime/DateTime.tsx +++ b/src/components/inputs/DateTime/DateTime.tsx @@ -101,21 +101,29 @@ const DateTime: React.FC = ({ required={required} error={error} helperText={helperText} - InputProps={{ - endAdornment: ( - - ) - }} + endAdornment={ + + } /> ) }, - [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 index 1321c64e..44de8748 100644 --- 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 ( - + <> {isClearable && ( @@ -15,7 +14,7 @@ const DateTimeEndAdornment = ({ isClearable, onClear, onOpen, OpenPickerIcon, di - + ) } diff --git a/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx b/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx index def97d8f..6a48d1c9 100644 --- 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 ( - - - {hasChildren && ( - - )} - {hasChildren && expanded && hasVisibleFilters && ( - - - - )} - + <> + + {hasChildren && ( + + )} + {hasChildren && expanded && hasVisibleFilters && ( + + + + )} + ) } diff --git a/src/components/inputs/ListFilter/ListFilter.tsx b/src/components/inputs/ListFilter/ListFilter.tsx index b98ff7af..5647a526 100644 --- 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 = ({ maxLength: searchTextMaxLength, placeholder: searchPlaceholder }} - InputProps={{ - startAdornment: ( - - - - ), - endAdornment: ( - - ) - }} + startAdornment={} + endAdornment={ + + } /> )}