Search box fixes (#4778)

fix: search box improvements
Joystream · Feb 15, 2024 · 043d886 · 043d886
1 parent 8dc3a1e
commit 043d886
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 40 deletions.
diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterBox.tsx
@@ -20,6 +20,7 @@ interface FilterBoxProps {
  children: React.ReactNode
  searchLabel?: string
  className?: string
+ minCharacterLimit?: number
 }
 
 export const FilterBox = ({
@@ -32,6 +33,7 @@ export const FilterBox = ({
  children,
  searchLabel,
  className,
+ minCharacterLimit,
 }: FilterBoxProps) => (
  <FilterContainer gap={8} className={className}>
  {isDefined(onClear) && (
@@ -49,6 +51,7 @@ export const FilterBox = ({
  onChange={onSearch}
  label={searchLabel}
  displayReset={displaySearchReset}
+ minCharacterLimit={minCharacterLimit}
  />
  )}
  {children}

diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx
@@ -16,9 +16,10 @@ interface FilterSearchBoxProps extends SearchBoxProps {
  slot: React.RefObject<HTMLDivElement>
  label?: string
  displayReset?: boolean
+ minCharacterLimit?: number
 }
 export const FilterSearchBox = React.memo(
- ({ value, slot, onApply, onChange, label, displayReset }: FilterSearchBoxProps) => {
+ ({ value, slot, onApply, onChange, label, displayReset, minCharacterLimit }: FilterSearchBoxProps) => {
  // Force the search box to render (sometime the ref is null on the first render)
  const [rendered, setRendered] = useState(!!slot.current)
  useEffect(() => {
@@ -28,7 +29,14 @@ export const FilterSearchBox = React.memo(
  return (
  slot.current &&
  createPortal(
- <SearchBox value={value} onApply={onApply} onChange={onChange} label={label} displayReset={displayReset} />,
+ <SearchBox
+ value={value}
+ onApply={onApply}
+ onChange={onChange}
+ label={label}
+ displayReset={displayReset}
+ minCharacterLimit={minCharacterLimit}
+ />,
  slot.current
  )
  )
@@ -39,40 +47,43 @@ interface SearchBoxProps extends ControlProps<string> {
  onApply?: () => void
  label?: string
  displayReset?: boolean
+ minCharacterLimit?: number
 }
-export const SearchBox = React.memo(({ value, onApply, onChange, label, displayReset }: SearchBoxProps) => {
- const debouncedValue = useDebounce(value, 300)
- const change = onChange && (({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value))
- const isValid = () => !debouncedValue || debouncedValue.length === 0 || debouncedValue.length > 2
- const keyDown =
- !isValid() || !debouncedValue || !onApply
- ? undefined
- : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply()
- const reset =
- onChange &&
- onApply &&
- (() => {
- onChange('')
- onApply()
- })
- return (
- <SearchBoxWrapper>
- <FilterLabel>{label}</FilterLabel>
- <SearchInput
- inputSize={label ? 'xs' : 's'}
- validation={isValid() ? undefined : 'invalid'}
- message={isValid() ? '' : 'Minimum of 3 characters is required'}
- >
- <InputText placeholder="Search" value={value} onChange={change} onKeyDown={keyDown} />
- {displayReset && value && (
- <ClearButton onClick={reset} size="small" borderless>
- <CrossIcon />
- </ClearButton>
- )}
- </SearchInput>
- </SearchBoxWrapper>
- )
-})
+export const SearchBox = React.memo(
+ ({ value, onApply, onChange, label, displayReset, minCharacterLimit = 3 }: SearchBoxProps) => {
+ const debouncedValue = useDebounce(value, 300)
+ const change = onChange && (({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value))
+ const isValid = () => !debouncedValue || debouncedValue.length === 0 || debouncedValue.length >= minCharacterLimit
+
+ const keyDown = !isValid() || !onApply ? undefined : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply()
+
+ const reset =
+ onChange &&
+ onApply &&
+ (() => {
+ onChange('')
+ onApply()
+ })
+
+ return (
+ <SearchBoxWrapper>
+ <FilterLabel>{label}</FilterLabel>
+ <SearchInput
+ inputSize={label ? 'xs' : 's'}
+ validation={isValid() ? undefined : 'invalid'}
+ message={isValid() ? '' : `Minimum of ${minCharacterLimit} characters is required`}
+ >
+ <InputText placeholder="Search" value={value} onChange={change} onKeyDown={keyDown} />
+ {displayReset && value && (
+ <ClearButton onClick={reset} size="small" borderless>
+ <CrossIcon />
+ </ClearButton>
+ )}
+ </SearchInput>
+ </SearchBoxWrapper>
+ )
+ }
+)
 
 const SearchBoxWrapper = styled.div`
  &:hover,

diff --git a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx
@@ -112,8 +112,7 @@ export interface MemberListFiltersProps {
 export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersProps) => {
  const [filters, dispatch] = useReducer(filterReducer, MemberListEmptyFilter)
  const searchSlot = useRef<HTMLDivElement>(null)
- const { search, roles, onlyCouncil, onlyFounder, onlyVerified } = filters
-
+ const { search, roles, onlyCouncil, onlyFounder, onlyVerified, searchFilter } = filters
  const applyFilters = () => onApply(filters)
  const clear = isFilterEmpty(filters)
  ? undefined
@@ -131,7 +130,7 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro
  <div ref={searchSlot}>
  <SimpleSelect
  options={searchFilterOptions}
- value={filters.searchFilter}
+ value={searchFilter}
  renderOption={renderSocialOption}
  onChange={(value: MemberSearchFilter | null) =>
  value && dispatch({ type: 'change', field: 'searchFilter', value })
@@ -144,6 +143,7 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro
  onApply={applyFilters}
  onClear={clear}
  onSearch={onSearch}
+ minCharacterLimit={searchFilter === 'Membership_ID' ? 1 : undefined}
  >
  <FieldsHeader>
  <ItemCount count={memberCount}>All members</ItemCount>

diff --git a/packages/ui/src/proposals/components/ProposalFilters/ProposalFilters.tsx b/packages/ui/src/proposals/components/ProposalFilters/ProposalFilters.tsx
@@ -40,12 +40,13 @@ const filterReducer = (filters: ProposalFiltersState, action: Action): ProposalF
  case 'change':
  return {
  ...filters,
- [action.field]: typeof action.value == 'string' ? toCamelCase(action.value) : action.value,
+ [action.field]:
+ action.field !== 'search' && typeof action.value === 'string' ? toCamelCase(action.value) : action.value,
  }
 
  case 'update':
  return {
- search: toCamelCase(action.value.search) || '',
+ search: action.value.search || '',
  stage: toCamelCase(action.value.stage),
  type: toCamelCase(action.value.type),
  lifetime: