2017-06-04 01:39:38 +02:00
import React from 'react' ;
import PropTypes from 'prop-types' ;
import classNames from 'classnames' ;
2017-07-26 02:01:27 +02:00
import { FormattedMessage , injectIntl , defineMessages } from 'react-intl' ;
2017-06-04 01:39:38 +02:00
2017-07-26 02:01:27 +02:00
const messages = defineMessages ( {
show : { id : 'column_header.show_settings' , defaultMessage : 'Show settings' } ,
hide : { id : 'column_header.hide_settings' , defaultMessage : 'Hide settings' } ,
2017-07-28 00:54:48 +02:00
moveLeft : { id : 'column_header.moveLeft_settings' , defaultMessage : 'Move column to the left' } ,
moveRight : { id : 'column_header.moveRight_settings' , defaultMessage : 'Move column to the right' } ,
2017-07-26 02:01:27 +02:00
} ) ;
@ injectIntl
2017-06-23 19:36:54 +02:00
export default class ColumnHeader extends React . PureComponent {
2017-06-04 01:39:38 +02:00
static contextTypes = {
router : PropTypes . object ,
} ;
static propTypes = {
2017-07-26 02:01:27 +02:00
intl : PropTypes . object . isRequired ,
2017-07-09 15:02:26 +02:00
title : PropTypes . node . isRequired ,
2017-06-04 01:39:38 +02:00
icon : PropTypes . string . isRequired ,
active : PropTypes . bool ,
multiColumn : PropTypes . bool ,
2017-06-05 17:10:40 +02:00
showBackButton : PropTypes . bool ,
2017-06-04 01:39:38 +02:00
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 = ( ) => {
2017-06-20 20:40:03 +02:00
if ( window . history && window . history . length === 1 ) this . context . router . history . push ( '/' ) ;
else this . context . router . history . goBack ( ) ;
2017-06-04 01:39:38 +02:00
}
handleTransitionEnd = ( ) => {
this . setState ( { animating : false } ) ;
}
render ( ) {
2018-01-04 17:25:26 +01:00
const { title , icon , active , children , pinned , onPin , multiColumn , showBackButton , intl : { formatMessage } } = this . props ;
2017-06-04 01:39:38 +02:00
const { collapsed , animating } = this . state ;
2017-06-12 20:02:17 +02:00
const wrapperClassName = classNames ( 'column-header__wrapper' , {
'active' : active ,
} ) ;
2017-06-04 01:39:38 +02:00
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 = (
< div key = 'extra-content' className = 'column-header__collapsible__extra' >
{ children }
< / d i v >
) ;
}
if ( multiColumn && pinned ) {
pinButton = < button key = 'pin-button' className = 'text-btn column-header__setting-btn' onClick = { onPin } > < i className = 'fa fa fa-times' / > < FormattedMessage id = 'column_header.unpin' defaultMessage = 'Unpin' / > < / b u t t o n > ;
moveButtons = (
< div key = 'move-buttons' className = 'column-header__setting-arrows' >
2017-07-28 00:54:48 +02:00
< button title = { formatMessage ( messages . moveLeft ) } aria - label = { formatMessage ( messages . moveLeft ) } className = 'text-btn column-header__setting-btn' onClick = { this . handleMoveLeft } > < i className = 'fa fa-chevron-left' / > < / b u t t o n >
< button title = { formatMessage ( messages . moveRight ) } aria - label = { formatMessage ( messages . moveRight ) } className = 'text-btn column-header__setting-btn' onClick = { this . handleMoveRight } > < i className = 'fa fa-chevron-right' / > < / b u t t o n >
2017-06-04 01:39:38 +02:00
< / d i v >
) ;
} else if ( multiColumn ) {
pinButton = < button key = 'pin-button' className = 'text-btn column-header__setting-btn' onClick = { onPin } > < i className = 'fa fa fa-plus' / > < FormattedMessage id = 'column_header.pin' defaultMessage = 'Pin' / > < / b u t t o n > ;
2017-06-05 17:10:40 +02:00
}
2017-06-04 01:39:38 +02:00
2017-06-05 17:10:40 +02:00
if ( ! pinned && ( multiColumn || showBackButton ) ) {
2017-06-04 01:39:38 +02:00
backButton = (
< button onClick = { this . handleBackClick } className = 'column-header__back-button' >
< i className = 'fa fa-fw fa-chevron-left column-back-button__icon' / >
< FormattedMessage id = 'column_back_button.label' defaultMessage = 'Back' / >
< / b u t t o n >
) ;
}
const collapsedContent = [
extraContent ,
] ;
if ( multiColumn ) {
collapsedContent . push ( moveButtons ) ;
collapsedContent . push ( pinButton ) ;
}
if ( children || multiColumn ) {
2017-07-26 13:46:53 +02:00
collapseButton = < button className = { collapsibleButtonClassName } aria - label = { formatMessage ( collapsed ? messages . show : messages . hide ) } aria - pressed = { collapsed ? 'false' : 'true' } onClick = { this . handleToggleClick } > < i className = 'fa fa-sliders' / > < / b u t t o n > ;
2017-06-04 01:39:38 +02:00
}
return (
2017-06-12 20:02:17 +02:00
< div className = { wrapperClassName } >
2018-01-05 21:39:34 +01:00
< h1 className = { buttonClassName } >
< button onClick = { this . handleTitleClick } >
2018-01-04 17:25:26 +01:00
< i className = { ` fa fa-fw fa- ${ icon } column-header__icon ` } / >
< span className = 'column-header__title' >
{ title }
< / s p a n >
< / b u t t o n >
2017-06-04 01:39:38 +02:00
< div className = 'column-header__buttons' >
{ backButton }
{ collapseButton }
< / d i v >
2017-07-28 00:54:48 +02:00
< / h 1 >
2017-06-04 01:39:38 +02:00
2017-09-30 04:29:56 +02:00
< div className = { collapsibleClassName } tabIndex = { collapsed ? - 1 : null } onTransitionEnd = { this . handleTransitionEnd } >
2017-06-24 23:18:11 +02:00
< div className = 'column-header__collapsible-inner' >
2017-06-04 01:39:38 +02:00
{ ( ! collapsed || animating ) && collapsedContent }
< / d i v >
< / d i v >
< / d i v >
) ;
}
}