From 962ebc136e451c7254b640a67321d415d6526695 Mon Sep 17 00:00:00 2001 From: Bill Keese Date: Wed, 14 Feb 2024 05:26:27 +0900 Subject: [PATCH] fix: TableToolbarSearch parameter types (#15422) * fix: tabletoolbarsearch parameters Fix TableToolbarSearch parameters, in particular missing closeButtonLabelText. Also refactor the code as done in @types/carbon-components-react: Make TableToolbarSearch parameters extend SearchParameters. IMO the TableToolbarSearch parameters have a lot of unnecessary differences from the Search parameters, but I didn't change that in this commit. One open question is why the initial expandedState is based on defaultValue. That seems like a mistake. If it is, I can roll it back in this PR. Refs #14471. * chore: remove todo, i guess current code makes sense --------- Co-authored-by: TJ Egan --- .../DataTable/TableToolbarSearch.tsx | 93 ++++++++----------- 1 file changed, 40 insertions(+), 53 deletions(-) diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.tsx b/packages/react/src/components/DataTable/TableToolbarSearch.tsx index d23f0d5d6208..71a276523246 100644 --- a/packages/react/src/components/DataTable/TableToolbarSearch.tsx +++ b/packages/react/src/components/DataTable/TableToolbarSearch.tsx @@ -17,12 +17,18 @@ import React, { ReactNode, RefObject, } from 'react'; -import Search from '../Search'; +import Search, { SearchProps } from '../Search'; import setupGetInstanceId from './tools/instanceId'; import { usePrefix } from '../../internal/usePrefix'; import { noopFn } from '../../internal/noopFn'; +import { InternationalProps } from '../../types/common'; const getInstanceId = setupGetInstanceId(); + +export type TableToolbarTranslationKey = + | 'carbon.table.toolbar.search.label' + | 'carbon.table.toolbar.search.placeholder'; + const translationKeys = { 'carbon.table.toolbar.search.label': 'Filter table', 'carbon.table.toolbar.search.placeholder': 'Filter table', @@ -32,14 +38,23 @@ const translateWithId = (id: string): string => { return translationKeys[id]; }; -export interface TableToolbarSearchProps { - children?: ReactNode; +type ExcludedInheritedProps = + | 'defaultValue' + | 'labelText' + | 'onBlur' + | 'onChange' + | 'onExpand' + | 'onFocus' + | 'tabIndex'; - /** - * Provide an optional class name for the search container - */ - className?: string; +export type TableToolbarSearchHandleExpand = ( + event: FocusEvent, + newValue?: boolean +) => void; +export interface TableToolbarSearchProps + extends Omit, + InternationalProps { /** * Specifies if the search should initially render in an expanded state */ @@ -50,35 +65,25 @@ export interface TableToolbarSearchProps { */ defaultValue?: string; - /** - * Specifies if the search should be disabled - */ - disabled?: boolean; - /** * Specifies if the search should expand */ expanded?: boolean; - /** - * Provide an optional id for the search container - */ - id?: string; - /** * Provide an optional label text for the Search component icon */ - labelText?: string; + labelText?: ReactNode; /** * Provide an optional function to be called when the search input loses focus, this will be * passed the event as the first parameter and a function to handle the expanding of the search * input as the second */ - onBlur?: ( + onBlur?( event: FocusEvent, - handleExpand: (event: FocusEvent, value: boolean) => void - ) => void; + handleExpand: TableToolbarSearchHandleExpand + ): void; /** * Provide an optional hook that is called each time the input is updated @@ -88,54 +93,32 @@ export interface TableToolbarSearchProps { value?: string ) => void; - /** - * Optional callback called when the search value is cleared. - */ - onClear?: () => void; - /** * Provide an optional hook that is called each time the input is expanded */ - onExpand?: (event: FocusEvent, value: boolean) => void; + onExpand?(event: FocusEvent, newExpand: boolean): void; /** * Provide an optional function to be called when the search input gains focus, this will be * passed the event as the first parameter and a function to handle the expanding of the search * input as the second. */ - onFocus?: ( + onFocus?( event: FocusEvent, - handleExpand: (event: FocusEvent, value: boolean) => void - ) => void; + handleExpand: TableToolbarSearchHandleExpand + ): void; /** - * Whether the search should be allowed to expand + * Whether the search should be allowed to expand. */ persistent?: boolean; - /** - * Provide an optional placeholder text for the Search component - */ - placeholder?: string; - /** * Provide an optional className for the overall container of the Search */ searchContainerClass?: string; - /** - * Specify the size of the Search - */ - size?: 'sm' | 'md' | 'lg'; - - /** - * Optional prop to specify the tabIndex of the (in expanded state) or the container (in collapsed state) - */ tabIndex?: number | string; - /** - * Provide custom text for the component for each translation id - */ - translateWithId?: (id: string) => string; } const TableToolbarSearch = ({ @@ -160,9 +143,11 @@ const TableToolbarSearch = ({ ...rest }: TableToolbarSearchProps) => { const { current: controlled } = useRef(expandedProp !== undefined); - const [expandedState, setExpandedState] = useState< - string | boolean | undefined - >(defaultExpanded || defaultValue); + + const [expandedState, setExpandedState] = useState( + Boolean(defaultExpanded || defaultValue) + ); + const expanded = controlled ? expandedProp : expandedState; const [value, setValue] = useState(defaultValue || ''); const uniqueId = useMemo(getInstanceId, []); @@ -218,8 +203,10 @@ const TableToolbarSearch = ({ } }; - const handleOnFocus = (event) => handleExpand(event, true); - const handleOnBlur = (event) => !value && handleExpand(event, false); + const handleOnFocus = (event: FocusEvent) => + handleExpand(event, true); + const handleOnBlur = (event: FocusEvent) => + !value && handleExpand(event, false); return (