@map-colonies/react-components 3.9.0 → 3.10.0

package/src/lib/file-picker/file-picker.tsx

@@ -0,0 +1,163 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ChonkyActions,
+  ChonkyFileActionData,
+  FileAction,
+  FileArray as ChonkyFileArray,
+  FileBrowserProps,
+  FileData as ChonkyFileData,
+  FileHelper as ChonkyFileHelper,
+  FullFileBrowser,
+  I18nConfig,
+  setChonkyDefaults,
+} from 'chonky';
+import { ChonkyIconFA } from 'chonky-icon-fontawesome';
+import { makeStyles } from '@material-ui/core/styles';
+import { Box } from '../box';
+import { SupportedLocales } from '../models';
+import localization from './localization';
+
+import './file-picker.css';
+
+export type FileActionData = ChonkyFileActionData;
+
+export type FileArray = ChonkyFileArray;
+
+export type FileData = ChonkyFileData;
+
+export class FileHelper extends ChonkyFileHelper {}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FilePickerActions = ChonkyActions;
+
+export type FilePickerView = typeof FilePickerView[keyof typeof FilePickerView];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FilePickerView = {
+  listView: ChonkyActions.EnableListView.id,
+  gridView: ChonkyActions.EnableGridView.id,
+} as const;
+
+export interface FilePickerTheme {
+  primary: string;
+  background: string;
+  surface: string;
+  textOnBackground: string;
+  selectionBackground: string;
+}
+
+// IMPLEMENTATION NOTES: Currently FilePicker component works with his own icon set.
+// In future might be tweaked.
+setChonkyDefaults({ iconComponent: ChonkyIconFA });
+interface FilePickerProps extends Partial<FileBrowserProps> {
+  theme?: FilePickerTheme;
+  styles?: Record<string, string>;
+  defaultView?: FilePickerView;
+  readOnlyMode?: boolean;
+  locale?: SupportedLocales;
+}
+
+export const FilePicker: React.FC<FilePickerProps> = React.memo(
+  ({
+    theme,
+    styles = { height: '100%', minWidth: '600px' },
+    defaultView = FilePickerView.listView,
+    readOnlyMode = false,
+    locale,
+    files,
+    folderChain,
+    onFileAction,
+    ...props
+  }) => {
+    // IMPLEMENTATION NOTES: Currently FilePicker component discards the ability to show file thumbnail.
+    // In future might be tweaked.
+    const thumbnailGenerator = useCallback(
+      (file: FileData) => null,
+      // file.thumbnailUrl ? `https://chonky.io${file.thumbnailUrl}` : null,
+      []
+    );
+
+    makeStyles({
+      '@global': {
+        '.chonky-dropdownList': {
+          backgroundColor: `${theme?.surface as string} !important`,
+        },
+        'li[class*="chonky-activeButton"]': {
+          color: `${theme?.primary as string} !important`,
+        },
+      },
+    })();
+
+    const toDashCase = (str: string): string => {
+      return str.replace(/([A-Z])/g, ($1) => '-' + $1.toLowerCase());
+    };
+
+    const themeObject = useMemo((): Record<string, string> => {
+      if (theme !== undefined) {
+        const processedColors = Object.keys(theme).reduce(
+          (acc: Record<string, string>, key) => {
+            const val = ((theme as unknown) as Record<string, string>)[key];
+            key = key.startsWith('--') ? key : `--fp-theme-${toDashCase(key)}`;
+            acc[key] = val;
+            return acc;
+          },
+          {}
+        );
+        return processedColors;
+      }
+      return {};
+    }, [theme]);
+
+    const [darkMode, setDarkMode] = useState<boolean>(false);
+    const [defaultFileViewActionId, setDefaultFileViewActionId] = useState<
+      FilePickerView
+    >();
+    const [disableDragAndDrop, setDisableDragAndDrop] = useState<boolean>(
+      false
+    );
+    const [fileActions, setFileActions] = useState<FileAction[]>();
+    const [i18n, setI18n] = useState<I18nConfig>();
+    useEffect(() => {
+      if (theme) {
+        setDarkMode(true);
+      }
+
+      setDefaultFileViewActionId(defaultView);
+
+      if (readOnlyMode) {
+        setDisableDragAndDrop(true);
+      } else {
+        setFileActions([ChonkyActions.CreateFolder, ChonkyActions.DeleteFiles]);
+      }
+
+      if (locale !== undefined) {
+        setI18n(localization[locale]);
+      }
+    }, [theme, defaultView, readOnlyMode, locale]);
+
+    return (
+      <Box
+        style={{
+          ...styles,
+          ...themeObject,
+        }}
+      >
+        <FullFileBrowser
+          files={files ?? []}
+          folderChain={folderChain}
+          onFileAction={(data: ChonkyFileActionData): void => {
+            if (typeof onFileAction === 'function') {
+              void onFileAction(data);
+            }
+          }}
+          thumbnailGenerator={thumbnailGenerator}
+          defaultFileViewActionId={defaultFileViewActionId}
+          disableDragAndDrop={disableDragAndDrop}
+          fileActions={fileActions}
+          darkMode={darkMode}
+          i18n={i18n}
+          {...props}
+        />
+      </Box>
+    );
+  }
+);