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 ( + + + + ); + } + return null; + }, [ + onClearSearchFiled, + styles.cancelButton, + styles.cancelButtonIcon, + text.length, + ]); + + return ( + + + + + + + {clearButton} + + ); +} + +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 ; +} + +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; @@ -186,6 +188,8 @@ messageLabel: '#CCCCCC', modalSeparator: '#404040', secondaryButtonBorder: '#FFFFFF', + searchMessagesInputFieldBackground: '#404040', + searchMessagesSecondaryForeground: '#808080', }); const colors = { light, dark };