diff --git a/src/components/ui/select/select.component.tsx b/src/components/ui/select/select.component.tsx index 51a26a17e..78f9801d2 100644 --- a/src/components/ui/select/select.component.tsx +++ b/src/components/ui/select/select.component.tsx @@ -18,6 +18,7 @@ import { TextStyle, View, ViewProps, + TextInput, } from 'react-native'; import { ChildrenWithProps, @@ -75,6 +76,8 @@ export type SelectElement = React.ReactElement; interface State { listVisible: boolean; + searchQuery: string; + filteredOptions: string[]; } const CHEVRON_DEG_COLLAPSED = -180; @@ -219,6 +222,8 @@ export class Select extends React.Component { public state: State = { listVisible: false, + searchQuery: '', + filteredOptions: [] }; private service: SelectService = new SelectService(); @@ -229,9 +234,16 @@ export class Select extends React.Component { } private get data(): Array> { - return React.Children.toArray(this.props.children || []); + const options = React.Children.toArray(this.props.children || []); + if (this.state.searchQuery) { + return options.filter((option) => + option.toString().toLowerCase().includes(this.state.searchQuery.toLowerCase()) + ); + } + return options; } + private get selectedIndices(): IndexPath[] { if (!this.props.selectedIndex) { return []; @@ -258,10 +270,25 @@ export class Select extends React.Component { return this.state.listVisible; }; + + public onSearch = (): void => { + const { searchQuery, filteredOptions } = this.state; + const filtered = filteredOptions.filter((option: string) => + option.toLowerCase().includes(searchQuery.toLowerCase()) + ); + this.setState({ filteredOptions: filtered }); + }; + + + public handleSearch = (query: string): void => { + this.setState({ searchQuery: query }, this.onSearch); + }; + public clear = (): void => { this.props.onSelect?.(null); }; + private onMouseEnter = (event: NativeSyntheticEvent): void => { this.props.eva.dispatch([Interaction.HOVER]); this.props.onMouseEnter?.(event); @@ -305,6 +332,7 @@ export class Select extends React.Component { }); }; + private onListInvisible = (): void => { this.props.eva.dispatch([]); this.createExpandAnimation(CHEVRON_DEG_EXPANDED).start(() => { @@ -473,6 +501,20 @@ export class Select extends React.Component { ); }; + private renderSearchInput = (): React.ReactElement => { + return ( + + ); + }; + + + + public render(): React.ReactElement { const { eva, style, label, caption, children, ...touchableProps } = this.props; const evaStyle = this.getComponentStyle(eva.style); @@ -490,12 +532,15 @@ export class Select extends React.Component { anchor={() => this.renderInputElement(touchableProps, evaStyle)} onBackdropPress={this.onBackdropPress} > - + <> + {this.renderSearchInput()} + +