108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { translate } from '../../../base/i18n/functions.native';
|
|
import Icon from '../../../base/icons/components/Icon';
|
|
import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg';
|
|
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
|
import Input from '../../../base/ui/components/native/Input';
|
|
import { setChatSearchMatchIndex, setChatSearchQuery } from '../../actions.native';
|
|
import { getChatSearchMatchIndex, getChatSearchMatches, getChatSearchQuery } from '../../functions';
|
|
|
|
import styles from './styles';
|
|
|
|
interface IProps {
|
|
t: Function;
|
|
}
|
|
|
|
/**
|
|
* Renders an always-visible search bar above the chat message list, allowing
|
|
* the user to filter messages and step through matches.
|
|
*
|
|
* @returns {React.ReactElement}
|
|
*/
|
|
const ChatSearchBar = ({ t }: IProps) => {
|
|
const dispatch = useDispatch();
|
|
const query = useSelector((state: IReduxState) => getChatSearchQuery(state));
|
|
const matches = useSelector((state: IReduxState) => getChatSearchMatches(state));
|
|
const matchIndex = useSelector((state: IReduxState) => getChatSearchMatchIndex(state));
|
|
|
|
const hasQuery = query.trim().length > 0;
|
|
const hasMatches = matches.length > 0;
|
|
|
|
const _onChangeText = useCallback((text: string) => {
|
|
dispatch(setChatSearchQuery(text));
|
|
}, [ dispatch ]);
|
|
|
|
const _onPrevious = useCallback(() => {
|
|
if (!matches.length) {
|
|
return;
|
|
}
|
|
|
|
dispatch(setChatSearchMatchIndex((matchIndex - 1 + matches.length) % matches.length));
|
|
}, [ dispatch, matchIndex, matches.length ]);
|
|
|
|
const _onNext = useCallback(() => {
|
|
if (!matches.length) {
|
|
return;
|
|
}
|
|
|
|
dispatch(setChatSearchMatchIndex((matchIndex + 1) % matches.length));
|
|
}, [ dispatch, matchIndex, matches.length ]);
|
|
|
|
const _onSubmitEditing = useCallback(() => {
|
|
_onNext();
|
|
}, [ _onNext ]);
|
|
|
|
return (
|
|
<View style = { styles.searchBarContainer as ViewStyle }>
|
|
<Input
|
|
clearable = { true }
|
|
customStyles = {{
|
|
clearButton: styles.searchClearButton,
|
|
container: styles.searchInputContainer,
|
|
input: styles.searchInput
|
|
}}
|
|
onChange = { _onChangeText }
|
|
onSubmitEditing = { _onSubmitEditing }
|
|
placeholder = { t('chat.search.placeholder') }
|
|
returnKeyType = 'search'
|
|
value = { query } />
|
|
{ hasQuery && (
|
|
<>
|
|
<Text style = { styles.searchBarCounter }>
|
|
{ hasMatches
|
|
? t('chat.search.resultsCount', {
|
|
current: matchIndex + 1,
|
|
total: matches.length
|
|
})
|
|
: t('chat.search.noResults') }
|
|
</Text>
|
|
<TouchableOpacity
|
|
disabled = { !hasMatches }
|
|
onPress = { _onPrevious }
|
|
style = { styles.searchBarNavButton as ViewStyle }>
|
|
<Icon
|
|
color = { hasMatches ? BaseTheme.palette.icon01 : BaseTheme.palette.icon03 }
|
|
size = { 18 }
|
|
src = { IconArrowUp } />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
disabled = { !hasMatches }
|
|
onPress = { _onNext }
|
|
style = { styles.searchBarNavButton as ViewStyle }>
|
|
<Icon
|
|
color = { hasMatches ? BaseTheme.palette.icon01 : BaseTheme.palette.icon03 }
|
|
size = { 18 }
|
|
src = { IconArrowDown } />
|
|
</TouchableOpacity>
|
|
</>
|
|
) }
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default translate(ChatSearchBar);
|