Improve modal flow and back button handling (#16499)
* Refactor shouldUpdateScroll passing So far, shouldUpdateScroll has been manually passed down from the very top of the React component hierarchy even though it is a static function common to all ScrollContainer instances, so replaced that with a custom class extending ScrollContainer. * Generalize “press back to close modal” to any modal and to public pages * Fix boost confirmation modal closing media modal
This commit is contained in:
		
							parent
							
								
									a2ce7508c9
								
							
						
					
					
						commit
						d3791cca0c
					
				
					 35 changed files with 120 additions and 197 deletions
				
			
		| 
						 | 
				
			
			@ -54,8 +54,6 @@ import {
 | 
			
		|||
  FollowRecommendations,
 | 
			
		||||
} from './util/async-components';
 | 
			
		||||
import { me } from '../../initial_state';
 | 
			
		||||
import { previewState as previewMediaState } from './components/media_modal';
 | 
			
		||||
import { previewState as previewVideoState } from './components/video_modal';
 | 
			
		||||
import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
 | 
			
		||||
 | 
			
		||||
// Dummy import, to make sure that <Status /> ends up in the application bundle.
 | 
			
		||||
| 
						 | 
				
			
			@ -138,10 +136,6 @@ class SwitchingColumnsArea extends React.PureComponent {
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  shouldUpdateScroll (_, { location }) {
 | 
			
		||||
    return location.state !== previewMediaState && location.state !== previewVideoState;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  setRef = c => {
 | 
			
		||||
    if (c) {
 | 
			
		||||
      this.node = c.getWrappedInstance();
 | 
			
		||||
| 
						 | 
				
			
			@ -158,38 +152,38 @@ class SwitchingColumnsArea extends React.PureComponent {
 | 
			
		|||
          {redirect}
 | 
			
		||||
          <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
 | 
			
		||||
          <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/public/local' exact component={CommunityTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/direct' component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/list/:id' component={ListTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/public/local' exact component={CommunityTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/direct' component={DirectTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/timelines/list/:id' component={ListTimeline} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute path='/notifications' component={Notifications} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/notifications' component={Notifications} content={children} />
 | 
			
		||||
          <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
 | 
			
		||||
          <WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
 | 
			
		||||
          <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute path='/start' component={FollowRecommendations} content={children} />
 | 
			
		||||
          <WrappedRoute path='/search' component={Search} content={children} />
 | 
			
		||||
          <WrappedRoute path='/directory' component={Directory} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/directory' component={Directory} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute path='/statuses/new' component={Compose} content={children} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} />
 | 
			
		||||
          <WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId' exact component={AccountTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/with_replies' component={AccountTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll, withReplies: true }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/followers' component={Followers} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/following' component={Following} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/media' component={AccountGallery} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId' exact component={AccountTimeline} content={children} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/with_replies' component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/followers' component={Followers} content={children} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/following' component={Following} content={children} />
 | 
			
		||||
          <WrappedRoute path='/accounts/:accountId/media' component={AccountGallery} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/blocks' component={Blocks} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/domain_blocks' component={DomainBlocks} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/mutes' component={Mutes} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/lists' component={Lists} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 | 
			
		||||
          <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} />
 | 
			
		||||
          <WrappedRoute path='/blocks' component={Blocks} content={children} />
 | 
			
		||||
          <WrappedRoute path='/domain_blocks' component={DomainBlocks} content={children} />
 | 
			
		||||
          <WrappedRoute path='/mutes' component={Mutes} content={children} />
 | 
			
		||||
          <WrappedRoute path='/lists' component={Lists} content={children} />
 | 
			
		||||
 | 
			
		||||
          <WrappedRoute component={GenericNotFound} content={children} />
 | 
			
		||||
        </WrappedSwitch>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Reference in a new issue