'use strict'; import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import Icon from 'gabsocial/components/icon'; const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, }); export default @injectIntl class ColumnHeader extends React.PureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, title: PropTypes.node, icon: PropTypes.string, active: PropTypes.bool, extraButton: PropTypes.node, children: PropTypes.node, }; state = { collapsed: true, animating: false, }; historyBack = () => { if (window.history && window.history.length === 1) { this.context.router.history.push('/home'); // homehack } else { this.context.router.history.goBack(); } } handleToggleClick = (e) => { e.stopPropagation(); this.setState({ collapsed: !this.state.collapsed, animating: true }); } handleBackClick = () => { this.historyBack(); } handleTransitionEnd = () => { this.setState({ animating: false }); } render () { const { title, icon, active, children, extraButton, intl: { formatMessage } } = 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, collapseButton; if (children) { extraContent = (
{children}
); } const collapsedContent = [ extraContent, ]; if (children) { collapseButton = ; } const hasTitle = icon && title; return (

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

{(!collapsed || animating) && collapsedContent}
); } }