diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js new file mode 100644 index 0000000000..cb46c8d80a --- /dev/null +++ b/native/chat/chat-thread-list-search.react.js @@ -0,0 +1,72 @@ +// @flow + +import * as React from 'react'; + +import Search from '../components/search.react.js'; +import { useStyles } from '../themes/colors.js'; + +type Props = { + +searchText: string, + +onChangeText: (updatedSearchText: string) => mixed, + +onBlur: () => mixed, + +additionalProps?: $Shape>, +}; +function ChatThreadListSearch(props: Props): React.Node { + const { searchText, onChangeText, onBlur, additionalProps } = props; + const styles = useStyles(unboundStyles); + + const searchInputRef = React.useRef(); + return ( + + ); +} + +const unboundStyles = { + icon: { + fontSize: 28, + }, + container: { + flex: 1, + }, + searchContainer: { + backgroundColor: 'listBackground', + display: 'flex', + justifyContent: 'center', + flexDirection: 'row', + }, + searchBox: { + flex: 1, + }, + search: { + marginBottom: 8, + marginHorizontal: 18, + marginTop: 16, + }, + cancelSearchButton: { + position: 'absolute', + right: 0, + top: 0, + bottom: 0, + display: 'flex', + justifyContent: 'center', + }, + cancelSearchButtonText: { + color: 'link', + fontSize: 16, + paddingHorizontal: 16, + paddingTop: 8, + }, + flatList: { + flex: 1, + backgroundColor: 'listBackground', + }, +}; +export default ChatThreadListSearch; diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js index e867af87ec..165364e691 100644 --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -31,6 +31,7 @@ import type { GlobalAccountUserInfo, UserInfo } from 'lib/types/user-types.js'; import { useServerCall } from 'lib/utils/action-utils.js'; import { ChatThreadListItem } from './chat-thread-list-item.react.js'; +import ChatThreadListSearch from './chat-thread-list-search.react.js'; import { getItemLayout, keyExtractor } from './chat-thread-list-utils.js'; import type { ChatTopTabsNavigationProp, @@ -250,14 +251,11 @@ function ChatThreadList(props: BaseProps): React.Node { {/* eslint-enable react-native/no-raw-text */} - @@ -271,7 +269,6 @@ function ChatThreadList(props: BaseProps): React.Node { searchStatus, searchText, styles.cancelSearchButton, - styles.search, styles.searchContainer, ], );