Page MenuHomePhabricator
Files F3369893

D7740.diff
No OneTemporary
Actions

D7740.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,110 @@
+//@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}
+ returnKeyType="search"
+ />
+ </View>
+ {clearButton}
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ backgroundColor: 'panelInputBackground',
+ borderRadius: 8,
+ paddingHorizontal: 11,
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ searchBoxTextStyle: {
+ color: 'panelForegroundLabel',
+ fontSize: 16,
+ fontWeight: '400',
+ placeholderTextColor: 'panelInputSecondaryForeground',
+ marginHorizontal: 8,
+ marginVertical: 6,
+ },
+ button: {
+ color: 'panelInputSecondaryForeground',
+ },
+ cancelButton: {
+ backgroundColor: 'panelButton',
+ borderRadius: 56,
+ width: 18,
+ height: 18,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ cancelButtonIcon: {
+ color: 'panelForegroundLabel',
+ },
+ 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
@@ -99,11 +99,14 @@
navigationChevron: designSystemColors.shadesWhite60,
panelBackground: designSystemColors.shadesWhite90,
panelBackgroundLabel: '#888888',
+ panelButton: designSystemColors.shadesWhite70,
panelForeground: designSystemColors.shadesWhite100,
panelForegroundBorder: designSystemColors.shadesWhite60,
panelForegroundLabel: designSystemColors.shadesBlack100,
panelForegroundSecondaryLabel: '#333333',
panelForegroundTertiaryLabel: '#888888',
+ panelInputBackground: designSystemColors.shadesWhite60,
+ panelInputSecondaryForeground: designSystemColors.shadesBlack60,
panelIosHighlightUnderlay: '#EBEBEBDD',
panelSecondaryForeground: designSystemColors.shadesWhite80,
panelSecondaryForegroundBorder: designSystemColors.shadesWhite70,
@@ -188,11 +191,14 @@
navigationChevron: designSystemColors.shadesBlack70,
panelBackground: designSystemColors.shadesBlack100,
panelBackgroundLabel: designSystemColors.shadesWhite60,
+ panelButton: designSystemColors.shadesBlack70,
panelForeground: designSystemColors.shadesBlack90,
panelForegroundBorder: '#2C2C2E',
panelForegroundLabel: designSystemColors.shadesWhite100,
panelForegroundSecondaryLabel: designSystemColors.shadesWhite60,
panelForegroundTertiaryLabel: '#AAAAAA',
+ panelInputBackground: designSystemColors.shadesBlack80,
+ panelInputSecondaryForeground: designSystemColors.shadesBlack60,
panelIosHighlightUnderlay: '#313035',
panelSecondaryForeground: designSystemColors.shadesBlack80,
panelSecondaryForegroundBorder: designSystemColors.shadesBlack70,

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 11:56 PM (13 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2586978
Default Alt Text
D7740.diff (5 KB)

Event Timeline