@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/ui/views/SplitView.js

@@ -1,18 +1,25 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from "react";
-import classNames from "classnames";
-import { css } from "emotion";
-import { Grid } from "@webiny/ui/Grid";
-import { SplitViewPanelElement } from "./SplitView/SplitViewPanelElement";
-import { UIView } from "../UIView";
-var grid = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("emotion");
+var _Grid = require("@webiny/ui/Grid");
+var _SplitViewPanelElement = require("./SplitView/SplitViewPanelElement");
+var _UIView2 = require("../UIView");
+var grid = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-layout-grid": {
     padding: 0,
     backgroundColor: "var(--mdc-theme-background)",
@@ -21,7 +28,7 @@ var grid = /*#__PURE__*/css({
     }
   }
 }, "label:grid;");
-var leftPanel = /*#__PURE__*/css({
+var leftPanel = /*#__PURE__*/(0, _emotion.css)({
   backgroundColor: "var(--mdc-theme-surface)",
   ">.webiny-data-list": {
     display: "flex",
@@ -38,51 +45,35 @@ var leftPanel = /*#__PURE__*/css({
     overflow: "auto"
   }
 }, "label:leftPanel;");
-var rightPanel = /*#__PURE__*/css({
+var rightPanel = /*#__PURE__*/(0, _emotion.css)({
   backgroundColor: "var(--mdc-theme-background)",
   overflow: "auto",
   height: "calc(100vh - 70px)"
 }, "label:rightPanel;");
-export var SplitView = /*#__PURE__*/function (_UIView) {
-  _inherits(SplitView, _UIView);
-
-  var _super = _createSuper(SplitView);
-
+var SplitView = /*#__PURE__*/function (_UIView) {
+  (0, _inherits2.default)(SplitView, _UIView);
+  var _super = (0, _createSuper2.default)(SplitView);
   function SplitView(id) {
     var _this;
-
     var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    _classCallCheck(this, SplitView);
-
+    (0, _classCallCheck2.default)(this, SplitView);
     _this = _super.call(this, "SplitView.".concat(id));
-
-    _defineProperty(_assertThisInitialized(_this), "_classNames", new Set());
-
-    _defineProperty(_assertThisInitialized(_this), "_leftPanel", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "_rightPanel", void 0);
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_classNames", new Set());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_leftPanel", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_rightPanel", void 0);
     _this.useGrid(false);
-
     _this.addClassName(grid);
-
     _this.addClassName("webiny-split-view");
-
     _this.addElements();
-
     if (config.leftPanel) {
       _this.getLeftPanel().addElement(config.leftPanel);
     }
-
     if (config.rightPanel) {
       _this.getRightPanel().addElement(config.rightPanel);
     }
-
     return _this;
   }
-
-  _createClass(SplitView, [{
+  (0, _createClass2.default)(SplitView, [{
     key: "addClassName",
     value: function addClassName(className) {
       this._classNames.add(className);
@@ -105,38 +96,27 @@ export var SplitView = /*#__PURE__*/function (_UIView) {
   }, {
     key: "render",
     value: function render(props) {
-      return /*#__PURE__*/React.createElement(Grid, {
-        className: classNames(Array.from(this._classNames.values()))
-      }, _get(_getPrototypeOf(SplitView.prototype), "render", this).call(this, props));
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+        className: (0, _classnames.default)(Array.from(this._classNames.values()))
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(SplitView.prototype), "render", this).call(this, props));
     }
   }, {
     key: "addElements",
     value: function addElements() {
-      this._leftPanel = new SplitViewPanelElement("leftPanel");
-
+      this._leftPanel = new _SplitViewPanelElement.SplitViewPanelElement("leftPanel");
       this._leftPanel.useGrid(false);
-
       this._leftPanel.setWidth(5);
-
       this._leftPanel.addClassName(leftPanel);
-
       this._leftPanel.addClassName("webiny-split-view__left-panel");
-
-      this._rightPanel = new SplitViewPanelElement("rightPanel");
-
+      this._rightPanel = new _SplitViewPanelElement.SplitViewPanelElement("rightPanel");
       this._rightPanel.useGrid(false);
-
       this._rightPanel.setWidth(7);
-
       this._rightPanel.addClassName(rightPanel);
-
       this._rightPanel.addClassName("webiny-split-view__right-panel");
-
       this.addElement(this._leftPanel);
-
       this._rightPanel.moveAfter(this._leftPanel);
     }
   }]);
-
   return SplitView;
-}(UIView);
+}(_UIView2.UIView);
+exports.SplitView = SplitView;

package/ui/views/SplitView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["grid","css","padding","backgroundColor","gridGap","leftPanel","display","flexDirection","height","overflow","maxHeight","rightPanel","SplitView","id","config","Set","useGrid","addClassName","addElements","getLeftPanel","addElement","getRightPanel","className","_classNames","add","delete","getElement","props","classNames","Array","from","values","_leftPanel","SplitViewPanelElement","setWidth","_rightPanel","moveAfter","UIView"],"sources":["SplitView.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SplitViewPanelElement } from \"./SplitView/SplitViewPanelElement\";\nimport { UIView } from \"../UIView\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\nconst rightPanel = css({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\ninterface SplitViewConfig {\n    leftPanel?: UIElement;\n    rightPanel?: UIElement;\n}\n\nexport class SplitView extends UIView {\n    private _classNames = new Set<string>();\n    private _leftPanel?: SplitViewPanelElement;\n    private _rightPanel?: SplitViewPanelElement;\n\n    public constructor(id: string, config: SplitViewConfig = {}) {\n        super(`SplitView.${id}`);\n\n        this.useGrid(false);\n        this.addClassName(grid);\n        this.addClassName(\"webiny-split-view\");\n        this.addElements();\n\n        if (config.leftPanel) {\n            this.getLeftPanel().addElement(config.leftPanel);\n        }\n\n        if (config.rightPanel) {\n            this.getRightPanel().addElement(config.rightPanel);\n        }\n    }\n\n    public addClassName(className: string): void {\n        this._classNames.add(className);\n    }\n\n    public removeClassName(className: string): void {\n        this._classNames.delete(className);\n    }\n\n    public getLeftPanel(): SplitViewPanelElement {\n        return this.getElement(\"leftPanel\") as SplitViewPanelElement;\n    }\n\n    public getRightPanel(): SplitViewPanelElement {\n        return this.getElement(\"rightPanel\") as SplitViewPanelElement;\n    }\n\n    public override render(props?: any): React.ReactNode {\n        return (\n            <Grid className={classNames(Array.from(this._classNames.values()))}>\n                {super.render(props)}\n            </Grid>\n        );\n    }\n\n    private addElements(): void {\n        this._leftPanel = new SplitViewPanelElement(\"leftPanel\");\n        this._leftPanel.useGrid(false);\n        this._leftPanel.setWidth(5);\n        this._leftPanel.addClassName(leftPanel);\n        this._leftPanel.addClassName(\"webiny-split-view__left-panel\");\n\n        this._rightPanel = new SplitViewPanelElement(\"rightPanel\");\n        this._rightPanel.useGrid(false);\n        this._rightPanel.setWidth(7);\n        this._rightPanel.addClassName(rightPanel);\n        this._rightPanel.addClassName(\"webiny-split-view__right-panel\");\n\n        this.addElement(this._leftPanel);\n        this._rightPanel.moveAfter(this._leftPanel);\n    }\n}\n"],"mappings":"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"}

package/components/FileManager/BottomInfoBar/SupportedFileTypes.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const SupportedFileTypes: ({ accept }: {
-    accept: any;
-}) => JSX.Element;
-export default SupportedFileTypes;

package/components/FileManager/BottomInfoBar/SupportedFileTypes.js

@@ -1,35 +0,0 @@
-import React from "react";
-import mime from "mime/lite";
-mime.define({
-  "image/x-icon": ["ico"]
-}, true);
-mime.define({
-  "image/jpg": ["jpg"]
-}, true);
-mime.define({
-  "image/vnd.microsoft.icon": ["ico"]
-}, true);
-
-var getUniqueFileExtensions = function getUniqueFileExtensions(accept) {
-  var exts = {};
-  accept.forEach(function (item) {
-    exts[mime.getExtension(item)] = true;
-  });
-  return Object.keys(exts);
-};
-
-var SupportedFileTypes = function SupportedFileTypes(_ref) {
-  var accept = _ref.accept;
-
-  if (!accept) {
-    return null;
-  }
-
-  if (accept.length === 0) {
-    return /*#__PURE__*/React.createElement("span", null, "Showing all file extensions.");
-  }
-
-  return /*#__PURE__*/React.createElement("span", null, "Showing the following file extensions: ", getUniqueFileExtensions(accept).join(", "), ".");
-};
-
-export default SupportedFileTypes;

package/components/FileManager/BottomInfoBar/UploadStatus.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const UploadStatus: ({ uploading }: {
-    uploading: any;
-}) => JSX.Element;
-export default UploadStatus;

package/components/FileManager/BottomInfoBar/UploadStatus.js

@@ -1,47 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { CircularProgress } from "@webiny/ui/Progress";
-var StatusWrapper = /*#__PURE__*/styled("div", {
-  target: "e8hlyp40",
-  label: "StatusWrapper"
-})({
-  color: "var(--mdc-theme-primary)",
-  position: "absolute",
-  right: 0,
-  bottom: 10,
-  marginRight: 10,
-  display: "flex",
-  alignItems: "center",
-  "> div": {
-    display: "inline-block"
-  }
-});
-var CircularProgressHolder = /*#__PURE__*/styled("div", {
-  target: "e8hlyp41",
-  label: "CircularProgressHolder"
-})({
-  position: "relative",
-  height: 12,
-  width: 12
-});
-var UploadingLabel = /*#__PURE__*/styled("div", {
-  target: "e8hlyp42",
-  label: "UploadingLabel"
-})({
-  marginRight: 5
-});
-
-var UploadStatus = function UploadStatus(_ref) {
-  var uploading = _ref.uploading;
-
-  if (!uploading) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(StatusWrapper, null, /*#__PURE__*/React.createElement(UploadingLabel, null, "Uploading..."), /*#__PURE__*/React.createElement(CircularProgressHolder, null, /*#__PURE__*/React.createElement(CircularProgress, {
-    size: 10,
-    spinnerWidth: 1
-  })));
-};
-
-export default UploadStatus;

package/components/FileManager/BottomInfoBar.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const BottomInfoBar: (props: any) => JSX.Element;
-export default BottomInfoBar;

package/components/FileManager/BottomInfoBar.js

@@ -1,42 +0,0 @@
-import React from "react";
-import mime from "mime/lite";
-import styled from "@emotion/styled";
-import SupportedFileTypes from "./BottomInfoBar/SupportedFileTypes";
-import UploadStatus from "./BottomInfoBar/UploadStatus";
-mime.define({
-  "image/x-icon": ["ico"]
-}, true);
-mime.define({
-  "image/jpg": ["jpg"]
-}, true);
-mime.define({
-  "image/vnd.microsoft.icon": ["ico"]
-}, true);
-var BottomInfoBarWrapper = /*#__PURE__*/styled("div", {
-  target: "el4b0yq0",
-  label: "BottomInfoBarWrapper"
-})({
-  fontSize: "0.8rem",
-  position: "sticky",
-  bottom: 0,
-  height: 30,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  backgroundColor: "var(--mdc-theme-surface)",
-  width: "100%",
-  transform: "translateZ(0)",
-  overflow: "hidden",
-  display: "flex",
-  alignItems: "center",
-  zIndex: 1,
-  "> div": {
-    padding: "0 10px",
-    width: "100%"
-  }
-});
-
-var BottomInfoBar = function BottomInfoBar(props) {
-  return /*#__PURE__*/React.createElement(BottomInfoBarWrapper, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SupportedFileTypes, props), /*#__PURE__*/React.createElement(UploadStatus, props)));
-};
-
-export default BottomInfoBar;

package/components/FileManager/DropFilesHere.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export declare type DropFilesHereProps = {
-    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;
-    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;
-    empty?: boolean;
-    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-};
-export default function DropFilesHere({ onDrop, onDragLeave, empty, onClick }: DropFilesHereProps): JSX.Element;

package/components/FileManager/DropFilesHere.js

@@ -1,58 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as UploadIcon } from "@svgr/webpack!./icons/round-cloud_upload-24px.svg";
-var styles = /*#__PURE__*/css({
-  margin: "0 auto",
-  paddingTop: 0,
-  height: "100%",
-  zIndex: 2,
-  width: "100%",
-  position: "absolute",
-  backgroundColor: "var(--mdc-theme-text-hint-on-light)",
-  "&.empty": {
-    backgroundColor: "transparent",
-    "> div": {
-      backgroundColor: "var(--mdc-theme-surface)"
-    }
-  },
-  "> div": {
-    textAlign: "center",
-    width: 300,
-    height: 300,
-    backgroundColor: "var(--mdc-theme-background)",
-    borderRadius: "50%",
-    position: "absolute",
-    left: "50%",
-    top: "50%",
-    transform: "translateX(-50%) translateY(-100%)",
-    "> div": {
-      position: "absolute",
-      top: 90,
-      width: 300,
-      color: "var(--mdc-theme-on-surface)",
-      "svg.mdc-button__icon": {
-        width: 100,
-        display: "inline-block",
-        color: "var(--mdc-theme-on-surface)"
-      }
-    }
-  }
-}, "label:styles;");
-export default function DropFilesHere(_ref) {
-  var onDrop = _ref.onDrop,
-      onDragLeave = _ref.onDragLeave,
-      empty = _ref.empty,
-      onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
-      empty: empty
-    }),
-    onDrop: onDrop,
-    onClick: onClick,
-    onDragLeave: onDragLeave
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(UploadIcon, null)
-  }), /*#__PURE__*/React.createElement("div", null, "Drop files here"))));
-}

package/components/FileManager/File.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-declare type Props = {
-    file: {
-        [key: string]: any;
-    };
-    selected: boolean;
-    uploadFile: Function;
-    onSelect: (event?: React.MouseEvent) => void;
-    onClick: (event?: React.MouseEvent) => void;
-    options?: Array<{
-        label: string;
-        onClick: (file: Object) => void;
-    }>;
-    children: React.ReactNode;
-    showFileDetails: (event?: React.MouseEvent) => void;
-};
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;

package/components/FileManager/File.js

@@ -1,129 +0,0 @@
-import React from "react";
-import LazyLoad from "react-lazy-load";
-import classNames from "classnames";
-import { css, keyframes } from "emotion";
-import { Ripple } from "@webiny/ui/Ripple";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as Checked } from "@svgr/webpack!./icons/round-check_box-24px.svg";
-import { ReactComponent as SettingsIcon } from "@svgr/webpack!../../assets/icons/round-settings-24px.svg";
-var COMPONENT_WIDTH = 200;
-var COMPONENT_HEIGHT = 200;
-var grow = /*#__PURE__*/keyframes("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
-var styles = /*#__PURE__*/css({
-  display: "inline-block",
-  float: "left",
-  position: "relative",
-  zIndex: 1,
-  margin: 10,
-  cursor: "pointer",
-  width: "100%",
-  maxWidth: COMPONENT_WIDTH,
-  border: "1px solid var(--mdc-theme-on-background)",
-  borderRadius: 2,
-  "> .body": {
-    transition: "200ms ease-in opacity",
-    width: COMPONENT_WIDTH,
-    height: COMPONENT_HEIGHT,
-    overflow: "hidden",
-    "--icon-color": "var(--mdc-theme-on-background)",
-    ".checkedIcon": {
-      color: "var(--mdc-theme-secondary)",
-      position: "absolute",
-      top: 4,
-      left: 4,
-      zIndex: 11
-    },
-    ".infoIcon": {
-      opacity: 0,
-      position: "absolute",
-      top: 0,
-      right: 0,
-      zIndex: 10,
-      transition: "all 150ms ease-in",
-      "& .mdc-icon-button svg": {
-        color: "var(--mdc-theme-secondary)"
-      },
-      "&:hover": {
-        animationName: grow,
-        animationDuration: ".4s",
-        animationTimingFunction: "ease-in",
-        animationDelay: ".2s"
-      }
-    },
-    ".filePreview": {
-      textAlign: "center",
-      position: "relative",
-      backgroundColor: "#fff",
-      width: "100%",
-      height: "100%",
-      ".clickableArea": {
-        position: "absolute",
-        top: 30,
-        left: 0,
-        width: "100%",
-        height: 170,
-        zIndex: 2
-      }
-    },
-    "&:hover .infoIcon": {
-      opacity: 1
-    }
-  },
-  "> .label": {
-    padding: "15px 10px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    fontSize: "0.8rem",
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&.disable-select": {
-    cursor: "auto"
-  }
-}, "label:styles;");
-export default /*#__PURE__*/React.memo(function File(props) {
-  var file = props.file,
-      selected = props.selected,
-      onSelect = props.onSelect,
-      children = props.children,
-      showFileDetails = props.showFileDetails;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
-      "disable-select": !onSelect
-    }),
-    "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "checkedIcon",
-    onClick: onSelect
-  }, selected ? /*#__PURE__*/React.createElement(Checked, null) : null), /*#__PURE__*/React.createElement("div", {
-    className: "infoIcon"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-    onClick: showFileDetails,
-    "data-testid": "fm-file-wrapper-file-info-icon"
-  })), /*#__PURE__*/React.createElement(LazyLoad, {
-    height: 200,
-    offsetVertical: 300
-  }, /*#__PURE__*/React.createElement(Ripple, null, /*#__PURE__*/React.createElement("div", {
-    className: "filePreview"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "clickableArea",
-    onClick: onSelect
-  }), children)))), /*#__PURE__*/React.createElement("div", {
-    className: "label",
-    onClick: onSelect
-  }, file.name));
-}, function (prev, next) {
-  if (prev.selected !== next.selected) {
-    return false;
-  }
-
-  if (prev.file.name !== next.file.name) {
-    return false;
-  }
-
-  return true;
-});

package/components/FileManager/FileDetails/Name.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare function Name({ file, canEdit }: {
-    file: any;
-    canEdit: any;
-}): JSX.Element;
-export default Name;

package/components/FileManager/FileDetails/Name.js

@@ -1,113 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _cloneDeep from "lodash/cloneDeep";
-import _get from "lodash/get";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useMemo } from "react";
-import { useApolloClient } from "@apollo/react-hooks";
-import { Input } from "@webiny/ui/Input";
-import { Form } from "@webiny/form";
-import { validation } from "@webiny/validation";
-import { useSnackbar } from "../../../hooks/useSnackbar";
-import { UPDATE_FILE, LIST_FILES } from "./../graphql";
-import { useFileManager } from "./../FileManagerContext";
-
-function Name(_ref) {
-  var file = _ref.file,
-      canEdit = _ref.canEdit;
-  var name = file.name || "";
-
-  var _useSnackbar = useSnackbar(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var client = useApolloClient();
-
-  var _useFileManager = useFileManager(),
-      queryParams = _useFileManager.queryParams;
-
-  var editContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Form, {
-      data: {
-        name: name
-      },
-      onSubmit: /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-          var name;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  name = _ref2.name;
-
-                  if (!(name === file.name)) {
-                    _context.next = 3;
-                    break;
-                  }
-
-                  return _context.abrupt("return");
-
-                case 3:
-                  _context.next = 5;
-                  return client.mutate({
-                    mutation: UPDATE_FILE,
-                    variables: {
-                      id: file.id,
-                      data: {
-                        name: name
-                      }
-                    },
-                    update: function update(cache, updated) {
-                      var newFileData = _get(updated, "data.fileManager.updateFile.data");
-
-                      var data = _cloneDeep(cache.readQuery({
-                        query: LIST_FILES,
-                        variables: queryParams
-                      }));
-
-                      data.fileManager.listFiles.data.forEach(function (item) {
-                        if (item.src === newFileData.src) {
-                          item.name = newFileData.name;
-                        }
-                      });
-                      cache.writeQuery({
-                        query: LIST_FILES,
-                        variables: queryParams,
-                        data: data
-                      });
-                    }
-                  });
-
-                case 5:
-                  showSnackbar("Name successfully updated.");
-
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function (_x) {
-          return _ref3.apply(this, arguments);
-        };
-      }()
-    }, function (_ref4) {
-      var Bind = _ref4.Bind,
-          submit = _ref4.submit;
-      return /*#__PURE__*/React.createElement(Bind, {
-        name: "name",
-        validators: validation.create("required")
-      }, /*#__PURE__*/React.createElement(Input, {
-        disabled: !canEdit(file),
-        autoFocus: true,
-        placeholder: "Enter name",
-        fullwidth: true,
-        onBlur: submit,
-        description: "A descriptive name is easier to remember."
-      }));
-    });
-  }, [name, file.name, canEdit]);
-  return /*#__PURE__*/React.createElement("li-content", null, editContent);
-}
-
-export default Name;

package/components/FileManager/FileDetails/Tags.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare function Tags({ file, canEdit }: {
-    file: any;
-    canEdit: any;
-}): JSX.Element;
-export default Tags;