Page MenuHomePhorge
Files F32375218

D7740.1765327995.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D7740.1765327995.diff
View Options

diff --git a/native/search/search-bar.react.js b/native/search/search-bar.react.js
new file mode 100644
--- /dev/null
+++ b/native/search/search-bar.react.js
@@ -0,0 +1,109 @@
+//@flow
+
+import * as React from 'react';
+import { TextInput, TouchableOpacity, View } from 'react-native';
+
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+ onPressSend: (text: string) => void,
+ onClear: () => void,
+};
+
+function SearchBox(props: Props): React.Node {
+ const { onPressSend, onClear } = props;
+
+ const [text, setText] = React.useState('');
+
+ const onEndEditing = React.useCallback(
+ () => onPressSend(text),
+ [onPressSend, text],
+ );
+
+ const onClearSearchFiled = React.useCallback(() => {
+ onClear();
+ setText('');
+ }, [onClear]);
+
+ const styles = useStyles(unboundStyles);
+
+ const clearButton = React.useMemo(() => {
+ if (text.length !== 0) {
+ return (
+ <TouchableOpacity
+ onPress={onClearSearchFiled}
+ style={styles.cancelButton}
+ >
+ <SWMansionIcon
+ name="cross"
+ size={11}
+ style={styles.cancelButtonIcon}
+ />
+ </TouchableOpacity>
+ );
+ }
+ return null;
+ }, [
+ onClearSearchFiled,
+ styles.cancelButton,
+ styles.cancelButtonIcon,
+ text.length,
+ ]);
+
+ return (
+ <View style={styles.container}>
+ <SWMansionIcon name="search" size={24} style={styles.button} />
+
+ <View style={styles.wrapper}>
+ <TextInput
+ value={text}
+ onChangeText={setText}
+ placeholder="Search"
+ style={styles.searchBoxTextStyle}
+ placeholderTextColor="#808080"
+ onEndEditing={onEndEditing}
+ />
+ </View>
+ {clearButton}
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ backgroundColor: 'searchMessagesInputFieldBackground',
+ borderRadius: 20,
+ paddingHorizontal: 11,
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ searchBoxTextStyle: {
+ color: 'whiteText',
+ fontSize: 16,
+ fontWeight: '400',
+ placeholderTextColor: 'searchMessagesSecondaryForeground',
+ marginHorizontal: 8,
+ marginVertical: 6,
+ },
+ button: {
+ color: 'searchMessagesSecondaryForeground',
+ },
+ cancelButton: {
+ backgroundColor: 'modalButton',
+ borderRadius: 56,
+ width: 18,
+ height: 18,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ cancelButtonIcon: {
+ color: 'modalButtonLabel',
+ },
+ wrapper: {
+ flex: 1,
+ },
+};
+
+export default SearchBox;
diff --git a/native/search/search-header.react.js b/native/search/search-header.react.js
new file mode 100644
--- /dev/null
+++ b/native/search/search-header.react.js
@@ -0,0 +1,17 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import SearchBox from './search-bar.react.js';
+import { MessageSearchContext } from './search-provider.react.js';
+
+function SearchHeader(): React.Node {
+ const searchContext = React.useContext(MessageSearchContext);
+ invariant(searchContext, 'searchContext should be set');
+ const { setQuery, clearQuery } = searchContext;
+
+ return <SearchBox onPressSend={setQuery} onClear={clearQuery} />;
+}
+
+export default SearchHeader;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -95,6 +95,8 @@
messageLabel: '#0A0A0A',
modalSeparator: '#CCCCCC',
secondaryButtonBorder: '#FFFFFF',
+ searchMessagesInputFieldBackground: '#CCCCCC',
+ searchMessagesSecondaryForeground: '#999999',
});
export type Colors = $Exact<typeof light>;
@@ -186,6 +188,8 @@
messageLabel: '#CCCCCC',
modalSeparator: '#404040',
secondaryButtonBorder: '#FFFFFF',
+ searchMessagesInputFieldBackground: '#404040',
+ searchMessagesSecondaryForeground: '#808080',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 12:53 AM (17 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5859410
Default Alt Text
D7740.1765327995.diff (3 KB)

Event Timeline