@map-colonies/react-components 3.10.0 → 3.10.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.10.1](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.0...@map-colonies/react-components@3.10.1) (2022-02-10)
+
+
+### Bug Fixes
+
+* file picker ref formatters ([#116](https://github.com/MapColonies/shared-components/issues/116)) ([1432b6a](https://github.com/MapColonies/shared-components/commit/1432b6a65290d0e170d9e956eddabbe1d909e744))
+
+
+
+
+
 # [3.10.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.8.0...@map-colonies/react-components@3.10.0) (2022-02-09)
 
 

package/dist/file-picker/file-picker.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ChonkyFileActionData, FileArray as ChonkyFileArray, FileBrowserProps, FileData as ChonkyFileData, FileHelper as ChonkyFileHelper } from 'chonky';
+import { ChonkyFileActionData, FileArray as ChonkyFileArray, FileBrowserHandle, FileBrowserProps, FileData as ChonkyFileData, FileHelper as ChonkyFileHelper } from 'chonky';
 import { SupportedLocales } from '../models';
 import './file-picker.css';
+export declare type FilePickerHandle = FileBrowserHandle;
 export declare type FileActionData = ChonkyFileActionData;
 export declare type FileArray = ChonkyFileArray;
 export declare type FileData = ChonkyFileData;
@@ -264,7 +265,7 @@ export interface FilePickerTheme {
     textOnBackground: string;
     selectionBackground: string;
 }
-interface FilePickerProps extends Partial<FileBrowserProps> {
+export interface FilePickerProps extends Partial<FileBrowserProps> {
     theme?: FilePickerTheme;
     styles?: Record<string, string>;
     defaultView?: FilePickerView;
@@ -272,4 +273,3 @@ interface FilePickerProps extends Partial<FileBrowserProps> {
     locale?: SupportedLocales;
 }
 export declare const FilePicker: React.FC<FilePickerProps>;
-export {};

package/dist/file-picker/file-picker.js

@@ -85,7 +85,7 @@ exports.FilePickerView = {
 // IMPLEMENTATION NOTES: Currently FilePicker component works with his own icon set.
 // In future might be tweaked.
 chonky_1.setChonkyDefaults({ iconComponent: chonky_icon_fontawesome_1.ChonkyIconFA });
-exports.FilePicker = react_1.default.memo(function (_a) {
+exports.FilePicker = react_1.default.memo(react_1.default.forwardRef(function (_a, ref) {
     var theme = _a.theme, _b = _a.styles, styles = _b === void 0 ? { height: '100%', minWidth: '600px' } : _b, _c = _a.defaultView, defaultView = _c === void 0 ? exports.FilePickerView.listView : _c, _d = _a.readOnlyMode, readOnlyMode = _d === void 0 ? false : _d, locale = _a.locale, files = _a.files, folderChain = _a.folderChain, onFileAction = _a.onFileAction, props = __rest(_a, ["theme", "styles", "defaultView", "readOnlyMode", "locale", "files", "folderChain", "onFileAction"]);
     // IMPLEMENTATION NOTES: Currently FilePicker component discards the ability to show file thumbnail.
     // In future might be tweaked.
@@ -109,7 +109,9 @@ exports.FilePicker = react_1.default.memo(function (_a) {
         if (theme !== undefined) {
             var processedColors = Object.keys(theme).reduce(function (acc, key) {
                 var val = theme[key];
-                key = key.startsWith('--') ? key : "--fp-theme-" + toDashCase(key);
+                key = key.startsWith('--')
+                    ? key
+                    : "--fp-theme-" + toDashCase(key);
                 acc[key] = val;
                 return acc;
             }, {});
@@ -131,16 +133,19 @@ exports.FilePicker = react_1.default.memo(function (_a) {
             setDisableDragAndDrop(true);
         }
         else {
-            setFileActions([chonky_1.ChonkyActions.CreateFolder, chonky_1.ChonkyActions.DeleteFiles]);
+            setFileActions([
+                chonky_1.ChonkyActions.CreateFolder,
+                chonky_1.ChonkyActions.DeleteFiles,
+            ]);
         }
         if (locale !== undefined) {
             setI18n(localization_1.default[locale]);
         }
     }, [theme, defaultView, readOnlyMode, locale]);
     return (react_1.default.createElement(box_1.Box, { style: __assign(__assign({}, styles), themeObject) },
-        react_1.default.createElement(chonky_1.FullFileBrowser, __assign({ files: files !== null && files !== void 0 ? files : [], folderChain: folderChain, onFileAction: function (data) {
+        react_1.default.createElement(chonky_1.FullFileBrowser, __assign({ ref: ref, files: files !== null && files !== void 0 ? files : [], folderChain: folderChain, onFileAction: function (data) {
                 if (typeof onFileAction === 'function') {
                     void onFileAction(data);
                 }
             }, thumbnailGenerator: thumbnailGenerator, defaultFileViewActionId: defaultFileViewActionId, disableDragAndDrop: disableDragAndDrop, fileActions: fileActions, darkMode: darkMode, i18n: i18n }, props))));
-});
+}));

package/dist/file-picker/localization.js

@@ -1,26 +1,58 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable */
 var chonky_1 = require("chonky");
+var filesize_1 = __importDefault(require("filesize"));
 var models_1 = require("../models");
+var defaultFormatters = {
+    formatFileModDate: function (intl, file) {
+        var safeModDate = chonky_1.FileHelper.getModDate(file);
+        if (safeModDate) {
+            return intl.formatDate(safeModDate, {
+                dateStyle: 'short',
+                timeStyle: 'short',
+            });
+        }
+        else {
+            return null;
+        }
+    },
+    formatFileSize: function (intl, file) {
+        if (!file || typeof file.size !== 'number')
+            return null;
+        var size = file.size;
+        var sizeData = filesize_1.default(size, { bits: false, output: 'object' });
+        if (sizeData.symbol === 'B') {
+            return Math.round(sizeData.value / 10) / 100.0 + " KB";
+        }
+        else if (sizeData.symbol === 'KB') {
+            return Math.round(sizeData.value) + " " + sizeData.symbol;
+        }
+        return sizeData.value + " " + sizeData.symbol;
+    },
+};
+var englishI18n = {
+    locale: models_1.SupportedLocales.EN,
+    formatters: __assign({}, defaultFormatters),
+};
 var russianI18n = {
     locale: models_1.SupportedLocales.RU,
-    formatters: {
-        formatFileModDate: function (intl, file) {
-            var safeModDate = chonky_1.FileHelper.getModDate(file);
-            if (safeModDate) {
-                return intl.formatDate(safeModDate) + ", " + intl.formatTime(safeModDate);
-            }
-            else {
-                return null;
-            }
-        },
-        formatFileSize: function (intl, file) {
-            if (!file || typeof file.size !== 'number')
-                return null;
-            return "\u0420\u0430\u0437\u043C\u0435\u0440: " + file.size;
-        },
-    },
+    formatters: __assign({}, defaultFormatters),
     messages: (_a = {
             'chonky.toolbar.searchPlaceholder': 'Поиск',
             'chonky.toolbar.visibleFileCount': "{fileCount, plural,\n      one {# \u0444\u0430\u0439\u043B}\n      few {# \u0444\u0430\u0439\u043B\u0430}\n      other {# \u0444\u0430\u0439\u043B\u043E\u0432}\n    }",
@@ -50,22 +82,7 @@ var russianI18n = {
 };
 var hebrewI18n = {
     locale: models_1.SupportedLocales.HE,
-    formatters: {
-        formatFileModDate: function (intl, file) {
-            var safeModDate = chonky_1.FileHelper.getModDate(file);
-            if (safeModDate) {
-                return intl.formatTime(safeModDate) + " ," + intl.formatDate(safeModDate);
-            }
-            else {
-                return null;
-            }
-        },
-        formatFileSize: function (intl, file) {
-            if (!file || typeof file.size !== 'number')
-                return null;
-            return "\u05D2\u05D5\u05D3\u05DC: " + file.size;
-        },
-    },
+    formatters: __assign({}, defaultFormatters),
     messages: (_b = {
             'chonky.toolbar.searchPlaceholder': 'חיפוש',
             'chonky.toolbar.visibleFileCount': "{fileCount, plural,\n      one {\u05E4\u05E8\u05D9\u05D8 #}\n      other {# \u05E4\u05E8\u05D9\u05D8\u05D9\u05DD}\n    }",
@@ -94,7 +111,9 @@ var hebrewI18n = {
         _b),
 };
 var localization = (_c = {},
+    _c[models_1.SupportedLocales.EN] = englishI18n,
     _c[models_1.SupportedLocales.RU] = russianI18n,
     _c[models_1.SupportedLocales.HE] = hebrewI18n,
     _c);
 exports.default = localization;
+/* eslint-enable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -92,7 +92,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "ea9027bfc301f8c3931a3eca8b33d3985b0a2bda",
+  "gitHead": "3f12e71175ab9296724335c77ce353ce4ce89f48",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -10,8 +10,8 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
-import { TerrainianHeightTool } from '../tools/terranian-height.tool';
 import { InspectorTool } from '../tools/inspector.tool';
+import { TerrainianHeightTool } from '../tools/terranian-height.tool';
 import { LayerType } from '../layers-manager';
 
 export default {

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

@@ -23,6 +23,7 @@ import {
   FileData,
   FileHelper,
   FilePickerActions,
+  FilePickerHandle,
 } from './file-picker';
 import FsMap from './fs-map.json';
 
@@ -379,3 +380,65 @@ export const Localized: Story = () => {
     </>
   );
 };
+
+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 getSelection = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!fileBrowserRef.current) return;
+      console.log(fileBrowserRef.current.getFileSelection());
+    },
+    [files, fileBrowserRef]
+  );
+
+  const randomizeSelection = React.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={getSelection}>
+        Get selected files
+      </button>
+      <FilePicker
+        ref={fileBrowserRef}
+        files={files}
+        folderChain={folderChain}
+        onFileAction={handleFileAction}
+      />
+    </Box>
+  );
+};

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

@@ -4,6 +4,7 @@ import {
   ChonkyFileActionData,
   FileAction,
   FileArray as ChonkyFileArray,
+  FileBrowserHandle,
   FileBrowserProps,
   FileData as ChonkyFileData,
   FileHelper as ChonkyFileHelper,
@@ -19,6 +20,8 @@ import localization from './localization';
 
 import './file-picker.css';
 
+export type FilePickerHandle = FileBrowserHandle;
+
 export type FileActionData = ChonkyFileActionData;
 
 export type FileArray = ChonkyFileArray;
@@ -48,7 +51,7 @@ export interface FilePickerTheme {
 // IMPLEMENTATION NOTES: Currently FilePicker component works with his own icon set.
 // In future might be tweaked.
 setChonkyDefaults({ iconComponent: ChonkyIconFA });
-interface FilePickerProps extends Partial<FileBrowserProps> {
+export interface FilePickerProps extends Partial<FileBrowserProps> {
   theme?: FilePickerTheme;
   styles?: Record<string, string>;
   defaultView?: FilePickerView;
@@ -57,107 +60,118 @@ interface FilePickerProps extends Partial<FileBrowserProps> {
 }
 
 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`,
-        },
+  React.forwardRef<FileBrowserHandle, FilePickerProps>(
+    (
+      {
+        theme,
+        styles = { height: '100%', minWidth: '600px' },
+        defaultView = FilePickerView.listView,
+        readOnlyMode = false,
+        locale,
+        files,
+        folderChain,
+        onFileAction,
+        ...props
       },
-    })();
-
-    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;
+      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`,
           },
-          {}
-        );
-        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);
-            }
+          '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,
           }}
-          thumbnailGenerator={thumbnailGenerator}
-          defaultFileViewActionId={defaultFileViewActionId}
-          disableDragAndDrop={disableDragAndDrop}
-          fileActions={fileActions}
-          darkMode={darkMode}
-          i18n={i18n}
-          {...props}
-        />
-      </Box>
-    );
-  }
+        >
+          <FullFileBrowser
+            ref={ref}
+            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>
+      );
+    }
+  )
 );

package/src/lib/file-picker/localization.ts

@@ -1,32 +1,50 @@
+/* eslint-disable */
 import { ChonkyActions, FileData, FileHelper, I18nConfig } from 'chonky';
 import { IntlShape } from 'react-intl';
+import filesize from 'filesize';
 import { SupportedLocales } from '../models';
 
 interface ILocalization {
   [key: string]: I18nConfig;
 }
 
+const defaultFormatters = {
+  formatFileModDate: (
+    intl: IntlShape,
+    file: FileData | null
+  ): string | null => {
+    const safeModDate = FileHelper.getModDate(file);
+    if (safeModDate) {
+      return intl.formatDate(safeModDate, {
+        dateStyle: 'short',
+        timeStyle: 'short',
+      });
+    } else {
+      return null;
+    }
+  },
+  formatFileSize: (intl: IntlShape, file: FileData | null): string | null => {
+    if (!file || typeof file.size !== 'number') return null;
+
+    const size = file.size;
+    const sizeData = filesize(size, { bits: false, output: 'object' }) as any;
+    if (sizeData.symbol === 'B') {
+      return `${Math.round(sizeData.value / 10) / 100.0} KB`;
+    } else if (sizeData.symbol === 'KB') {
+      return `${Math.round(sizeData.value)} ${sizeData.symbol}`;
+    }
+    return `${sizeData.value} ${sizeData.symbol}`;
+  },
+};
+
+const englishI18n: I18nConfig = {
+  locale: SupportedLocales.EN,
+  formatters: { ...defaultFormatters },
+};
+
 const russianI18n: I18nConfig = {
   locale: SupportedLocales.RU,
-  formatters: {
-    formatFileModDate: (
-      intl: IntlShape,
-      file: FileData | null
-    ): string | null => {
-      const safeModDate = FileHelper.getModDate(file);
-      if (safeModDate) {
-        return `${intl.formatDate(safeModDate)}, ${intl.formatTime(
-          safeModDate
-        )}`;
-      } else {
-        return null;
-      }
-    },
-    formatFileSize: (intl: IntlShape, file: FileData | null): string | null => {
-      if (!file || typeof file.size !== 'number') return null;
-      return `Размер: ${file.size}`;
-    },
-  },
+  formatters: { ...defaultFormatters },
   messages: {
     'chonky.toolbar.searchPlaceholder': 'Поиск',
     'chonky.toolbar.visibleFileCount': `{fileCount, plural,
@@ -69,25 +87,7 @@ const russianI18n: I18nConfig = {
 
 const hebrewI18n: I18nConfig = {
   locale: SupportedLocales.HE,
-  formatters: {
-    formatFileModDate: (
-      intl: IntlShape,
-      file: FileData | null
-    ): string | null => {
-      const safeModDate = FileHelper.getModDate(file);
-      if (safeModDate) {
-        return `${intl.formatTime(safeModDate)} ,${intl.formatDate(
-          safeModDate
-        )}`;
-      } else {
-        return null;
-      }
-    },
-    formatFileSize: (intl: IntlShape, file: FileData | null): string | null => {
-      if (!file || typeof file.size !== 'number') return null;
-      return `גודל: ${file.size}`;
-    },
-  },
+  formatters: { ...defaultFormatters },
   messages: {
     'chonky.toolbar.searchPlaceholder': 'חיפוש',
     'chonky.toolbar.visibleFileCount': `{fileCount, plural,
@@ -128,8 +128,10 @@ const hebrewI18n: I18nConfig = {
 };
 
 const localization: ILocalization = {
+  [SupportedLocales.EN]: englishI18n,
   [SupportedLocales.RU]: russianI18n,
   [SupportedLocales.HE]: hebrewI18n,
 };
 
 export default localization;
+/* eslint-enable */