Changeset View
Changeset View
Standalone View
Standalone View
native/chat/sidebar-list-modal.react.js
| Show All 25 Lines | function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) { | ||||
| return { length: 24, offset: 24 * index, index }; | return { length: 24, offset: 24 * index, index }; | ||||
| } | } | ||||
| type Props = { | type Props = { | ||||
| +navigation: RootNavigationProp<'SidebarListModal'>, | +navigation: RootNavigationProp<'SidebarListModal'>, | ||||
| +route: NavigationRoute<'SidebarListModal'>, | +route: NavigationRoute<'SidebarListModal'>, | ||||
| }; | }; | ||||
| function SidebarListModal(props: Props): React.Node { | function SidebarListModal(props: Props): React.Node { | ||||
| const { | const [searchText, setSearchText] = React.useState(''); | ||||
| listData, | const { listData, setSearchState, onChangeSearchText } = useSearchSidebars( | ||||
| searchState, | props.route.params.threadInfo, | ||||
| setSearchState, | searchText, | ||||
| onChangeSearchText, | setSearchText, | ||||
| } = useSearchSidebars(props.route.params.threadInfo); | ); | ||||
| const searchTextInputRef = React.useRef(); | const searchTextInputRef = React.useRef(); | ||||
| const setSearchTextInputRef = React.useCallback( | const setSearchTextInputRef = React.useCallback( | ||||
| async (textInput: ?React.ElementRef<typeof TextInput>) => { | async (textInput: ?React.ElementRef<typeof TextInput>) => { | ||||
| searchTextInputRef.current = textInput; | searchTextInputRef.current = textInput; | ||||
| if (!textInput) { | if (!textInput) { | ||||
| return; | return; | ||||
| } | } | ||||
| await waitForModalInputFocus(); | await waitForModalInputFocus(); | ||||
| if (searchTextInputRef.current) { | if (searchTextInputRef.current) { | ||||
| searchTextInputRef.current.focus(); | searchTextInputRef.current.focus(); | ||||
| } | } | ||||
| }, | }, | ||||
| [], | [], | ||||
| ); | ); | ||||
| const navigateToThread = useNavigateToThread(); | const navigateToThread = useNavigateToThread(); | ||||
| const onPressItem = React.useCallback( | const onPressItem = React.useCallback( | ||||
| (threadInfo: ThreadInfo) => { | (threadInfo: ThreadInfo) => { | ||||
| setSearchState({ | setSearchState(new Set()); | ||||
| text: '', | |||||
| results: new Set(), | |||||
| }); | |||||
| if (searchTextInputRef.current) { | if (searchTextInputRef.current) { | ||||
| searchTextInputRef.current.blur(); | searchTextInputRef.current.blur(); | ||||
| } | } | ||||
| navigateToThread({ threadInfo }); | navigateToThread({ threadInfo }); | ||||
| }, | }, | ||||
| [navigateToThread, setSearchState], | [navigateToThread, setSearchState], | ||||
| ); | ); | ||||
| Show All 9 Lines | const renderItem = React.useCallback( | ||||
| }, | }, | ||||
| [onPressItem], | [onPressItem], | ||||
| ); | ); | ||||
| const indicatorStyle = useIndicatorStyle(); | const indicatorStyle = useIndicatorStyle(); | ||||
| return ( | return ( | ||||
| <Modal> | <Modal> | ||||
| <Search | <Search | ||||
| searchText={searchState.text} | searchText={searchText} | ||||
| onChangeText={onChangeSearchText} | onChangeText={onChangeSearchText} | ||||
| containerStyle={styles.search} | containerStyle={styles.search} | ||||
| placeholder="Search sidebars" | placeholder="Search sidebars" | ||||
| ref={setSearchTextInputRef} | ref={setSearchTextInputRef} | ||||
| /> | /> | ||||
| <FlatList | <FlatList | ||||
| data={listData} | data={listData} | ||||
| renderItem={renderItem} | renderItem={renderItem} | ||||
| Show All 22 Lines | |||||