@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

package/components/FileManager/FileDetails.js

@@ -1,392 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useMemo, useState } from "react";
-import bytes from "bytes";
-import classNames from "classnames";
-import { css } from "emotion";
-import { Drawer, DrawerContent } from "@webiny/ui/Drawer";
-import { IconButton } from "@webiny/ui/Button";
-import getFileTypePlugin from "./getFileTypePlugin";
-import dayjs from "dayjs";
-import get from "lodash/get";
-import set from "lodash/set";
-import cloneDeep from "lodash/cloneDeep";
-import Tags from "./FileDetails/Tags";
-import Name from "./FileDetails/Name";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { useHotkeys } from "react-hotkeyz";
-import { ReactComponent as CopyContentIcon } from "@svgr/webpack!./icons/content_copy-black-24px.svg";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/delete.svg";
-import { ReactComponent as ImageIcon } from "@svgr/webpack!../../assets/icons/insert_photo-24px.svg";
-import { ReactComponent as FileIcon } from "@svgr/webpack!../../assets/icons/insert_drive_file-24px.svg";
-import { ReactComponent as CalendarIcon } from "@svgr/webpack!../../assets/icons/today-24px.svg";
-import { ReactComponent as HighlightIcon } from "@svgr/webpack!../../assets/icons/highlight-24px.svg";
-import { useFileManager } from "./FileManagerContext";
-import { useMutation } from "@apollo/react-hooks";
-import { useSnackbar } from "../../hooks/useSnackbar";
-import { useSecurity } from "@webiny/app-security";
-import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-import { DELETE_FILE, LIST_FILES, LIST_TAGS } from "./graphql";
-import { i18n } from "@webiny/app/i18n";
-import mime from "mime";
-var t = i18n.ns("app-admin/file-manager/file-details");
-var fileDetailsSidebar = /*#__PURE__*/css({
-  "&.mdc-drawer": {
-    width: 360
-  }
-}, "label:fileDetailsSidebar;");
-var style = {
-  wrapper: /*#__PURE__*/css({
-    height: "100vh",
-    overflowY: "auto"
-  }, "label:wrapper;"),
-  header: /*#__PURE__*/css({
-    textAlign: "center",
-    marginBottom: 24,
-    paddingTop: 16,
-    "& span": {
-      textTransform: "capitalize",
-      color: "var(--mdc-theme-on-surface)",
-      fontWeight: 600
-    }
-  }, "label:header;"),
-  preview: /*#__PURE__*/css({
-    boxSizing: "border-box",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    width: "100%",
-    height: 300,
-    margin: "0 auto 24px",
-    img: {
-      objectFit: "contain",
-      maxHeight: 300,
-      maxWidth: 300,
-      width: "100%",
-      position: "static",
-      transform: "none"
-    },
-    "&.dark": {
-      backgroundColor: "var(--mdc-theme-background)"
-    }
-  }, "label:preview;"),
-  download: /*#__PURE__*/css({
-    textAlign: "center",
-    margin: "0 auto",
-    width: "100%",
-    "& .icon--active": {
-      "&.mdc-icon-button": {
-        color: "var(--mdc-theme-text-on-primary)"
-      }
-    }
-  }, "label:download;"),
-  list: /*#__PURE__*/css({
-    textAlign: "left",
-    color: "var(--mdc-theme-on-surface)",
-    li: {
-      padding: "12px 16px",
-      lineHeight: "22px",
-      "li-title": {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        minHeight: 48,
-        "& .list-item__title": {
-          fontWeight: 600
-        },
-        "& .list-item__icon": {
-          marginRight: 24
-        },
-        "& .list-item__content": {
-          flex: "1 0 200px"
-        }
-      },
-      "li-content": {
-        width: "100%",
-        display: "block",
-        "& .list-item__truncate": {
-          display: "block",
-          width: "100%",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
-        }
-      }
-    }
-  }, "label:list;"),
-  drawerContent: /*#__PURE__*/css({
-    "&.mdc-drawer__content": {
-      height: "auto",
-      overflowY: "inherit"
-    }
-  }, "label:drawerContent;")
-};
-
-var isImage = function isImage(file) {
-  var fileType = mime.getType(file && file.name);
-
-  if (fileType && typeof fileType === "string") {
-    return fileType.includes("image");
-  }
-
-  return false;
-};
-
-export default function FileDetails(props) {
-  var file = props.file,
-      uploadFile = props.uploadFile,
-      validateFiles = props.validateFiles;
-  var filePlugin = getFileTypePlugin(file);
-  var actions = get(filePlugin, "fileDetails.actions") || get(filePlugin, "actions") || [];
-
-  var _useFileManager = useFileManager(),
-      hideFileDetails = _useFileManager.hideFileDetails,
-      queryParams = _useFileManager.queryParams;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      darkImageBackground = _useState2[0],
-      setDarkImageBackground = _useState2[1];
-
-  var _useSecurity = useSecurity(),
-      identity = _useSecurity.identity;
-
-  var fmFilePermission = useMemo(function () {
-    return identity.getPermission("fm.file");
-  }, []);
-  var canDelete = useCallback(function (item) {
-    // Bail out early if no access
-    if (!fmFilePermission) {
-      return false;
-    }
-
-    if (fmFilePermission.own) {
-      var identityId = identity.id || identity.login;
-      return get(item, "createdBy.id") === identityId;
-    }
-
-    if (typeof fmFilePermission.rwd === "string") {
-      return fmFilePermission.rwd.includes("d");
-    }
-
-    return true;
-  }, [fmFilePermission]);
-  useHotkeys({
-    zIndex: 55,
-    disabled: !file,
-    keys: {
-      esc: hideFileDetails
-    }
-  });
-
-  var _useMutation = useMutation(DELETE_FILE, {
-    update: function update(cache) {
-      // 1. Update files list cache
-      var data = cloneDeep(cache.readQuery({
-        query: LIST_FILES,
-        variables: queryParams
-      }));
-      var filteredList = data.fileManager.listFiles.data.filter(function (item) {
-        return item.id !== file.id;
-      });
-      var selectedFile = data.fileManager.listFiles.data.find(function (item) {
-        return item.id === file.id;
-      });
-      cache.writeQuery({
-        query: LIST_FILES,
-        variables: queryParams,
-        data: set(data, "fileManager.listFiles.data", filteredList)
-      }); // 2. Update "ListTags" cache
-
-      // 2. Update "ListTags" cache
-      if (Array.isArray(selectedFile.tags)) {
-        var tagCountMap = {}; // Prepare "tag" count map
-
-        // Prepare "tag" count map
-        data.fileManager.listFiles.data.forEach(function (file) {
-          if (!Array.isArray(file.tags)) {
-            return;
-          }
-
-          file.tags.forEach(function (tag) {
-            if (tagCountMap[tag]) {
-              tagCountMap[tag] += 1;
-            } else {
-              tagCountMap[tag] = 1;
-            }
-          });
-        }); // Get tags from cache
-
-        // Get tags from cache
-        var listTagsData = cloneDeep(cache.readQuery({
-          query: LIST_TAGS
-        })); // Remove selected file tags from list.
-
-        // Remove selected file tags from list.
-        var filteredTags = listTagsData.fileManager.listTags.filter(function (tag) {
-          if (!selectedFile.tags.includes(tag)) {
-            return true;
-          }
-
-          return tagCountMap[tag] > 1;
-        }); // Write it to cache
-
-        // Write it to cache
-        cache.writeQuery({
-          query: LIST_TAGS,
-          data: set(data, "fileManager.listTags", filteredTags)
-        });
-      }
-    }
-  }),
-      _useMutation2 = _slicedToArray(_useMutation, 1),
-      deleteFile = _useMutation2[0];
-
-  var _useSnackbar = useSnackbar(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var renderDeleteImageAction = useCallback(function (file) {
-    if (!canDelete(file)) {
-      return null;
-    }
-
-    var fileDeleteConfirmationProps = {
-      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Delete file"]))),
-      message: file && /*#__PURE__*/React.createElement("span", null, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["You're about to delete file {name}. Are you sure you want to continue?"])))({
-        name: file.name
-      }))
-    };
-    return /*#__PURE__*/React.createElement(ConfirmationDialog, Object.assign({}, fileDeleteConfirmationProps, {
-      "data-testid": "fm-delete-file-confirmation-dialog",
-      style: {
-        zIndex: 100
-      }
-    }), function (_ref) {
-      var showConfirmation = _ref.showConfirmation;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: isImage ? /*#__PURE__*/React.createElement("span", null, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Delete image"])))) : /*#__PURE__*/React.createElement("span", null, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Delete file"])))),
-        placement: "bottom"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        "data-testid": "fm-delete-file-button",
-        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-          style: {
-            margin: "0 8px 0 0"
-          }
-        }),
-        onClick: function onClick() {
-          return showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return deleteFile({
-                      variables: {
-                        id: file.id
-                      }
-                    });
-
-                  case 2:
-                    showSnackbar(t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["File deleted successfully."]))));
-
-                  case 3:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee);
-          })));
-        }
-      }));
-    });
-  }, []);
-  var fileTypeIcon = useMemo(function () {
-    if (file && typeof file.type === "string") {
-      return file.type.includes("image") ? /*#__PURE__*/React.createElement(ImageIcon, null) : /*#__PURE__*/React.createElement(FileIcon, null);
-    }
-
-    return /*#__PURE__*/React.createElement(ImageIcon, null);
-  }, [file]);
-  return /*#__PURE__*/React.createElement(Drawer, {
-    className: fileDetailsSidebar,
-    dir: "rtl",
-    modal: true,
-    open: Boolean(file),
-    onClose: hideFileDetails,
-    "data-testid": "fm.file-details.drawer"
-  }, file && /*#__PURE__*/React.createElement("div", {
-    className: style.wrapper,
-    dir: "ltr"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.header
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "headline5"
-  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["File details"]))))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(style.preview, {
-      dark: darkImageBackground
-    })
-  }, filePlugin.render({
-    file: file,
-    uploadFile: uploadFile,
-    validateFiles: validateFiles
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style.download
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement("span", null, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Copy URL"])))),
-    placement: "bottom"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: function onClick() {
-      navigator.clipboard.writeText(file.src);
-      showSnackbar(t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["URL copied successfully."]))));
-    },
-    icon: /*#__PURE__*/React.createElement(CopyContentIcon, {
-      style: {
-        margin: "0 8px 0 0"
-      }
-    })
-  })), actions.map(function (Component, index) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({
-      key: index
-    }, props));
-  }), renderDeleteImageAction(file), /*#__PURE__*/React.createElement(Tooltip, {
-    content: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Toggle background"]))),
-    placement: "bottom"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(HighlightIcon, null),
-    onClick: function onClick() {
-      return setDarkImageBackground(!darkImageBackground);
-    },
-    className: classNames({
-      "icon--active": darkImageBackground
-    })
-  })))), /*#__PURE__*/React.createElement(DrawerContent, {
-    dir: "ltr",
-    className: style.drawerContent
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: style.list
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Name, props)), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
-    className: "list-item__icon",
-    icon: fileTypeIcon
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle1"
-  }, file.type), " ", " - ", /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle1"
-  }, bytes.format(file.size, {
-    unitSeparator: " "
-  }))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
-    className: "list-item__icon",
-    icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle1"
-  }, dayjs(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Tags, Object.assign({
-    key: props.file.id
-  }, props)))))));
-}

package/components/FileManager/FileManagerContext.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-declare function FileManagerProvider({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): JSX.Element;
-declare function useFileManager(): {
-    selected: any;
-    toggleSelected(file: any): void;
-    hasPreviouslyUploadedFiles: any;
-    setHasPreviouslyUploadedFiles(hasPreviouslyUploadedFiles: any): void;
-    queryParams: any;
-    setQueryParams(queryParams: any): void;
-    setDragging(state?: boolean): void;
-    dragging: any;
-    setUploading(state?: boolean): void;
-    uploading: any;
-    showFileDetails(src: any): void;
-    hideFileDetails(): void;
-    showingFileDetails: any;
-    state: any;
-    dispatch: any;
-};
-export { FileManagerProvider, useFileManager };

package/components/FileManager/FileManagerContext.js

@@ -1,174 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["children"];
-import React from "react";
-var ListFilesSort;
-
-(function (ListFilesSort) {
-  ListFilesSort[ListFilesSort["CREATED_ON_ASC"] = 0] = "CREATED_ON_ASC";
-  ListFilesSort[ListFilesSort["CREATED_ON_DESC"] = 1] = "CREATED_ON_DESC";
-  ListFilesSort[ListFilesSort["SIZE_ASC"] = 2] = "SIZE_ASC";
-  ListFilesSort[ListFilesSort["SIZE_DESC"] = 3] = "SIZE_DESC";
-})(ListFilesSort || (ListFilesSort = {}));
-
-function init(_ref) {
-  var accept = _ref.accept;
-  return {
-    showingFileDetails: null,
-    selected: [],
-    hasPreviouslyUploadedFiles: null,
-    queryParams: {
-      types: accept,
-      limit: 50,
-      sort: ListFilesSort.CREATED_ON_DESC
-    }
-  };
-}
-
-function fileManagerReducer(state, action) {
-  var next = _objectSpread({}, state);
-
-  switch (action.type) {
-    case "toggleSelected":
-      {
-        var existingIndex = state.selected.findIndex(function (item) {
-          return item.src === action.file.src;
-        });
-
-        if (existingIndex < 0) {
-          next.selected.push(action.file);
-        } else {
-          next.selected.splice(existingIndex, 1);
-        }
-
-        break;
-      }
-
-    case "queryParams":
-      {
-        next.selected = [];
-        next.queryParams = _objectSpread(_objectSpread(_objectSpread({}, state.queryParams), action.queryParams), {}, {
-          types: state.queryParams.types,
-          limit: 40,
-          sort: ListFilesSort.CREATED_ON_DESC
-        });
-        break;
-      }
-
-    case "showFileDetails":
-      {
-        next.showingFileDetails = action.src;
-        break;
-      }
-
-    case "dragging":
-      {
-        next.dragging = action.state;
-        break;
-      }
-
-    case "hasPreviouslyUploadedFiles":
-      {
-        next.hasPreviouslyUploadedFiles = action.hasPreviouslyUploadedFiles;
-        break;
-      }
-
-    case "uploading":
-      {
-        next.uploading = action.state;
-        break;
-      }
-  }
-
-  return next;
-}
-
-var FileManagerContext = /*#__PURE__*/React.createContext({});
-
-function FileManagerProvider(_ref2) {
-  var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  var _React$useReducer = React.useReducer(fileManagerReducer, props, init),
-      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
-      state = _React$useReducer2[0],
-      dispatch = _React$useReducer2[1];
-
-  var value = React.useMemo(function () {
-    return {
-      state: state,
-      dispatch: dispatch
-    };
-  }, [state]);
-  return /*#__PURE__*/React.createElement(FileManagerContext.Provider, Object.assign({
-    value: value
-  }, props), children);
-}
-
-function useFileManager() {
-  var context = React.useContext(FileManagerContext);
-
-  if (!context) {
-    throw new Error("useFileManager must be used within a FileManagerProvider");
-  }
-
-  var state = context.state,
-      dispatch = context.dispatch;
-  return {
-    selected: state.selected,
-    toggleSelected: function toggleSelected(file) {
-      dispatch({
-        type: "toggleSelected",
-        file: file
-      });
-    },
-    hasPreviouslyUploadedFiles: state.hasPreviouslyUploadedFiles,
-    setHasPreviouslyUploadedFiles: function setHasPreviouslyUploadedFiles(hasPreviouslyUploadedFiles) {
-      dispatch({
-        type: "hasPreviouslyUploadedFiles",
-        hasPreviouslyUploadedFiles: hasPreviouslyUploadedFiles
-      });
-    },
-    queryParams: state.queryParams,
-    setQueryParams: function setQueryParams(queryParams) {
-      dispatch({
-        type: "queryParams",
-        queryParams: queryParams
-      });
-    },
-    setDragging: function setDragging() {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      dispatch({
-        type: "dragging",
-        state: state
-      });
-    },
-    dragging: state.dragging,
-    setUploading: function setUploading() {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      dispatch({
-        type: "uploading",
-        state: state
-      });
-    },
-    uploading: state.uploading,
-    showFileDetails: function showFileDetails(src) {
-      dispatch({
-        type: "showFileDetails",
-        src: src
-      });
-    },
-    hideFileDetails: function hideFileDetails() {
-      dispatch({
-        type: "showFileDetails",
-        src: null
-      });
-    },
-    showingFileDetails: state.showingFileDetails,
-    state: state,
-    dispatch: dispatch
-  };
-}
-
-export { FileManagerProvider, useFileManager };

package/components/FileManager/FileManagerView.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { FilesRules } from "react-butterfiles";
-declare type FileManagerViewProps = {
-    onChange: Function;
-    onClose: Function;
-    files?: FilesRules;
-    multiple: boolean;
-    accept: Array<string>;
-    maxSize: number | string;
-    multipleMaxCount: number;
-    multipleMaxSize: number | string;
-    onUploadCompletion?: Function;
-};
-declare function FileManagerView(props: FileManagerViewProps): JSX.Element;
-declare namespace FileManagerView {
-    var defaultProps: {
-        multiple: boolean;
-        maxSize: string;
-        multipleMaxSize: string;
-        multipleMaxCount: number;
-    };
-}
-export default FileManagerView;