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 |