import fileIcons from "file-icons-js" ; import * as React from "react" ; import { FaRegFile , FaRegFolder } from "react-icons/fa" ; import LoggedError from "errors/LoggedError" ; import { IDirectoryItemIconProps } from "props/blocks" ; import "styles/blocks/DirectoryItemIcon.scss" ; import { ItemType } from "types" ; /** An icon for a directory item. */ class DirectoryItemIcon extends React . PureComponent < IDirectoryItemIconProps > { /** Defines a static width for all directory item icons to ensure correct alignment. */ private readonly iconStyles : React . CSSProperties = { width : "22px" } ; returns public render ( ) { const { directoryItem , directoryItemType , theme } = this . props ; const { directoryItemIcon } = theme ; if ( directoryItem && directoryItem . isDirectory || directoryItemType === "folder" ) { return < FaRegFolder style = { this . iconStyles } color = { this . getIconColour ( "folder" ) } / > ; } if ( directoryItem && ! directoryItem . isDirectory || directoryItemType === "file" ) { const className = directoryItem && fileIcons . getClassWithColor ( directoryItem . path ) ; return className ? < i style = { this . iconStyles } color = { ( directoryItem && ! directoryItem . accessible && directoryItemIcon . inaccessibleIconColour ) || undefined } className = { className } > < /i> : < FaRegFile style = { this . iconStyles } color = { this . getIconColour ( "file" ) } / > ; } throw new LoggedError ( "Tried to render directory item icon with no valid prop" ) ; } private getIconColour ( itemType ) { const { directoryItem , theme } = this . props ; if ( itemType === "folder" ) { return directoryItem && directoryItem . accessible ? theme . directoryItemIcon . directoryIconColour : theme . directoryItemIcon . inaccessibleIconColour ; } return directoryItem && directoryItem . accessible ? theme . directoryItemIcon . fileIconDefaultColour : theme . directoryItemIcon . inaccessibleIconColour ; } } export default DirectoryItemIcon ;