diff --git a/src/browser.js b/src/browser.js index 520ecc097..48b2a46bf 100644 --- a/src/browser.js +++ b/src/browser.js @@ -127,7 +127,11 @@ class RawFileBrowser extends React.Component { filterRenderer: DefaultFilter, filterRendererProps: {}, fileRenderer: TableFile, - fileRendererProps: {}, + fileRendererProps: { + modifiedDateTime: { + formats: ['@distanceToNow'], + }, + }, folderRenderer: TableFolder, folderRendererProps: {}, detailRenderer: DefaultDetail, diff --git a/src/files/table.js b/src/files/table.js index 8274af020..28fe6093c 100644 --- a/src/files/table.js +++ b/src/files/table.js @@ -2,11 +2,11 @@ import React from 'react' import ClassNames from 'classnames' import { DragSource, DropTarget } from 'react-dnd' import { NativeTypes } from 'react-dnd-html5-backend' -import { formatDistanceToNow } from 'date-fns' import flow from 'lodash/flow' import BaseFile, { BaseFileConnectors } from './../base-file.js' import { fileSize } from './utils.js' +import { ModifiedDateTime } from '../modified-date-time' class RawTableFile extends BaseFile { render() { @@ -14,6 +14,7 @@ class RawTableFile extends BaseFile { isDragging, isDeleting, isRenaming, isOver, isSelected, action, url, browserProps, connectDragPreview, depth, size, modified, + modifiedDateTime, } = this.props const icon = browserProps.icons[this.getFileType()] || browserProps.icons.File @@ -87,7 +88,7 @@ class RawTableFile extends BaseFile { {fileSize(size)} - {typeof modified === 'undefined' ? '-' : formatDistanceToNow(modified, { addSuffix: true })} + {typeof modified === 'undefined' ? '-' : } ) @@ -97,7 +98,7 @@ class RawTableFile extends BaseFile { } const TableFile = flow( - DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect), + DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect), DropTarget(['file', 'folder', NativeTypes.FILE], BaseFileConnectors.targetSource, BaseFileConnectors.targetCollect) )(RawTableFile) diff --git a/src/modified-date-time.js b/src/modified-date-time.js new file mode 100644 index 000000000..fd510367c --- /dev/null +++ b/src/modified-date-time.js @@ -0,0 +1,48 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { format, formatDistanceToNow } from 'date-fns' + +export class ModifiedDateTime extends React.Component { + static propTypes = { + formats: PropTypes.array, + modified: PropTypes.number.isRequired, + } + + dateTimeFormats = new Map() + .set('@distanceToNow', (modified) => formatDistanceToNow(modified, { addSuffix: true })) + + constructor(props) { + super(props) + + this.state = { + formats: props.formats.slice(0, 2), + } + } + + getDateTime(modified, formatString) { + return formatString ? (this.dateTimeFormats.has(formatString) ? this.dateTimeFormats.get(formatString)(modified) : format(modified, formatString)) : null + } + + render() { + const { modified } = this.props + const { formats } = this.state + + const defaultFormat = formats[0] || '@distanceToNow' + const altFormat = formats[1] + + const defaultValue = this.getDateTime(modified, defaultFormat) || '-' + const altValue = this.getDateTime(modified, altFormat) + + const handleClick = () => { + if (altValue) { + this.setState(() => ({ formats: [altFormat, defaultFormat] })) + } + } + + return ( +
+ {defaultValue} +
+ ) + } +}