Page MenuHomePhorge
Files F32164511

D15111.1765048310.diff
No OneTemporary
Actions

Size
113 KB
Referenced Files
None
Subscribers
None

D15111.1765048310.diff
View Options

diff --git a/lib/components/report-handler.react.js b/lib/components/report-handler.react.js
--- a/lib/components/report-handler.react.js
+++ b/lib/components/report-handler.react.js
@@ -78,8 +78,8 @@
}
}
-const ConnectedReportHandler: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedReportHandler(props) {
+const ConnectedReportHandler: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedReportHandler(props) {
const queuedReports = useSelector(queuedReportsSelector);
const dispatchActionPromise = useDispatchActionPromise();
const callSendReports = useSendReports();
@@ -92,6 +92,7 @@
sendReports={callSendReports}
/>
);
- });
+ },
+);
export default ConnectedReportHandler;
diff --git a/lib/components/thread-draft-updater.react.js b/lib/components/thread-draft-updater.react.js
--- a/lib/components/thread-draft-updater.react.js
+++ b/lib/components/thread-draft-updater.react.js
@@ -9,7 +9,7 @@
import type { AppState } from '../types/redux-types.js';
import { useSelector, useDispatch } from '../utils/redux-utils.js';
-const ThreadDraftUpdater: React.ComponentType<{}> = React.memo<{}>(
+const ThreadDraftUpdater: React.ComponentType<{}> = React.memo(
function ThreadDraftUpdater() {
const pendingToRealizedThreadIDs = useSelector((state: AppState) =>
pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
diff --git a/lib/keyserver-conn/keyserver-connection-handler.js b/lib/keyserver-conn/keyserver-connection-handler.js
--- a/lib/keyserver-conn/keyserver-connection-handler.js
+++ b/lib/keyserver-conn/keyserver-connection-handler.js
@@ -282,7 +282,7 @@
return <Socket {...socketProps} />;
}
-const Handler: React.ComponentType<Props> = React.memo<Props>(
+const Handler: React.ComponentType<Props> = React.memo(
KeyserverConnectionHandler,
);
diff --git a/lib/shared/transforms/keyserver-store-transform.js b/lib/shared/transforms/keyserver-store-transform.js
--- a/lib/shared/transforms/keyserver-store-transform.js
+++ b/lib/shared/transforms/keyserver-store-transform.js
@@ -7,10 +7,7 @@
KeyserverInfo,
KeyserverStore,
} from '../../types/keyserver-types.js';
-import {
- type ConnectionInfo,
- defaultConnectionInfo,
-} from '../../types/socket-types.js';
+import { defaultConnectionInfo } from '../../types/socket-types.js';
export type PersistedKeyserverInfo = Omit<
KeyserverInfo,
diff --git a/lib/socket/api-request-handler.react.js b/lib/socket/api-request-handler.react.js
--- a/lib/socket/api-request-handler.react.js
+++ b/lib/socket/api-request-handler.react.js
@@ -104,8 +104,8 @@
};
}
-const ConnectedAPIRequestHandler: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedAPIRequestHandler(props) {
+const ConnectedAPIRequestHandler: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedAPIRequestHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID));
invariant(connection, 'keyserver missing from keyserverStore');
const { registerActiveSocket } = useCallKeyserverEndpointContext();
@@ -116,6 +116,7 @@
registerActiveSocket={registerActiveSocket}
/>
);
- });
+ },
+);
export default ConnectedAPIRequestHandler;
diff --git a/lib/socket/calendar-query-handler.react.js b/lib/socket/calendar-query-handler.react.js
--- a/lib/socket/calendar-query-handler.react.js
+++ b/lib/socket/calendar-query-handler.react.js
@@ -128,7 +128,7 @@
}
const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
+ React.memo(function ConnectedCalendarQueryHandler(props) {
const { currentCalendarQuery, keyserverID } = props;
const keyserverInfo = useSelector(
state => state.keyserverStore.keyserverInfos[keyserverID],
diff --git a/lib/socket/request-response-handler.react.js b/lib/socket/request-response-handler.react.js
--- a/lib/socket/request-response-handler.react.js
+++ b/lib/socket/request-response-handler.react.js
@@ -139,7 +139,7 @@
}
const ConnectedRequestResponseHandler: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedRequestResponseHandler(props) {
+ React.memo(function ConnectedRequestResponseHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID));
invariant(connection, 'keyserver missing from keyserverStore');
diff --git a/native/account/log-in-panel.react.js b/native/account/log-in-panel.react.js
--- a/native/account/log-in-panel.react.js
+++ b/native/account/log-in-panel.react.js
@@ -348,8 +348,8 @@
const olmSessionInitializationDataLoadingStatusSelector =
createLoadingStatusSelector(getOlmSessionInitializationDataActionTypes);
-const ConnectedLogInPanel: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedLogInPanel(props: BaseProps) {
+const ConnectedLogInPanel: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedLogInPanel(props: BaseProps) {
const loadingStatus = useSelector(
olmSessionInitializationDataLoadingStatusSelector,
);
@@ -363,6 +363,7 @@
identityPasswordLogIn={callIdentityPasswordLogIn}
/>
);
- });
+ },
+);
export default ConnectedLogInPanel;
diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -605,6 +605,6 @@
}
const MemoizedLoggedOutModal: React.ComponentType<Props> =
- React.memo<Props>(LoggedOutModal);
+ React.memo(LoggedOutModal);
export default MemoizedLoggedOutModal;
diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js
--- a/native/account/registration/registration-text-input.react.js
+++ b/native/account/registration/registration-text-input.react.js
@@ -99,7 +99,7 @@
const MemoizedRegistrationTextInput: typeof RegistrationTextInput = React.memo<
Props,
- React.ElementRef<typeof TextInput>,
+ React.RefSetter<React.ElementRef<typeof TextInput>>,
>(RegistrationTextInput);
export default MemoizedRegistrationTextInput;
diff --git a/native/account/registration/siwe-backup-message-creation.react.js b/native/account/registration/siwe-backup-message-creation.react.js
--- a/native/account/registration/siwe-backup-message-creation.react.js
+++ b/native/account/registration/siwe-backup-message-creation.react.js
@@ -39,99 +39,97 @@
};
const CreateSIWEBackupMessageBase: React.ComponentType<CreateSIWEBackupMessageBaseProps> =
- React.memo<CreateSIWEBackupMessageBaseProps>(
- function CreateSIWEBackupMessageBase(
- props: CreateSIWEBackupMessageBaseProps,
- ): React.Node {
- const styles = useStyles(unboundStyles);
- const { onSuccessfulWalletSignature, onExistingWalletSignature, onSkip } =
- props;
+ React.memo(function CreateSIWEBackupMessageBase(
+ props: CreateSIWEBackupMessageBaseProps,
+ ): React.Node {
+ const styles = useStyles(unboundStyles);
+ const { onSuccessfulWalletSignature, onExistingWalletSignature, onSkip } =
+ props;
- const {
- panelState,
- onPanelClosed,
- onPanelClosing,
- openPanel,
- siwePanelSetLoading,
- } = useSIWEPanelState();
+ const {
+ panelState,
+ onPanelClosed,
+ onPanelClosing,
+ openPanel,
+ siwePanelSetLoading,
+ } = useSIWEPanelState();
- let siwePanel;
- if (panelState !== 'closed') {
- siwePanel = (
- <SIWEPanel
- onClosing={onPanelClosing}
- onClosed={onPanelClosed}
- closing={panelState === 'closing'}
- onSuccessfulWalletSignature={onSuccessfulWalletSignature}
- siweSignatureRequestData={siweBackupSignatureRequestData}
- setLoading={siwePanelSetLoading}
- />
- );
- }
-
- const newSignatureButtonText = onExistingWalletSignature
- ? 'Encrypt with new signature'
- : 'Encrypt with Ethereum signature';
- const defaultNewSignatureButtonVariant = onExistingWalletSignature
- ? 'outline'
- : 'enabled';
- const newSignatureButtonVariant =
- panelState === 'opening' ? 'loading' : defaultNewSignatureButtonVariant;
+ let siwePanel;
+ if (panelState !== 'closed') {
+ siwePanel = (
+ <SIWEPanel
+ onClosing={onPanelClosing}
+ onClosed={onPanelClosed}
+ closing={panelState === 'closing'}
+ onSuccessfulWalletSignature={onSuccessfulWalletSignature}
+ siweSignatureRequestData={siweBackupSignatureRequestData}
+ setLoading={siwePanelSetLoading}
+ />
+ );
+ }
- let useExistingSignatureButton;
- if (onExistingWalletSignature) {
- useExistingSignatureButton = (
- <PrimaryButton
- onPress={onExistingWalletSignature}
- label="Encrypt with existing signature"
- variant="enabled"
- />
- );
- }
+ const newSignatureButtonText = onExistingWalletSignature
+ ? 'Encrypt with new signature'
+ : 'Encrypt with Ethereum signature';
+ const defaultNewSignatureButtonVariant = onExistingWalletSignature
+ ? 'outline'
+ : 'enabled';
+ const newSignatureButtonVariant =
+ panelState === 'opening' ? 'loading' : defaultNewSignatureButtonVariant;
- let onSkipButton;
- if (onSkip) {
- onSkipButton = (
- <PrimaryButton onPress={onSkip} label="Skip" variant="outline" />
- );
- }
+ let useExistingSignatureButton;
+ if (onExistingWalletSignature) {
+ useExistingSignatureButton = (
+ <PrimaryButton
+ onPress={onExistingWalletSignature}
+ label="Encrypt with existing signature"
+ variant="enabled"
+ />
+ );
+ }
- return (
- <>
- <AuthContainer>
- <AuthContentContainer style={styles.scrollViewContentContainer}>
- <Text style={styles.header}>Encrypting your Comm backup</Text>
- <Text style={styles.body}>
- To make sure we can’t see your data, Comm encrypts your backup
- using a signature from your wallet.
- </Text>
- <Text style={styles.body}>
- This signature is private and never leaves your device, unlike
- the prior signature, which is public.
- </Text>
- <Text style={styles.body}>
- This signature ensures that you can always recover your data as
- long as you still control your wallet.
- </Text>
- <View style={styles.siweBackupIconContainer}>
- <Icon name="backup" size={200} style={styles.siweBackupIcon} />
- </View>
- </AuthContentContainer>
- <AuthButtonContainer>
- {useExistingSignatureButton}
- <PrimaryButton
- onPress={openPanel}
- label={newSignatureButtonText}
- variant={newSignatureButtonVariant}
- />
- {onSkipButton}
- </AuthButtonContainer>
- </AuthContainer>
- {siwePanel}
- </>
+ let onSkipButton;
+ if (onSkip) {
+ onSkipButton = (
+ <PrimaryButton onPress={onSkip} label="Skip" variant="outline" />
);
- },
- );
+ }
+
+ return (
+ <>
+ <AuthContainer>
+ <AuthContentContainer style={styles.scrollViewContentContainer}>
+ <Text style={styles.header}>Encrypting your Comm backup</Text>
+ <Text style={styles.body}>
+ To make sure we can’t see your data, Comm encrypts your backup
+ using a signature from your wallet.
+ </Text>
+ <Text style={styles.body}>
+ This signature is private and never leaves your device, unlike the
+ prior signature, which is public.
+ </Text>
+ <Text style={styles.body}>
+ This signature ensures that you can always recover your data as
+ long as you still control your wallet.
+ </Text>
+ <View style={styles.siweBackupIconContainer}>
+ <Icon name="backup" size={200} style={styles.siweBackupIcon} />
+ </View>
+ </AuthContentContainer>
+ <AuthButtonContainer>
+ {useExistingSignatureButton}
+ <PrimaryButton
+ onPress={openPanel}
+ label={newSignatureButtonText}
+ variant={newSignatureButtonVariant}
+ />
+ {onSkipButton}
+ </AuthButtonContainer>
+ </AuthContainer>
+ {siwePanel}
+ </>
+ );
+ });
export type CreateSIWEBackupMessageParams = {
+userSelections: {
diff --git a/native/calendar/calendar-screen.react.js b/native/calendar/calendar-screen.react.js
--- a/native/calendar/calendar-screen.react.js
+++ b/native/calendar/calendar-screen.react.js
@@ -1077,8 +1077,8 @@
ThreadPickerModalRouteName,
);
-const ConnectedCalendarScreen: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedCalendarScreen(props: BaseProps) {
+const ConnectedCalendarScreen: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedCalendarScreen(props: BaseProps) {
const navContext = React.useContext(NavContext);
const calendarActive =
activeTabSelector(navContext) || activeThreadPickerSelector(navContext);
@@ -1115,6 +1115,7 @@
updateCalendarQuery={callUpdateCalendarQuery}
/>
);
- });
+ },
+);
export default ConnectedCalendarScreen;
diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js
--- a/native/calendar/entry.react.js
+++ b/native/calendar/entry.react.js
@@ -809,7 +809,7 @@
ThreadPickerModalRouteName,
);
-const Entry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const Entry: React.ComponentType<BaseProps> = React.memo(
function ConnectedEntry(props: BaseProps) {
const navContext = React.useContext(NavContext);
const threadPickerActive = activeThreadPickerSelector(navContext);
diff --git a/native/calendar/section-footer.react.js b/native/calendar/section-footer.react.js
--- a/native/calendar/section-footer.react.js
+++ b/native/calendar/section-footer.react.js
@@ -71,12 +71,13 @@
};
}
-const ConnectedSectionFooter: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedSectionFooter(props: BaseProps) {
+const ConnectedSectionFooter: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedSectionFooter(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
return <SectionFooter {...props} styles={styles} colors={colors} />;
- });
+ },
+);
export default ConnectedSectionFooter;
diff --git a/native/chat/chat-context-provider.react.js b/native/chat/chat-context-provider.react.js
--- a/native/chat/chat-context-provider.react.js
+++ b/native/chat/chat-context-provider.react.js
@@ -168,6 +168,6 @@
}
const MemoizedChatContextProvider: React.ComponentType<Props> =
- React.memo<Props>(ChatContextProvider);
+ React.memo(ChatContextProvider);
export default MemoizedChatContextProvider;
diff --git a/native/chat/chat-header.react.js b/native/chat/chat-header.react.js
--- a/native/chat/chat-header.react.js
+++ b/native/chat/chat-header.react.js
@@ -10,11 +10,12 @@
const activeTabSelector = createActiveTabSelector(ChatRouteName);
-const ChatHeader: React.ComponentType<StackHeaderProps> =
- React.memo<StackHeaderProps>(function ChatHeader(props: StackHeaderProps) {
+const ChatHeader: React.ComponentType<StackHeaderProps> = React.memo(
+ function ChatHeader(props: StackHeaderProps) {
const navContext = React.useContext(NavContext);
const activeTab = activeTabSelector(navContext);
return <Header {...props} activeTab={activeTab} />;
- });
+ },
+);
export default ChatHeader;
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1225,9 +1225,7 @@
+route: NavigationRoute<'MessageList'>,
};
const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
- React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
- props: ChatInputBarProps,
- ) {
+ React.memo(function ConnectedChatInputBar(props: ChatInputBarProps) {
const { navigation, route, ...restProps } = props;
const keyboardState = React.useContext(KeyboardContext);
diff --git a/native/chat/chat-item-height-measurer.react.js b/native/chat/chat-item-height-measurer.react.js
--- a/native/chat/chat-item-height-measurer.react.js
+++ b/native/chat/chat-item-height-measurer.react.js
@@ -262,7 +262,8 @@
);
}
-const MemoizedChatItemHeightMeasurer: React.ComponentType<Props> =
- React.memo<Props>(ChatItemHeightMeasurer);
+const MemoizedChatItemHeightMeasurer: React.ComponentType<Props> = React.memo(
+ ChatItemHeightMeasurer,
+);
export default MemoizedChatItemHeightMeasurer;
diff --git a/native/chat/chat-list.react.js b/native/chat/chat-list.react.js
--- a/native/chat/chat-list.react.js
+++ b/native/chat/chat-list.react.js
@@ -334,7 +334,7 @@
},
});
-const ConnectedChatList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedChatList: React.ComponentType<BaseProps> = React.memo(
function ConnectedChatList(props: BaseProps) {
const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -369,6 +369,6 @@
};
const MemoizedComposeSubchannel: React.ComponentType<Props> =
- React.memo<Props>(ComposeSubchannel);
+ React.memo(ComposeSubchannel);
export default MemoizedComposeSubchannel;
diff --git a/native/chat/compose-thread-button.react.js b/native/chat/compose-thread-button.react.js
--- a/native/chat/compose-thread-button.react.js
+++ b/native/chat/compose-thread-button.react.js
@@ -56,6 +56,6 @@
});
const MemoizedComposeThreadButton: React.ComponentType<Props> =
- React.memo<Props>(ComposeThreadButton);
+ React.memo(ComposeThreadButton);
export default MemoizedComposeThreadButton;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -48,7 +48,7 @@
+children: React.Node,
};
-const ConnectedComposedMessage: React.ComponentType<Props> = React.memo<Props>(
+const ConnectedComposedMessage: React.ComponentType<Props> = React.memo(
function ConnectedComposedMessage(props: Props) {
const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors();
diff --git a/native/chat/failed-send.react.js b/native/chat/failed-send.react.js
--- a/native/chat/failed-send.react.js
+++ b/native/chat/failed-send.react.js
@@ -152,8 +152,8 @@
};
}
-const ConnectedFailedSend: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedFailedSend(props: BaseProps) {
+const ConnectedFailedSend: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedFailedSend(props: BaseProps) {
const id = messageID(props.item.messageInfo);
const rawMessageInfo = useSelector(state => {
const message = state.messageStore.messages[id];
@@ -175,6 +175,7 @@
parentThreadInfo={parentThreadInfo}
/>
);
- });
+ },
+);
export { ConnectedFailedSend as FailedSend, failedSendHeight };
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -174,7 +174,7 @@
};
const MemoizedInnerRobotextMessage: React.ComponentType<InnerRobotextMessageProps> =
- React.memo<InnerRobotextMessageProps>(InnerRobotextMessage);
+ React.memo(InnerRobotextMessage);
export {
dummyNodeForRobotextMessageHeightMeasurement,
diff --git a/native/chat/message-editing-context-provider.react.js b/native/chat/message-editing-context-provider.react.js
--- a/native/chat/message-editing-context-provider.react.js
+++ b/native/chat/message-editing-context-provider.react.js
@@ -74,6 +74,6 @@
}
const MemoizedMessageEditingContextProvider: React.ComponentType<Props> =
- React.memo<Props>(MessageEditingContextProvider);
+ React.memo(MessageEditingContextProvider);
export default MemoizedMessageEditingContextProvider;
diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js
--- a/native/chat/message-list-container.react.js
+++ b/native/chat/message-list-container.react.js
@@ -247,9 +247,7 @@
}
const ConnectedMessageListContainer: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMessageListContainer(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedMessageListContainer(props: BaseProps) {
const [usernameInputText, setUsernameInputText] = React.useState('');
const [userInfoInputArray, setUserInfoInputArray] = React.useState<
$ReadOnlyArray<AccountUserInfo>,
diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js
--- a/native/chat/message-list-header-title.react.js
+++ b/native/chat/message-list-header-title.react.js
@@ -88,9 +88,7 @@
}
const ConnectedMessageListHeaderTitle: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMessageListHeaderTitle(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedMessageListHeaderTitle(props: BaseProps) {
const styles = useStyles(unboundStyles);
const { uiName } = useResolvedThreadInfo(props.threadInfo);
diff --git a/native/chat/message-list-thread-search.react.js b/native/chat/message-list-thread-search.react.js
--- a/native/chat/message-list-thread-search.react.js
+++ b/native/chat/message-list-thread-search.react.js
@@ -29,7 +29,7 @@
returnKeyType: 'go',
};
-const MessageListThreadSearch: React.ComponentType<Props> = React.memo<Props>(
+const MessageListThreadSearch: React.ComponentType<Props> = React.memo(
function MessageListThreadSearch({
usernameInputText,
updateUsernameInput,
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -289,8 +289,8 @@
};
}
-const ConnectedMessageList: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMessageList(props: BaseProps) {
+const ConnectedMessageList: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedMessageList(props: BaseProps) {
const keyboardState = React.useContext(KeyboardContext);
const overlayContext = React.useContext(OverlayContext);
@@ -321,6 +321,7 @@
fetchMessages={fetchMessages}
/>
);
- });
+ },
+);
export default ConnectedMessageList;
diff --git a/native/chat/multimedia-message-multimedia.react.js b/native/chat/multimedia-message-multimedia.react.js
--- a/native/chat/multimedia-message-multimedia.react.js
+++ b/native/chat/multimedia-message-multimedia.react.js
@@ -50,8 +50,8 @@
},
});
-const MultimediaMessageMultimedia: React.ComponentType<Props> =
- React.memo<Props>(function MultimediaMessageMultimedia(props: Props) {
+const MultimediaMessageMultimedia: React.ComponentType<Props> = React.memo(
+ function MultimediaMessageMultimedia(props: Props) {
const keyboardState = React.useContext(KeyboardContext);
const overlayContext = React.useContext(OverlayContext);
invariant(
@@ -167,6 +167,7 @@
</View>
</AnimatedView>
);
- });
+ },
+);
export default MultimediaMessageMultimedia;
diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js
--- a/native/chat/multimedia-message.react.js
+++ b/native/chat/multimedia-message.react.js
@@ -241,8 +241,8 @@
}
}
-const ConnectedMultimediaMessage: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMultimediaMessage(props: BaseProps) {
+const ConnectedMultimediaMessage: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedMultimediaMessage(props: BaseProps) {
const navigation = useNavigation();
const route = useRoute();
const overlayContext = React.useContext(OverlayContext);
@@ -272,6 +272,7 @@
canDeleteMessage={canDeleteMessage}
/>
);
- });
+ },
+);
export default ConnectedMultimediaMessage;
diff --git a/native/chat/relationship-prompt.react.js b/native/chat/relationship-prompt.react.js
--- a/native/chat/relationship-prompt.react.js
+++ b/native/chat/relationship-prompt.react.js
@@ -19,7 +19,7 @@
+threadInfo: ThreadInfo,
};
-const RelationshipPrompt: React.ComponentType<Props> = React.memo<Props>(
+const RelationshipPrompt: React.ComponentType<Props> = React.memo(
function RelationshipPrompt({
pendingPersonalThreadUserInfo,
threadInfo,
diff --git a/native/chat/settings/add-users-modal.react.js b/native/chat/settings/add-users-modal.react.js
--- a/native/chat/settings/add-users-modal.react.js
+++ b/native/chat/settings/add-users-modal.react.js
@@ -289,6 +289,6 @@
};
const MemoizedAddUsersModal: React.ComponentType<Props> =
- React.memo<Props>(AddUsersModal);
+ React.memo(AddUsersModal);
export default MemoizedAddUsersModal;
diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -172,8 +172,8 @@
);
}
-const ConnectedColorSelectorModal: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedColorSelectorModal(props: BaseProps) {
+const ConnectedColorSelectorModal: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedColorSelectorModal(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
const windowWidth = useSelector(state => state.dimensions.width);
@@ -191,6 +191,7 @@
changeThreadSettings={callChangeThreadSettings}
/>
);
- });
+ },
+);
export default ConnectedColorSelectorModal;
diff --git a/native/chat/settings/compose-subchannel-modal.react.js b/native/chat/settings/compose-subchannel-modal.react.js
--- a/native/chat/settings/compose-subchannel-modal.react.js
+++ b/native/chat/settings/compose-subchannel-modal.react.js
@@ -138,9 +138,7 @@
}
const ConnectedComposeSubchannelModal: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedComposeSubchannelModal(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedComposeSubchannelModal(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
diff --git a/native/chat/settings/delete-thread.react.js b/native/chat/settings/delete-thread.react.js
--- a/native/chat/settings/delete-thread.react.js
+++ b/native/chat/settings/delete-thread.react.js
@@ -232,8 +232,8 @@
deleteThreadActionTypes,
);
-const ConnectedDeleteThread: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedDeleteThread(props: BaseProps) {
+const ConnectedDeleteThread: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedDeleteThread(props: BaseProps) {
const threadID = props.route.params.threadInfo.id;
const reduxThreadInfo = useSelector(
state => threadInfoSelector(state)[threadID],
@@ -279,6 +279,7 @@
navDispatch={navDispatch}
/>
);
- });
+ },
+);
export default ConnectedDeleteThread;
diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
--- a/native/chat/settings/thread-settings-avatar.react.js
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -34,6 +34,6 @@
};
const MemoizedThreadSettingsAvatar: React.ComponentType<Props> =
- React.memo<Props>(ThreadSettingsAvatar);
+ React.memo(ThreadSettingsAvatar);
export default MemoizedThreadSettingsAvatar;
diff --git a/native/chat/settings/thread-settings-color.react.js b/native/chat/settings/thread-settings-color.react.js
--- a/native/chat/settings/thread-settings-color.react.js
+++ b/native/chat/settings/thread-settings-color.react.js
@@ -99,10 +99,8 @@
};
}
-const ConnectedThreadSettingsColor: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsColor(
- props: BaseProps,
- ) {
+const ConnectedThreadSettingsColor: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadSettingsColor(props: BaseProps) {
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
@@ -120,6 +118,7 @@
styles={styles}
/>
);
- });
+ },
+);
export default ConnectedThreadSettingsColor;
diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js
--- a/native/chat/settings/thread-settings-description.react.js
+++ b/native/chat/settings/thread-settings-description.react.js
@@ -291,9 +291,7 @@
}
const ConnectedThreadSettingsDescription: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsDescription(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsDescription(props: BaseProps) {
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
diff --git a/native/chat/settings/thread-settings-edit-relationship.react.js b/native/chat/settings/thread-settings-edit-relationship.react.js
--- a/native/chat/settings/thread-settings-edit-relationship.react.js
+++ b/native/chat/settings/thread-settings-edit-relationship.react.js
@@ -32,8 +32,8 @@
+relationshipButton: RelationshipButton,
};
-const ThreadSettingsEditRelationship: React.ComponentType<Props> =
- React.memo<Props>(function ThreadSettingsEditRelationship(props: Props) {
+const ThreadSettingsEditRelationship: React.ComponentType<Props> = React.memo(
+ function ThreadSettingsEditRelationship(props: Props) {
const otherUserInfoFromRedux = useSelector(state => {
const currentUserID = state.currentUserInfo?.id;
const otherUserID = getSingleOtherUser(props.threadInfo, currentUserID);
@@ -109,7 +109,8 @@
</Button>
</View>
);
- });
+ },
+);
const unboundStyles = {
button: {
diff --git a/native/chat/settings/thread-settings-leave-thread.react.js b/native/chat/settings/thread-settings-leave-thread.react.js
--- a/native/chat/settings/thread-settings-leave-thread.react.js
+++ b/native/chat/settings/thread-settings-leave-thread.react.js
@@ -135,9 +135,7 @@
}
const ConnectedThreadSettingsLeaveThread: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsLeaveThread(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsLeaveThread(props: BaseProps) {
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -242,9 +242,7 @@
}
const ConnectedThreadSettingsMember: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsMember(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsMember(props: BaseProps) {
const memberID = props.memberInfo.id;
const removeUserLoadingStatus = useSelector(state =>
createLoadingStatusSelector(
diff --git a/native/chat/settings/thread-settings-name.react.js b/native/chat/settings/thread-settings-name.react.js
--- a/native/chat/settings/thread-settings-name.react.js
+++ b/native/chat/settings/thread-settings-name.react.js
@@ -215,8 +215,8 @@
};
}
-const ConnectedThreadSettingsName: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsName(props: BaseProps) {
+const ConnectedThreadSettingsName: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadSettingsName(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
@@ -241,6 +241,7 @@
changeThreadSettings={callChangeThreadSettings}
/>
);
- });
+ },
+);
export default ConnectedThreadSettingsName;
diff --git a/native/chat/settings/thread-settings-parent.react.js b/native/chat/settings/thread-settings-parent.react.js
--- a/native/chat/settings/thread-settings-parent.react.js
+++ b/native/chat/settings/thread-settings-parent.react.js
@@ -110,6 +110,6 @@
};
const ConnectedThreadSettingsParent: React.ComponentType<ThreadSettingsParentProps> =
- React.memo<ThreadSettingsParentProps>(ThreadSettingsParent);
+ React.memo(ThreadSettingsParent);
export default ConnectedThreadSettingsParent;
diff --git a/native/chat/settings/thread-settings-promote-sidebar.react.js b/native/chat/settings/thread-settings-promote-sidebar.react.js
--- a/native/chat/settings/thread-settings-promote-sidebar.react.js
+++ b/native/chat/settings/thread-settings-promote-sidebar.react.js
@@ -95,9 +95,7 @@
};
const ConnectedThreadSettingsPromoteSidebar: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsPromoteSidebar(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsPromoteSidebar(props: BaseProps) {
const { threadInfo } = props;
const colors = useColors();
const styles = useStyles(unboundStyles);
diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js
--- a/native/chat/settings/thread-settings-push-notifs.react.js
+++ b/native/chat/settings/thread-settings-push-notifs.react.js
@@ -140,9 +140,7 @@
}
const ConnectedThreadSettingsPushNotifs: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsPushNotifs(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsPushNotifs(props: BaseProps) {
const keyserverID = extractKeyserverIDFromIDOptional(props.threadInfo.id);
const deviceToken = useSelector(state => {
if (!keyserverID) {
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -1150,8 +1150,8 @@
return false;
};
-const ConnectedThreadSettings: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettings(props: BaseProps) {
+const ConnectedThreadSettings: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadSettings(props: BaseProps) {
const userInfos = useSelector(state => state.userStore.userInfos);
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
@@ -1346,6 +1346,7 @@
inviteLinkExists={!!inviteLink}
/>
);
- });
+ },
+);
export default ConnectedThreadSettings;
diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js
--- a/native/chat/text-message.react.js
+++ b/native/chat/text-message.react.js
@@ -257,8 +257,8 @@
};
}
-const ConnectedTextMessage: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedTextMessage(props: BaseProps) {
+const ConnectedTextMessage: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedTextMessage(props: BaseProps) {
const overlayContext = React.useContext(OverlayContext);
const chatContext = React.useContext(ChatContext);
const markdownContext = React.useContext(MarkdownContext);
@@ -318,6 +318,7 @@
canDeleteMessage={canDeleteMessage}
/>
);
- });
+ },
+);
export { ConnectedTextMessage as TextMessage };
diff --git a/native/chat/thread-screen-pruner.react.js b/native/chat/thread-screen-pruner.react.js
--- a/native/chat/thread-screen-pruner.react.js
+++ b/native/chat/thread-screen-pruner.react.js
@@ -22,7 +22,7 @@
import type { AppState } from '../redux/state-types.js';
import Alert from '../utils/alert.js';
-const ThreadScreenPruner: React.ComponentType<{}> = React.memo<{}>(
+const ThreadScreenPruner: React.ComponentType<{}> = React.memo(
function ThreadScreenPruner() {
const rawThreadInfos = useSelector(
(state: AppState) => state.threadStore.threadInfos,
diff --git a/native/chat/thread-settings-button.react.js b/native/chat/thread-settings-button.react.js
--- a/native/chat/thread-settings-button.react.js
+++ b/native/chat/thread-settings-button.react.js
@@ -50,9 +50,7 @@
}
const ConnectedThreadSettingsButton: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsButton(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedThreadSettingsButton(props: BaseProps) {
const styles = useStyles(unboundStyles);
return <ThreadSettingsButton {...props} styles={styles} />;
diff --git a/native/chat/thread-settings-header-title.react.js b/native/chat/thread-settings-header-title.react.js
--- a/native/chat/thread-settings-header-title.react.js
+++ b/native/chat/thread-settings-header-title.react.js
@@ -19,6 +19,6 @@
}
const MemoizedThreadSettingsHeaderTitle: React.ComponentType<Props> =
- React.memo<Props>(ThreadSettingsHeaderTitle);
+ React.memo(ThreadSettingsHeaderTitle);
export default MemoizedThreadSettingsHeaderTitle;
diff --git a/native/components/community-list-item.react.js b/native/components/community-list-item.react.js
--- a/native/components/community-list-item.react.js
+++ b/native/components/community-list-item.react.js
@@ -191,7 +191,7 @@
}
const MemoizedCommunityListItem: React.ComponentType<Props> =
- React.memo<Props>(CommunityListItem);
+ React.memo(CommunityListItem);
const unboundStyles = {
activityIndicatorContainer: {
diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -877,6 +877,6 @@
});
const MemoizedFullScreenViewModal: React.ComponentType<Props> =
- React.memo<Props>(FullScreenViewModal);
+ React.memo(FullScreenViewModal);
export default MemoizedFullScreenViewModal;
diff --git a/native/components/keyboard-avoiding-view.react.js b/native/components/keyboard-avoiding-view.react.js
--- a/native/components/keyboard-avoiding-view.react.js
+++ b/native/components/keyboard-avoiding-view.react.js
@@ -29,13 +29,14 @@
+behavior: 'height' | 'position' | 'padding',
+contentContainerStyle?: ?ViewStyle,
};
-const KeyboardAvoidingView: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function KeyboardAvoidingView(props: BaseProps) {
+const KeyboardAvoidingView: React.ComponentType<BaseProps> = React.memo(
+ function KeyboardAvoidingView(props: BaseProps) {
const keyboardState = React.useContext(KeyboardContext);
return (
<InnerKeyboardAvoidingView {...props} keyboardState={keyboardState} />
);
- });
+ },
+);
type Props = {
...BaseProps,
diff --git a/native/components/link-button.react.js b/native/components/link-button.react.js
--- a/native/components/link-button.react.js
+++ b/native/components/link-button.react.js
@@ -49,11 +49,12 @@
}
}
-const ConnectedLinkButton: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedLinkButton(props: BaseProps) {
+const ConnectedLinkButton: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedLinkButton(props: BaseProps) {
const styles = useStyles(unboundStyles);
return <LinkButton {...props} styles={styles} />;
- });
+ },
+);
export default ConnectedLinkButton;
diff --git a/native/components/search.react.js b/native/components/search.react.js
--- a/native/components/search.react.js
+++ b/native/components/search.react.js
@@ -144,7 +144,7 @@
const MemoizedSearch: SearchComponentType = React.memo<
Props,
- React.ElementRef<typeof BaseTextInput>,
+ React.RefSetter<React.ElementRef<typeof BaseTextInput>>,
>(Search);
export default MemoizedSearch;
diff --git a/native/components/selectable-text-input.react.ios.js b/native/components/selectable-text-input.react.ios.js
--- a/native/components/selectable-text-input.react.ios.js
+++ b/native/components/selectable-text-input.react.ios.js
@@ -137,7 +137,7 @@
);
const MemoizedSelectableTextInput: MemoizedSelectableTextInputComponent =
- React.memo<SelectableTextInputProps, SelectableTextInputRef>(
+ React.memo<SelectableTextInputProps, React.RefSetter<SelectableTextInputRef>>(
SelectableTextInput,
);
diff --git a/native/components/selectable-text-input.react.js b/native/components/selectable-text-input.react.js
--- a/native/components/selectable-text-input.react.js
+++ b/native/components/selectable-text-input.react.js
@@ -82,7 +82,7 @@
);
const MemoizedSelectableTextInput: MemoizedSelectableTextInputComponent =
- React.memo<SelectableTextInputProps, SelectableTextInputRef>(
+ React.memo<SelectableTextInputProps, React.RefSetter<SelectableTextInputRef>>(
SelectableTextInput,
);
diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js
--- a/native/components/thread-list-thread.react.js
+++ b/native/components/thread-list-thread.react.js
@@ -69,8 +69,8 @@
};
}
-const ConnectedThreadListThread: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadListThread(props: BaseProps) {
+const ConnectedThreadListThread: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadListThread(props: BaseProps) {
const { threadInfo, ...rest } = props;
const styles = useStyles(unboundStyles);
const colors = useColors();
@@ -84,6 +84,7 @@
colors={colors}
/>
);
- });
+ },
+);
export default ConnectedThreadListThread;
diff --git a/native/components/thread-list.react.js b/native/components/thread-list.react.js
--- a/native/components/thread-list.react.js
+++ b/native/components/thread-list.react.js
@@ -144,14 +144,15 @@
};
}
-const ConnectedThreadList: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadList(props: BaseProps) {
+const ConnectedThreadList: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadList(props: BaseProps) {
const styles = useStyles(unboundStyles);
const indicatorStyle = useIndicatorStyle();
return (
<ThreadList {...props} styles={styles} indicatorStyle={indicatorStyle} />
);
- });
+ },
+);
export default ConnectedThreadList;
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -88,11 +88,12 @@
};
}
-const ConnectedUserListUser: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedUserListUser(props: BaseProps) {
+const ConnectedUserListUser: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedUserListUser(props: BaseProps) {
const colors = useColors();
const styles = useStyles(unboundStyles);
return <UserListUser {...props} colors={colors} styles={styles} />;
- });
+ },
+);
export { ConnectedUserListUser as UserListUser, getUserListItemHeight };
diff --git a/native/components/user-list.react.js b/native/components/user-list.react.js
--- a/native/components/user-list.react.js
+++ b/native/components/user-list.react.js
@@ -68,7 +68,7 @@
};
}
-const ConnectedUserList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedUserList: React.ComponentType<BaseProps> = React.memo(
function ConnectedUserList(props: BaseProps) {
const indicatorStyle = useIndicatorStyle();
return <UserList {...props} indicatorStyle={indicatorStyle} />;
diff --git a/native/crash.react.js b/native/crash.react.js
--- a/native/crash.react.js
+++ b/native/crash.react.js
@@ -281,7 +281,7 @@
},
});
-const ConnectedCrash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedCrash: React.ComponentType<BaseProps> = React.memo(
function ConnectedCrash(props: BaseProps) {
const dispatchActionPromise = useDispatchActionPromise();
const callLogOut = useLogOut();
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1656,10 +1656,8 @@
sendTextMessageActionTypes,
);
-const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedInputStateContainer(
- props: BaseProps,
- ) {
+const ConnectedInputStateContainer: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedInputStateContainer(props: BaseProps) {
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
@@ -1707,6 +1705,7 @@
invalidTokenLogOut={callInvalidTokenLogOut}
/>
);
- });
+ },
+);
export default ConnectedInputStateContainer;
diff --git a/native/keyboard/keyboard-input-host.react.js b/native/keyboard/keyboard-input-host.react.js
--- a/native/keyboard/keyboard-input-host.react.js
+++ b/native/keyboard/keyboard-input-host.react.js
@@ -100,8 +100,8 @@
};
}
-const ConnectedKeyboardInputHost: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedKeyboardInputHost(props: BaseProps) {
+const ConnectedKeyboardInputHost: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedKeyboardInputHost(props: BaseProps) {
const inputState = React.useContext(InputStateContext);
const keyboardState = React.useContext(KeyboardContext);
invariant(keyboardState, 'keyboardState should be initialized');
@@ -118,6 +118,7 @@
inputState={inputState}
/>
);
- });
+ },
+);
export default ConnectedKeyboardInputHost;
diff --git a/native/lifecycle/lifecycle-handler.react.js b/native/lifecycle/lifecycle-handler.react.js
--- a/native/lifecycle/lifecycle-handler.react.js
+++ b/native/lifecycle/lifecycle-handler.react.js
@@ -10,7 +10,7 @@
import { appBecameInactive } from '../redux/redux-setup.js';
import { useSelector } from '../redux/redux-utils.js';
-const LifecycleHandler: React.ComponentType<{}> = React.memo<{}>(
+const LifecycleHandler: React.ComponentType<{}> = React.memo(
function LifecycleHandler() {
const dispatch = useDispatch();
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -259,662 +259,655 @@
},
});
-const CameraModal: React.ComponentType<Props> = React.memo<Props>(
- function CameraModal(props: Props) {
- const deviceCameraInfo = useSelector(state => state.deviceCameraInfo);
- const deviceOrientation = useSelector(state => state.deviceOrientation);
- const foreground = useIsAppForegrounded();
- const overlayContext = React.useContext(OverlayContext);
- const dispatch = useDispatch();
-
- const { navigation, handlePhotoCapture } = props;
-
- const isActive = !overlayContext || !overlayContext.isDismissing;
-
- React.useEffect(() => {
- if (isActive) {
- Orientation.unlockAllOrientations();
- } else {
- Orientation.lockToPortrait();
- }
- }, [isActive]);
-
- React.useEffect(() => {
- return () => {
- Orientation.lockToPortrait();
- };
- }, []);
-
- const [flashMode, setFlashMode] = React.useState('off');
-
- const changeFlashMode = React.useCallback(() => {
- setFlashMode(prevFlashMode => {
- if (prevFlashMode === 'on') {
- return 'off';
- } else if (prevFlashMode === 'off') {
- return 'auto';
- }
- return 'on';
- });
- }, []);
-
- const [useFrontCamera, setUseFrontCamera] = React.useState(
- deviceCameraInfo.defaultUseFrontCamera,
- );
-
- const switchCamera = React.useCallback(() => {
- setUseFrontCamera(prevUseFrontCamera => !prevUseFrontCamera);
- }, []);
+const CameraModal: React.ComponentType<Props> = React.memo(function CameraModal(
+ props: Props,
+) {
+ const deviceCameraInfo = useSelector(state => state.deviceCameraInfo);
+ const deviceOrientation = useSelector(state => state.deviceOrientation);
+ const foreground = useIsAppForegrounded();
+ const overlayContext = React.useContext(OverlayContext);
+ const dispatch = useDispatch();
+
+ const { navigation, handlePhotoCapture } = props;
+
+ const isActive = !overlayContext || !overlayContext.isDismissing;
+
+ React.useEffect(() => {
+ if (isActive) {
+ Orientation.unlockAllOrientations();
+ } else {
+ Orientation.lockToPortrait();
+ }
+ }, [isActive]);
- const [hasCamerasOnBothSides, setHasCamerasOnBothSides] = React.useState(
- deviceCameraInfo.hasCamerasOnBothSides,
- );
+ React.useEffect(() => {
+ return () => {
+ Orientation.lockToPortrait();
+ };
+ }, []);
- const cameraIDsFetched = React.useRef(false);
+ const [flashMode, setFlashMode] = React.useState('off');
- const fetchCameraIDs = React.useCallback(async () => {
- if (cameraIDsFetched.current) {
- return;
- }
- cameraIDsFetched.current = true;
-
- const deviceCameras = Camera.getAvailableCameraDevices();
-
- let hasFront = false,
- hasBack = false,
- i = 0;
- while ((!hasFront || !hasBack) && i < deviceCameras.length) {
- const deviceCamera = deviceCameras[i];
- if (deviceCamera.position === 'front') {
- hasFront = true;
- } else if (deviceCamera.position === 'back') {
- hasBack = true;
- }
- i++;
+ const changeFlashMode = React.useCallback(() => {
+ setFlashMode(prevFlashMode => {
+ if (prevFlashMode === 'on') {
+ return 'off';
+ } else if (prevFlashMode === 'off') {
+ return 'auto';
}
+ return 'on';
+ });
+ }, []);
- const nextHasCamerasOnBothSides = hasFront && hasBack;
- const defaultUseFrontCamera = !hasBack && hasFront;
- if (nextHasCamerasOnBothSides !== hasCamerasOnBothSides) {
- setHasCamerasOnBothSides(nextHasCamerasOnBothSides);
- }
- const {
- hasCamerasOnBothSides: oldHasCamerasOnBothSides,
- defaultUseFrontCamera: oldDefaultUseFrontCamera,
- } = deviceCameraInfo;
- if (
- nextHasCamerasOnBothSides !== oldHasCamerasOnBothSides ||
- defaultUseFrontCamera !== oldDefaultUseFrontCamera
- ) {
- dispatch({
- type: updateDeviceCameraInfoActionType,
- payload: {
- hasCamerasOnBothSides: nextHasCamerasOnBothSides,
- defaultUseFrontCamera,
- },
- });
- }
- }, [deviceCameraInfo, dispatch, hasCamerasOnBothSides]);
+ const [useFrontCamera, setUseFrontCamera] = React.useState(
+ deviceCameraInfo.defaultUseFrontCamera,
+ );
- const cameraRef = React.useRef<?Camera>();
+ const switchCamera = React.useCallback(() => {
+ setUseFrontCamera(prevUseFrontCamera => !prevUseFrontCamera);
+ }, []);
- const focusOnPoint = React.useCallback(
- ([inputX, inputY]: [number, number]) => {
- const camera = cameraRef.current;
- invariant(camera, 'camera ref should be set');
- void camera.focus({ x: inputX, y: inputY });
- },
- [],
- );
+ const [hasCamerasOnBothSides, setHasCamerasOnBothSides] = React.useState(
+ deviceCameraInfo.hasCamerasOnBothSides,
+ );
- const [stagingMode, setStagingMode] = React.useState(false);
- const [pendingPhotoCapture, setPendingPhotoCapture] =
- React.useState<?PhotoCapture>();
+ const cameraIDsFetched = React.useRef(false);
- const takePhoto = React.useCallback(async () => {
- const camera = cameraRef.current;
- invariant(camera, 'camera ref should be set');
- setStagingMode(true);
+ const fetchCameraIDs = React.useCallback(async () => {
+ if (cameraIDsFetched.current) {
+ return;
+ }
+ cameraIDsFetched.current = true;
+
+ const deviceCameras = Camera.getAvailableCameraDevices();
+
+ let hasFront = false,
+ hasBack = false,
+ i = 0;
+ while ((!hasFront || !hasBack) && i < deviceCameras.length) {
+ const deviceCamera = deviceCameras[i];
+ if (deviceCamera.position === 'front') {
+ hasFront = true;
+ } else if (deviceCamera.position === 'back') {
+ hasBack = true;
+ }
+ i++;
+ }
- const startTime = Date.now();
- const photoPromise = camera.takePhoto({
- flash: flashMode,
+ const nextHasCamerasOnBothSides = hasFront && hasBack;
+ const defaultUseFrontCamera = !hasBack && hasFront;
+ if (nextHasCamerasOnBothSides !== hasCamerasOnBothSides) {
+ setHasCamerasOnBothSides(nextHasCamerasOnBothSides);
+ }
+ const {
+ hasCamerasOnBothSides: oldHasCamerasOnBothSides,
+ defaultUseFrontCamera: oldDefaultUseFrontCamera,
+ } = deviceCameraInfo;
+ if (
+ nextHasCamerasOnBothSides !== oldHasCamerasOnBothSides ||
+ defaultUseFrontCamera !== oldDefaultUseFrontCamera
+ ) {
+ dispatch({
+ type: updateDeviceCameraInfoActionType,
+ payload: {
+ hasCamerasOnBothSides: nextHasCamerasOnBothSides,
+ defaultUseFrontCamera,
+ },
});
+ }
+ }, [deviceCameraInfo, dispatch, hasCamerasOnBothSides]);
- const { path: uri, width, height } = await photoPromise;
+ const cameraRef = React.useRef<?Camera>();
- const filename = filenameFromPathOrURI(uri);
- invariant(
- filename,
- `unable to parse filename out of react-native-vision-camera URI ${uri}`,
- );
+ const focusOnPoint = React.useCallback(
+ ([inputX, inputY]: [number, number]) => {
+ const camera = cameraRef.current;
+ invariant(camera, 'camera ref should be set');
+ void camera.focus({ x: inputX, y: inputY });
+ },
+ [],
+ );
+
+ const [stagingMode, setStagingMode] = React.useState(false);
+ const [pendingPhotoCapture, setPendingPhotoCapture] =
+ React.useState<?PhotoCapture>();
+
+ const takePhoto = React.useCallback(async () => {
+ const camera = cameraRef.current;
+ invariant(camera, 'camera ref should be set');
+ setStagingMode(true);
+
+ const startTime = Date.now();
+ const photoPromise = camera.takePhoto({
+ flash: flashMode,
+ });
- const now = Date.now();
- const nextPendingPhotoCapture = {
- step: 'photo_capture',
- // If you want to consume this file (e.g. for displaying it in an <Image> component), you might have to add the file:// prefix.
- // https://react-native-vision-camera.com/docs/api/interfaces/PhotoFile#path
- uri: uri.startsWith('file://') ? uri : 'file://' + uri,
- dimensions: { width, height },
- filename,
- time: now - startTime,
- captureTime: now,
- selectTime: 0,
- sendTime: 0,
- retries: 0,
- };
- setPendingPhotoCapture(nextPendingPhotoCapture);
- }, [flashMode]);
-
- const close = React.useCallback(() => {
- if (overlayContext && navigation.goBackOnce) {
- navigation.goBackOnce();
- } else {
- navigation.goBack();
- }
- }, [navigation, overlayContext]);
+ const { path: uri, width, height } = await photoPromise;
- const sendPhoto = React.useCallback(async () => {
- if (!pendingPhotoCapture) {
- return;
- }
+ const filename = filenameFromPathOrURI(uri);
+ invariant(
+ filename,
+ `unable to parse filename out of react-native-vision-camera URI ${uri}`,
+ );
- const now = Date.now();
- const capture = {
- ...pendingPhotoCapture,
- selectTime: now,
- sendTime: now,
- };
+ const now = Date.now();
+ const nextPendingPhotoCapture = {
+ step: 'photo_capture',
+ // If you want to consume this file (e.g. for displaying it in an <Image> component), you might have to add the file:// prefix.
+ // https://react-native-vision-camera.com/docs/api/interfaces/PhotoFile#path
+ uri: uri.startsWith('file://') ? uri : 'file://' + uri,
+ dimensions: { width, height },
+ filename,
+ time: now - startTime,
+ captureTime: now,
+ selectTime: 0,
+ sendTime: 0,
+ retries: 0,
+ };
+ setPendingPhotoCapture(nextPendingPhotoCapture);
+ }, [flashMode]);
+
+ const close = React.useCallback(() => {
+ if (overlayContext && navigation.goBackOnce) {
+ navigation.goBackOnce();
+ } else {
+ navigation.goBack();
+ }
+ }, [navigation, overlayContext]);
- close();
- handlePhotoCapture(capture);
- }, [close, handlePhotoCapture, pendingPhotoCapture]);
-
- const clearPendingImage = React.useCallback(() => {
- invariant(cameraRef.current, 'camera ref should be set');
- setStagingMode(false);
- setPendingPhotoCapture();
- }, []);
-
- const closeButtonRef = React.useRef<?React.ElementRef<typeof View>>();
- const closeButtonDimensions = useSharedValue({
- x: -1,
- y: -1,
- width: 0,
- height: 0,
- });
+ const sendPhoto = React.useCallback(async () => {
+ if (!pendingPhotoCapture) {
+ return;
+ }
- const photoButtonRef = React.useRef<?React.ElementRef<typeof View>>();
- const photoButtonDimensions = useSharedValue({
- x: -1,
- y: -1,
- width: 0,
- height: 0,
- });
+ const now = Date.now();
+ const capture = {
+ ...pendingPhotoCapture,
+ selectTime: now,
+ sendTime: now,
+ };
- const switchCameraButtonRef =
- React.useRef<?React.ElementRef<typeof View>>();
- const switchCameraButtonDimensions = useSharedValue({
- x: -1,
- y: -1,
- width: 0,
- height: 0,
+ close();
+ handlePhotoCapture(capture);
+ }, [close, handlePhotoCapture, pendingPhotoCapture]);
+
+ const clearPendingImage = React.useCallback(() => {
+ invariant(cameraRef.current, 'camera ref should be set');
+ setStagingMode(false);
+ setPendingPhotoCapture();
+ }, []);
+
+ const closeButtonRef = React.useRef<?React.ElementRef<typeof View>>();
+ const closeButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const photoButtonRef = React.useRef<?React.ElementRef<typeof View>>();
+ const photoButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const switchCameraButtonRef = React.useRef<?React.ElementRef<typeof View>>();
+ const switchCameraButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const flashButtonRef = React.useRef<?React.ElementRef<typeof View>>();
+ const flashButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const onCloseButtonLayout = React.useCallback(() => {
+ if (!closeButtonRef.current) {
+ return;
+ }
+ closeButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ closeButtonDimensions.value = { x: pageX, y: pageY, width, height };
});
+ }, [closeButtonDimensions]);
- const flashButtonRef = React.useRef<?React.ElementRef<typeof View>>();
- const flashButtonDimensions = useSharedValue({
- x: -1,
- y: -1,
- width: 0,
- height: 0,
+ const onPhotoButtonLayout = React.useCallback(() => {
+ if (!photoButtonRef.current) {
+ return;
+ }
+ photoButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ photoButtonDimensions.value = { x: pageX, y: pageY, width, height };
});
+ }, [photoButtonDimensions]);
- const onCloseButtonLayout = React.useCallback(() => {
- if (!closeButtonRef.current) {
- return;
- }
- closeButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
- closeButtonDimensions.value = { x: pageX, y: pageY, width, height };
- });
- }, [closeButtonDimensions]);
-
- const onPhotoButtonLayout = React.useCallback(() => {
- if (!photoButtonRef.current) {
- return;
- }
- photoButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
- photoButtonDimensions.value = { x: pageX, y: pageY, width, height };
- });
- }, [photoButtonDimensions]);
-
- const onSwitchCameraButtonLayout = React.useCallback(() => {
- if (!switchCameraButtonRef.current) {
- return;
- }
- switchCameraButtonRef.current.measure(
- (x, y, width, height, pageX, pageY) => {
- switchCameraButtonDimensions.value = {
- x: pageX,
- y: pageY,
- width,
- height,
- };
- },
- );
- }, [switchCameraButtonDimensions]);
-
- React.useEffect(() => {
- if (!hasCamerasOnBothSides) {
+ const onSwitchCameraButtonLayout = React.useCallback(() => {
+ if (!switchCameraButtonRef.current) {
+ return;
+ }
+ switchCameraButtonRef.current.measure(
+ (x, y, width, height, pageX, pageY) => {
switchCameraButtonDimensions.value = {
- x: -1,
- y: -1,
- width: 0,
- height: 0,
+ x: pageX,
+ y: pageY,
+ width,
+ height,
};
- }
- }, [hasCamerasOnBothSides, switchCameraButtonDimensions]);
+ },
+ );
+ }, [switchCameraButtonDimensions]);
+
+ React.useEffect(() => {
+ if (!hasCamerasOnBothSides) {
+ switchCameraButtonDimensions.value = {
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ };
+ }
+ }, [hasCamerasOnBothSides, switchCameraButtonDimensions]);
- const onFlashButtonLayout = React.useCallback(() => {
- if (!flashButtonRef.current) {
- return;
- }
- flashButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
- flashButtonDimensions.value = { x: pageX, y: pageY, width, height };
- });
- }, [flashButtonDimensions]);
-
- const insets = useSafeAreaInsets();
-
- const outsideButtons = React.useCallback(
- (x: number, y: number) => {
- 'worklet';
- const isOutsideButton = (dim: Dimensions) => {
- return (
- x < dim.x ||
- x > dim.x + dim.width ||
- y + insets.top < dim.y ||
- y + insets.top > dim.y + dim.height
- );
- };
- const isOutsideCloseButton = isOutsideButton(
- closeButtonDimensions.value,
- );
- const isOutsidePhotoButton = isOutsideButton(
- photoButtonDimensions.value,
- );
- const isOutsideSwitchCameraButton = isOutsideButton(
- switchCameraButtonDimensions.value,
- );
- const isOutsideFlashButton = isOutsideButton(
- flashButtonDimensions.value,
- );
+ const onFlashButtonLayout = React.useCallback(() => {
+ if (!flashButtonRef.current) {
+ return;
+ }
+ flashButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ flashButtonDimensions.value = { x: pageX, y: pageY, width, height };
+ });
+ }, [flashButtonDimensions]);
+ const insets = useSafeAreaInsets();
+
+ const outsideButtons = React.useCallback(
+ (x: number, y: number) => {
+ 'worklet';
+ const isOutsideButton = (dim: Dimensions) => {
return (
- isOutsideCloseButton &&
- isOutsidePhotoButton &&
- isOutsideSwitchCameraButton &&
- isOutsideFlashButton
+ x < dim.x ||
+ x > dim.x + dim.width ||
+ y + insets.top < dim.y ||
+ y + insets.top > dim.y + dim.height
);
- },
- [
- closeButtonDimensions.value,
- flashButtonDimensions.value,
- insets.top,
- photoButtonDimensions.value,
+ };
+ const isOutsideCloseButton = isOutsideButton(closeButtonDimensions.value);
+ const isOutsidePhotoButton = isOutsideButton(photoButtonDimensions.value);
+ const isOutsideSwitchCameraButton = isOutsideButton(
switchCameraButtonDimensions.value,
- ],
- );
-
- const focusIndicatorScale = useSharedValue(0.75);
- const focusIndicatorPosition = useSharedValue({ x: 0, y: 0 });
- const focusIndicatorOpacity = useSharedValue(0);
- const numScaleLoops = useSharedValue(0);
+ );
+ const isOutsideFlashButton = isOutsideButton(flashButtonDimensions.value);
- const startFocusAnimation = React.useCallback(
- (x: number, y: number) => {
- 'worklet';
- focusIndicatorPosition.value = { x, y };
- focusIndicatorOpacity.value = 1;
+ return (
+ isOutsideCloseButton &&
+ isOutsidePhotoButton &&
+ isOutsideSwitchCameraButton &&
+ isOutsideFlashButton
+ );
+ },
+ [
+ closeButtonDimensions.value,
+ flashButtonDimensions.value,
+ insets.top,
+ photoButtonDimensions.value,
+ switchCameraButtonDimensions.value,
+ ],
+ );
+
+ const focusIndicatorScale = useSharedValue(0.75);
+ const focusIndicatorPosition = useSharedValue({ x: 0, y: 0 });
+ const focusIndicatorOpacity = useSharedValue(0);
+ const numScaleLoops = useSharedValue(0);
+
+ const startFocusAnimation = React.useCallback(
+ (x: number, y: number) => {
+ 'worklet';
+ focusIndicatorPosition.value = { x, y };
+ focusIndicatorOpacity.value = 1;
+ numScaleLoops.value = 0;
+ focusIndicatorScale.value = 0.75;
+ focusIndicatorScale.value = withSpring(1, indicatorSpringConfig);
+ },
+ [
+ focusIndicatorOpacity,
+ focusIndicatorPosition,
+ focusIndicatorScale,
+ numScaleLoops,
+ ],
+ );
+
+ useAnimatedReaction(
+ () => focusIndicatorScale.value,
+ (prevScale, currScale) => {
+ if (prevScale <= 1.2 && currScale > 1.2) {
+ numScaleLoops.value++;
+ }
+ if (numScaleLoops.value > 1) {
numScaleLoops.value = 0;
- focusIndicatorScale.value = 0.75;
- focusIndicatorScale.value = withSpring(1, indicatorSpringConfig);
- },
- [
- focusIndicatorOpacity,
- focusIndicatorPosition,
- focusIndicatorScale,
- numScaleLoops,
+ focusIndicatorScale.value = withDelay(
+ 400,
+ withTiming(0, indicatorTimingConfig),
+ );
+ focusIndicatorOpacity.value = withDelay(
+ 400,
+ withTiming(0, indicatorTimingConfig),
+ );
+ }
+ },
+ );
+
+ const cancelFocusAnimation = React.useCallback(() => {
+ cancelAnimation(focusIndicatorScale);
+ cancelAnimation(focusIndicatorOpacity);
+ focusIndicatorOpacity.value = 0;
+ }, [focusIndicatorOpacity, focusIndicatorScale]);
+
+ const focusIndicatorAnimatedStyle = useAnimatedStyle(
+ () => ({
+ opacity: focusIndicatorOpacity.value,
+ transform: [
+ { translateX: focusIndicatorPosition.value.x },
+ { translateY: focusIndicatorPosition.value.y },
+ { scale: focusIndicatorScale.value },
],
- );
+ }),
+ [],
+ );
- useAnimatedReaction(
- () => focusIndicatorScale.value,
- (prevScale, currScale) => {
- if (prevScale <= 1.2 && currScale > 1.2) {
- numScaleLoops.value++;
- }
- if (numScaleLoops.value > 1) {
- numScaleLoops.value = 0;
- focusIndicatorScale.value = withDelay(
- 400,
- withTiming(0, indicatorTimingConfig),
- );
- focusIndicatorOpacity.value = withDelay(
- 400,
- withTiming(0, indicatorTimingConfig),
- );
- }
- },
- );
+ const focusIndicatorStyle = React.useMemo(
+ () => [styles.focusIndicator, focusIndicatorAnimatedStyle],
+ [focusIndicatorAnimatedStyle],
+ );
- const cancelFocusAnimation = React.useCallback(() => {
- cancelAnimation(focusIndicatorScale);
- cancelAnimation(focusIndicatorOpacity);
- focusIndicatorOpacity.value = 0;
- }, [focusIndicatorOpacity, focusIndicatorScale]);
-
- const focusIndicatorAnimatedStyle = useAnimatedStyle(
- () => ({
- opacity: focusIndicatorOpacity.value,
- transform: [
- { translateX: focusIndicatorPosition.value.x },
- { translateY: focusIndicatorPosition.value.y },
- { scale: focusIndicatorScale.value },
- ],
- }),
- [],
- );
+ const zoomBase = useSharedValue(1);
+ const currentZoom = useSharedValue(1);
- const focusIndicatorStyle = React.useMemo(
- () => [styles.focusIndicator, focusIndicatorAnimatedStyle],
- [focusIndicatorAnimatedStyle],
- );
+ const animatedProps = useAnimatedProps<CameraProps>(
+ () => ({ zoom: currentZoom.value }),
+ [currentZoom],
+ );
- const zoomBase = useSharedValue(1);
- const currentZoom = useSharedValue(1);
-
- const animatedProps = useAnimatedProps<CameraProps>(
- () => ({ zoom: currentZoom.value }),
- [currentZoom],
- );
-
- const onPinchUpdate = React.useCallback(
- (pinchScale: number) => {
- 'worklet';
- currentZoom.value = clamp(zoomBase.value * pinchScale, 1, 8);
- },
- [currentZoom, zoomBase.value],
- );
-
- const onPinchEnd = React.useCallback(() => {
+ const onPinchUpdate = React.useCallback(
+ (pinchScale: number) => {
'worklet';
- zoomBase.value = currentZoom.value;
- }, [currentZoom, zoomBase]);
-
- const gesture = React.useMemo(() => {
- const pinchGesture = Gesture.Pinch()
- .onUpdate(({ scale }) => onPinchUpdate(scale))
- .onEnd(() => onPinchEnd());
- const tapGesture = Gesture.Tap().onStart(({ x, y }) => {
- if (outsideButtons(x, y)) {
- runOnJS(focusOnPoint)([x, y]);
- startFocusAnimation(x, y);
- }
- });
- return Gesture.Exclusive(pinchGesture, tapGesture);
- }, [
- focusOnPoint,
- onPinchEnd,
- onPinchUpdate,
- outsideButtons,
- startFocusAnimation,
- ]);
-
- const stagingModeProgress = useSharedValue(0);
-
- const overlayAnimatedStyle = useAnimatedStyle(() => {
- const overlayOpacity = interpolate(
- stagingModeProgress.value,
- [0, 0.01, 1],
- [0, 0.5, 0],
- Extrapolate.CLAMP,
- );
- return {
- opacity: overlayOpacity,
- };
+ currentZoom.value = clamp(zoomBase.value * pinchScale, 1, 8);
+ },
+ [currentZoom, zoomBase.value],
+ );
+
+ const onPinchEnd = React.useCallback(() => {
+ 'worklet';
+ zoomBase.value = currentZoom.value;
+ }, [currentZoom, zoomBase]);
+
+ const gesture = React.useMemo(() => {
+ const pinchGesture = Gesture.Pinch()
+ .onUpdate(({ scale }) => onPinchUpdate(scale))
+ .onEnd(() => onPinchEnd());
+ const tapGesture = Gesture.Tap().onStart(({ x, y }) => {
+ if (outsideButtons(x, y)) {
+ runOnJS(focusOnPoint)([x, y]);
+ startFocusAnimation(x, y);
+ }
});
-
- const overlayStyle = React.useMemo(
- () => [styles.overlay, overlayAnimatedStyle],
- [overlayAnimatedStyle],
+ return Gesture.Exclusive(pinchGesture, tapGesture);
+ }, [
+ focusOnPoint,
+ onPinchEnd,
+ onPinchUpdate,
+ outsideButtons,
+ startFocusAnimation,
+ ]);
+
+ const stagingModeProgress = useSharedValue(0);
+
+ const overlayAnimatedStyle = useAnimatedStyle(() => {
+ const overlayOpacity = interpolate(
+ stagingModeProgress.value,
+ [0, 0.01, 1],
+ [0, 0.5, 0],
+ Extrapolate.CLAMP,
);
+ return {
+ opacity: overlayOpacity,
+ };
+ });
- const sendButtonProgress = React.useRef(new Animated.Value(0));
+ const overlayStyle = React.useMemo(
+ () => [styles.overlay, overlayAnimatedStyle],
+ [overlayAnimatedStyle],
+ );
- const sendButtonStyle = React.useMemo(() => {
- const sendButtonScale = sendButtonProgress.current.interpolate({
- inputRange: [0, 1],
- outputRange: ([1.1, 1]: number[]), // Flow...
- });
- return {
- opacity: sendButtonProgress.current,
- transform: [{ scale: sendButtonScale }],
- };
- }, []);
+ const sendButtonProgress = React.useRef(new Animated.Value(0));
- const prevDeviceOrientation = React.useRef<?Orientations>();
- React.useEffect(() => {
- if (deviceOrientation !== prevDeviceOrientation.current) {
- cancelFocusAnimation();
- }
- prevDeviceOrientation.current = deviceOrientation;
- }, [cancelFocusAnimation, deviceOrientation]);
-
- const prevStagingMode = React.useRef(false);
- React.useEffect(() => {
- if (stagingMode && !prevStagingMode.current) {
- cancelFocusAnimation();
- stagingModeProgress.value = withTiming(1, stagingModeAnimationConfig);
- } else if (!stagingMode && prevStagingMode.current) {
- stagingModeProgress.value = 0;
- }
- prevStagingMode.current = stagingMode;
- }, [cancelFocusAnimation, stagingMode, stagingModeProgress]);
-
- const prevPendingPhotoCapture = React.useRef<?PhotoCapture>();
- React.useEffect(() => {
- if (pendingPhotoCapture && !prevPendingPhotoCapture.current) {
- Animated.timing(sendButtonProgress.current, {
- ...sendButtonAnimationConfig,
- toValue: 1,
- }).start();
- } else if (!pendingPhotoCapture && prevPendingPhotoCapture.current) {
- void cleanUpPendingPhotoCapture(prevPendingPhotoCapture.current);
- sendButtonProgress.current.setValue(0);
- }
- prevPendingPhotoCapture.current = pendingPhotoCapture;
- }, [pendingPhotoCapture]);
-
- const containerAnimatedStyle = useAnimatedStyle(
- () => ({
- opacity: overlayContext?.position?.value,
- }),
- [overlayContext],
- );
+ const sendButtonStyle = React.useMemo(() => {
+ const sendButtonScale = sendButtonProgress.current.interpolate({
+ inputRange: [0, 1],
+ outputRange: ([1.1, 1]: number[]), // Flow...
+ });
+ return {
+ opacity: sendButtonProgress.current,
+ transform: [{ scale: sendButtonScale }],
+ };
+ }, []);
- const containerStyle = React.useMemo(() => {
- if (!overlayContext) {
- return styles.container;
- }
- return [styles.container, containerAnimatedStyle];
- }, [containerAnimatedStyle, overlayContext]);
+ const prevDeviceOrientation = React.useRef<?Orientations>();
+ React.useEffect(() => {
+ if (deviceOrientation !== prevDeviceOrientation.current) {
+ cancelFocusAnimation();
+ }
+ prevDeviceOrientation.current = deviceOrientation;
+ }, [cancelFocusAnimation, deviceOrientation]);
+
+ const prevStagingMode = React.useRef(false);
+ React.useEffect(() => {
+ if (stagingMode && !prevStagingMode.current) {
+ cancelFocusAnimation();
+ stagingModeProgress.value = withTiming(1, stagingModeAnimationConfig);
+ } else if (!stagingMode && prevStagingMode.current) {
+ stagingModeProgress.value = 0;
+ }
+ prevStagingMode.current = stagingMode;
+ }, [cancelFocusAnimation, stagingMode, stagingModeProgress]);
+
+ const prevPendingPhotoCapture = React.useRef<?PhotoCapture>();
+ React.useEffect(() => {
+ if (pendingPhotoCapture && !prevPendingPhotoCapture.current) {
+ Animated.timing(sendButtonProgress.current, {
+ ...sendButtonAnimationConfig,
+ toValue: 1,
+ }).start();
+ } else if (!pendingPhotoCapture && prevPendingPhotoCapture.current) {
+ void cleanUpPendingPhotoCapture(prevPendingPhotoCapture.current);
+ sendButtonProgress.current.setValue(0);
+ }
+ prevPendingPhotoCapture.current = pendingPhotoCapture;
+ }, [pendingPhotoCapture]);
+
+ const containerAnimatedStyle = useAnimatedStyle(
+ () => ({
+ opacity: overlayContext?.position?.value,
+ }),
+ [overlayContext],
+ );
+
+ const containerStyle = React.useMemo(() => {
+ if (!overlayContext) {
+ return styles.container;
+ }
+ return [styles.container, containerAnimatedStyle];
+ }, [containerAnimatedStyle, overlayContext]);
- const { hasPermission, requestPermission } = useCameraPermission();
+ const { hasPermission, requestPermission } = useCameraPermission();
- React.useEffect(() => {
- if (foreground && !hasPermission) {
- void requestPermission();
- }
- }, [foreground, hasPermission, requestPermission]);
+ React.useEffect(() => {
+ if (foreground && !hasPermission) {
+ void requestPermission();
+ }
+ }, [foreground, hasPermission, requestPermission]);
- const renderCamera = (): React.Node => {
- if (cameraRef.current) {
- void fetchCameraIDs();
- }
- if (stagingMode) {
- return renderStagingView();
- }
+ const renderCamera = (): React.Node => {
+ if (cameraRef.current) {
+ void fetchCameraIDs();
+ }
+ if (stagingMode) {
+ return renderStagingView();
+ }
- return (
- <SafeAreaView style={styles.fill}>
+ return (
+ <SafeAreaView style={styles.fill}>
+ <View style={styles.fill}>
+ {renderCameraContent()}
+ <TouchableOpacity
+ onPress={close}
+ onLayout={onCloseButtonLayout}
+ style={styles.closeButton}
+ ref={closeButtonRef}
+ >
+ <Text style={styles.closeIcon}>×</Text>
+ </TouchableOpacity>
+ </View>
+ </SafeAreaView>
+ );
+ };
+
+ const renderStagingView = (): React.Node => {
+ let image = null;
+ if (pendingPhotoCapture) {
+ const imageSource = { uri: pendingPhotoCapture.uri };
+ image = <Image source={imageSource} style={styles.stagingImage} />;
+ } else {
+ image = <ContentLoading fillType="flex" colors={colors.dark} />;
+ }
+
+ return (
+ <>
+ {image}
+ <SafeAreaView style={styles.stagingViewOverlay}>
<View style={styles.fill}>
- {renderCameraContent()}
<TouchableOpacity
- onPress={close}
- onLayout={onCloseButtonLayout}
- style={styles.closeButton}
- ref={closeButtonRef}
+ onPress={clearPendingImage}
+ style={styles.retakeButton}
>
- <Text style={styles.closeIcon}>×</Text>
+ <Icon name="arrow-back" style={styles.retakeIcon} />
</TouchableOpacity>
+ <SendMediaButton
+ onPress={sendPhoto}
+ pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
+ containerStyle={styles.sendButtonContainer}
+ style={sendButtonStyle}
+ />
</View>
</SafeAreaView>
+ </>
+ );
+ };
+
+ const renderCameraContent = (): React.Node => {
+ if (!hasPermission) {
+ return (
+ <View style={styles.authorizationDeniedContainer}>
+ <Text style={styles.authorizationDeniedText}>
+ {'don’t have permission :('}
+ </Text>
+ </View>
);
- };
+ }
- const renderStagingView = (): React.Node => {
- let image = null;
- if (pendingPhotoCapture) {
- const imageSource = { uri: pendingPhotoCapture.uri };
- image = <Image source={imageSource} style={styles.stagingImage} />;
- } else {
- image = <ContentLoading fillType="flex" colors={colors.dark} />;
- }
+ let switchCameraButton = null;
+ if (hasCamerasOnBothSides) {
+ switchCameraButton = (
+ <TouchableOpacity
+ onPress={switchCamera}
+ onLayout={onSwitchCameraButtonLayout}
+ style={styles.switchCameraButton}
+ ref={switchCameraButtonRef}
+ >
+ <Icon name="camera-reverse" style={styles.switchCameraIcon} />
+ </TouchableOpacity>
+ );
+ }
- return (
+ let flashIcon;
+ if (flashMode === 'on') {
+ flashIcon = <Icon name="flash" style={styles.flashIcon} />;
+ } else if (flashMode === 'off') {
+ flashIcon = <Icon name="flash-off" style={styles.flashIcon} />;
+ } else {
+ flashIcon = (
<>
- {image}
- <SafeAreaView style={styles.stagingViewOverlay}>
- <View style={styles.fill}>
- <TouchableOpacity
- onPress={clearPendingImage}
- style={styles.retakeButton}
- >
- <Icon name="arrow-back" style={styles.retakeIcon} />
- </TouchableOpacity>
- <SendMediaButton
- onPress={sendPhoto}
- pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
- containerStyle={styles.sendButtonContainer}
- style={sendButtonStyle}
- />
- </View>
- </SafeAreaView>
+ <Icon name="flash" style={styles.flashIcon} />
+ <Text style={styles.flashIconAutoText}>A</Text>
</>
);
- };
-
- const renderCameraContent = (): React.Node => {
- if (!hasPermission) {
- return (
- <View style={styles.authorizationDeniedContainer}>
- <Text style={styles.authorizationDeniedText}>
- {'don’t have permission :('}
- </Text>
- </View>
- );
- }
+ }
- let switchCameraButton = null;
- if (hasCamerasOnBothSides) {
- switchCameraButton = (
+ return (
+ <GestureDetector gesture={gesture}>
+ <Reanimated.View style={styles.fill}>
+ <Reanimated.View style={focusIndicatorStyle} />
<TouchableOpacity
- onPress={switchCamera}
- onLayout={onSwitchCameraButtonLayout}
- style={styles.switchCameraButton}
- ref={switchCameraButtonRef}
+ onPress={changeFlashMode}
+ onLayout={onFlashButtonLayout}
+ style={styles.flashButton}
+ ref={flashButtonRef}
>
- <Icon name="camera-reverse" style={styles.switchCameraIcon} />
+ {flashIcon}
</TouchableOpacity>
- );
- }
-
- let flashIcon;
- if (flashMode === 'on') {
- flashIcon = <Icon name="flash" style={styles.flashIcon} />;
- } else if (flashMode === 'off') {
- flashIcon = <Icon name="flash-off" style={styles.flashIcon} />;
- } else {
- flashIcon = (
- <>
- <Icon name="flash" style={styles.flashIcon} />
- <Text style={styles.flashIconAutoText}>A</Text>
- </>
- );
- }
-
- return (
- <GestureDetector gesture={gesture}>
- <Reanimated.View style={styles.fill}>
- <Reanimated.View style={focusIndicatorStyle} />
+ <View style={styles.bottomButtonsContainer}>
<TouchableOpacity
- onPress={changeFlashMode}
- onLayout={onFlashButtonLayout}
- style={styles.flashButton}
- ref={flashButtonRef}
+ onPress={takePhoto}
+ onLayout={onPhotoButtonLayout}
+ style={styles.saveButton}
+ ref={photoButtonRef}
>
- {flashIcon}
+ <View style={styles.saveButtonInner} />
</TouchableOpacity>
- <View style={styles.bottomButtonsContainer}>
- <TouchableOpacity
- onPress={takePhoto}
- onLayout={onPhotoButtonLayout}
- style={styles.saveButton}
- ref={photoButtonRef}
- >
- <View style={styles.saveButtonInner} />
- </TouchableOpacity>
- {switchCameraButton}
- </View>
- </Reanimated.View>
- </GestureDetector>
- );
- };
-
- const statusBar = isActive ? <ConnectedStatusBar hidden /> : null;
- const device = useCameraDevice(useFrontCamera ? 'front' : 'back');
- if (!device) {
- return (
- <View style={styles.authorizationDeniedContainer}>
- <Text style={styles.authorizationDeniedText}>
- No camera is available on your device
- </Text>
- </View>
- );
- }
-
- const camera = hasPermission ? (
- <ReanimatedCamera
- style={StyleSheet.absoluteFill}
- ref={cameraRef}
- device={device}
- isActive
- animatedProps={animatedProps}
- photo
- torch={flashMode === 'auto' ? 'off' : flashMode}
- maxZoom={maxZoom}
- />
- ) : null;
+ {switchCameraButton}
+ </View>
+ </Reanimated.View>
+ </GestureDetector>
+ );
+ };
+ const statusBar = isActive ? <ConnectedStatusBar hidden /> : null;
+ const device = useCameraDevice(useFrontCamera ? 'front' : 'back');
+ if (!device) {
return (
- <Reanimated.View style={containerStyle}>
- {statusBar}
- {camera}
- <View style={StyleSheet.absoluteFill}>{renderCamera()}</View>
- <Reanimated.View style={overlayStyle} pointerEvents="none" />
- </Reanimated.View>
+ <View style={styles.authorizationDeniedContainer}>
+ <Text style={styles.authorizationDeniedText}>
+ No camera is available on your device
+ </Text>
+ </View>
);
- },
-);
+ }
+
+ const camera = hasPermission ? (
+ <ReanimatedCamera
+ style={StyleSheet.absoluteFill}
+ ref={cameraRef}
+ device={device}
+ isActive
+ animatedProps={animatedProps}
+ photo
+ torch={flashMode === 'auto' ? 'off' : flashMode}
+ maxZoom={maxZoom}
+ />
+ ) : null;
+
+ return (
+ <Reanimated.View style={containerStyle}>
+ {statusBar}
+ {camera}
+ <View style={StyleSheet.absoluteFill}>{renderCamera()}</View>
+ <Reanimated.View style={overlayStyle} pointerEvents="none" />
+ </Reanimated.View>
+ );
+});
export default CameraModal;
diff --git a/native/media/multimedia.react.js b/native/media/multimedia.react.js
--- a/native/media/multimedia.react.js
+++ b/native/media/multimedia.react.js
@@ -230,10 +230,11 @@
},
});
-const ConnectedMultimedia: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMultimedia(props: BaseProps) {
+const ConnectedMultimedia: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedMultimedia(props: BaseProps) {
const inputState = React.useContext(InputStateContext);
return <Multimedia {...props} inputState={inputState} />;
- });
+ },
+);
export default ConnectedMultimedia;
diff --git a/native/navigation/nav-from-redux-handler.react.js b/native/navigation/nav-from-redux-handler.react.js
--- a/native/navigation/nav-from-redux-handler.react.js
+++ b/native/navigation/nav-from-redux-handler.react.js
@@ -7,7 +7,7 @@
import type { MonitorActionState } from '../redux/dev-tools.react.js';
import { useSelector } from '../redux/redux-utils.js';
-const NavFromReduxHandler: React.ComponentType<{}> = React.memo<{}>(
+const NavFromReduxHandler: React.ComponentType<{}> = React.memo(
function NavFromReduxHandler() {
const navContext = React.useContext(NavContext);
diff --git a/native/navigation/navigation-handler.react.js b/native/navigation/navigation-handler.react.js
--- a/native/navigation/navigation-handler.react.js
+++ b/native/navigation/navigation-handler.react.js
@@ -24,7 +24,7 @@
import DevTools from '../redux/dev-tools.react.js';
import { useSelector } from '../redux/redux-utils.js';
-const NavigationHandler: React.ComponentType<{}> = React.memo<{}>(
+const NavigationHandler: React.ComponentType<{}> = React.memo(
function NavigationHandler() {
const navContext = React.useContext(NavContext);
const persistedStateLoaded = usePersistedStateLoaded();
@@ -62,7 +62,7 @@
type LogInHandlerProps = {
+dispatch: (action: NavAction) => void,
};
-const LogInHandler = React.memo<LogInHandlerProps>(function LogInHandler(
+const LogInHandler = React.memo(function LogInHandler(
props: LogInHandlerProps,
) {
const { dispatch } = props;
diff --git a/native/navigation/orientation-handler.react.js b/native/navigation/orientation-handler.react.js
--- a/native/navigation/orientation-handler.react.js
+++ b/native/navigation/orientation-handler.react.js
@@ -47,7 +47,7 @@
}
}
-const ConnectedOrientationHandler: React.ComponentType<{}> = React.memo<{}>(
+const ConnectedOrientationHandler: React.ComponentType<{}> = React.memo(
function ConnectedOrientationHandler() {
const deviceOrientation = useSelector(state => state.deviceOrientation);
const dispatch = useDispatch();
diff --git a/native/navigation/overlay-navigator.react.js b/native/navigation/overlay-navigator.react.js
--- a/native/navigation/overlay-navigator.react.js
+++ b/native/navigation/overlay-navigator.react.js
@@ -113,7 +113,7 @@
OverlayNavigationHelpers<>,
>,
>;
-const OverlayNavigator = React.memo<Props>(
+const OverlayNavigator = React.memo(
({ initialRouteName, children, screenOptions, screenListeners }: Props) => {
const { state, descriptors, navigation } = useNavigationBuilder<
StackNavigationState,
diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js
--- a/native/navigation/tab-navigator.react.js
+++ b/native/navigation/tab-navigator.react.js
@@ -89,7 +89,7 @@
CustomBottomTabNavigationHelpers<>,
>;
-const TabNavigator = React.memo<TabNavigatorProps>(function TabNavigator({
+const TabNavigator = React.memo(function TabNavigator({
id,
initialRouteName,
backBehavior,
diff --git a/native/navigation/thread-screen-tracker.react.js b/native/navigation/thread-screen-tracker.react.js
--- a/native/navigation/thread-screen-tracker.react.js
+++ b/native/navigation/thread-screen-tracker.react.js
@@ -7,7 +7,7 @@
import { useActiveMessageList } from './nav-selectors.js';
-const ThreadScreenTracker: React.ComponentType<{}> = React.memo<{}>(
+const ThreadScreenTracker: React.ComponentType<{}> = React.memo(
function ThreadScreenTracker() {
const activeThread = useActiveMessageList();
const reduxDispatch = useDispatch();
diff --git a/native/profile/appearance-preferences.react.js b/native/profile/appearance-preferences.react.js
--- a/native/profile/appearance-preferences.react.js
+++ b/native/profile/appearance-preferences.react.js
@@ -140,9 +140,7 @@
+route: NavigationRoute<'AppearancePreferences'>,
};
const ConnectedAppearancePreferences: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedAppearancePreferences(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedAppearancePreferences(props: BaseProps) {
const globalThemeInfo = useSelector(state => state.globalThemeInfo);
const updateThemePreference = useUpdateThemePreference();
diff --git a/native/profile/custom-server-modal.react.js b/native/profile/custom-server-modal.react.js
--- a/native/profile/custom-server-modal.react.js
+++ b/native/profile/custom-server-modal.react.js
@@ -118,8 +118,8 @@
};
}
-const ConnectedCustomServerModal: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedCustomServerModal(props: BaseProps) {
+const ConnectedCustomServerModal: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedCustomServerModal(props: BaseProps) {
const urlPrefix = useSelector(urlPrefixSelector(authoritativeKeyserverID));
invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
const customServer = useSelector(state => state.customServer);
@@ -135,6 +135,7 @@
dispatch={dispatch}
/>
);
- });
+ },
+);
export default ConnectedCustomServerModal;
diff --git a/native/profile/default-notifications-preferences.react.js b/native/profile/default-notifications-preferences.react.js
--- a/native/profile/default-notifications-preferences.react.js
+++ b/native/profile/default-notifications-preferences.react.js
@@ -181,7 +181,7 @@
registerFetchKey(setUserSettingsActionTypes);
const ConnectedDefaultNotificationPreferences: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedDefaultNotificationPreferences(
+ React.memo(function ConnectedDefaultNotificationPreferences(
props: BaseProps,
) {
const styles = useStyles(unboundStyles);
diff --git a/native/profile/delete-account.react.js b/native/profile/delete-account.react.js
--- a/native/profile/delete-account.react.js
+++ b/native/profile/delete-account.react.js
@@ -36,7 +36,7 @@
+navigation: ProfileNavigationProp<'DeleteAccount'>,
+route: NavigationRoute<'DeleteAccount'>,
};
-const DeleteAccount: React.ComponentType<Props> = React.memo<Props>(
+const DeleteAccount: React.ComponentType<Props> = React.memo(
function DeleteAccount() {
const deleteAccountLoadingStatus = useSelector(
deleteAccountLoadingStatusSelector,
diff --git a/native/profile/dev-tools.react.js b/native/profile/dev-tools.react.js
--- a/native/profile/dev-tools.react.js
+++ b/native/profile/dev-tools.react.js
@@ -235,7 +235,7 @@
};
}
-const ConnectedDevTools: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedDevTools: React.ComponentType<BaseProps> = React.memo(
function ConnectedDevTools(props: BaseProps) {
const urlPrefix = useSelector(urlPrefixSelector(authoritativeKeyserverID));
invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
diff --git a/native/profile/edit-password.react.js b/native/profile/edit-password.react.js
--- a/native/profile/edit-password.react.js
+++ b/native/profile/edit-password.react.js
@@ -348,8 +348,8 @@
changeIdentityUserPasswordActionTypes,
);
-const ConnectedEditPassword: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedEditPassword(props: BaseProps) {
+const ConnectedEditPassword: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedEditPassword(props: BaseProps) {
const loadingStatus = useSelector(loadingStatusSelector);
const username = useSelector(state => {
if (state.currentUserInfo && !state.currentUserInfo.anonymous) {
@@ -374,6 +374,7 @@
changeIdentityUserPassword={callChangeIdentityUserPassword}
/>
);
- });
+ },
+);
export default ConnectedEditPassword;
diff --git a/native/profile/profile-header.react.js b/native/profile/profile-header.react.js
--- a/native/profile/profile-header.react.js
+++ b/native/profile/profile-header.react.js
@@ -10,11 +10,12 @@
const activeTabSelector = createActiveTabSelector(ProfileRouteName);
-const ProfileHeader: React.ComponentType<StackHeaderProps> =
- React.memo<StackHeaderProps>(function ProfileHeader(props: StackHeaderProps) {
+const ProfileHeader: React.ComponentType<StackHeaderProps> = React.memo(
+ function ProfileHeader(props: StackHeaderProps) {
const navContext = React.useContext(NavContext);
const activeTab = activeTabSelector(navContext);
return <Header {...props} activeTab={activeTab} />;
- });
+ },
+);
export default ProfileHeader;
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -573,8 +573,8 @@
const logOutLoadingStatusSelector =
createLoadingStatusSelector(logOutActionTypes);
-const ConnectedProfileScreen: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedProfileScreen(props: BaseProps) {
+const ConnectedProfileScreen: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedProfileScreen(props: BaseProps) {
const currentUserInfo = useSelector(state => state.currentUserInfo);
const logOutLoading =
useSelector(logOutLoadingStatusSelector) === 'loading';
@@ -660,6 +660,7 @@
farcasterConversationsSync={farcasterConversationsSync}
/>
);
- });
+ },
+);
export default ConnectedProfileScreen;
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -322,9 +322,7 @@
}
const ConnectedRelationshipListItem: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedRelationshipListItem(
- props: BaseProps,
- ) {
+ React.memo(function ConnectedRelationshipListItem(props: BaseProps) {
const removeUserLoadingStatus = useSelector(state =>
createLoadingStatusSelector(
updateRelationshipsActionTypes,
diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js
--- a/native/profile/relationship-list.react.js
+++ b/native/profile/relationship-list.react.js
@@ -496,7 +496,7 @@
registerFetchKey(updateRelationshipsActionTypes);
const MemoizedRelationshipList: React.ComponentType<Props> =
- React.memo<Props>(RelationshipList);
+ React.memo(RelationshipList);
MemoizedRelationshipList.displayName = 'RelationshipList';
export default MemoizedRelationshipList;
diff --git a/native/push/push-handler.react.js b/native/push/push-handler.react.js
--- a/native/push/push-handler.react.js
+++ b/native/push/push-handler.react.js
@@ -805,8 +805,8 @@
}
}
-const ConnectedPushHandler: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedPushHandler(props: BaseProps) {
+const ConnectedPushHandler: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedPushHandler(props: BaseProps) {
const navContext = React.useContext(NavContext);
const activeThread = activeMessageListSelector(navContext);
const thinThreadsUnreadCount = useSelector(thinThreadsUnreadCountSelector);
@@ -853,6 +853,7 @@
tunnelbrokerSocketState={tunnelbrokerSocketState}
/>
);
- });
+ },
+);
export default ConnectedPushHandler;
diff --git a/native/redux/dev-tools.react.js b/native/redux/dev-tools.react.js
--- a/native/redux/dev-tools.react.js
+++ b/native/redux/dev-tools.react.js
@@ -20,7 +20,7 @@
+navState: NavigationState,
}>;
-const DevTools: React.ComponentType<{}> = React.memo<{}>(function DevTools() {
+const DevTools: React.ComponentType<{}> = React.memo(function DevTools() {
const devToolsRef = React.useRef();
if (
global.__REDUX_DEVTOOLS_EXTENSION__ &&
@@ -63,12 +63,12 @@
action.type === setReduxStateActionType) &&
action.payload.hideFromMonitor
) {
- // Triggered by handleActionFromMonitor below when somebody is stepping
- // through actions in the Comm monitor in Redux dev tools
+ // Triggered by handleActionFromMonitor below when somebody is
+ // stepping through actions in the Comm monitor in Redux dev tools
return;
} else if (action.type === setNavStateActionType) {
- // Triggered by NavFromReduxHandler when somebody imports state into the
- // Redux monitor in Redux dev tools
+ // Triggered by NavFromReduxHandler when somebody imports state into
+ // the Redux monitor in Redux dev tools
devTools.init(state);
} else {
devTools.send(action, state);
diff --git a/native/redux/persist.js b/native/redux/persist.js
--- a/native/redux/persist.js
+++ b/native/redux/persist.js
@@ -108,10 +108,7 @@
RawThreadInfo,
ThinRawThreadInfo,
} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
- ReportStore,
- ClientReportCreationRequest,
-} from 'lib/types/report-types.js';
+import type { ReportStore } from 'lib/types/report-types.js';
import { defaultConnectionInfo } from 'lib/types/socket-types.js';
import { syncedMetadataNames } from 'lib/types/synced-metadata-types.js';
import { defaultGlobalThemeInfo } from 'lib/types/theme-types.js';
diff --git a/native/socket.react.js b/native/socket.react.js
--- a/native/socket.react.js
+++ b/native/socket.react.js
@@ -30,8 +30,8 @@
} from './selectors/socket-selectors.js';
import { decompressMessage } from './utils/decompress.js';
-const NativeSocket: React.ComponentType<BaseSocketProps> =
- React.memo<BaseSocketProps>(function NativeSocket(props: BaseSocketProps) {
+const NativeSocket: React.ComponentType<BaseSocketProps> = React.memo(
+ function NativeSocket(props: BaseSocketProps) {
const navContext = React.useContext(NavContext);
const { keyserverID } = props;
@@ -121,6 +121,7 @@
isConnectedToInternet={isConnectedToInternet}
/>
);
- });
+ },
+);
export default NativeSocket;
diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js
--- a/native/tooltip/nux-tips-overlay.react.js
+++ b/native/tooltip/nux-tips-overlay.react.js
@@ -468,7 +468,7 @@
return shouldRenderScreenContent ? <NUXTipsOverlay {...props} /> : null;
}
- return React.memo<NUXTipsOverlayProps<Route>>(NUXTipsOverlayWrapper);
+ return React.memo<NUXTipsOverlayProps<Route>, void>(NUXTipsOverlayWrapper);
}
export { createNUXTipsOverlay, animationDuration };
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -528,7 +528,7 @@
</TooltipContextProvider>
);
}
- return React.memo<TooltipPropsType>(MemoizedTooltip);
+ return React.memo(MemoizedTooltip);
}
function getTooltipHeight(numEntries: number): number {
diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -532,7 +532,7 @@
updateCalendarQueryActionTypes,
);
-const ConnectedApp: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedApp: React.ComponentType<BaseProps> = React.memo(
function ConnectedApp(props) {
const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID,
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -262,7 +262,7 @@
};
}
-const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo(
function ConnectedCalendar(props) {
const year = useSelector(yearAssertingSelector);
const month = useSelector(monthAssertingSelector);
diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -222,7 +222,7 @@
};
}
-const ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedDay: React.ComponentType<BaseProps> = React.memo(
function ConnectedDay(props) {
const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
const viewerID = useSelector(state => state.currentUserInfo?.id);
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -484,7 +484,7 @@
export type InnerEntry = Entry;
-const ConnectedEntry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+const ConnectedEntry: React.ComponentType<BaseProps> = React.memo(
function ConnectedEntry(props) {
const { threadID } = props.entryInfo;
const unresolvedThreadInfo = useSelector(
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -395,7 +395,7 @@
};
const ConnectedFilterPanel: React.ComponentType<ConnectedFilterPanelProps> =
- React.memo<ConnectedFilterPanelProps>(function ConnectedFilterPanel(
+ React.memo(function ConnectedFilterPanel(
props: ConnectedFilterPanelProps,
): React.Node {
const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -556,8 +556,8 @@
const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);
-const ConnectedChatInputBar: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedChatInputBar(props) {
+const ConnectedChatInputBar: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedChatInputBar(props) {
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
@@ -700,6 +700,7 @@
cancelPendingUpload={cancelPendingUpload}
/>
);
- });
+ },
+);
export default ConnectedChatInputBar;
diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js
--- a/web/chat/chat-input-text-area.react.js
+++ b/web/chat/chat-input-text-area.react.js
@@ -16,7 +16,7 @@
+maxHeight?: number,
};
-const ChatInputTextArea: React.ComponentType<Props> = React.memo<Props>(
+const ChatInputTextArea: React.ComponentType<Props> = React.memo(
function ChatInputTextArea(props: Props) {
const {
currentText,
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -384,10 +384,8 @@
}
}
-const ConnectedChatMessageList: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedChatMessageList(
- props: BaseProps,
- ): React.Node {
+const ConnectedChatMessageList: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedChatMessageList(props: BaseProps): React.Node {
const { threadInfo } = props;
const messageListData = useMessageListData({
threadInfo,
@@ -456,6 +454,7 @@
/>
</MessageListContext.Provider>
);
- });
+ },
+);
export default ConnectedChatMessageList;
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -52,6 +52,6 @@
);
}
-const MemoizedChat: React.ComponentType<{}> = React.memo<{}>(Chat);
+const MemoizedChat: React.ComponentType<{}> = React.memo(Chat);
export default MemoizedChat;
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -57,7 +57,7 @@
+fixedWidth?: boolean,
+borderRadius?: number,
};
-const ComposedMessage: React.ComponentType<Props> = React.memo<Props>(
+const ComposedMessage: React.ComponentType<Props> = React.memo(
function ComposedMessage(props) {
const { item, threadInfo } = props;
const { messageInfo } = item;
diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js
--- a/web/chat/edit-text-message.react.js
+++ b/web/chat/edit-text-message.react.js
@@ -183,7 +183,7 @@
);
}
-const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
+const ComposedEditTextMessage: React.ComponentType<Props> = React.memo(
function ComposedEditTextMessage(props) {
const { background, ...restProps } = props;
return (
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -129,8 +129,8 @@
};
}
-const ConnectedFailedSend: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedFailedSend(props) {
+const ConnectedFailedSend: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedFailedSend(props) {
const { messageInfo } = props.item;
assertComposableMessageType(messageInfo.type);
const id = messageID(messageInfo);
@@ -158,6 +158,7 @@
parentThreadInfo={parentThreadInfo}
/>
);
- });
+ },
+);
export default ConnectedFailedSend;
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -102,10 +102,11 @@
}
}
-const ConnectedMultimediaMessage: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedMultimediaMessage(props) {
+const ConnectedMultimediaMessage: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedMultimediaMessage(props) {
const inputState = React.useContext(InputStateContext);
return <MultimediaMessage {...props} inputState={inputState} />;
- });
+ },
+);
export default ConnectedMultimediaMessage;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -129,21 +129,17 @@
});
};
}
-const ThreadEntity = React.memo<BaseInnerThreadEntityProps>(
- function ConnectedInnerThreadEntity(props: BaseInnerThreadEntityProps) {
- const { id } = props;
- const threadInfo = useSelector(state => threadInfoSelector(state)[id]);
- const dispatch = useDispatch();
-
- return (
- <InnerThreadEntity
- {...props}
- threadInfo={threadInfo}
- dispatch={dispatch}
- />
- );
- },
-);
+const ThreadEntity = React.memo(function ConnectedInnerThreadEntity(
+ props: BaseInnerThreadEntityProps,
+) {
+ const { id } = props;
+ const threadInfo = useSelector(state => threadInfoSelector(state)[id]);
+ const dispatch = useDispatch();
+
+ return (
+ <InnerThreadEntity {...props} threadInfo={threadInfo} dispatch={dispatch} />
+ );
+});
type UserEntityProps = {
+userID: string,
@@ -164,6 +160,6 @@
}
const MemoizedRobotextMessage: React.ComponentType<Props> =
- React.memo<Props>(RobotextMessage);
+ React.memo(RobotextMessage);
export default MemoizedRobotextMessage;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1648,8 +1648,8 @@
}
}
-const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
+const ConnectedInputStateContainer: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedInputStateContainer(props) {
const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID,
);
@@ -1717,6 +1717,7 @@
invalidTokenLogOut={callInvalidTokenLogOut}
/>
);
- });
+ },
+);
export default ConnectedInputStateContainer;
diff --git a/web/markdown/markdown-spoiler.react.js b/web/markdown/markdown-spoiler.react.js
--- a/web/markdown/markdown-spoiler.react.js
+++ b/web/markdown/markdown-spoiler.react.js
@@ -34,6 +34,6 @@
}
const MemoizedMarkdownSpoiler: React.ComponentType<MarkdownSpoilerProps> =
- React.memo<MarkdownSpoilerProps>(MarkdownSpoiler);
+ React.memo(MarkdownSpoiler);
export default MemoizedMarkdownSpoiler;
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -107,7 +107,7 @@
const MemoizedLoadableVideo: MemoizedLoadableVideoComponentType = React.memo<
Props,
- HTMLVideoElement,
+ React.RefSetter<HTMLVideoElement>,
>(React.forwardRef<Props, HTMLVideoElement>(LoadableVideo));
export default MemoizedLoadableVideo;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -226,7 +226,6 @@
);
}
-const MemoizedMultimedia: React.ComponentType<Props> =
- React.memo<Props>(Multimedia);
+const MemoizedMultimedia: React.ComponentType<Props> = React.memo(Multimedia);
export default MemoizedMultimedia;
diff --git a/web/modals/history/history-entry.react.js b/web/modals/history/history-entry.react.js
--- a/web/modals/history/history-entry.react.js
+++ b/web/modals/history/history-entry.react.js
@@ -146,8 +146,8 @@
}
}
-const ConnectedHistoryEntry: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedHistoryEntry(props) {
+const ConnectedHistoryEntry: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedHistoryEntry(props) {
const entryID = props.entryInfo.id;
invariant(entryID, 'entryInfo.id (serverID) should be set');
const unresolvedThreadInfo = useSelector(
@@ -183,6 +183,7 @@
creator={creatorWithENSName}
/>
);
- });
+ },
+);
export default ConnectedHistoryEntry;
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -264,8 +264,8 @@
fetchRevisionsForEntryActionTypes,
);
-const ConnectedHistoryModal: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedHistoryModal(props) {
+const ConnectedHistoryModal: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedHistoryModal(props) {
const entryInfos = useSelector(
state => allDaysToEntries(state)[props.dayString],
);
@@ -294,6 +294,7 @@
onClose={modalContext.popModal}
/>
);
- });
+ },
+);
export default ConnectedHistoryModal;
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
@@ -65,7 +65,6 @@
);
}
-const MemoizedItem: React.ComponentType<Props> =
- React.memo<Props>(MediaGalleryItem);
+const MemoizedItem: React.ComponentType<Props> = React.memo(MediaGalleryItem);
export default MemoizedItem;
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -47,8 +47,8 @@
changeThreadSettingsActionTypes,
);
-const ConnectedThreadSettingsModal: React.ComponentType<BaseProps> =
- React.memo<BaseProps>(function ConnectedThreadSettingsModal(props) {
+const ConnectedThreadSettingsModal: React.ComponentType<BaseProps> = React.memo(
+ function ConnectedThreadSettingsModal(props) {
const changeInProgress = useSelector(
state =>
deleteThreadLoadingStatusSelector(state) === 'loading' ||
@@ -310,6 +310,7 @@
</div>
</Modal>
);
- });
+ },
+);
export default ConnectedThreadSettingsModal;
diff --git a/web/navigation-panels/topbar.react.js b/web/navigation-panels/topbar.react.js
--- a/web/navigation-panels/topbar.react.js
+++ b/web/navigation-panels/topbar.react.js
@@ -46,6 +46,6 @@
);
}
-const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);
+const MemoizedTopbar: React.ComponentType<{}> = React.memo(Topbar);
export default MemoizedTopbar;
diff --git a/web/socket.react.js b/web/socket.react.js
--- a/web/socket.react.js
+++ b/web/socket.react.js
@@ -29,8 +29,8 @@
} from './selectors/socket-selectors.js';
import { decompressMessage } from './utils/decompress.js';
-const WebSocket: React.ComponentType<BaseSocketProps> =
- React.memo<BaseSocketProps>(function WebSocket(props) {
+const WebSocket: React.ComponentType<BaseSocketProps> = React.memo(
+ function WebSocket(props) {
const { keyserverID } = props;
const cookie = useSelector(cookieSelector(keyserverID));
@@ -107,6 +107,7 @@
isConnectedToInternet={isConnectedToInternet}
/>
);
- });
+ },
+);
export default WebSocket;

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 7:11 PM (22 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5840303
Default Alt Text
D15111.1765048310.diff (113 KB)

Event Timeline