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
|
@ -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) {
|
||||
|
|
Reference in a new issue