Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixed modal animations #2680

Merged
merged 8 commits into from
May 12, 2021
Merged

fixed modal animations #2680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2905434
fix: modal animations
parasharrajat May 4, 2021
f2698e8
Merge branch 'main' of github.com:Expensify/Expensify.cash into anima…
parasharrajat May 7, 2021
8a613cc
added loader for searhPage
parasharrajat May 7, 2021
424fa46
added loader on new chat and new group page
parasharrajat May 7, 2021
0c617ae
chg: animation for IOUModals
parasharrajat May 7, 2021
b2ad5da
fix linting
parasharrajat May 7, 2021
5517db8
dried up duplicate logic to parent
parasharrajat May 7, 2021
1094dca
Pull latest changes
parasharrajat May 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 30 additions & 7 deletions src/components/ScreenWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,13 @@ const propTypes = {
// Whether to include padding top
includePaddingTop: PropTypes.bool,

// react-navigation object that will allow us to goBack()
// Called when navigated Screen's transition is finished.
onTransitionEnd: PropTypes.func,

// react-navigation navigation object available to screen components
navigation: PropTypes.shape({
// Method to attach listner to Navigaton state.
addListener: PropTypes.func.isRequired,

// Returns to the previous navigation state e.g. if this is inside a Modal we will dismiss it
goBack: PropTypes.func,
Expand All @@ -36,24 +41,39 @@ const defaultProps = {
style: [],
includePaddingBottom: true,
includePaddingTop: true,
onTransitionEnd: () => {},
navigation: {
addListener: () => {},
goBack: () => {},
},
};

class ScreenWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
didScreenTransitionEnd: false,
};
}

componentDidMount() {
this.unsubscribe = KeyboardShortcut.subscribe('Escape', () => {
this.unsubscribeEscapeKey = KeyboardShortcut.subscribe('Escape', () => {
this.props.navigation.goBack();
}, [], true);

this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => {
this.setState({didScreenTransitionEnd: true});
this.props.onTransitionEnd();
});
}

componentWillUnmount() {
if (!this.unsubscribe) {
return;
if (this.unsubscribeEscapeKey) {
this.unsubscribeEscapeKey();
}
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
if (this.unsubscribeTransitionEnd) {
this.unsubscribeTransitionEnd();
}

this.unsubscribe();
}

render() {
Expand Down Expand Up @@ -81,7 +101,10 @@ class ScreenWrapper extends React.Component {
<HeaderGap />
{// If props.children is a function, call it to provide the insets to the children.
_.isFunction(this.props.children)
? this.props.children(insets)
? this.props.children({
insets,
didScreenTransitionEnd: this.state.didScreenTransitionEnd,
})
: this.props.children
}
</View>
Expand Down
8 changes: 5 additions & 3 deletions src/libs/Navigation/AppNavigator/AuthScreens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,12 @@ Onyx.connect({

const RootStack = createCustomModalStackNavigator();

// When modal screen gets focused, update modal visibility in Onyx
// We want to delay the re-rendering for components(e.g. ReportActionCompose)
// that depends on modal visibility until Modal is completely closed or its transition has ended
// When modal screen is focused and animation transition is ended, update modal visibility in Onyx
// https://reactnavigation.org/docs/navigation-events/
const modalScreenListeners = {
focus: () => {
transitionEnd: () => {
setModalVisibility(true);
},
beforeRemove: () => {
Expand Down Expand Up @@ -159,7 +161,7 @@ class AuthScreens extends React.Component {
const modalScreenOptions = {
headerShown: false,
cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
cardStyleInterpolator: modalCardStyleInterpolator,
cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, props),
animationEnabled: true,
gestureDirection: 'horizontal',
cardOverlayEnabled: true,
Expand Down
18 changes: 11 additions & 7 deletions src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import {Animated} from 'react-native';
import variables from '../../../styles/variables';

export default ({
current: {progress},
inverted,
layouts: {
screen,
export default (
isSmallScreen,
{
current: {progress},
inverted,
layouts: {
screen,
},
},
}) => {
) => {
const translateX = Animated.multiply(progress.interpolate({
inputRange: [0, 1],
outputRange: [screen.width, 0],
outputRange: [isSmallScreen ? screen.width : variables.sideBarWidth, 0],
extrapolate: 'clamp',
}), inverted);

Expand Down
73 changes: 40 additions & 33 deletions src/pages/NewChatPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../components/wit
import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
import Navigation from '../libs/Navigation/Navigation';
import ScreenWrapper from '../components/ScreenWrapper';
import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import compose from '../libs/compose';

Expand Down Expand Up @@ -52,7 +53,6 @@ class NewChatPage extends Component {
super(props);

this.createNewChat = this.createNewChat.bind(this);

const {
personalDetails,
userToInvite,
Expand Down Expand Up @@ -117,38 +117,45 @@ class NewChatPage extends Component {

return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newChat')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.w100]}>
<OptionsSelector
sections={sections}
value={this.state.searchValue}
onSelectRow={this.createNewChat}
onChangeText={(searchValue = '') => {
const {
personalDetails,
userToInvite,
} = getNewChatOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
);
this.setState({
searchValue,
userToInvite,
personalDetails,
});
}}
headerMessage={headerMessage}
hideSectionHeaders
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
/>
</View>
<KeyboardSpacer />
{({didScreenTransitionEnd}) => (
<>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newChat')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.w100, styles.pRelative]}>
<FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
{didScreenTransitionEnd && (
<OptionsSelector
sections={sections}
value={this.state.searchValue}
onSelectRow={this.createNewChat}
onChangeText={(searchValue = '') => {
const {
personalDetails,
userToInvite,
} = getNewChatOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
);
this.setState({
searchValue,
userToInvite,
personalDetails,
});
}}
headerMessage={headerMessage}
hideSectionHeaders
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
/>
)}
</View>
<KeyboardSpacer />
</>
)}
</ScreenWrapper>
);
}
Expand Down
117 changes: 63 additions & 54 deletions src/pages/NewGroupPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../components/wit
import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
import ScreenWrapper from '../components/ScreenWrapper';
import Navigation from '../libs/Navigation/Navigation';
import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import compose from '../libs/compose';

Expand Down Expand Up @@ -55,7 +56,6 @@ class NewGroupPage extends Component {

this.toggleOption = this.toggleOption.bind(this);
this.createGroup = this.createGroup.bind(this);

const {
recentReports,
personalDetails,
Expand Down Expand Up @@ -185,60 +185,69 @@ class NewGroupPage extends Component {
);
return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newGroup')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.w100]}>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchValue}
onSelectRow={this.toggleOption}
onChangeText={(searchValue = '') => {
const {
recentReports,
personalDetails,
userToInvite,
} = getNewGroupOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
[],
);
this.setState({
searchValue,
userToInvite,
recentReports,
personalDetails,
});
}}
headerMessage={headerMessage}
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
shouldFocusOnSelectRow
/>
{this.state.selectedOptions?.length > 0 && (
<View style={[styles.ph5, styles.pb5]}>
<Pressable
onPress={this.createGroup}
style={({hovered}) => [
styles.button,
styles.buttonSuccess,
styles.w100,
hovered && styles.buttonSuccessHovered,
]}
>
<Text style={[styles.buttonText, styles.buttonSuccessText]}>
{this.props.translate('newGroupPage.createGroup')}
</Text>
</Pressable>
{({didScreenTransitionEnd}) => (
<>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newGroup')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.w100, styles.pRelative]}>
<FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
{didScreenTransitionEnd && (
<>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchValue}
onSelectRow={this.toggleOption}
onChangeText={(searchValue = '') => {
const {
recentReports,
personalDetails,
userToInvite,
} = getNewGroupOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
[],
);
this.setState({
searchValue,
userToInvite,
recentReports,
personalDetails,
});
}}
headerMessage={headerMessage}
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
shouldFocusOnSelectRow
/>
{this.state.selectedOptions?.length > 0 && (
<View style={[styles.ph5, styles.pb5]}>
<Pressable
onPress={this.createGroup}
style={({hovered}) => [
styles.button,
styles.buttonSuccess,
styles.w100,
hovered && styles.buttonSuccessHovered,
]}
>
<Text style={[styles.buttonText, styles.buttonSuccessText]}>
{this.props.translate('newGroupPage.createGroup')}
</Text>
</Pressable>
</View>
)}
</>
)}
</View>
)}
</View>
<KeyboardSpacer />
<KeyboardSpacer />
</>
)}
</ScreenWrapper>
);
}
Expand Down
Loading