Page MenuHomePhabricator
Files F3359801

D9205.id31191.diff
No OneTemporary
Actions

D9205.id31191.diff
View Options

diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js
new file mode 100644
--- /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<React.ElementConfig<typeof Search>>,
+};
+function ChatThreadListSearch(props: Props): React.Node {
+ const { searchText, onChangeText, onBlur, additionalProps } = props;
+ const styles = useStyles(unboundStyles);
+
+ const searchInputRef = React.useRef();
+ return (
+ <Search
+ searchText={searchText}
+ onChangeText={onChangeText}
+ containerStyle={styles.search}
+ onBlur={onBlur}
+ placeholder="Search chats"
+ ref={searchInputRef}
+ {...additionalProps}
+ />
+ );
+}
+
+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
--- a/native/chat/chat-thread-list.react.js
+++ b/native/chat/chat-thread-list.react.js
@@ -31,6 +31,7 @@
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 @@
{/* eslint-enable react-native/no-raw-text */}
</Button>
<AnimatedView style={searchBoxStyle}>
- <Search
+ <ChatThreadListSearch
searchText={searchText}
onChangeText={onChangeSearchText}
- containerStyle={styles.search}
onBlur={onSearchBlur}
- placeholder="Search chats"
- ref={searchInputRef}
- {...additionalProps}
+ additionalProps={additionalProps}
/>
</AnimatedView>
</View>
@@ -271,7 +269,6 @@
searchStatus,
searchText,
styles.cancelSearchButton,
- styles.search,
styles.searchContainer,
],
);

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 10:57 AM (20 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579411
Default Alt Text
D9205.id31191.diff (2 KB)

Event Timeline