Make clicking on the account and status column headers scroll to top

This commit is contained in:
Thibaut Girka 2019-03-08 20:34:31 +01:00 committed by ThibG
parent 45e4c90a23
commit 4849eb8e7f
6 changed files with 53 additions and 10 deletions

View File

@ -11,16 +11,18 @@ export default @injectIntl
class ProfileColumnHeader extends React.PureComponent { class ProfileColumnHeader extends React.PureComponent {
static propTypes = { static propTypes = {
onClick: PropTypes.func,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
render() { render() {
const { intl } = this.props; const { onClick, intl } = this.props;
return ( return (
<ColumnHeader <ColumnHeader
icon='user-circle' icon='user-circle'
title={intl.formatMessage(messages.profile)} title={intl.formatMessage(messages.profile)}
onClick={onClick}
showBackButton showBackButton
/> />
); );

View File

@ -65,6 +65,10 @@ export default class AccountGallery extends ImmutablePureComponent {
} }
} }
handleHeaderClick = () => {
this.column.scrollTop();
}
handleScrollToBottom = () => { handleScrollToBottom = () => {
if (this.props.hasMore) { if (this.props.hasMore) {
this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined); this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined);
@ -94,6 +98,10 @@ export default class AccountGallery extends ImmutablePureComponent {
return !(location.state && location.state.mastodonModalOpen); return !(location.state && location.state.mastodonModalOpen);
} }
setRef = c => {
this.column = c;
}
render () { render () {
const { medias, isLoading, hasMore } = this.props; const { medias, isLoading, hasMore } = this.props;
@ -112,8 +120,8 @@ export default class AccountGallery extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column ref={this.setRef}>
<ProfileColumnHeader /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable scrollable--flex' onScroll={this.handleScroll}> <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>

View File

@ -57,10 +57,18 @@ export default class AccountTimeline extends ImmutablePureComponent {
} }
} }
handleHeaderClick = () => {
this.column.scrollTop();
}
handleLoadMore = maxId => { handleLoadMore = maxId => {
this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies })); this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies }));
} }
setRef = c => {
this.column = c;
}
render () { render () {
const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props; const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props;
@ -73,8 +81,8 @@ export default class AccountTimeline extends ImmutablePureComponent {
} }
return ( return (
<Column name='account'> <Column ref={this.setRef} name='account'>
<ProfileColumnHeader /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<StatusList <StatusList
prepend={<HeaderContainer accountId={this.props.params.accountId} />} prepend={<HeaderContainer accountId={this.props.params.accountId} />}

View File

@ -43,6 +43,10 @@ export default class Followers extends ImmutablePureComponent {
} }
} }
handleHeaderClick = () => {
this.column.scrollTop();
}
handleScroll = (e) => { handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -61,6 +65,10 @@ export default class Followers extends ImmutablePureComponent {
return !(location.state && location.state.mastodonModalOpen); return !(location.state && location.state.mastodonModalOpen);
} }
setRef = c => {
this.column = c;
}
render () { render () {
const { accountIds, hasMore } = this.props; const { accountIds, hasMore } = this.props;
@ -79,8 +87,8 @@ export default class Followers extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column ref={this.setRef}>
<ProfileColumnHeader /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}> <div className='scrollable' onScroll={this.handleScroll}>

View File

@ -43,6 +43,10 @@ export default class Following extends ImmutablePureComponent {
} }
} }
handleHeaderClick = () => {
this.column.scrollTop();
}
handleScroll = (e) => { handleScroll = (e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
@ -61,6 +65,10 @@ export default class Following extends ImmutablePureComponent {
return !(location.state && location.state.mastodonModalOpen); return !(location.state && location.state.mastodonModalOpen);
} }
setRef = c => {
this.column = c;
}
render () { render () {
const { accountIds, hasMore } = this.props; const { accountIds, hasMore } = this.props;
@ -79,8 +87,8 @@ export default class Following extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column ref={this.setRef}>
<ProfileColumnHeader /> <ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}> <div className='scrollable' onScroll={this.handleScroll}>

View File

@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent {
} }
} }
handleHeaderClick = () => {
this.column.scrollTop();
}
renderChildren (list) { renderChildren (list) {
return list.map(id => ( return list.map(id => (
<StatusContainer <StatusContainer
@ -390,6 +394,10 @@ export default class Status extends ImmutablePureComponent {
this.node = c; this.node = c;
} }
setColumnRef = c => {
this.column = c;
}
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) { if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) {
const { status, ancestorsIds } = this.props; const { status, ancestorsIds } = this.props;
@ -452,10 +460,11 @@ export default class Status extends ImmutablePureComponent {
}; };
return ( return (
<Column label={intl.formatMessage(messages.detailedStatus)}> <Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader <ColumnHeader
icon='comment' icon='comment'
title={intl.formatMessage(messages.tootHeading)} title={intl.formatMessage(messages.tootHeading)}
onClick={this.handleHeaderClick}
showBackButton showBackButton
extraButton={( extraButton={(
<button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button> <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button>