Differential D9206 Diff 31220 native/chat/chat-thread-list-search.react.js

Changeset View

Standalone View

native/chat/chat-thread-list-search.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';
				import Animated from 'react-native-reanimated';

				import type { SearchStatus } from './chat-thread-list.react.js';
				import Button from '../components/button.react.js';
	import Search from '../components/search.react.js';			import Search from '../components/search.react.js';
	import { useStyles } from '../themes/colors.js';			import { useStyles } from '../themes/colors.js';
				import { AnimatedView, type AnimatedStyleObj } from '../types/styles.js';

				/* eslint-disable import/no-named-as-default-member */
				const { Node } = Animated;
				/* eslint-enable import/no-named-as-default-member */

	type Props = {			type Props = {
	+searchText: string,			+searchText: string,
	+onChangeText: (updatedSearchText: string) => mixed,			+onChangeText: (updatedSearchText: string) => mixed,
	+onBlur: () => mixed,			+onBlur: () => mixed,
	+additionalProps?: $Shape<React.ElementConfig<typeof Search>>,			+additionalProps?: $Shape<React.ElementConfig<typeof Search>>,
				+searchCancelButtonOffset: Node,
				+searchCancelButtonProgress: Node,
				+onSearchCancel: () => void,
				+searchStatus: SearchStatus,
	};			};
	function ChatThreadListSearch(props: Props): React.Node {			function ChatThreadListSearch(props: Props): React.Node {
	const { searchText, onChangeText, onBlur, additionalProps } = props;			const {
				searchText,
				onChangeText,
				onBlur,
				additionalProps,
				searchCancelButtonOffset,
				searchCancelButtonProgress,
				onSearchCancel,
				searchStatus,
				} = props;
	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);

				const animatedSearchBoxStyle: AnimatedStyleObj = React.useMemo(
				() => ({
				marginRight: searchCancelButtonOffset,
				}),
				[searchCancelButtonOffset],
				);

				const searchBoxStyle = React.useMemo(
				() => [styles.searchBox, animatedSearchBoxStyle],
				[animatedSearchBoxStyle, styles.searchBox],
				);

				const buttonStyle = React.useMemo(
				() => [
				styles.cancelSearchButtonText,
				{ opacity: searchCancelButtonProgress },
				],
				[searchCancelButtonProgress, styles.cancelSearchButtonText],
				);
	const searchInputRef = React.useRef();			const searchInputRef = React.useRef();
	return (			return (
				<>
				<Button
				onPress={onSearchCancel}
				disabled={searchStatus !== 'active'}
				style={styles.cancelSearchButton}
				>
				{/* eslint-disable react-native/no-raw-text */}
				<Animated.Text style={buttonStyle}>Cancel</Animated.Text>
				{/* eslint-enable react-native/no-raw-text */}
				</Button>
				<AnimatedView style={searchBoxStyle}>
	<Search			<Search
	searchText={searchText}			searchText={searchText}
	onChangeText={onChangeText}			onChangeText={onChangeText}
	containerStyle={styles.search}			containerStyle={styles.search}
	onBlur={onBlur}			onBlur={onBlur}
	placeholder="Search chats"			placeholder="Search chats"
	ref={searchInputRef}			ref={searchInputRef}
	{...additionalProps}			{...additionalProps}
	/>			/>
				</AnimatedView>
				</>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
	icon: {			icon: {
	fontSize: 28,			fontSize: 28,
	},			},
	container: {			container: {
	Show All 36 Lines