Fix invisible load more button (#4962)
* Fix behavior while the button is invisible e.g. pointer cursor, couldn't open contextmenu * Avoid rendering the button to remove blank space if no more items are available or no items are rendered
This commit is contained in:
		
							parent
							
								
									472df24579
								
							
						
					
					
						commit
						6c81f9d6e5
					
				
					 2 changed files with 2 additions and 2 deletions
				
			
		| 
						 | 
				
			
			@ -17,7 +17,7 @@ export default class LoadMore extends React.PureComponent {
 | 
			
		|||
    const { visible } = this.props;
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <button className='load-more' disabled={!visible} style={{ opacity: visible ? 1 : 0 }} onClick={this.props.onClick}>
 | 
			
		||||
      <button className='load-more' disabled={!visible} style={{ visibility: visible ? 'visible' : 'hidden' }} onClick={this.props.onClick}>
 | 
			
		||||
        <FormattedMessage id='status.load_more' defaultMessage='Load more' />
 | 
			
		||||
      </button>
 | 
			
		||||
    );
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -167,7 +167,7 @@ export default class ScrollableList extends PureComponent {
 | 
			
		|||
    const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
 | 
			
		||||
    const childrenCount = React.Children.count(children);
 | 
			
		||||
 | 
			
		||||
    const loadMore     = <LoadMore visible={!isLoading && childrenCount > 0 && hasMore} onClick={this.handleLoadMore} />;
 | 
			
		||||
    const loadMore     = (hasMore && childrenCount > 0) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
 | 
			
		||||
    let scrollableArea = null;
 | 
			
		||||
 | 
			
		||||
    if (isLoading || childrenCount > 0 || !emptyMessage) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue