Merge pull request #227 from PaperMold/feature/add-custom-date-formatter

Add support for custom date formatting in FileItem component

Author: Saifullah-dev

frontend/README.md

@@ -110,6 +110,7 @@ type File = {
 | `fileUploadConfig`       | { url: string; method?: "POST" \| "PUT"; headers?: { [key: string]: string } }                                                  | Configuration object for file uploads. It includes the upload URL (`url`), an optional HTTP method (`method`, default is `"POST"`), and an optional `headers` object for setting custom HTTP headers in the upload request. The `method` property allows only `"POST"` or `"PUT"` values. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", method: "PUT", headers: { Authorization: "Bearer " + TOKEN, "X-Custom-Header": "value" } }` |
 | `files`                  | Array<[File](#-file-structure)>                                                                                                 | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties.                                                                                                                                                                                                                                                                                                                                                                            |
 | `fontFamily`             | string                                                                                                                          | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`.                                                                                                                                                                                                                                                                                   |
+| `formatDate`             | (date: string \| Date) => string | (Optional) A custom function used to format file and folder modification dates. If omitted, the component falls back to its built-in formatter from `utils/formatDate`. Useful for adapting the date display to different locales or formats.
 | `height`                 | string \| number                                                                                                                | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels).                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `initialPath`            | string                                                                                                                          | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""`                                                                                                                                                                                                                                                                                                                                                               |
 | `isLoading`              | boolean                                                                                                                         | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set `true`.                                                                                                                                                                                                                                                                                                                                         |

frontend/src/FileManager/FileList/FileItem.jsx

@@ -4,7 +4,6 @@ import { useFileIcons } from "../../hooks/useFileIcons";
 import CreateFolderAction from "../Actions/CreateFolder/CreateFolder.action";
 import RenameAction from "../Actions/Rename/Rename.action";
 import { getDataSize } from "../../utils/getDataSize";
-import { formatDate } from "../../utils/formatDate";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
 import { useSelection } from "../../contexts/SelectionContext";
 import { useClipBoard } from "../../contexts/ClipboardContext";
@@ -26,6 +25,7 @@ const FileItem = ({
   handleContextMenu,
   setLastSelectedFile,
   draggable,
+  formatDate,
 }) => {
   const [fileSelected, setFileSelected] = useState(false);
   const [lastClickTime, setLastClickTime] = useState(0);

frontend/src/FileManager/FileList/FileList.jsx

@@ -17,6 +17,7 @@ const FileList = ({
   enableFilePreview,
   triggerAction,
   permissions,
+  formatDate,
 }) => {
   const { currentPathFiles, sortConfig, setSortConfig } = useFileNavigation();
   const filesViewRef = useRef(null);
@@ -75,6 +76,7 @@ const FileList = ({
               setVisible={setVisible}
               setLastSelectedFile={setLastSelectedFile}
               draggable={permissions.move}
+              formatDate={formatDate}
             />
           ))}
         </>

frontend/src/FileManager/FileManager.jsx

@@ -16,6 +16,7 @@ import { dateStringValidator, urlValidator } from "../validators/propValidators"
 import { TranslationProvider } from "../contexts/TranslationProvider";
 import { useMemo, useState } from "react";
 import { defaultPermissions } from "../constants";
+import { formatDate as defaultFormatDate } from "../utils/formatDate";
 import "./FileManager.scss";
 
 const FileManager = ({
@@ -55,6 +56,7 @@ const FileManager = ({
   defaultNavExpanded = true,
   className = "",
   style = {},
+  formatDate = defaultFormatDate,
 }) => {
   const [isNavigationPaneOpen, setNavigationPaneOpen] = useState(defaultNavExpanded);
   const triggerAction = useTriggerAction();
@@ -131,6 +133,7 @@ const FileManager = ({
                         enableFilePreview={enableFilePreview}
                         triggerAction={triggerAction}
                         permissions={permissions}
+                        formatDate={formatDate}
                       />
                     </div>
                   </section>
@@ -217,6 +220,7 @@ FileManager.propTypes = {
   defaultNavExpanded: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
+  formatDate: PropTypes.func,
 };
 
 export default FileManager;