import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { FormattedMessage } from 'react-intl'; class ColumnHeader extends React.PureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { title: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, active: PropTypes.bool, multiColumn: PropTypes.bool, showBackButton: PropTypes.bool, children: PropTypes.node, pinned: PropTypes.bool, onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, }; 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); } handleBackClick = () => { if (window.history && window.history.length === 1) this.context.router.push('/'); else this.context.router.goBack(); } handleTransitionEnd = () => { this.setState({ animating: false }); } render () { const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = 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) { pinButton = ; } if (!pinned && (multiColumn || showBackButton)) { backButton = ( ); } const collapsedContent = [ extraContent, ]; if (multiColumn) { collapsedContent.push(moveButtons); collapsedContent.push(pinButton); } if (children || multiColumn) { collapseButton = ; } return (
{title}
{backButton} {collapseButton}
{(!collapsed || animating) && collapsedContent}
); } } export default ColumnHeader;