import autobind from "autobind-decorator" ; import * as React from "react" ; import { ColumnHeader } from "components/panels" ; import { IDirectoryHeaderProps } from "props/panels" ; import { ColumnType } from "types" ; import "styles/panels/DirectoryHeader.scss" ; /** The DirectoryHeader component. */ class DirectoryHeader extends React . PureComponent < IDirectoryHeaderProps > { /** Divisors to use when calculating column widths. */ private readonly divisors = { half : 2 , sixth : 6 } ; /** The parent container used for calculating column widths. */ private container ? : HTMLDivElement | null ; inheritDoc public componentDidMount ( ) { if ( ! this . container ) { return ; } const containerWidth = this . container . clientWidth ; this . props . updateColumnSize ( "name" , containerWidth / this . divisors . half ) ; this . props . updateColumnSize ( "size" , containerWidth / this . divisors . sixth ) ; this . props . updateColumnSize ( "lastModified" , containerWidth / this . divisors . sixth ) ; } returns public render ( ) { const directoryHeaderStyles = { background : this . props . theme . directoryHeader . backgroundColour , boxShadow : `0 5px 5px ${ this . props . theme . directoryItem . backgroundColour }` , color : this . props . theme . directoryHeader . foregroundColour } ; const splitPaneStyles = { position : "relative" } ; return < div className = "DirectoryHeader" style = { directoryHeaderStyles } ref = { element => this . container = element } > < ColumnHeader heading = "Name" columnType = "name" columnStyles = { splitPaneStyles } columnSize = { this . props . columnSizes . name } onChange = { this . handleSizeChange } > < ColumnHeader heading = "Size" columnType = "size" columnSize = { this . props . columnSizes . size } onChange = { this . handleSizeChange } > < ColumnHeader heading = "Modified on" columnType = "lastModified" columnSize = { this . props . columnSizes . lastModified } onChange = { this . handleSizeChange } > < div > Created on < /div> < /ColumnHeader> < /ColumnHeader> < /ColumnHeader> < /div>; } @ autobind private handleSizeChange ( newSize , columnType ) { this . props . updateColumnSize ( columnType , newSize ) ; } } export default DirectoryHeader ;