forked from treehouse/mastodon
Make clicking on the account and status column headers scroll to top
parent
45e4c90a23
commit
4849eb8e7f
|
@ -11,16 +11,18 @@ export default @injectIntl
|
|||
class ProfileColumnHeader extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
const { onClick, intl } = this.props;
|
||||
|
||||
return (
|
||||
<ColumnHeader
|
||||
icon='user-circle'
|
||||
title={intl.formatMessage(messages.profile)}
|
||||
onClick={onClick}
|
||||
showBackButton
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -65,6 +65,10 @@ export default class AccountGallery extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
handleScrollToBottom = () => {
|
||||
if (this.props.hasMore) {
|
||||
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);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { medias, isLoading, hasMore } = this.props;
|
||||
|
||||
|
@ -112,8 +120,8 @@ export default class AccountGallery extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ProfileColumnHeader />
|
||||
<Column ref={this.setRef}>
|
||||
<ProfileColumnHeader onClick={this.handleHeaderClick} />
|
||||
|
||||
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
|
||||
<div className='scrollable scrollable--flex' onScroll={this.handleScroll}>
|
||||
|
|
|
@ -57,10 +57,18 @@ export default class AccountTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
handleLoadMore = maxId => {
|
||||
this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies }));
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props;
|
||||
|
||||
|
@ -73,8 +81,8 @@ export default class AccountTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column name='account'>
|
||||
<ProfileColumnHeader />
|
||||
<Column ref={this.setRef} name='account'>
|
||||
<ProfileColumnHeader onClick={this.handleHeaderClick} />
|
||||
|
||||
<StatusList
|
||||
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
|
||||
|
|
|
@ -43,6 +43,10 @@ export default class Followers extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
handleScroll = (e) => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
|
||||
|
@ -61,6 +65,10 @@ export default class Followers extends ImmutablePureComponent {
|
|||
return !(location.state && location.state.mastodonModalOpen);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accountIds, hasMore } = this.props;
|
||||
|
||||
|
@ -79,8 +87,8 @@ export default class Followers extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ProfileColumnHeader />
|
||||
<Column ref={this.setRef}>
|
||||
<ProfileColumnHeader onClick={this.handleHeaderClick} />
|
||||
|
||||
<ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}>
|
||||
<div className='scrollable' onScroll={this.handleScroll}>
|
||||
|
|
|
@ -43,6 +43,10 @@ export default class Following extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
handleScroll = (e) => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
|
||||
|
@ -61,6 +65,10 @@ export default class Following extends ImmutablePureComponent {
|
|||
return !(location.state && location.state.mastodonModalOpen);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accountIds, hasMore } = this.props;
|
||||
|
||||
|
@ -79,8 +87,8 @@ export default class Following extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ProfileColumnHeader />
|
||||
<Column ref={this.setRef}>
|
||||
<ProfileColumnHeader onClick={this.handleHeaderClick} />
|
||||
|
||||
<ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}>
|
||||
<div className='scrollable' onScroll={this.handleScroll}>
|
||||
|
|
|
@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
renderChildren (list) {
|
||||
return list.map(id => (
|
||||
<StatusContainer
|
||||
|
@ -390,6 +394,10 @@ export default class Status extends ImmutablePureComponent {
|
|||
this.node = c;
|
||||
}
|
||||
|
||||
setColumnRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) {
|
||||
const { status, ancestorsIds } = this.props;
|
||||
|
@ -452,10 +460,11 @@ export default class Status extends ImmutablePureComponent {
|
|||
};
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.detailedStatus)}>
|
||||
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
|
||||
<ColumnHeader
|
||||
icon='comment'
|
||||
title={intl.formatMessage(messages.tootHeading)}
|
||||
onClick={this.handleHeaderClick}
|
||||
showBackButton
|
||||
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>
|
||||
|
|
Loading…
Reference in New Issue