bigbuffet-rw/app/soapbox/components/sub_navigation.js

106 lines
2.3 KiB
JavaScript
Raw Normal View History

import throttle from 'lodash/throttle';
2021-09-12 16:16:53 -07:00
import PropTypes from 'prop-types';
import React from 'react';
2021-10-15 16:37:32 -07:00
import { injectIntl, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
2022-03-17 18:17:28 -07:00
import { withRouter } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals';
2022-03-21 11:09:01 -07:00
import { CardHeader, CardTitle } from './ui';
2021-09-12 16:16:53 -07:00
2021-10-15 16:37:32 -07:00
const messages = defineMessages({
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
settings: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
});
const mapDispatchToProps = (dispatch, { settings: Settings }) => {
return {
onOpenSettings() {
dispatch(openModal('COMPONENT', { component: Settings }));
},
};
};
export default @connect(undefined, mapDispatchToProps)
2021-10-15 16:37:32 -07:00
@injectIntl
2022-03-17 18:17:28 -07:00
@withRouter
class SubNavigation extends React.PureComponent {
2021-09-12 16:16:53 -07:00
static propTypes = {
2021-10-15 16:37:32 -07:00
intl: PropTypes.object.isRequired,
message: PropTypes.string,
settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
onOpenSettings: PropTypes.func.isRequired,
2022-03-17 18:17:28 -07:00
history: PropTypes.object,
2021-09-12 16:16:53 -07:00
}
state = {
scrolled: false,
}
2021-09-12 16:16:53 -07:00
handleBackClick = () => {
if (window.history && window.history.length === 1) {
2022-03-17 18:17:28 -07:00
this.props.history.push('/');
2021-09-12 16:16:53 -07:00
} else {
2022-03-17 18:17:28 -07:00
this.props.history.goBack();
2021-09-12 16:16:53 -07:00
}
}
handleBackKeyUp = (e) => {
if (e.key === 'Enter') {
this.handleClick();
}
}
componentDidMount() {
this.attachScrollListener();
}
componentWillUnmount() {
this.detachScrollListener();
}
attachScrollListener() {
window.addEventListener('scroll', this.handleScroll);
}
detachScrollListener() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = throttle(() => {
if (this.node) {
2021-10-19 13:13:04 -07:00
const { offsetTop } = this.node;
2021-10-19 13:13:04 -07:00
if (offsetTop > 0) {
this.setState({ scrolled: true });
} else {
this.setState({ scrolled: false });
}
}
}, 150, { trailing: true });
handleOpenSettings = () => {
this.props.onOpenSettings();
}
setRef = c => {
this.node = c;
}
2021-09-12 16:16:53 -07:00
render() {
2022-03-21 11:09:01 -07:00
const { intl, message } = this.props;
2021-09-12 16:16:53 -07:00
return (
2022-03-21 11:09:01 -07:00
<CardHeader
aria-label={intl.formatMessage(messages.back)}
onBackClick={this.handleBackClick}
>
<CardTitle title={message} />
</CardHeader>
2021-09-12 16:16:53 -07:00
);
}
}