@map-colonies/react-components 3.9.0 → 3.10.3

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

@@ -0,0 +1,276 @@
+import React from 'react';
+import { ChonkyFileActionData, FileAction, 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;
+export declare type FilePickerAction = FileAction;
+export declare class FileHelper extends ChonkyFileHelper {
+}
+export declare const FilePickerActions: {
+    CopyFiles: import("tsdef").WritableProps<{
+        readonly id: "copy_files";
+        readonly requiresSelection: true;
+        readonly hotkeys: readonly ["ctrl+c"];
+        readonly button: {
+            readonly name: "Copy selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.copy;
+        };
+    }>;
+    CreateFolder: import("tsdef").WritableProps<{
+        readonly id: "create_folder";
+        readonly button: {
+            readonly name: "Create folder";
+            readonly toolbar: true;
+            readonly tooltip: "Create a folder";
+            readonly icon: import("chonky").ChonkyIconName.folderCreate;
+        };
+    }>;
+    UploadFiles: import("tsdef").WritableProps<{
+        readonly id: "upload_files";
+        readonly button: {
+            readonly name: "Upload files";
+            readonly toolbar: true;
+            readonly tooltip: "Upload files";
+            readonly icon: import("chonky").ChonkyIconName.upload;
+        };
+    }>;
+    DownloadFiles: import("tsdef").WritableProps<{
+        readonly id: "download_files";
+        readonly requiresSelection: true;
+        readonly button: {
+            readonly name: "Download files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.download;
+        };
+    }>;
+    DeleteFiles: import("tsdef").WritableProps<{
+        readonly id: "delete_files";
+        readonly requiresSelection: true;
+        readonly hotkeys: readonly ["delete"];
+        readonly button: {
+            readonly name: "Delete files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.trash;
+        };
+    }>;
+    OpenSelection: import("tsdef").WritableProps<{
+        readonly id: "open_selection";
+        readonly hotkeys: readonly ["enter"];
+        readonly requiresSelection: true;
+        readonly fileFilter: typeof ChonkyFileHelper.isOpenable;
+        readonly button: {
+            readonly name: "Open selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.openFiles;
+        };
+    }>;
+    SelectAllFiles: import("tsdef").WritableProps<{
+        readonly id: "select_all_files";
+        readonly hotkeys: readonly ["ctrl+a"];
+        readonly button: {
+            readonly name: "Select all files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.selectAllFiles;
+        };
+        readonly selectionTransform: import("chonky").FileSelectionTransform;
+    }>;
+    ClearSelection: import("tsdef").WritableProps<{
+        readonly id: "clear_selection";
+        readonly hotkeys: readonly ["escape"];
+        readonly button: {
+            readonly name: "Clear selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.clearSelection;
+        };
+        readonly selectionTransform: import("chonky").FileSelectionTransform;
+    }>;
+    EnableListView: import("tsdef").WritableProps<{
+        readonly id: "enable_list_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.List;
+            readonly entryHeight: 30;
+        };
+        readonly button: {
+            readonly name: "Switch to List view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.list;
+            readonly iconOnly: true;
+        };
+    }>;
+    EnableCompactView: import("tsdef").WritableProps<{
+        readonly id: "enable_compact_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.Compact;
+            readonly entryHeight: 40;
+            readonly entryWidth: 220;
+        };
+        readonly button: {
+            readonly name: "Switch to Compact view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.compact;
+            readonly iconOnly: true;
+        };
+    }>;
+    EnableGridView: import("tsdef").WritableProps<{
+        readonly id: "enable_grid_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.Grid;
+            readonly entryWidth: 165;
+            readonly entryHeight: 130;
+        };
+        readonly button: {
+            readonly name: "Switch to Grid view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.smallThumbnail;
+            readonly iconOnly: true;
+        };
+    }>;
+    SortFilesByName: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_name";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => string | undefined;
+        readonly button: {
+            readonly name: "Sort by name";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    SortFilesBySize: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_size";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => number | undefined;
+        readonly button: {
+            readonly name: "Sort by size";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    SortFilesByDate: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_date";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => string | Date | undefined;
+        readonly button: {
+            readonly name: "Sort by date";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    ToggleHiddenFiles: import("tsdef").WritableProps<{
+        readonly id: "toggle_hidden_files";
+        readonly hotkeys: readonly ["ctrl+h"];
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: true;
+        };
+        readonly button: {
+            readonly name: "Show hidden files";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    ToggleShowFoldersFirst: import("tsdef").WritableProps<{
+        readonly id: "toggle_show_folders_first";
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: true;
+        };
+        readonly button: {
+            readonly name: "Show folders first";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    FocusSearchInput: import("tsdef").WritableProps<{
+        readonly id: "focus_search_input";
+        readonly hotkeys: readonly ["ctrl+f"];
+    }>;
+    ToggleDarkMode: import("tsdef").WritableProps<{
+        readonly id: "enable_dark_mode";
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: false;
+        };
+        readonly button: {
+            readonly name: "Enable dark mode";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.list;
+            readonly iconOnly: true;
+        };
+    }>;
+    MouseClickFile: import("tsdef").WritableProps<{
+        readonly id: "mouse_click_file";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").MouseClickFilePayload;
+    }>;
+    KeyboardClickFile: import("tsdef").WritableProps<{
+        readonly id: "keyboard_click_file";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").KeyboardClickFilePayload;
+    }>;
+    StartDragNDrop: import("tsdef").WritableProps<{
+        readonly id: "start_drag_n_drop";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").StartDragNDropPayload;
+    }>;
+    EndDragNDrop: import("tsdef").WritableProps<{
+        readonly id: "end_drag_n_drop";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").EndDragNDropPayload;
+    }>;
+    MoveFiles: import("tsdef").WritableProps<{
+        readonly id: "move_files";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").MoveFilesPayload;
+    }>;
+    ChangeSelection: import("tsdef").WritableProps<{
+        readonly id: "change_selection";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").ChangeSelectionPayload;
+    }>;
+    OpenFiles: import("tsdef").WritableProps<{
+        readonly id: "open_files";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").OpenFilesPayload;
+    }>;
+    OpenParentFolder: import("tsdef").WritableProps<{
+        readonly id: "open_parent_folder";
+        readonly hotkeys: readonly ["backspace"];
+        readonly button: {
+            readonly name: "Go up a directory";
+            readonly toolbar: true;
+            readonly contextMenu: false;
+            readonly icon: import("chonky").ChonkyIconName.openParentFolder;
+            readonly iconOnly: true;
+        };
+    }>;
+    OpenFileContextMenu: import("tsdef").WritableProps<{
+        readonly id: "open_file_context_menu";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").OpenFileContextMenuPayload;
+    }>;
+};
+export declare type FilePickerView = typeof FilePickerView[keyof typeof FilePickerView];
+export declare const FilePickerView: {
+    readonly listView: "enable_list_view";
+    readonly gridView: "enable_grid_view";
+};
+export interface FilePickerTheme {
+    primary: string;
+    background: string;
+    surface: string;
+    textOnBackground: string;
+    selectionBackground: string;
+}
+export interface FilePickerProps extends Partial<FileBrowserProps> {
+    theme?: FilePickerTheme;
+    styles?: Record<string, string>;
+    defaultView?: FilePickerView;
+    readOnlyMode?: boolean;
+    locale?: SupportedLocales;
+}
+export declare const FilePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<FilePickerProps & React.RefAttributes<FileBrowserHandle>>>;

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

@@ -0,0 +1,151 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePicker = exports.FilePickerView = exports.FilePickerActions = exports.FileHelper = void 0;
+var react_1 = __importStar(require("react"));
+var chonky_1 = require("chonky");
+var chonky_icon_fontawesome_1 = require("chonky-icon-fontawesome");
+var styles_1 = require("@material-ui/core/styles");
+var box_1 = require("../box");
+var localization_1 = __importDefault(require("./localization"));
+require("./file-picker.css");
+var FileHelper = /** @class */ (function (_super) {
+    __extends(FileHelper, _super);
+    function FileHelper() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return FileHelper;
+}(chonky_1.FileHelper));
+exports.FileHelper = FileHelper;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.FilePickerActions = chonky_1.ChonkyActions;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.FilePickerView = {
+    listView: chonky_1.ChonkyActions.EnableListView.id,
+    gridView: chonky_1.ChonkyActions.EnableGridView.id,
+};
+// 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(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.
+    var thumbnailGenerator = react_1.useCallback(function (file) { return null; }, 
+    // file.thumbnailUrl ? `https://chonky.io${file.thumbnailUrl}` : null,
+    []);
+    styles_1.makeStyles({
+        '@global': {
+            '.chonky-dropdownList': {
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.surface) + " !important",
+            },
+            'li[class*="chonky-activeButton"]': {
+                color: (theme === null || theme === void 0 ? void 0 : theme.primary) + " !important",
+            },
+        },
+    })();
+    var toDashCase = function (str) {
+        return str.replace(/([A-Z])/g, function ($1) { return '-' + $1.toLowerCase(); });
+    };
+    var themeObject = react_1.useMemo(function () {
+        if (theme !== undefined) {
+            var processedColors = Object.keys(theme).reduce(function (acc, key) {
+                var val = theme[key];
+                key = key.startsWith('--')
+                    ? key
+                    : "--fp-theme-" + toDashCase(key);
+                acc[key] = val;
+                return acc;
+            }, {});
+            return processedColors;
+        }
+        return {};
+    }, [theme]);
+    var _e = react_1.useState(false), darkMode = _e[0], setDarkMode = _e[1];
+    var _f = react_1.useState(), defaultFileViewActionId = _f[0], setDefaultFileViewActionId = _f[1];
+    var _g = react_1.useState(false), disableDragAndDrop = _g[0], setDisableDragAndDrop = _g[1];
+    var _h = react_1.useState(), fileActions = _h[0], setFileActions = _h[1];
+    var _j = react_1.useState(), i18n = _j[0], setI18n = _j[1];
+    react_1.useEffect(function () {
+        if (theme) {
+            setDarkMode(true);
+        }
+        setDefaultFileViewActionId(defaultView);
+        if (readOnlyMode) {
+            setDisableDragAndDrop(true);
+        }
+        else {
+            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({ 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))));
+}));