vn-verdnaturachat/app/views/ShareListView/Header/Header.ios.tsx

63 lines
1.6 KiB
TypeScript

import React, { useState } from 'react';
import { Keyboard, StyleSheet, View } from 'react-native';
import ShareExtension from 'rn-extensions-share';
import SearchBox from './SearchBox';
import * as HeaderButton from '../../../containers/HeaderButton';
import { themes } from '../../../lib/constants';
import sharedStyles from '../../Styles';
import { animateNextTransition } from '../../../lib/methods/helpers/layoutAnimation';
import { IShareListHeaderIos } from './interface';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
...sharedStyles.separatorBottom
}
});
const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSearch, theme }: IShareListHeaderIos) => {
const [text, setText] = useState('');
const onChangeText = (searchText: string) => {
onChangeSearchText(searchText);
setText(searchText);
};
const onCancelPress = () => {
Keyboard.dismiss();
onChangeText('');
cancelSearch();
animateNextTransition();
};
const onFocus = () => {
initSearch();
animateNextTransition();
};
return (
<View
style={[
styles.container,
{
borderColor: themes[theme].separatorColor,
backgroundColor: themes[theme].headerBackground
}
]}>
{!searching ? <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' /> : null}
<SearchBox
value={text}
hasCancel={searching}
onFocus={onFocus}
onCancelPress={onCancelPress}
onChangeText={onChangeText}
testID='rooms-list-view-search'
key='rooms-list-view-search'
/>
</View>
);
});
export default Header;