From 3c4d91d2632c7caf0ca431f4824ee2b181d5b470 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 30 Apr 2021 10:35:15 +0800 Subject: [PATCH] Revert "fix Modal animations" --- src/components/OptionsSelector.js | 15 ++----------- .../Navigation/AppNavigator/AuthScreens.js | 2 +- .../modalCardStyleInterpolator.js | 18 +++++++--------- .../home/report/EmojiPickerMenu/index.js | 3 --- .../report/EmojiPickerMenu/index.native.js | 3 --- src/pages/home/report/ReportActionCompose.js | 21 ++++++------------- 6 files changed, 16 insertions(+), 46 deletions(-) diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js index 4425e13f480f..8e976eab31c7 100644 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -2,7 +2,6 @@ import _ from 'underscore'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; -import {withNavigation} from '@react-navigation/compat'; import TextInputWithFocusStyles from './TextInputWithFocusStyles'; import OptionsList from './OptionsList'; import styles from '../styles/styles'; @@ -60,10 +59,6 @@ const propTypes = { // Whether to show the title tooltip showTitleTooltip: PropTypes.bool, - - // The ref to the search input - // eslint-disable-next-line react/forbid-prop-types - navigation: PropTypes.object.isRequired, }; const defaultProps = { @@ -92,13 +87,7 @@ class OptionsSelector extends Component { } componentDidMount() { - this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => { - this.textInput.focus(); - }); - } - - componentWillUnmount() { - this.unsubscribeTransitionEnd(); + this.textInput.focus(); } /** @@ -215,4 +204,4 @@ class OptionsSelector extends Component { OptionsSelector.defaultProps = defaultProps; OptionsSelector.propTypes = propTypes; -export default withNavigation(OptionsSelector); +export default OptionsSelector; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index b98be456691c..0726b2cdc949 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -156,7 +156,7 @@ class AuthScreens extends React.Component { const modalScreenOptions = { headerShown: false, cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth), - cardStyleInterpolator: (...props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, ...props), + cardStyleInterpolator: modalCardStyleInterpolator, animationEnabled: true, gestureDirection: 'horizontal', cardOverlayEnabled: true, diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js index 8ad5b1603cdd..28b85c68b7ec 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js @@ -1,19 +1,15 @@ import {Animated} from 'react-native'; -import variables from '../../../styles/variables'; -export default ( - isSmallScreen, - { - current: {progress}, - inverted, - layouts: { - screen, - }, +export default ({ + current: {progress}, + inverted, + layouts: { + screen, }, -) => { +}) => { const translateX = Animated.multiply(progress.interpolate({ inputRange: [0, 1], - outputRange: [isSmallScreen ? screen.width : variables.sideBarWidth, 0], + outputRange: [screen.width, 0], extrapolate: 'clamp', }), inverted); diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 2ef6eb41e952..99b69a7b8582 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -136,9 +136,6 @@ class EmojiPickerMenu extends Component { renderItem={this.renderItem} keyExtractor={item => `emoji_picker_${item.code}`} numColumns={this.numColumns} - removeClippedSubviews - maxToRenderPerBatch={this.numColumns} - windowSize={3} style={styles.emojiPickerList} extraData={this.state.filteredEmojis} stickyHeaderIndices={this.state.headerIndices} diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 22c8031f9355..e119b893eba1 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -68,9 +68,6 @@ class EmojiPickerMenu extends Component { renderItem={this.renderItem} keyExtractor={item => (`emoji_picker_${item.code}`)} numColumns={this.numColumns} - removeClippedSubviews - maxToRenderPerBatch={this.numColumns} - windowSize={3} style={styles.emojiPickerList} stickyHeaderIndices={this.unfilteredHeaderIndices} /> diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index f2d7eebc1715..dd28bcb37b4f 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -137,15 +137,6 @@ class ReportActionCompose extends React.Component { } } - componentWillUnmount() { - if (this.emojiFocusInteractionHandle) { - this.emojiFocusInteractionHandle.cancel(); - } - if (this.textInputFocusInteractionHandle) { - this.textInputFocusInteractionHandle.cancel(); - } - } - /** * Updates the Highlight state of the composer * @@ -180,7 +171,7 @@ class ReportActionCompose extends React.Component { if (this.textInput) { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - this.textInputFocusInteractionHandle = InteractionManager.runAfterInteractions(() => { + InteractionManager.runAfterInteractions(() => { this.textInput.focus(); }); } @@ -268,11 +259,9 @@ class ReportActionCompose extends React.Component { * Focus the search input in the emoji picker. */ focusEmojiSearchInput() { - this.emojiFocusInteractionHandle = InteractionManager.runAfterInteractions(() => { - if (this.emojiSearchInput && !this.props.isSmallScreenWidth) { - this.emojiSearchInput.focus(); - } - }); + if (this.emojiSearchInput) { + this.emojiSearchInput.focus(); + } } /** @@ -427,6 +416,8 @@ class ReportActionCompose extends React.Component { onClose={this.hideEmojiPicker} onModalShow={this.focusEmojiSearchInput} hideModalContentWhileAnimating + animationInTiming={1} + animationOutTiming={1} anchorPosition={{ top: this.state.emojiPopoverAnchorPosition.vertical - CONST.EMOJI_PICKER_SIZE, left: this.state.emojiPopoverAnchorPosition.horizontal - CONST.EMOJI_PICKER_SIZE,