@webiny/app-file-manager 5.35.2 → 5.36.0-beta.1

package/components/Table/Table.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _more_vert = require("@material-design-icons/svg/filled/more_vert.svg");
+var _appAco = require("@webiny/app-aco");
+var _Button = require("@webiny/ui/Button");
+var _DataTable = require("@webiny/ui/DataTable");
+var _Menu = require("@webiny/ui/Menu");
+var _bytes = _interopRequireDefault(require("bytes"));
+var _timeagoReact = _interopRequireDefault(require("timeago-react"));
+var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
+var _Name = require("./Name");
+var _FolderActionDelete = require("./FolderActionDelete");
+var _FolderActionEdit = require("./FolderActionEdit");
+var _RecordActionCopy = require("./RecordActionCopy");
+var _RecordActionDelete = require("./RecordActionDelete");
+var _RecordActionEdit = require("./RecordActionEdit");
+var _RecordActionMove = require("./RecordActionMove");
+var _constants = require("../../constants");
+var _styled = require("./styled");
+/**
+ * Package timeago-react does not have types.
+ */
+// @ts-ignore
+
+var Table = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var folders = props.folders,
+    records = props.records,
+    loading = props.loading,
+    onRecordClick = props.onRecordClick,
+    onFolderClick = props.onFolderClick,
+    onSelectRow = props.onSelectRow,
+    sorting = props.sorting,
+    onSortingChange = props.onSortingChange,
+    selectableItems = props.selectableItems;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedFolder = _useState4[0],
+    setSelectedFolder = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    updateDialogOpen = _useState6[0],
+    setUpdateDialogOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    deleteDialogOpen = _useState8[0],
+    setDeleteDialogOpen = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    selectedSearchRecord = _useState10[0],
+    setSelectedSearchRecord = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    moveSearchRecordDialogOpen = _useState12[0],
+    setMoveSearchRecordDialogOpen = _useState12[1];
+  var createRecordsData = (0, _react.useMemo)(function () {
+    return function (items) {
+      return items.map(function (_ref) {
+        var data = _ref.data;
+        return {
+          id: data.id,
+          type: "RECORD",
+          title: data.name,
+          createdBy: data.createdBy.displayName,
+          savedOn: data.createdOn,
+          fileType: data.type,
+          size: data.size,
+          original: data || {},
+          selectable: selectableItems
+        };
+      });
+    };
+  }, [records]);
+  var createFoldersData = (0, _react.useMemo)(function () {
+    return function (items) {
+      return items.map(function (item) {
+        return {
+          id: item.id,
+          type: "FOLDER",
+          title: item.title,
+          createdBy: item.createdBy.displayName || "-",
+          savedOn: item.createdOn,
+          original: item,
+          selectable: false
+        };
+      });
+    };
+  }, [folders]);
+  (0, _useDeepCompareEffect.default)(function () {
+    var foldersData = createFoldersData(folders);
+    var files = createRecordsData(records);
+    setData([].concat((0, _toConsumableArray2.default)(foldersData), (0, _toConsumableArray2.default)(files)));
+  }, [(0, _objectSpread2.default)({}, folders), (0, _objectSpread2.default)({}, records)]);
+  var columns = {
+    title: {
+      header: "Name",
+      cell: function cell(_ref2) {
+        var id = _ref2.id,
+          title = _ref2.title,
+          type = _ref2.type,
+          fileType = _ref2.fileType;
+        if (type === "RECORD") {
+          return /*#__PURE__*/_react.default.createElement(_Name.FileName, {
+            name: title,
+            id: id,
+            type: fileType,
+            onClick: onRecordClick
+          });
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_Name.FolderName, {
+            name: title,
+            id: id,
+            onClick: onFolderClick
+          });
+        }
+      },
+      enableSorting: true
+    },
+    fileType: {
+      header: "Type",
+      cell: function cell(_ref3) {
+        var fileType = _ref3.fileType;
+        if (fileType) {
+          return fileType;
+        } else {
+          return "-";
+        }
+      }
+    },
+    size: {
+      header: "Size",
+      cell: function cell(_ref4) {
+        var size = _ref4.size;
+        if (size) {
+          return _bytes.default.format(size, {
+            unitSeparator: " "
+          });
+        } else {
+          return "-";
+        }
+      }
+    },
+    savedOn: {
+      header: "Last modified",
+      cell: function cell(_ref5) {
+        var savedOn = _ref5.savedOn;
+        return /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
+          datetime: savedOn
+        });
+      },
+      enableSorting: true
+    },
+    createdBy: {
+      header: "Author"
+    },
+    original: {
+      header: "",
+      meta: {
+        alignEnd: true
+      },
+      className: _styled.actionsColumnStyles,
+      cell: function cell(_ref6) {
+        var type = _ref6.type,
+          original = _ref6.original;
+        if (!original) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (type === "RECORD") {
+          return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+            className: _styled.menuStyles,
+            handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+              icon: /*#__PURE__*/_react.default.createElement(_more_vert.ReactComponent, null)
+            })
+          }, /*#__PURE__*/_react.default.createElement(_RecordActionCopy.RecordActionCopy, {
+            record: original
+          }), /*#__PURE__*/_react.default.createElement(_RecordActionEdit.RecordActionEdit, {
+            id: original.id,
+            onClick: onRecordClick
+          }), /*#__PURE__*/_react.default.createElement(_RecordActionMove.RecordActionMove, {
+            onClick: function onClick() {
+              setMoveSearchRecordDialogOpen(true);
+              setSelectedSearchRecord(function () {
+                return records.find(function (record) {
+                  return record.id === original.id;
+                });
+              });
+            }
+          }), /*#__PURE__*/_react.default.createElement(_RecordActionDelete.RecordActionDelete, {
+            record: original
+          }));
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+            handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+              icon: /*#__PURE__*/_react.default.createElement(_more_vert.ReactComponent, null)
+            })
+          }, /*#__PURE__*/_react.default.createElement(_FolderActionEdit.FolderActionEdit, {
+            onClick: function onClick() {
+              setUpdateDialogOpen(true);
+              setSelectedFolder(original);
+            }
+          }), /*#__PURE__*/_react.default.createElement(_FolderActionDelete.FolderActionDelete, {
+            onClick: function onClick() {
+              setDeleteDialogOpen(true);
+              setSelectedFolder(original);
+            }
+          }));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    columns: columns,
+    data: data,
+    loadingInitial: loading,
+    stickyRows: 1,
+    onSelectRow: onSelectRow,
+    sorting: sorting,
+    onSortingChange: onSortingChange
+  }), selectedFolder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_appAco.FolderDialogUpdate, {
+    folder: selectedFolder,
+    open: updateDialogOpen,
+    onClose: function onClose() {
+      return setUpdateDialogOpen(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_appAco.FolderDialogDelete, {
+    folder: selectedFolder,
+    open: deleteDialogOpen,
+    onClose: function onClose() {
+      return setDeleteDialogOpen(false);
+    }
+  })), selectedSearchRecord && /*#__PURE__*/_react.default.createElement(_appAco.EntryDialogMove, {
+    type: _constants.ACO_TYPE,
+    searchRecord: selectedSearchRecord,
+    open: moveSearchRecordDialogOpen,
+    onClose: function onClose() {
+      return setMoveSearchRecordDialogOpen(false);
+    }
+  }));
+});
+exports.Table = Table;
+Table.displayName = "Table";

package/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Table","forwardRef","props","ref","folders","records","loading","onRecordClick","onFolderClick","onSelectRow","sorting","onSortingChange","selectableItems","useState","data","setData","selectedFolder","setSelectedFolder","updateDialogOpen","setUpdateDialogOpen","deleteDialogOpen","setDeleteDialogOpen","selectedSearchRecord","setSelectedSearchRecord","moveSearchRecordDialogOpen","setMoveSearchRecordDialogOpen","createRecordsData","useMemo","items","map","id","type","title","name","createdBy","displayName","savedOn","createdOn","fileType","size","original","selectable","createFoldersData","item","useDeepCompareEffect","foldersData","files","columns","header","cell","enableSorting","bytes","format","unitSeparator","meta","alignEnd","className","actionsColumnStyles","menuStyles","find","record","ACO_TYPE"],"sources":["Table.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useState } from \"react\";\n\nimport { ReactComponent as More } from \"@material-design-icons/svg/filled/more_vert.svg\";\nimport { EntryDialogMove, FolderDialogDelete, FolderDialogUpdate } from \"@webiny/app-aco\";\nimport { FolderItem, SearchRecordItem } from \"@webiny/app-aco/types\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Columns, DataTable, OnSortingChange, Sorting } from \"@webiny/ui/DataTable\";\nimport { Menu } from \"@webiny/ui/Menu\";\nimport bytes from \"bytes\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\n\nimport { FileName, FolderName } from \"./Name\";\nimport { FolderActionDelete } from \"./FolderActionDelete\";\nimport { FolderActionEdit } from \"./FolderActionEdit\";\nimport { RecordActionCopy } from \"./RecordActionCopy\";\nimport { RecordActionDelete } from \"./RecordActionDelete\";\nimport { RecordActionEdit } from \"./RecordActionEdit\";\nimport { RecordActionMove } from \"./RecordActionMove\";\n\nimport { ACO_TYPE } from \"~/constants\";\n\nimport { menuStyles, actionsColumnStyles } from \"./styled\";\nimport { FileItem } from \"@webiny/app/types\";\nimport { Settings } from \"~/types\";\n\ninterface TableProps {\n    records: SearchRecordItem<FileItem>[];\n    folders: FolderItem[];\n    loading?: boolean;\n    onRecordClick: (id: string) => void;\n    onFolderClick: (id: string) => void;\n    onSelectRow: (rows: Entry[] | []) => void;\n    sorting: Sorting;\n    onSortingChange: OnSortingChange;\n    settings?: Settings;\n    selectableItems: boolean;\n}\n\ninterface Entry {\n    id: string;\n    type: \"RECORD\" | \"FOLDER\";\n    title: string;\n    createdBy: string;\n    savedOn: string;\n    fileType?: string;\n    size?: number;\n    original: FileItem | FolderItem;\n    selectable: boolean;\n}\n\nexport const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {\n    const {\n        folders,\n        records,\n        loading,\n        onRecordClick,\n        onFolderClick,\n        onSelectRow,\n        sorting,\n        onSortingChange,\n        selectableItems\n    } = props;\n\n    const [data, setData] = useState<Entry[]>([]);\n    const [selectedFolder, setSelectedFolder] = useState<FolderItem>();\n    const [updateDialogOpen, setUpdateDialogOpen] = useState<boolean>(false);\n    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);\n\n    const [selectedSearchRecord, setSelectedSearchRecord] = useState<SearchRecordItem>();\n    const [moveSearchRecordDialogOpen, setMoveSearchRecordDialogOpen] = useState<boolean>(false);\n\n    const createRecordsData = useMemo(() => {\n        return (items: SearchRecordItem<FileItem>[]): Entry[] =>\n            items.map(({ data }) => ({\n                id: data.id,\n                type: \"RECORD\",\n                title: data.name,\n                createdBy: data.createdBy.displayName,\n                savedOn: data.createdOn,\n                fileType: data.type,\n                size: data.size,\n                original: data || {},\n                selectable: selectableItems\n            }));\n    }, [records]);\n\n    const createFoldersData = useMemo(() => {\n        return (items: FolderItem[]): Entry[] =>\n            items.map(item => ({\n                id: item.id,\n                type: \"FOLDER\",\n                title: item.title,\n                createdBy: item.createdBy.displayName || \"-\",\n                savedOn: item.createdOn,\n                original: item,\n                selectable: false\n            }));\n    }, [folders]);\n\n    useDeepCompareEffect(() => {\n        const foldersData = createFoldersData(folders);\n        const files = createRecordsData(records);\n        setData([...foldersData, ...files]);\n    }, [{ ...folders }, { ...records }]);\n\n    const columns: Columns<Entry> = {\n        title: {\n            header: \"Name\",\n            cell: ({ id, title, type, fileType }) => {\n                if (type === \"RECORD\") {\n                    return (\n                        <FileName name={title} id={id} type={fileType} onClick={onRecordClick} />\n                    );\n                } else {\n                    return <FolderName name={title} id={id} onClick={onFolderClick} />;\n                }\n            },\n            enableSorting: true\n        },\n        fileType: {\n            header: \"Type\",\n            cell: ({ fileType }) => {\n                if (fileType) {\n                    return fileType;\n                } else {\n                    return \"-\";\n                }\n            }\n        },\n        size: {\n            header: \"Size\",\n            cell: ({ size }) => {\n                if (size) {\n                    return bytes.format(size, { unitSeparator: \" \" });\n                } else {\n                    return \"-\";\n                }\n            }\n        },\n        savedOn: {\n            header: \"Last modified\",\n            cell: ({ savedOn }) => <TimeAgo datetime={savedOn} />,\n            enableSorting: true\n        },\n        createdBy: {\n            header: \"Author\"\n        },\n        original: {\n            header: \"\",\n            meta: {\n                alignEnd: true\n            },\n            className: actionsColumnStyles,\n            cell: ({ type, original }) => {\n                if (!original) {\n                    return <></>;\n                }\n\n                if (type === \"RECORD\") {\n                    return (\n                        <Menu className={menuStyles} handle={<IconButton icon={<More />} />}>\n                            <RecordActionCopy record={original as FileItem} />\n                            <RecordActionEdit id={original.id} onClick={onRecordClick} />\n                            <RecordActionMove\n                                onClick={() => {\n                                    setMoveSearchRecordDialogOpen(true);\n                                    setSelectedSearchRecord(() =>\n                                        records.find(\n                                            record => record.id === (original as FileItem).id\n                                        )\n                                    );\n                                }}\n                            />\n                            <RecordActionDelete record={original as FileItem} />\n                        </Menu>\n                    );\n                } else {\n                    return (\n                        <Menu handle={<IconButton icon={<More />} />}>\n                            <FolderActionEdit\n                                onClick={() => {\n                                    setUpdateDialogOpen(true);\n                                    setSelectedFolder(original as FolderItem);\n                                }}\n                            />\n                            <FolderActionDelete\n                                onClick={() => {\n                                    setDeleteDialogOpen(true);\n                                    setSelectedFolder(original as FolderItem);\n                                }}\n                            />\n                        </Menu>\n                    );\n                }\n            }\n        }\n    };\n\n    return (\n        <div ref={ref}>\n            <DataTable\n                columns={columns}\n                data={data}\n                loadingInitial={loading}\n                stickyRows={1}\n                onSelectRow={onSelectRow}\n                sorting={sorting}\n                onSortingChange={onSortingChange}\n            />\n            {selectedFolder && (\n                <>\n                    <FolderDialogUpdate\n                        folder={selectedFolder}\n                        open={updateDialogOpen}\n                        onClose={() => setUpdateDialogOpen(false)}\n                    />\n                    <FolderDialogDelete\n                        folder={selectedFolder}\n                        open={deleteDialogOpen}\n                        onClose={() => setDeleteDialogOpen(false)}\n                    />\n                </>\n            )}\n            {selectedSearchRecord && (\n                <EntryDialogMove\n                    type={ACO_TYPE}\n                    searchRecord={selectedSearchRecord}\n                    open={moveSearchRecordDialogOpen}\n                    onClose={() => setMoveSearchRecordDialogOpen(false)}\n                />\n            )}\n        </div>\n    );\n});\n\nTable.displayName = \"Table\";\n"],"mappings":"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"}

package/components/Table/index.d.ts

@@ -0,0 +1 @@
+export * from "./Table";

package/components/Table/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Table = require("./Table");
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});

package/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Table\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/Table/styled.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const RowTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RowIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RowText: import("@emotion/styled").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ListItemGraphic: import("@emotion/styled").StyledComponent<import("@webiny/ui/List").ListItemGraphicProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const menuStyles: string;
+export declare const actionsColumnStyles: string;

package/components/Table/styled.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuStyles = exports.actionsColumnStyles = exports.RowTitle = exports.RowText = exports.RowIcon = exports.ListItemGraphic = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _emotion = require("emotion");
+var _List = require("@webiny/ui/List");
+var _Typography = require("@webiny/ui/Typography");
+var RowTitle = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "RowTitle",
+  target: "ej4xmng0"
+})("display:flex;align-items:center;cursor:pointer;");
+exports.RowTitle = RowTitle;
+var RowIcon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "RowIcon",
+  target: "ej4xmng1"
+})("margin-right:8px;height:24px;");
+exports.RowIcon = RowIcon;
+var RowText = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "RowText",
+  target: "ej4xmng2"
+})("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;");
+exports.RowText = RowText;
+var ListItemGraphic = /*#__PURE__*/(0, _styled.default)(_List.ListItemGraphic, {
+  label: "ListItemGraphic",
+  target: "ej4xmng3"
+})("margin-right:25px;");
+exports.ListItemGraphic = ListItemGraphic;
+var menuStyles = /*#__PURE__*/(0, _emotion.css)("\n    width: 200px;\n", "label:menuStyles;");
+exports.menuStyles = menuStyles;
+var actionsColumnStyles = /*#__PURE__*/(0, _emotion.css)("\n    max-width: 80px!important;\n", "label:actionsColumnStyles;");
+exports.actionsColumnStyles = actionsColumnStyles;

package/components/Table/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RowTitle","styled","RowIcon","RowText","Typography","ListItemGraphic","ListItemGraphicBase","menuStyles","css","actionsColumnStyles"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { ListItemGraphic as ListItemGraphicBase } from \"@webiny/ui/List\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport const RowTitle = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n`;\n\nexport const RowIcon = styled(\"div\")`\n    margin-right: 8px;\n    height: 24px;\n`;\n\nexport const RowText = styled(Typography)`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\nexport const ListItemGraphic = styled(ListItemGraphicBase)`\n    margin-right: 25px;\n`;\n\nexport const menuStyles = css(`\n    width: 200px;\n`);\n\nexport const actionsColumnStyles = css(`\n    max-width: 80px!important;\n`);\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,QAAQ,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,qDAInC;AAAC;AAEK,IAAMC,OAAO,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mCAGlC;AAAC;AAEK,IAAME,OAAO,oBAAGF,eAAM,EAACG,sBAAU;EAAA;EAAA;AAAA,gEAIvC;AAAC;AAEK,IAAMC,eAAe,oBAAGJ,eAAM,EAACK,qBAAmB;EAAA;EAAA;AAAA,wBAExD;AAAC;AAEK,IAAMC,UAAU,gBAAG,IAAAC,YAAG,+CAE3B;AAAC;AAEI,IAAMC,mBAAmB,gBAAG,IAAAD,YAAG,qEAEpC;AAAC"}

package/components/Title/Title.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface TitleProps {
+    title?: string;
+}
+export declare const Title: React.FC<TitleProps>;

package/components/Title/Title.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = require("@webiny/ui/Skeleton");
+var _styled = require("./styled");
+var Title = function Title(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(_styled.Name, {
+    use: "headline6",
+    tag: "h1"
+  }, title || /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    theme: "dark"
+  }));
+};
+exports.Title = Title;

package/components/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Title","title"],"sources":["Title.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Skeleton } from \"@webiny/ui/Skeleton\";\n\nimport { Name } from \"./styled\";\n\nexport interface TitleProps {\n    title?: string;\n}\n\nexport const Title: React.FC<TitleProps> = ({ title }) => {\n    return (\n        <Name use={\"headline6\"} tag={\"h1\"}>\n            {title || <Skeleton theme={\"dark\"} />}\n        </Name>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAEA;AAMO,IAAMA,KAA2B,GAAG,SAA9BA,KAA2B,OAAkB;EAAA,IAAZC,KAAK,QAALA,KAAK;EAC/C,oBACI,6BAAC,YAAI;IAAC,GAAG,EAAE,WAAY;IAAC,GAAG,EAAE;EAAK,GAC7BA,KAAK,iBAAI,6BAAC,kBAAQ;IAAC,KAAK,EAAE;EAAO,EAAG,CAClC;AAEf,CAAC;AAAC"}

package/components/Title/index.d.ts

@@ -0,0 +1 @@
+export * from "./Title";

package/components/Title/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Title = require("./Title");
+Object.keys(_Title).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Title[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Title[key];
+    }
+  });
+});

package/components/Title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Title\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/Title/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TypographyProps } from "@webiny/ui/Typography";
+export declare const Name: import("@emotion/styled").StyledComponent<TypographyProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Title/styled.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Name = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@webiny/ui/Typography");
+var Name = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "Name",
+  target: "e9dl7sn0"
+})("color:var(--mdc-theme-text-primary-on-background);padding-left:8px;line-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;");
+exports.Name = Name;

package/components/Title/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Name","styled","Typography"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Typography, TypographyProps } from \"@webiny/ui/Typography\";\n\nexport const Name = styled(Typography)<TypographyProps>`\n    color: var(--mdc-theme-text-primary-on-background);\n    padding-left: 8px;\n    line-height: 48px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,IAAI,oBAAGC,eAAM,EAACC,sBAAU;EAAA;EAAA;AAAA,oJAOpC;AAAC"}

package/components/UploadStatus/UploadStatus.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface UploadStatusProps {
+    progress: number;
+    numberOfFiles: number;
+}
+export declare const UploadStatus: React.FC<UploadStatusProps>;

package/components/UploadStatus/UploadStatus.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UploadStatus = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _styled = require("./styled");
+var _loading = _interopRequireDefault(require("./assets/loading.svg"));
+var _check = _interopRequireDefault(require("./assets/check.svg"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var t = _i18n.i18n.ns("app-admin/file-manager/components/upload-status");
+var UploadStatus = function UploadStatus(_ref) {
+  var numberOfFiles = _ref.numberOfFiles,
+    progress = _ref.progress;
+  if (!numberOfFiles) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_styled.StatusWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.StatusIndicator, null, Number(progress.toFixed()) <= 98 ? /*#__PURE__*/_react.default.createElement(_styled.Icon, {
+    className: "loading",
+    src: _loading.default,
+    alt: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Loading"])))
+  }) : /*#__PURE__*/_react.default.createElement(_styled.Icon, {
+    src: _check.default,
+    alt: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Done"])))
+  }), Number(progress.toFixed()) <= 98 && /*#__PURE__*/_react.default.createElement(_styled.Percentage, null, progress.toFixed(), "%")), /*#__PURE__*/_react.default.createElement(_styled.ProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.UploadingLabel, null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Uploading {numberOfFiles} {label}"])))({
+    numberOfFiles: /*#__PURE__*/_react.default.createElement(_styled.UploadingLabelFile, null, numberOfFiles),
+    label: numberOfFiles === 1 ? t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["file"]))) : t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["files"])))
+  })), /*#__PURE__*/_react.default.createElement(_styled.ProgressBar, null, /*#__PURE__*/_react.default.createElement(_styled.ProgressBarPercentage, {
+    width: progress.toFixed()
+  }))));
+};
+exports.UploadStatus = UploadStatus;

package/components/UploadStatus/UploadStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","UploadStatus","numberOfFiles","progress","Number","toFixed","loadingIcon","checkIcon","label"],"sources":["UploadStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nimport {\n    StatusWrapper,\n    StatusIndicator,\n    Icon,\n    Percentage,\n    ProgressWrapper,\n    UploadingLabel,\n    ProgressBar,\n    ProgressBarPercentage,\n    UploadingLabelFile\n} from \"./styled\";\n\nimport loadingIcon from \"./assets/loading.svg\";\nimport checkIcon from \"./assets/check.svg\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/upload-status\");\n\nexport interface UploadStatusProps {\n    progress: number;\n    numberOfFiles: number;\n}\nexport const UploadStatus: React.FC<UploadStatusProps> = ({ numberOfFiles, progress }) => {\n    if (!numberOfFiles) {\n        return null;\n    }\n\n    return (\n        <StatusWrapper>\n            <StatusIndicator>\n                {Number(progress.toFixed()) <= 98 ? (\n                    <Icon className=\"loading\" src={loadingIcon} alt={t`Loading`} />\n                ) : (\n                    <Icon src={checkIcon} alt={t`Done`} />\n                )}\n                {Number(progress.toFixed()) <= 98 && <Percentage>{progress.toFixed()}%</Percentage>}\n            </StatusIndicator>\n            <ProgressWrapper>\n                <UploadingLabel>\n                    {t`Uploading {numberOfFiles} {label}`({\n                        numberOfFiles: <UploadingLabelFile>{numberOfFiles}</UploadingLabelFile>,\n                        label: numberOfFiles === 1 ? t`file` : t`files`\n                    })}\n                </UploadingLabel>\n                <ProgressBar>\n                    <ProgressBarPercentage width={progress.toFixed()} />\n                </ProgressBar>\n            </ProgressWrapper>\n        </StatusWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AAYA;AACA;AAA2C;AAE3C,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,iDAAiD,CAAC;AAM7D,IAAMC,YAAyC,GAAG,SAA5CA,YAAyC,OAAoC;EAAA,IAA9BC,aAAa,QAAbA,aAAa;IAAEC,QAAQ,QAARA,QAAQ;EAC/E,IAAI,CAACD,aAAa,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACI,6BAAC,qBAAa,qBACV,6BAAC,uBAAe,QACXE,MAAM,CAACD,QAAQ,CAACE,OAAO,EAAE,CAAC,IAAI,EAAE,gBAC7B,6BAAC,YAAI;IAAC,SAAS,EAAC,SAAS;IAAC,GAAG,EAAEC,gBAAY;IAAC,GAAG,EAAER,CAAC;EAAU,EAAG,gBAE/D,6BAAC,YAAI;IAAC,GAAG,EAAES,cAAU;IAAC,GAAG,EAAET,CAAC;EAAO,EACtC,EACAM,MAAM,CAACD,QAAQ,CAACE,OAAO,EAAE,CAAC,IAAI,EAAE,iBAAI,6BAAC,kBAAU,QAAEF,QAAQ,CAACE,OAAO,EAAE,EAAC,GAAC,CAAa,CACrE,eAClB,6BAAC,uBAAe,qBACZ,6BAAC,sBAAc,QACVP,CAAC,uHAAoC;IAClCI,aAAa,eAAE,6BAAC,0BAAkB,QAAEA,aAAa,CAAsB;IACvEM,KAAK,EAAEN,aAAa,KAAK,CAAC,GAAGJ,CAAC,4FAASA,CAAC;EAC5C,CAAC,CAAC,CACW,eACjB,6BAAC,mBAAW,qBACR,6BAAC,6BAAqB;IAAC,KAAK,EAAEK,QAAQ,CAACE,OAAO;EAAG,EAAG,CAC1C,CACA,CACN;AAExB,CAAC;AAAC"}

package/components/UploadStatus/assets/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
+    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#fff" />
+</svg>

package/components/UploadStatus/assets/loading.svg

@@ -0,0 +1,17 @@
+<svg x="0px" y="0px" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40"  xmlns="http://www.w3.org/2000/svg">
+
+    <path opacity="0.3" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+
+    <path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+    C22.32,8.481,24.301,9.057,26.013,10.047z">
+        <animateTransform attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 20 20"
+        to="360 20 20"
+        dur="1s"
+        repeatCount="indefinite" />
+    </path>
+</svg>

package/components/UploadStatus/index.d.ts

@@ -0,0 +1 @@
+export * from "./UploadStatus";

package/components/UploadStatus/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _UploadStatus = require("./UploadStatus");
+Object.keys(_UploadStatus).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _UploadStatus[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _UploadStatus[key];
+    }
+  });
+});

package/components/UploadStatus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./UploadStatus\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/UploadStatus/styled.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const StatusWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProgressBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProgressBarPercentage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const UploadingLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UploadingLabelFile: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StatusIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Percentage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;