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 ( + + + + ); + } + return null; + }, [ + onClearSearchFiled, + styles.cancelButton, + styles.cancelButtonIcon, + text.length, + ]); + + return ( + + + + + + + {clearButton} + + ); +} + +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 ; +} + +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, @@ -187,11 +190,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,