diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js --- a/native/chat/chat-thread-list-search.react.js +++ b/native/chat/chat-thread-list-search.react.js @@ -19,17 +19,20 @@ +onChangeText: (updatedSearchText: string) => mixed, +onBlur: () => mixed, +additionalProps?: $Shape>, - +onSearchCancel: () => void, + +onSearchCancel: () => mixed, +searchStatus: SearchStatus, + +innerSearchAutoFocus?: boolean, + +innerSearchActive?: boolean, }; function ChatThreadListSearch(props: Props): React.Node { const { searchText, onChangeText, onBlur, - additionalProps, onSearchCancel, searchStatus, + innerSearchActive, + innerSearchAutoFocus, } = props; const styles = useStyles(unboundStyles); @@ -96,7 +99,8 @@ onBlur={onBlur} placeholder="Search chats" ref={searchInputRef} - {...additionalProps} + autoFocus={innerSearchAutoFocus} + active={innerSearchActive} /> diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -37,7 +37,6 @@ ChatNavigationProp, } from './chat.react.js'; import { useNavigateToThread } from './message-list-types.js'; -import Search from '../components/search.react.js'; import { SidebarListModalRouteName, HomeChatThreadListRouteName, @@ -196,28 +195,6 @@ }, [clearSearch, onChangeSearchText]); const searchInputRef = React.useRef(); - const renderSearch = React.useCallback( - (additionalProps?: $Shape>) => ( - - - - ), - [ - onChangeSearchText, - onSearchBlur, - onSearchCancel, - searchStatus, - searchText, - styles.searchContainer, - ], - ); const onPressItem = React.useCallback( (threadInfo: ThreadInfo, pendingPersonalThreadUserInfo?: UserInfo) => { @@ -258,15 +235,37 @@ return true; }, [navigation, onSearchCancel, searchStatus]); + const searchItem = React.useMemo( + () => ( + + + + + + ), + [ + onChangeSearchText, + onSearchBlur, + onSearchCancel, + onSearchFocus, + searchStatus, + searchText, + styles.searchContainer, + ], + ); + const renderItem = React.useCallback( (row: { item: Item, ... }) => { const item = row.item; if (item.type === 'search') { - return ( - - {renderSearch({ active: false })} - - ); + return searchItem; } if (item.type === 'empty') { const EmptyItem = item.emptyItem; @@ -285,10 +284,9 @@ [ onPressItem, onPressSeeMoreSidebars, - onSearchFocus, onSwipeableWillOpen, openedSwipeableID, - renderSearch, + searchItem, ], ); @@ -350,11 +348,30 @@ ); }, [composeThread]); - const fixedSearch = React.useMemo( - () => - searchStatus === 'active' ? renderSearch({ autoFocus: true }) : null, - [renderSearch, searchStatus], - ); + const fixedSearch = React.useMemo(() => { + if (searchStatus !== 'active') { + return null; + } + return ( + + + + ); + }, [ + onChangeSearchText, + onSearchBlur, + onSearchCancel, + searchStatus, + searchText, + styles.searchContainer, + ]); const scrollEnabled = searchStatus === 'inactive' || searchStatus === 'active';