import autobind from "autobind-decorator" ; import { shell } from "electron" ; import formatter from "format-number" ; import moment from "moment" ; import * as React from "react" ; import { HotKeys } from "react-hotkeys" ; import { IDirectoryItemStyles , IHandlers } from "models" ; import { IDirectoryItemProps } from "props/blocks" ; import Utils from "Utils" ; import { DirectoryItemIcon } from "components/blocks" ; import "styles/blocks/DirectoryItem.scss" ; /** A single directory item component. */ class DirectoryItem extends React . PureComponent < IDirectoryItemProps > { /** Handler functions for the given events this component handles. */ private handlers : IHandlers = { activate : this . activate , openDirectory : this . openDirectory , openInNativeExplorer : this . openInNativeExplorer } ; private dateFormat = "L LTS" ; /** Gets the size of the directory item rendered in Kilobytes. */ private get sizeInKiloBytes ( ) : string | undefined { if ( ! this . props . model . size ) { return "" ; } const bytesInKiloByte = 1024 ; return formatter ( { suffix : " Kb" } ) ( Math . round ( this . props . model . size / bytesInKiloByte ) ) ; } returns public render ( ) { const { isSelected , model } = this . props ; const selectedClass = isSelected ? "selected" : "" ; const { backgroundStyle , createdOnColumnStyle , nameColumnStyle , sizeColumnStyle , lastModifiedColumnStyle } = this . itemStyles ; return < HotKeys handlers = { this . handlers } ref = { component => component && isSelected && Utils . autoFocus ( component ) } > < div className = { `Item DirectoryItem ${ selectedClass }` } style = { backgroundStyle } > < DirectoryItemIcon directoryItem = { this . props . model } theme = { this . props . theme } / > < button style = { nameColumnStyle } onClick = { this . select } onDoubleClick = { this . activate } > { model . name } < /button> < button className = "sizeColumn" style = { sizeColumnStyle } onClick = { this . select } onDoubleClick = { this . activate } > { this . sizeInKiloBytes } < /button> < button className = "lastModifiedColumn" style = { lastModifiedColumnStyle } onClick = { this . select } onDoubleClick = { this . activate } > { moment ( model . lastModified ) . format ( this . dateFormat ) } < /button> < button className = "createdOnColumn" style = { createdOnColumnStyle } onClick = { this . select } onDoubleClick = { this . activate } > { moment ( model . created ) . format ( this . dateFormat ) } < /button> < /div> < /HotKeys>; } private get itemStyles ( ) : IDirectoryItemStyles { const { isSelected , model , theme } = this . props ; const { fileColour , directoryColour , backgroundColour , chosenColour , selectedBackgroundColour } = theme . directoryItem ; const backgroundStyle = { backgroundColor : isSelected ? selectedBackgroundColour : backgroundColour } ; let foregroundColour ; if ( this . props . model . accessible ) { foregroundColour = this . props . isChosen ? chosenColour : ( ! model . isDirectory && fileColour ) || ( model . isDirectory && directoryColour ) ; } else { foregroundColour = theme . directoryItem . inaccessibleColour ; } const nameColumnStyle = { color : foregroundColour , width : `${ this . props . columnSizes . name }px` } ; const sizeColumnStyle = { ... nameColumnStyle , width : `${ this . props . columnSizes . size }px` } ; const lastModifiedColumnStyle = { ... nameColumnStyle , width : `${ this . props . columnSizes . lastModified }px` } ; const createdOnColumnStyle = { ... nameColumnStyle , width : undefined } ; return { backgroundStyle , createdOnColumnStyle , lastModifiedColumnStyle , nameColumnStyle , sizeColumnStyle } ; } @ autobind private openDirectory ( ) { if ( ! this . props . model . accessible ) { Utils . trace ( `Cannot open inaccessible directory ${ this . props . model . path }` ) ; return ; } if ( this . props . model . isDirectory ) { this . props . sendPathUp ( this . props . model . path ) ; } } @ autobind private activate ( ) { if ( ! this . props . model . accessible ) { Utils . trace ( `Cannot activate inaccessible item ${ this . props . model . path }` ) ; return ; } if ( this . props . model . isDirectory ) { this . props . sendPathUp ( this . props . model . path ) ; } else { Utils . trace ( "Opening item using shell" ) ; shell . openItem ( this . props . model . path ) ; } } @ autobind private openInNativeExplorer ( ) { Utils . trace ( "Showing item in folder using shell" ) ; shell . showItemInFolder ( this . props . model . path ) ; } @ autobind private select ( ) { this . props . sendSelectedItemUp ( this . props . model ) ; } } export default DirectoryItem ;