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}
+
+ )
+ }
+}