fix(SearchFilter): enhance props with pt for customization

ynput · Jan 13, 2025 · e2df563 · e2df563
1 parent ca9c418
commit e2df563
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/src/SearchFilter/SearchFilter.tsx b/src/SearchFilter/SearchFilter.tsx
@@ -1,7 +1,7 @@
 import { FC, useRef, useState } from 'react'
 import { Filter, FilterOperator, Option } from './types'
 import * as Styled from './SearchFilter.styled'
-import { SearchFilterItem } from './SearchFilterItem'
+import { SearchFilterItem, SearchFilterItemProps } from './SearchFilterItem'
 import SearchFilterDropdown, {
   getIsValueSelected,
   SearchFilterDropdownProps,
@@ -14,7 +14,7 @@ import { Icon } from '../Icon'
 
 const sortSelectedToTopFields = ['assignee', 'taskType']
 
-export interface SearchFilterProps {
+export interface SearchFilterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   filters: Filter[]
   onChange: (filters: Filter[]) => void
   options: Option[]
@@ -23,6 +23,12 @@ export interface SearchFilterProps {
   allowMultipleSameFilters?: boolean
   disabledFilters?: string[] // filters that should be disabled from adding, editing, or removing
   preserveOrderFields?: string[]
+  pt?: {
+    dropdown?: SearchFilterDropdownProps
+    item?: SearchFilterItemProps
+    searchBar?: React.HTMLAttributes<HTMLDivElement>
+    backdrop?: React.HTMLAttributes<HTMLDivElement>
+  }
 }
 
 export const SearchFilter: FC<SearchFilterProps> = ({
@@ -34,6 +40,13 @@ export const SearchFilter: FC<SearchFilterProps> = ({
   allowMultipleSameFilters = false,
   disabledFilters,
   preserveOrderFields,
+  pt = {
+    dropdown: {},
+    item: {},
+    searchBar: {},
+    backdrop: {},
+  },
+  ...props
 }) => {
   const filtersRef = useRef<HTMLDivElement>(null)
   const dropdownRef = useRef<HTMLUListElement>(null)
@@ -290,12 +303,13 @@ export const SearchFilter: FC<SearchFilterProps> = ({
   }
 
   return (
-    <Styled.Container onKeyDown={handleContainerKeyDown}>
+    <Styled.Container onKeyDown={handleContainerKeyDown} {...props}>
       {dropdownOptions && <Styled.Backdrop onClick={() => handleClose(filters)} />}
       <Styled.SearchBar
         onClick={openInitialOptions}
         onKeyDown={handleSearchBarKeyDown}
         tabIndex={0}
+        {...pt.searchBar}
       >
         <Icon icon="search" className="search" />
         <Styled.SearchBarFilters ref={filtersRef}>
@@ -316,6 +330,7 @@ export const SearchFilter: FC<SearchFilterProps> = ({
               onEdit={handleEditFilter}
               onRemove={handleRemoveFilter}
               onInvert={handleInvertFilter}
+              {...pt.item}
             />
           ))}
         </Styled.SearchBarFilters>
@@ -343,6 +358,7 @@ export const SearchFilter: FC<SearchFilterProps> = ({
           onConfirmAndClose={handleConfirmAndClose}
           onSwitchFilter={handleSwitchFilterFocus}
           ref={dropdownRef}
+          {...pt.dropdown}
         />
       )}
     </Styled.Container>

diff --git a/src/SearchFilter/SearchFilterDropdown/SearchFilterDropdown.tsx b/src/SearchFilter/SearchFilterDropdown/SearchFilterDropdown.tsx
@@ -33,6 +33,10 @@ export interface SearchFilterDropdownProps {
   onOperatorChange?: (id: string, operator: FilterOperator) => void // change the operator
   onConfirmAndClose?: (filters: Filter[], config?: OnSelectConfig) => void // close the dropdown and update the filters
   onSwitchFilter?: (direction: 'left' | 'right') => void // switch to the next filter to edit
+  pt?: {
+    search?: React.HTMLAttributes<HTMLDivElement>
+    item?: React.HTMLAttributes<HTMLLIElement>
+  }
 }
 
 const SearchFilterDropdown = forwardRef<HTMLUListElement, SearchFilterDropdownProps>(
@@ -53,6 +57,8 @@ const SearchFilterDropdown = forwardRef<HTMLUListElement, SearchFilterDropdownPr
       onOperatorChange,
       onConfirmAndClose,
       onSwitchFilter,
+      pt = { search: {}, item: {} },
+      ...props
     },
     ref,
   ) => {
@@ -249,10 +255,10 @@ const SearchFilterDropdown = forwardRef<HTMLUListElement, SearchFilterDropdownPr
     }
 
     return (
-      <Styled.OptionsContainer onKeyDown={handleKeyDown}>
+      <Styled.OptionsContainer onKeyDown={handleKeyDown} {...props}>
         <Styled.Scrollable>
           <Styled.OptionsList ref={ref}>
-            <Styled.SearchContainer className="search">
+            <Styled.SearchContainer {...pt.search} className={clsx('search', pt.search?.className)}>
               <Styled.SearchInput
                 value={search}
                 onChange={(event) => setSearch(event.target.value)}
@@ -282,6 +288,7 @@ const SearchFilterDropdown = forwardRef<HTMLUListElement, SearchFilterDropdownPr
                   tabIndex={0}
                   className={clsx({ selected: isSelected })}
                   onClick={(event) => handleSelectOption(event)}
+                  {...pt.item}
                 >
                   {icon && <Icon icon={icon as IconType} style={{ color: adjustedColor }} />}
                   {img && <img src={img} alt={label} />}

diff --git a/src/SearchFilter/SearchFilterItem.tsx b/src/SearchFilter/SearchFilterItem.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import styled from 'styled-components'
 import { Filter } from './types'
-import { SearchFilterItemValue } from './SearchFilterItemValue'
+import { SearchFilterItemValue, SearchFilterItemValueProps } from './SearchFilterItemValue'
 import clsx from 'clsx'
 import { Button, theme } from '..'
 
@@ -64,14 +64,19 @@ const ChipButton = styled(Button)`
   }
 `
 
-interface SearchFilterItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>, Filter {
+export interface SearchFilterItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>,
+    Filter {
   index?: number
   isEditing?: boolean
   isInvertedAllowed?: boolean
   isDisabled?: boolean
   onEdit?: (id: string) => void
   onRemove?: (id: string) => void
   onInvert?: (id: string) => void
+  pt?: {
+    value?: SearchFilterItemValueProps
+  }
 }
 
 export const SearchFilterItem = forwardRef<HTMLDivElement, SearchFilterItemProps>(
@@ -93,6 +98,7 @@ export const SearchFilterItem = forwardRef<HTMLDivElement, SearchFilterItemProps
       onRemove,
       onInvert,
       onClick,
+      pt = { value: {} },
       ...props
     },
     ref,
@@ -146,7 +152,11 @@ export const SearchFilterItem = forwardRef<HTMLDivElement, SearchFilterItemProps
           tabIndex={0}
           onKeyDown={handleKeyDown}
           onClick={handleClick}
-          className={clsx('search-filter-item', { editing: isEditing, disabled: isDisabled })}
+          {...props}
+          className={clsx('search-filter-item', props.className, {
+            editing: isEditing,
+            disabled: isDisabled,
+          })}
         >
           <ChipButton
             className={clsx('button', { disabled: !isInvertedAllowed })}
@@ -158,14 +168,15 @@ export const SearchFilterItem = forwardRef<HTMLDivElement, SearchFilterItemProps
           {values?.map((value, index) => (
             <SearchFilterItemValue
               key={(value.id || '') + index}
-              id={value.id}
-              label={value.label}
               img={value.img}
               icon={value.icon}
               color={value.color}
               isCustom={value.isCustom}
               operator={index > 0 ? operator : undefined}
               isCompact={values.length > 1 && (!!value.icon || !!value.img)}
+              {...pt.value}
+              id={value.id}
+              label={value.label}
             />
           ))}
           {onRemove && <ChipButton className="button remove" icon="close" onClick={handleRemove} />}

diff --git a/src/SearchFilter/SearchFilterItemValue.tsx b/src/SearchFilter/SearchFilterItemValue.tsx
@@ -37,7 +37,7 @@ const Operator = styled.span`
   align-items: center;
 `
 
-interface SearchFilterItemValueProps
+export interface SearchFilterItemValueProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'id'>,
     FilterValue {
   operator?: FilterOperator
@@ -52,7 +52,11 @@ export const SearchFilterItemValue = forwardRef<HTMLDivElement, SearchFilterItem
     return (
       <>
         {operator && <Operator>{operator.toLowerCase()}</Operator>}
-        <ValueChip {...props} ref={ref} className={clsx({ compact: isCompact, custom: isCustom })}>
+        <ValueChip
+          {...props}
+          ref={ref}
+          className={clsx(props.className, { compact: isCompact, custom: isCustom })}
+        >
           {icon && (
             <Icon
               icon={icon as IconType}