Page MenuHomePhabricator
Files F3359486

D9207.id31221.diff
No OneTemporary
Actions

D9207.id31221.diff
View Options

diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js
--- a/native/chat/chat-thread-list-search.react.js
+++ b/native/chat/chat-thread-list-search.react.js
@@ -8,9 +8,10 @@
import Search from '../components/search.react.js';
import { useStyles } from '../themes/colors.js';
import { AnimatedView, type AnimatedStyleObj } from '../types/styles.js';
+import { animateTowards } from '../utils/animation-utils.js';
/* eslint-disable import/no-named-as-default-member */
-const { Node } = Animated;
+const { Node, Value, interpolateNode, useValue } = Animated;
/* eslint-enable import/no-named-as-default-member */
type Props = {
@@ -18,8 +19,6 @@
+onChangeText: (updatedSearchText: string) => mixed,
+onBlur: () => mixed,
+additionalProps?: $Shape<React.ElementConfig<typeof Search>>,
- +searchCancelButtonOffset: Node,
- +searchCancelButtonProgress: Node,
+onSearchCancel: () => void,
+searchStatus: SearchStatus,
};
@@ -29,13 +28,35 @@
onChangeText,
onBlur,
additionalProps,
- searchCancelButtonOffset,
- searchCancelButtonProgress,
onSearchCancel,
searchStatus,
} = props;
const styles = useStyles(unboundStyles);
+ const searchCancelButtonOpen: Value = useValue(0);
+ const searchCancelButtonProgress: Node = React.useMemo(
+ () => animateTowards(searchCancelButtonOpen, 100),
+ [searchCancelButtonOpen],
+ );
+ const searchCancelButtonOffset: Node = React.useMemo(
+ () =>
+ interpolateNode(searchCancelButtonProgress, {
+ inputRange: [0, 1],
+ outputRange: [0, 56],
+ }),
+ [searchCancelButtonProgress],
+ );
+
+ const isActiveOrActivating =
+ searchStatus === 'active' || searchStatus === 'activating';
+ React.useEffect(() => {
+ if (isActiveOrActivating) {
+ searchCancelButtonOpen.setValue(1);
+ } else {
+ searchCancelButtonOpen.setValue(0);
+ }
+ }, [isActiveOrActivating, searchCancelButtonOpen]);
+
const animatedSearchBoxStyle: AnimatedStyleObj = React.useMemo(
() => ({
marginRight: searchCancelButtonOffset,
diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js
--- a/native/chat/chat-thread-list.react.js
+++ b/native/chat/chat-thread-list.react.js
@@ -11,7 +11,6 @@
BackHandler,
} from 'react-native';
import { FloatingAction } from 'react-native-floating-action';
-import Animated from 'react-native-reanimated';
import { searchUsers as searchUsersEndpoint } from 'lib/actions/user-actions.js';
import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
@@ -49,7 +48,6 @@
import { useSelector } from '../redux/redux-utils.js';
import { indicatorStyleSelector, useStyles } from '../themes/colors.js';
import type { ScrollEvent } from '../types/react-native.js';
-import { animateTowards } from '../utils/animation-utils.js';
const floatingActions = [
{
@@ -60,10 +58,6 @@
},
];
-/* eslint-disable import/no-named-as-default-member */
-const { Value, Node, interpolateNode, useValue } = Animated;
-/* eslint-enable import/no-named-as-default-member */
-
export type Item =
| ChatThreadItem
| { +type: 'search', +searchText: string }
@@ -109,20 +103,6 @@
const [openedSwipeableID, setOpenedSwipeableID] = React.useState<string>('');
const [numItemsToDisplay, setNumItemsToDisplay] = React.useState<number>(25);
- const searchCancelButtonOpen: Value = useValue(0);
- const searchCancelButtonProgress: Node = React.useMemo(
- () => animateTowards(searchCancelButtonOpen, 100),
- [searchCancelButtonOpen],
- );
- const searchCancelButtonOffset: Node = React.useMemo(
- () =>
- interpolateNode(searchCancelButtonProgress, {
- inputRange: [0, 1],
- outputRange: [0, 56],
- }),
- [searchCancelButtonProgress],
- );
-
const searchUsers = React.useCallback(
async (usernamePrefix: string) => {
if (usernamePrefix.length === 0) {
@@ -224,9 +204,7 @@
onChangeText={onChangeSearchText}
onBlur={onSearchBlur}
additionalProps={additionalProps}
- searchCancelButtonOffset={searchCancelButtonOffset}
searchStatus={searchStatus}
- searchCancelButtonProgress={searchCancelButtonProgress}
onSearchCancel={onSearchCancel}
/>
</View>
@@ -235,8 +213,6 @@
onChangeSearchText,
onSearchBlur,
onSearchCancel,
- searchCancelButtonOffset,
- searchCancelButtonProgress,
searchStatus,
searchText,
styles.searchContainer,
@@ -470,16 +446,6 @@
};
}, [hardwareBack]);
- const isActiveOrActivating =
- searchStatus === 'active' || searchStatus === 'activating';
- React.useEffect(() => {
- if (isActiveOrActivating) {
- searchCancelButtonOpen.setValue(1);
- } else {
- searchCancelButtonOpen.setValue(0);
- }
- }, [isActiveOrActivating, searchCancelButtonOpen]);
-
React.useEffect(() => {
if (scrollPos.current > 0 && flatListRef.current) {
flatListRef.current.scrollToOffset({ offset: 0, animated: false });

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 9:25 AM (21 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2578993
Default Alt Text
D9207.id31221.diff (4 KB)

Event Timeline