import PropTypes from 'prop-types'; import { PureComponent, useCallback } from 'react'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import classNames from 'classnames'; import { withRouter } from 'react-router-dom'; import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg'; import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg'; import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg'; import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg'; import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg'; import { Icon } from 'mastodon/components/icon'; import { ButtonInTabsBar, useColumnsContext } from 'mastodon/features/ui/util/columns_context'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; import { useAppHistory } from './router'; const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' }, moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' }, }); const BackButton = ({ pinned, show }) => { const history = useAppHistory(); const { multiColumn } = useColumnsContext(); const handleBackClick = useCallback(() => { if (history.location?.state?.fromMastodon) { history.goBack(); } else { history.push('/'); } }, [history]); const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show); if(!showButton) return null; return (); }; BackButton.propTypes = { pinned: PropTypes.bool, show: PropTypes.bool, }; class ColumnHeader extends PureComponent { static contextTypes = { identity: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, title: PropTypes.node, icon: PropTypes.string, iconComponent: PropTypes.func, active: PropTypes.bool, multiColumn: PropTypes.bool, extraButton: PropTypes.node, showBackButton: PropTypes.bool, children: PropTypes.node, pinned: PropTypes.bool, placeholder: PropTypes.bool, onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, appendContent: PropTypes.node, collapseIssues: PropTypes.bool, ...WithRouterPropTypes, }; state = { collapsed: true, animating: false, }; handleToggleClick = (e) => { e.stopPropagation(); this.setState({ collapsed: !this.state.collapsed, animating: true }); }; handleTitleClick = () => { this.props.onClick?.(); }; handleMoveLeft = () => { this.props.onMove(-1); }; handleMoveRight = () => { this.props.onMove(1); }; handleTransitionEnd = () => { this.setState({ animating: false }); }; handlePin = () => { if (!this.props.pinned) { this.props.history.replace('/'); } this.props.onPin(); }; render () { const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { 'active': active, }); const buttonClassName = classNames('column-header', { 'active': active, }); const collapsibleClassName = classNames('column-header__collapsible', { 'collapsed': collapsed, 'animating': animating, }); const collapsibleButtonClassName = classNames('column-header__button', { 'active': !collapsed, }); let extraContent, pinButton, moveButtons, backButton, collapseButton; if (children) { extraContent = (
{children}
); } if (multiColumn && pinned) { pinButton = ; moveButtons = (
); } else if (multiColumn && this.props.onPin) { pinButton = ; } backButton = ; const collapsedContent = [ extraContent, ]; if (multiColumn) { collapsedContent.push(pinButton); collapsedContent.push(moveButtons); } if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) { collapseButton = ( ); } const hasTitle = (icon || iconComponent) && title; const component = (

{hasTitle && ( )} {!hasTitle && backButton}
{hasTitle && backButton} {extraButton} {collapseButton}

{(!collapsed || animating) && collapsedContent}
{appendContent}
); if (placeholder) { return component; } else { return ( {component} ); } } } export default injectIntl(withRouter(ColumnHeader));