forked from cybrespace/mastodon
		
	* Add alwaysShowScrollbar prop to ScrollableList * Fix followers/follows layout issues from #8418
This commit is contained in:
		
							parent
							
								
									648d6d7247
								
							
						
					
					
						commit
						ceed1ebe5b
					
				
					 3 changed files with 12 additions and 7 deletions
				
			
		| 
						 | 
					@ -26,6 +26,7 @@ export default class ScrollableList extends PureComponent {
 | 
				
			||||||
    hasMore: PropTypes.bool,
 | 
					    hasMore: PropTypes.bool,
 | 
				
			||||||
    prepend: PropTypes.node,
 | 
					    prepend: PropTypes.node,
 | 
				
			||||||
    alwaysPrepend: PropTypes.bool,
 | 
					    alwaysPrepend: PropTypes.bool,
 | 
				
			||||||
 | 
					    alwaysShowScrollbar: PropTypes.bool,
 | 
				
			||||||
    emptyMessage: PropTypes.node,
 | 
					    emptyMessage: PropTypes.node,
 | 
				
			||||||
    children: PropTypes.node,
 | 
					    children: PropTypes.node,
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
| 
						 | 
					@ -141,7 +142,7 @@ export default class ScrollableList extends PureComponent {
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  render () {
 | 
					  render () {
 | 
				
			||||||
    const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
 | 
					    const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, alwaysShowScrollbar, emptyMessage, onLoadMore } = this.props;
 | 
				
			||||||
    const { fullscreen } = this.state;
 | 
					    const { fullscreen } = this.state;
 | 
				
			||||||
    const childrenCount = React.Children.count(children);
 | 
					    const childrenCount = React.Children.count(children);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -172,11 +173,13 @@ export default class ScrollableList extends PureComponent {
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      );
 | 
					      );
 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
 | 
					      const scrollable = alwaysShowScrollbar;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      scrollableArea = (
 | 
					      scrollableArea = (
 | 
				
			||||||
        <div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
 | 
					        <div className={classNames({ scrollable, fullscreen })} ref={this.setRef} style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
 | 
				
			||||||
          {alwaysPrepend && prepend}
 | 
					          {alwaysPrepend && prepend}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          <div className='empty-column-indicator' ref={this.setRef}>
 | 
					          <div className='empty-column-indicator'>
 | 
				
			||||||
            {emptyMessage}
 | 
					            {emptyMessage}
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -66,13 +66,14 @@ export default class Followers extends ImmutablePureComponent {
 | 
				
			||||||
      <Column>
 | 
					      <Column>
 | 
				
			||||||
        <ColumnBackButton />
 | 
					        <ColumnBackButton />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <HeaderContainer accountId={this.props.params.accountId} hideTabs />
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <ScrollableList
 | 
					        <ScrollableList
 | 
				
			||||||
          scrollKey='followers'
 | 
					          scrollKey='followers'
 | 
				
			||||||
          hasMore={hasMore}
 | 
					          hasMore={hasMore}
 | 
				
			||||||
          onLoadMore={this.handleLoadMore}
 | 
					          onLoadMore={this.handleLoadMore}
 | 
				
			||||||
          shouldUpdateScroll={shouldUpdateScroll}
 | 
					          shouldUpdateScroll={shouldUpdateScroll}
 | 
				
			||||||
 | 
					          prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
 | 
				
			||||||
 | 
					          alwaysPrepend
 | 
				
			||||||
 | 
					          alwaysShowScrollbar
 | 
				
			||||||
          emptyMessage={emptyMessage}
 | 
					          emptyMessage={emptyMessage}
 | 
				
			||||||
        >
 | 
					        >
 | 
				
			||||||
          {accountIds.map(id =>
 | 
					          {accountIds.map(id =>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -66,13 +66,14 @@ export default class Following extends ImmutablePureComponent {
 | 
				
			||||||
      <Column>
 | 
					      <Column>
 | 
				
			||||||
        <ColumnBackButton />
 | 
					        <ColumnBackButton />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <HeaderContainer accountId={this.props.params.accountId} hideTabs />
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <ScrollableList
 | 
					        <ScrollableList
 | 
				
			||||||
          scrollKey='following'
 | 
					          scrollKey='following'
 | 
				
			||||||
          hasMore={hasMore}
 | 
					          hasMore={hasMore}
 | 
				
			||||||
          onLoadMore={this.handleLoadMore}
 | 
					          onLoadMore={this.handleLoadMore}
 | 
				
			||||||
          shouldUpdateScroll={shouldUpdateScroll}
 | 
					          shouldUpdateScroll={shouldUpdateScroll}
 | 
				
			||||||
 | 
					          prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
 | 
				
			||||||
 | 
					          alwaysPrepend
 | 
				
			||||||
 | 
					          alwaysShowScrollbar
 | 
				
			||||||
          emptyMessage={emptyMessage}
 | 
					          emptyMessage={emptyMessage}
 | 
				
			||||||
        >
 | 
					        >
 | 
				
			||||||
          {accountIds.map(id =>
 | 
					          {accountIds.map(id =>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue