@map-colonies/react-components 3.8.1 → 3.10.2

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

@@ -0,0 +1,62 @@
+body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
+  direction: rtl !important;
+}
+
+body[dir='rtl']
+  .chonky-fileEntryClickableWrapper
+  [class^='listFileEntryProperty-'] {
+  direction: ltr !important;
+}
+
+body[dir='rtl'] .chonky-chonkyRoot {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-infoText {
+  margin-left: unset;
+  margin-right: 12px;
+}
+
+body[dir='rtl'] .chonky-contextMenuList .MuiListItemText-root,
+body[dir='rtl'] .chonky-dropdownList .MuiListItemText-root {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-icon {
+  margin-right: unset;
+  margin-left: 8px;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide'] {
+  box-shadow: unset;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide']::after {
+  border-color: var(--fp-theme-background, #fff)
+    var(--fp-theme-background, #fff) transparent transparent;
+}
+
+.chonky-chonkyRoot div[class^='listFileEntryIcon-'] {
+  color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class*='previewFile-d'] {
+  background-color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class^='selectionIndicator-'] {
+  background: var(--fp-theme-selection-background, #455570);
+}
+
+.chonky-chonkyRoot {
+  background-color: var(--fp-theme-background, #fff) !important;
+}
+
+.chonky-contextMenuList {
+  background-color: var(--fp-theme-surface, #fff) !important;
+}
+
+button[class*='chonky-activeButton'],
+.chonky-selectionSizeText {
+  color: var(--fp-theme-primary, #24aee9) !important;
+}

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

@@ -0,0 +1,447 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React, {
+  useCallback,
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
+import { Story } from '@storybook/react/types-6-0';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@material-ui/core';
+import { Box } from '../box';
+import { SupportedLocales } from '../models';
+import {
+  FileActionData,
+  FilePicker,
+  FileArray,
+  FileData,
+  FileHelper,
+  FilePickerActions,
+  FilePickerHandle,
+} from './file-picker';
+import FsMap from './fs-map.json';
+
+export default {
+  title: 'File Picker',
+  component: FilePicker,
+};
+
+interface CustomFileData extends FileData {
+  parentId?: string;
+  childrenIds?: string[];
+}
+interface CustomFileMap {
+  [fileId: string]: CustomFileData;
+}
+
+const prepareCustomFileMap = (): Record<string, unknown> => {
+  const baseFileMap = (FsMap.fileMap as unknown) as CustomFileMap;
+  const rootFolderId = FsMap.rootFolderId;
+  return { baseFileMap, rootFolderId };
+};
+
+// Sets up files map and actions
+// eslint-disable-next-line
+const useCustomFileMap = () => {
+  const { baseFileMap, rootFolderId } = useMemo(prepareCustomFileMap, []);
+
+  const [fileMap, setFileMap] = useState<CustomFileMap>(
+    baseFileMap as CustomFileMap
+  );
+  const [currentFolderId, setCurrentFolderId] = useState(rootFolderId);
+
+  const resetFileMap = useCallback(() => {
+    setFileMap(baseFileMap as CustomFileMap);
+    setCurrentFolderId(rootFolderId);
+  }, [baseFileMap, rootFolderId]);
+
+  const currentFolderIdRef = useRef(currentFolderId);
+
+  useEffect(() => {
+    currentFolderIdRef.current = currentFolderId;
+  }, [currentFolderId]);
+
+  const deleteFiles = useCallback((files: CustomFileData[]) => {
+    setFileMap((currentFileMap) => {
+      const newFileMap = { ...currentFileMap };
+
+      files.forEach((file) => {
+        delete newFileMap[file.id];
+
+        if (file.parentId) {
+          const parent = newFileMap[file.parentId];
+          const newChildrenIds = parent.childrenIds?.filter(
+            (id) => id !== file.id
+          );
+          newFileMap[file.parentId] = {
+            ...parent,
+            childrenIds: newChildrenIds,
+            childrenCount: newChildrenIds?.length,
+          };
+        }
+      });
+
+      return newFileMap;
+    });
+  }, []);
+
+  const moveFiles = useCallback(
+    (
+      files: CustomFileData[],
+      source: CustomFileData,
+      destination: CustomFileData
+    ) => {
+      setFileMap((currentFileMap) => {
+        const newFileMap = { ...currentFileMap };
+        const moveFileIds = new Set(files.map((f) => f.id));
+
+        // Delete files from their source folder.
+        const newSourceChildrenIds = source.childrenIds?.filter(
+          (id) => !moveFileIds.has(id)
+        );
+        newFileMap[source.id] = {
+          ...source,
+          childrenIds: newSourceChildrenIds,
+          childrenCount: newSourceChildrenIds?.length,
+        };
+
+        // Add the files to their destination folder.
+        const newDestinationChildrenIds = [
+          ...(destination.childrenIds as string[]),
+          ...files.map((f) => f.id),
+        ];
+        newFileMap[destination.id] = {
+          ...destination,
+          childrenIds: newDestinationChildrenIds,
+          childrenCount: newDestinationChildrenIds.length,
+        };
+
+        // Finally, update the parent folder ID on the files - from source folder
+        // ID to the destination folder ID.
+        files.forEach((file) => {
+          newFileMap[file.id] = {
+            ...file,
+            parentId: destination.id,
+          };
+        });
+
+        return newFileMap;
+      });
+    },
+    []
+  );
+
+  // TODO: in production we should use UUIDs or MD5 hashes for file paths
+  const idCounter = useRef(0);
+  const createFolder = useCallback((folderName: string) => {
+    setFileMap((currentFileMap) => {
+      const newFileMap = { ...currentFileMap };
+
+      const parentId = currentFolderIdRef.current as string;
+      // Create the new folder.
+      const newFolderId = `new-folder-${idCounter.current++}`;
+      newFileMap[newFolderId] = {
+        id: newFolderId,
+        name: folderName,
+        isDir: true,
+        modDate: new Date(),
+        parentId: parentId,
+        childrenIds: [],
+        childrenCount: 0,
+      };
+
+      // Update parent folder to reference the new folder.
+      const parent = newFileMap[parentId];
+      newFileMap[parentId] = {
+        ...parent,
+        childrenIds: [...(parent.childrenIds as string[]), newFolderId],
+      };
+
+      return newFileMap;
+    });
+  }, []);
+
+  return {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  };
+};
+
+const useFiles = (
+  fileMap: CustomFileMap,
+  currentFolderId: string
+): FileArray => {
+  return useMemo(() => {
+    const currentFolder = fileMap[currentFolderId];
+    const files = currentFolder.childrenIds
+      ? currentFolder.childrenIds.map((fileId: string) => fileMap[fileId])
+      : [];
+    return files;
+  }, [currentFolderId, fileMap]);
+};
+
+const useFolderChain = (
+  fileMap: CustomFileMap,
+  currentFolderId: string
+): FileArray => {
+  return useMemo(() => {
+    const currentFolder = fileMap[currentFolderId];
+    const folderChain = [currentFolder];
+    let parentId = currentFolder.parentId;
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    while (parentId) {
+      const parentFile = fileMap[parentId];
+      // eslint-disable-next-line
+      if (parentFile) {
+        folderChain.unshift(parentFile);
+        parentId = parentFile.parentId;
+      } else {
+        break;
+      }
+    }
+    return folderChain;
+  }, [currentFolderId, fileMap]);
+};
+
+const useFileActionHandler = (
+  setCurrentFolderId: (folderId: string) => void,
+  deleteFiles: (files: CustomFileData[]) => void,
+  moveFiles: (
+    files: FileData[],
+    source: FileData,
+    destination: FileData
+  ) => void,
+  createFolder: (folderName: string) => void
+): ((data: FileActionData) => void) => {
+  return useCallback(
+    (data: FileActionData) => {
+      if (data.id === FilePickerActions.OpenFiles.id) {
+        const { targetFile, files } = data.payload;
+        const fileToOpen = targetFile ?? files[0];
+        // eslint-disable-next-line
+        if (fileToOpen && FileHelper.isDirectory(fileToOpen)) {
+          setCurrentFolderId(fileToOpen.id);
+          return;
+        }
+      } else if (data.id === FilePickerActions.DeleteFiles.id) {
+        deleteFiles(data.state.selectedFilesForAction);
+      } else if (data.id === FilePickerActions.MoveFiles.id) {
+        moveFiles(
+          data.payload.files,
+          data.payload.source as FileData,
+          data.payload.destination
+        );
+      } else if (data.id === FilePickerActions.CreateFolder.id) {
+        const folderName = prompt('Provide the name for your new folder:');
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (folderName) createFolder(folderName);
+      }
+    },
+    [createFolder, deleteFiles, moveFiles, setCurrentFolderId]
+  );
+};
+
+export const ReadOnlyMode: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  return (
+    <Box style={{ height: '600px' }}>
+      <FilePicker
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+        readOnlyMode={true}
+      />
+    </Box>
+  );
+};
+
+export const DarkTheme: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  return (
+    <Box style={{ height: '600px' }}>
+      <FilePicker
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+        theme={{
+          primary: 'blue',
+          background: 'black',
+          surface: 'gray',
+          textOnBackground: 'white',
+          selectionBackground: '#455570',
+        }}
+      />
+    </Box>
+  );
+};
+
+export const Localized: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  const [locale, setLocale] = useState<SupportedLocales>(SupportedLocales.HE);
+  const handleLocaleChange = useCallback(
+    (event) => setLocale(event.target.value),
+    []
+  );
+  return (
+    <>
+      <FormControl component="fieldset" style={{ marginBottom: 15 }}>
+        <FormLabel component="legend">Pick a language:</FormLabel>
+        <RadioGroup
+          aria-label="locale"
+          name="locale"
+          value={locale}
+          onChange={handleLocaleChange}
+        >
+          <FormControlLabel
+            value={SupportedLocales.HE}
+            control={<Radio />}
+            label="עברית"
+          />
+          <FormControlLabel
+            value={SupportedLocales.RU}
+            control={<Radio />}
+            label="Русский"
+          />
+          <FormControlLabel
+            value={SupportedLocales.EN}
+            control={<Radio />}
+            label="English"
+          />
+        </RadioGroup>
+      </FormControl>
+      <br />
+      <Box style={{ height: '600px' }}>
+        <FilePicker
+          files={files}
+          folderChain={folderChain}
+          onFileAction={handleFileAction}
+          locale={locale}
+        />
+      </Box>
+    </>
+  );
+};
+
+export const FilesSelection: Story = () => {
+  const {
+    fileMap,
+    currentFolderId,
+    setCurrentFolderId,
+    // resetFileMap,
+    deleteFiles,
+    moveFiles,
+    createFolder,
+  } = useCustomFileMap();
+  const files = useFiles(fileMap, currentFolderId as string);
+  const folderChain = useFolderChain(fileMap, currentFolderId as string);
+  const handleFileAction = useFileActionHandler(
+    setCurrentFolderId,
+    deleteFiles,
+    moveFiles,
+    createFolder
+  );
+  const fileBrowserRef = useRef<FilePickerHandle>(null);
+
+  const logSelection = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!fileBrowserRef.current) return;
+      console.log(fileBrowserRef.current.getFileSelection());
+    },
+    [fileBrowserRef]
+  );
+
+  const randomizeSelection = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!fileBrowserRef.current) return;
+      const randomFileIds = new Set<string>();
+      for (const file of files) {
+        if (file && Math.random() > 0.5) randomFileIds.add(file.id);
+      }
+      fileBrowserRef.current.setFileSelection(randomFileIds);
+    },
+    [files, fileBrowserRef]
+  );
+
+  return (
+    <Box style={{ height: '600px' }}>
+      <button type="button" onClick={randomizeSelection}>
+        Select files
+      </button>
+      <button type="button" onClick={logSelection}>
+        Log selection
+      </button>
+      <FilePicker
+        ref={fileBrowserRef}
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ChonkyActions,
+  ChonkyFileActionData,
+  FileAction,
+  FileArray as ChonkyFileArray,
+  FileBrowserHandle,
+  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 FilePickerHandle = FileBrowserHandle;
+
+export type FileActionData = ChonkyFileActionData;
+
+export type FileArray = ChonkyFileArray;
+
+export type FileData = ChonkyFileData;
+
+export type FilePickerAction = FileAction;
+
+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 });
+
+export 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(
+  React.forwardRef<FileBrowserHandle, FilePickerProps>(
+    (
+      {
+        theme,
+        styles = { height: '100%', minWidth: '600px' },
+        defaultView = FilePickerView.listView,
+        readOnlyMode = false,
+        locale,
+        files,
+        folderChain,
+        onFileAction,
+        ...props
+      },
+      ref
+    ) => {
+      // 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<FilePickerAction[]>();
+      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
+            ref={ref}
+            files={files ?? []}
+            folderChain={folderChain}
+            onFileAction={(data: FileActionData): void => {
+              if (typeof onFileAction === 'function') {
+                void onFileAction(data);
+              }
+            }}
+            thumbnailGenerator={thumbnailGenerator}
+            defaultFileViewActionId={defaultFileViewActionId}
+            disableDragAndDrop={disableDragAndDrop}
+            fileActions={fileActions}
+            darkMode={darkMode}
+            i18n={i18n}
+            {...props}
+          />
+        </Box>
+      );
+    }
+  )
+);