kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
custom fuzzy search
Siddharth Singh
rodzic
fee112b4f0
commit
9153c5e4a6
|
|
@ -0,0 +1,260 @@
|
||||||
|
/* eslint-disable tailwindcss/no-custom-classname */
|
||||||
|
import FuzzySearch from 'fuzzy-search';
|
||||||
|
import React, { useState, useRef, useCallback, useEffect, useId } from 'react';
|
||||||
|
|
||||||
|
// (Keep the FuzzySearchInputProps interface and defaultSearch function as before)
|
||||||
|
interface FuzzySearchInputProps<T> {
|
||||||
|
/** The array of objects or strings to search through. */
|
||||||
|
data: T[];
|
||||||
|
/** An array of keys within the objects in `data` to search against. Ignored if `data` is string[]. */
|
||||||
|
keys: (keyof T)[];
|
||||||
|
/** Callback function invoked when an item is selected from the suggestions. */
|
||||||
|
onSelection: (selection: T | null) => void;
|
||||||
|
/** Optional: The key to display in the suggestion list. Defaults to the first key in the `keys` prop or the item itself if data is string[]. */
|
||||||
|
displayKey?: keyof T;
|
||||||
|
/** Optional: Placeholder text for the input field. */
|
||||||
|
placeholder?: string;
|
||||||
|
/** Optional: Custom search function to override the default fuzzy search. */
|
||||||
|
searchFn?: (data: T[], query: string, keys: (keyof T)[]) => T[];
|
||||||
|
/** Optional: Custom class name for the main container div */
|
||||||
|
className?: string;
|
||||||
|
/** Optional: Custom class name for the input element */
|
||||||
|
inputClassName?: string;
|
||||||
|
/** Optional: Custom class name for the suggestions dropdown ul element */
|
||||||
|
suggestionsClassName?: string;
|
||||||
|
/** Optional: Custom class name for individual suggestion li elements */
|
||||||
|
suggestionItemClassName?: string;
|
||||||
|
/** Optional: Custom class name for the active suggestion li element */
|
||||||
|
activeSuggestionItemClassName?: string;
|
||||||
|
/** Optional: Base ID for accessibility attributes. A unique ID will be generated if not provided. */
|
||||||
|
baseId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default fuzzy search implementation
|
||||||
|
const defaultSearch = <T,>(data: T[], query: string, keys: (keyof T)[]): T[] => {
|
||||||
|
if (!query) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const searcher = new FuzzySearch(data as any[], keys as string[], {
|
||||||
|
caseSensitive: false,
|
||||||
|
sort: true,
|
||||||
|
});
|
||||||
|
return searcher.search(query);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function FuzzySearchInput<T extends Record<string, any> | string>({
|
||||||
|
data,
|
||||||
|
keys,
|
||||||
|
onSelection,
|
||||||
|
displayKey,
|
||||||
|
placeholder = 'Search...',
|
||||||
|
searchFn = defaultSearch,
|
||||||
|
className = '',
|
||||||
|
inputClassName = '',
|
||||||
|
suggestionsClassName = '',
|
||||||
|
suggestionItemClassName = '',
|
||||||
|
activeSuggestionItemClassName = 'active',
|
||||||
|
baseId, // Optional base ID from props
|
||||||
|
}: FuzzySearchInputProps<T>) {
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [suggestions, setSuggestions] = useState<T[]>([]);
|
||||||
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||||
|
const [activeIndex, setActiveIndex] = useState<number>(-1);
|
||||||
|
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
// Generate unique IDs for ARIA attributes if no baseId is provided
|
||||||
|
const generatedId = useId();
|
||||||
|
const componentBaseId = baseId ?? generatedId;
|
||||||
|
const inputId = `${componentBaseId}-input`;
|
||||||
|
const listboxId = `${componentBaseId}-listbox`;
|
||||||
|
const getOptionId = (index: number) => `${componentBaseId}-option-${index}`;
|
||||||
|
|
||||||
|
const getDisplayText = useCallback((item: T): string => {
|
||||||
|
if (typeof item === 'string') {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
const key = displayKey ?? keys[0];
|
||||||
|
return key ? String(item[key]) : 'Invalid displayKey';
|
||||||
|
}, [displayKey, keys]);
|
||||||
|
|
||||||
|
|
||||||
|
// --- Event Handlers ---
|
||||||
|
|
||||||
|
const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const query = event.target.value;
|
||||||
|
setInputValue(query);
|
||||||
|
setActiveIndex(-1);
|
||||||
|
|
||||||
|
if (query.trim()) {
|
||||||
|
const results = searchFn(data, query, keys);
|
||||||
|
setSuggestions(results);
|
||||||
|
// Only show suggestions if there are results
|
||||||
|
setShowSuggestions(results.length > 0);
|
||||||
|
} else {
|
||||||
|
setSuggestions([]);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
onSelection(null);
|
||||||
|
}
|
||||||
|
}, [searchFn, data, keys, onSelection]);
|
||||||
|
|
||||||
|
const handleSelectSuggestion = useCallback((suggestion: T) => {
|
||||||
|
setInputValue(getDisplayText(suggestion));
|
||||||
|
setSuggestions([]);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
setActiveIndex(-1);
|
||||||
|
onSelection(suggestion);
|
||||||
|
// Optionally focus the input again if needed, though blur might occur naturally
|
||||||
|
// containerRef.current?.querySelector('input')?.focus();
|
||||||
|
}, [getDisplayText, onSelection]);
|
||||||
|
|
||||||
|
// This function now primarily handles keyboard navigation *within* the list
|
||||||
|
const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
const listIsVisible = showSuggestions && suggestions.length > 0;
|
||||||
|
|
||||||
|
if (event.key === 'ArrowDown') {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!listIsVisible) {
|
||||||
|
// If list isn't visible but there's input, try searching/showing
|
||||||
|
if (inputValue.trim()) {
|
||||||
|
const results = searchFn(data, inputValue.trim(), keys);
|
||||||
|
if (results.length > 0) {
|
||||||
|
setSuggestions(results);
|
||||||
|
setShowSuggestions(true);
|
||||||
|
setActiveIndex(0); // Start at the first item
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setActiveIndex((prevIndex) =>
|
||||||
|
prevIndex >= suggestions.length - 1 ? 0 : prevIndex + 1,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else if (event.key === 'ArrowUp') {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!listIsVisible) return;
|
||||||
|
setActiveIndex((prevIndex) =>
|
||||||
|
prevIndex <= 0 ? suggestions.length - 1 : prevIndex - 1,
|
||||||
|
);
|
||||||
|
} else if (event.key === 'Enter') {
|
||||||
|
if (!listIsVisible || activeIndex < 0) return;
|
||||||
|
event.preventDefault();
|
||||||
|
handleSelectSuggestion(suggestions[activeIndex]);
|
||||||
|
} else if (event.key === 'Escape') {
|
||||||
|
if (!listIsVisible) return;
|
||||||
|
event.preventDefault();
|
||||||
|
setShowSuggestions(false);
|
||||||
|
setActiveIndex(-1);
|
||||||
|
setSuggestions([]); // Clear suggestions on escape
|
||||||
|
}
|
||||||
|
}, [showSuggestions, suggestions, activeIndex, handleSelectSuggestion, inputValue, searchFn, data, keys]);
|
||||||
|
|
||||||
|
const handleBlur = useCallback(() => {
|
||||||
|
// Delay hiding to allow clicks on options
|
||||||
|
setTimeout(() => {
|
||||||
|
// Check if focus is still somehow within the container (e.g., clicked an option)
|
||||||
|
// If focus moved outside, hide the list.
|
||||||
|
if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
|
||||||
|
setShowSuggestions(false);
|
||||||
|
// Don't reset activeIndex here, selection might have happened
|
||||||
|
}
|
||||||
|
}, 150);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// --- Click Outside Detection ---
|
||||||
|
// (Keep the useEffect for handleClickOutside as before)
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||||
|
setShowSuggestions(false);
|
||||||
|
// Don't reset activeIndex here, allows inspection if needed
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// --- Rendering ---
|
||||||
|
const listIsVisible = showSuggestions && suggestions.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className={`fuzzy-search-input-container ${className}`}
|
||||||
|
style={{ position: 'relative' }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id={inputId} // ID for input
|
||||||
|
type='text'
|
||||||
|
value={inputValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyDown={handleKeyDown} // Keyboard interactions handled here
|
||||||
|
onBlur={handleBlur}
|
||||||
|
placeholder={placeholder}
|
||||||
|
autoComplete='off'
|
||||||
|
className={`fuzzy-search-input ${inputClassName}`}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
// ARIA attributes for Combobox pattern
|
||||||
|
role='combobox'
|
||||||
|
aria-autocomplete='list'
|
||||||
|
aria-controls={listIsVisible ? listboxId : undefined} // Control listbox only when visible
|
||||||
|
aria-expanded={listIsVisible}
|
||||||
|
aria-haspopup='listbox'
|
||||||
|
aria-activedescendant={activeIndex > -1 ? getOptionId(activeIndex) : undefined} // Point to active option
|
||||||
|
/>
|
||||||
|
{listIsVisible && (
|
||||||
|
<ul
|
||||||
|
id={listboxId} // ID for listbox
|
||||||
|
role='listbox' // Role for the suggestions container
|
||||||
|
className={`fuzzy-search-suggestions ${suggestionsClassName}`}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '100%',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
background: 'white',
|
||||||
|
listStyle: 'none',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
maxHeight: '200px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
zIndex: 1000,
|
||||||
|
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
|
||||||
|
}}
|
||||||
|
// tabIndex={-1} // List itself shouldn't be directly tabbable usually
|
||||||
|
>
|
||||||
|
{suggestions.map((item, index) => {
|
||||||
|
const displayText = getDisplayText(item);
|
||||||
|
const isActive = index === activeIndex;
|
||||||
|
const optionId = getOptionId(index);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={optionId} // Use unique generated ID as key
|
||||||
|
id={optionId} // ID for this option
|
||||||
|
role='option' // Role for each suggestion item
|
||||||
|
aria-selected={isActive} // Indicate selection state for screen readers
|
||||||
|
// onClick IS appropriate here for mouse users selecting an option
|
||||||
|
onClick={() => handleSelectSuggestion(item)}
|
||||||
|
// onMouseEnter helps sync visual hover with keyboard activeIndex for usability
|
||||||
|
onMouseEnter={() => setActiveIndex(index)}
|
||||||
|
className={`${suggestionItemClassName} ${isActive ? activeSuggestionItemClassName : ''}`}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
backgroundColor: isActive ? '#eee' : 'transparent',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{displayText}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FuzzySearchInput;
|
||||||
Ładowanie…
Reference in New Issue