feat: customizable formatting of item's modified datetime

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,

src/files/table.js

@@ -2,18 +2,19 @@ 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() {
     const {
       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 {
         </td>
         <td className="size">{fileSize(size)}</td>
         <td className="modified">
-          {typeof modified === 'undefined' ? '-' : formatDistanceToNow(modified, { addSuffix: true })}
+          {typeof modified === 'undefined' ? '-' : <ModifiedDateTime modified={modified} formats={modifiedDateTime?.formats || []} />}
         </td>
       </tr>
     )
@@ -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)
 

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 (
+        <div title={altValue} onClick={handleClick}>
+          {defaultValue}
+        </div>
+      )
+    }
+}