Differential D9209 Diff 31223 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 { TextInput as BaseTextInput } from 'react-native';
import Animated from 'react-native-reanimated';		import Animated from 'react-native-reanimated';

import type { SearchStatus } from './chat-thread-list.react.js';		import type { SearchStatus } from './chat-thread-list.react.js';
import Button from '../components/button.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';		import { AnimatedView, type AnimatedStyleObj } from '../types/styles.js';
import { animateTowards } from '../utils/animation-utils.js';		import { animateTowards } from '../utils/animation-utils.js';

/* eslint-disable import/no-named-as-default-member */		/* eslint-disable import/no-named-as-default-member */
const { Node, Value, interpolateNode, useValue } = Animated;		const { Node, Value, interpolateNode, useValue } = Animated;
/* eslint-enable import/no-named-as-default-member */		/* 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>>,
+onSearchCancel: () => mixed,		+onSearchCancel: () => mixed,
+searchStatus: SearchStatus,		+searchStatus: SearchStatus,
+innerSearchAutoFocus?: boolean,		+innerSearchAutoFocus?: boolean,
+innerSearchActive?: boolean,		+innerSearchActive?: boolean,
};		};
function ChatThreadListSearch(props: Props): React.Node {		function ForwardedChatThreadListSearch(props: Props, ref): React.Node {
const {		const {
searchText,		searchText,
onChangeText,		onChangeText,
onBlur,		onBlur,
onSearchCancel,		onSearchCancel,
searchStatus,		searchStatus,
innerSearchActive,		innerSearchActive,
innerSearchAutoFocus,		innerSearchAutoFocus,
Show All 38 Lines	function ForwardedChatThreadListSearch(props: Props, ref): React.Node {

const buttonStyle = React.useMemo(		const buttonStyle = React.useMemo(
() => [		() => [
styles.cancelSearchButtonText,		styles.cancelSearchButtonText,
{ opacity: searchCancelButtonProgress },		{ opacity: searchCancelButtonProgress },
],		],
[searchCancelButtonProgress, styles.cancelSearchButtonText],		[searchCancelButtonProgress, styles.cancelSearchButtonText],
);		);
const searchInputRef = React.useRef();
return (		return (
<>		<>
<Button		<Button
onPress={onSearchCancel}		onPress={onSearchCancel}
disabled={searchStatus !== 'active'}		disabled={searchStatus !== 'active'}
style={styles.cancelSearchButton}		style={styles.cancelSearchButton}
>		>
{/* eslint-disable react-native/no-raw-text */}		{/* eslint-disable react-native/no-raw-text */}
<Animated.Text style={buttonStyle}>Cancel</Animated.Text>		<Animated.Text style={buttonStyle}>Cancel</Animated.Text>
{/* eslint-enable react-native/no-raw-text */}		{/* eslint-enable react-native/no-raw-text */}
</Button>		</Button>
<AnimatedView style={searchBoxStyle}>		<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={ref}
autoFocus={innerSearchAutoFocus}		autoFocus={innerSearchAutoFocus}
active={innerSearchActive}		active={innerSearchActive}
/>		/>
</AnimatedView>		</AnimatedView>
</>		</>
);		);
}		}

Show All 32 Lines	cancelSearchButtonText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingTop: 8,		paddingTop: 8,
},		},
flatList: {		flatList: {
flex: 1,		flex: 1,
backgroundColor: 'listBackground',		backgroundColor: 'listBackground',
},		},
};		};

		const ChatThreadListSearch: React.AbstractComponent<
		Props,
		React.ElementRef<typeof BaseTextInput>,
		> = React.forwardRef<Props, React.ElementRef<typeof BaseTextInput>>(
		ForwardedChatThreadListSearch,
		);
		ChatThreadListSearch.displayName = 'ChatThreadListSearch';

export default ChatThreadListSearch;		export default ChatThreadListSearch;