@webiny/app-admin 5.27.0 → 5.28.0-beta.0

package/components/FileManager/DropFilesHere.js

@@ -1,9 +1,23 @@
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as UploadIcon } from "./icons/round-cloud_upload-24px.svg";
-var styles = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _roundCloud_upload24px = require("./icons/round-cloud_upload-24px.svg");
+
+var styles = /*#__PURE__*/(0, _emotion.css)({
   margin: "0 auto",
   paddingTop: 0,
   height: "100%",
@@ -46,16 +60,17 @@ var DropFilesHere = function DropFilesHere(_ref) {
       onDragLeave = _ref.onDragLeave,
       empty = _ref.empty,
       onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(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"))));
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_roundCloud_upload24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement("div", null, "Drop files here"))));
 };
 
-export default DropFilesHere;
+var _default = DropFilesHere;
+exports.default = _default;

package/components/FileManager/DropFilesHere.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropFilesHere.tsx"],"names":["React","css","classNames","Icon","ReactComponent","UploadIcon","styles","margin","paddingTop","height","zIndex","width","position","backgroundColor","textAlign","borderRadius","left","top","transform","color","display","DropFilesHere","onDrop","onDragLeave","empty","onClick"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,iBAArB;AAEA,SAASC,cAAc,IAAIC,UAA3B;AAEA,IAAMC,MAAM,gBAAGL,GAAG,CAAC;AACfM,EAAAA,MAAM,EAAE,QADO;AAEfC,EAAAA,UAAU,EAAE,CAFG;AAGfC,EAAAA,MAAM,EAAE,MAHO;AAIfC,EAAAA,MAAM,EAAE,CAJO;AAKfC,EAAAA,KAAK,EAAE,MALQ;AAMfC,EAAAA,QAAQ,EAAE,UANK;AAOfC,EAAAA,eAAe,EAAE,qCAPF;AAQf,aAAW;AACPA,IAAAA,eAAe,EAAE,aADV;AAEP,aAAS;AACLA,MAAAA,eAAe,EAAE;AADZ;AAFF,GARI;AAcf,WAAS;AACLC,IAAAA,SAAS,EAAE,QADN;AAELH,IAAAA,KAAK,EAAE,GAFF;AAGLF,IAAAA,MAAM,EAAE,GAHH;AAILI,IAAAA,eAAe,EAAE,6BAJZ;AAKLE,IAAAA,YAAY,EAAE,KALT;AAMLH,IAAAA,QAAQ,EAAE,UANL;AAOLI,IAAAA,IAAI,EAAE,KAPD;AAQLC,IAAAA,GAAG,EAAE,KARA;AASLC,IAAAA,SAAS,EAAE,oCATN;AAUL,aAAS;AACLN,MAAAA,QAAQ,EAAE,UADL;AAELK,MAAAA,GAAG,EAAE,EAFA;AAGLN,MAAAA,KAAK,EAAE,GAHF;AAILQ,MAAAA,KAAK,EAAE,6BAJF;AAKL,8BAAwB;AACpBR,QAAAA,KAAK,EAAE,GADa;AAEpBS,QAAAA,OAAO,EAAE,cAFW;AAGpBD,QAAAA,KAAK,EAAE;AAHa;AALnB;AAVJ;AAdM,CAAD,kBAAlB;;AA6CA,IAAME,aAA2C,GAAG,SAA9CA,aAA8C,OAA6C;AAAA,MAA1CC,MAA0C,QAA1CA,MAA0C;AAAA,MAAlCC,WAAkC,QAAlCA,WAAkC;AAAA,MAArBC,KAAqB,QAArBA,KAAqB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AAC7F,sBACI;AACI,IAAA,SAAS,EAAEvB,UAAU,CAACI,MAAD,EAAS;AAAEkB,MAAAA,KAAK,EAALA;AAAF,KAAT,CADzB;AAEI,IAAA,MAAM,EAAEF,MAFZ;AAGI,IAAA,OAAO,EAAEG,OAHb;AAII,IAAA,WAAW,EAAEF;AAJjB,kBAMI,8CACI,8CACI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,UAAD;AAAZ,IADJ,eAEI,mDAFJ,CADJ,CANJ,CADJ;AAeH,CAhBD;;AAiBA,eAAeF,aAAf","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nimport { ReactComponent as UploadIcon } from \"./icons/round-cloud_upload-24px.svg\";\n\nconst styles = css({\n    margin: \"0 auto\",\n    paddingTop: 0,\n    height: \"100%\",\n    zIndex: 2,\n    width: \"100%\",\n    position: \"absolute\",\n    backgroundColor: \"var(--mdc-theme-text-hint-on-light)\",\n    \"&.empty\": {\n        backgroundColor: \"transparent\",\n        \"> div\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    },\n    \"> div\": {\n        textAlign: \"center\",\n        width: 300,\n        height: 300,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        borderRadius: \"50%\",\n        position: \"absolute\",\n        left: \"50%\",\n        top: \"50%\",\n        transform: \"translateX(-50%) translateY(-100%)\",\n        \"> div\": {\n            position: \"absolute\",\n            top: 90,\n            width: 300,\n            color: \"var(--mdc-theme-on-surface)\",\n            \"svg.mdc-button__icon\": {\n                width: 100,\n                display: \"inline-block\",\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    }\n});\n\nexport interface DropFilesHereProps {\n    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;\n    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;\n    empty?: boolean;\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst DropFilesHere: React.FC<DropFilesHereProps> = ({ onDrop, onDragLeave, empty, onClick }) => {\n    return (\n        <div\n            className={classNames(styles, { empty })}\n            onDrop={onDrop}\n            onClick={onClick}\n            onDragLeave={onDragLeave}\n        >\n            <div>\n                <div>\n                    <Icon icon={<UploadIcon />} />\n                    <div>Drop files here</div>\n                </div>\n            </div>\n        </div>\n    );\n};\nexport default DropFilesHere;\n"]}
+{"version":3,"names":["styles","css","margin","paddingTop","height","zIndex","width","position","backgroundColor","textAlign","borderRadius","left","top","transform","color","display","DropFilesHere","onDrop","onDragLeave","empty","onClick","classNames"],"sources":["DropFilesHere.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nimport { ReactComponent as UploadIcon } from \"./icons/round-cloud_upload-24px.svg\";\n\nconst styles = css({\n    margin: \"0 auto\",\n    paddingTop: 0,\n    height: \"100%\",\n    zIndex: 2,\n    width: \"100%\",\n    position: \"absolute\",\n    backgroundColor: \"var(--mdc-theme-text-hint-on-light)\",\n    \"&.empty\": {\n        backgroundColor: \"transparent\",\n        \"> div\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    },\n    \"> div\": {\n        textAlign: \"center\",\n        width: 300,\n        height: 300,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        borderRadius: \"50%\",\n        position: \"absolute\",\n        left: \"50%\",\n        top: \"50%\",\n        transform: \"translateX(-50%) translateY(-100%)\",\n        \"> div\": {\n            position: \"absolute\",\n            top: 90,\n            width: 300,\n            color: \"var(--mdc-theme-on-surface)\",\n            \"svg.mdc-button__icon\": {\n                width: 100,\n                display: \"inline-block\",\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    }\n});\n\nexport interface DropFilesHereProps {\n    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;\n    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;\n    empty?: boolean;\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst DropFilesHere: React.FC<DropFilesHereProps> = ({ onDrop, onDragLeave, empty, onClick }) => {\n    return (\n        <div\n            className={classNames(styles, { empty })}\n            onDrop={onDrop}\n            onClick={onClick}\n            onDragLeave={onDragLeave}\n        >\n            <div>\n                <div>\n                    <Icon icon={<UploadIcon />} />\n                    <div>Drop files here</div>\n                </div>\n            </div>\n        </div>\n    );\n};\nexport default DropFilesHere;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,MAAM,EAAE,QADO;EAEfC,UAAU,EAAE,CAFG;EAGfC,MAAM,EAAE,MAHO;EAIfC,MAAM,EAAE,CAJO;EAKfC,KAAK,EAAE,MALQ;EAMfC,QAAQ,EAAE,UANK;EAOfC,eAAe,EAAE,qCAPF;EAQf,WAAW;IACPA,eAAe,EAAE,aADV;IAEP,SAAS;MACLA,eAAe,EAAE;IADZ;EAFF,CARI;EAcf,SAAS;IACLC,SAAS,EAAE,QADN;IAELH,KAAK,EAAE,GAFF;IAGLF,MAAM,EAAE,GAHH;IAILI,eAAe,EAAE,6BAJZ;IAKLE,YAAY,EAAE,KALT;IAMLH,QAAQ,EAAE,UANL;IAOLI,IAAI,EAAE,KAPD;IAQLC,GAAG,EAAE,KARA;IASLC,SAAS,EAAE,oCATN;IAUL,SAAS;MACLN,QAAQ,EAAE,UADL;MAELK,GAAG,EAAE,EAFA;MAGLN,KAAK,EAAE,GAHF;MAILQ,KAAK,EAAE,6BAJF;MAKL,wBAAwB;QACpBR,KAAK,EAAE,GADa;QAEpBS,OAAO,EAAE,cAFW;QAGpBD,KAAK,EAAE;MAHa;IALnB;EAVJ;AAdM,CAAJ,kBAAf;;AA6CA,IAAME,aAA2C,GAAG,SAA9CA,aAA8C,OAA6C;EAAA,IAA1CC,MAA0C,QAA1CA,MAA0C;EAAA,IAAlCC,WAAkC,QAAlCA,WAAkC;EAAA,IAArBC,KAAqB,QAArBA,KAAqB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EAC7F,oBACI;IACI,SAAS,EAAE,IAAAC,mBAAA,EAAWrB,MAAX,EAAmB;MAAEmB,KAAK,EAALA;IAAF,CAAnB,CADf;IAEI,MAAM,EAAEF,MAFZ;IAGI,OAAO,EAAEG,OAHb;IAII,WAAW,EAAEF;EAJjB,gBAMI,uDACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,eAEI,4DAFJ,CADJ,CANJ,CADJ;AAeH,CAhBD;;eAiBeF,a"}

package/components/FileManager/File.js

@@ -1,20 +1,36 @@
-import React from "react";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _emotion = require("emotion");
+
+var _Ripple = require("@webiny/ui/Ripple");
+
+var _Button = require("@webiny/ui/Button");
+
+var _roundCheck_box24px = require("./icons/round-check_box-24px.svg");
+
+var _roundSettings24px = require("../../assets/icons/round-settings-24px.svg");
+
 /**
  * Package react-lazy-load has no types.
  */
 // @ts-ignore
-
-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 "./icons/round-check_box-24px.svg";
-import { ReactComponent as SettingsIcon } from "../../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({
+var grow = /*#__PURE__*/(0, _emotion.keyframes)("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
+var styles = /*#__PURE__*/(0, _emotion.css)({
   display: "inline-block",
   float: "left",
   position: "relative",
@@ -94,37 +110,37 @@ var File = function File(props) {
       onSelect = props.onSelect,
       children = props.children,
       showFileDetails = props.showFileDetails;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(styles, {
       "disable-select": !onSelect
     }),
     "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "body"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "checkedIcon",
     onClick: onSelect
-  }, selected ? /*#__PURE__*/React.createElement(Checked, null) : null), /*#__PURE__*/React.createElement("div", {
+  }, selected ? /*#__PURE__*/_react.default.createElement(_roundCheck_box24px.ReactComponent, null) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: "infoIcon"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_roundSettings24px.ReactComponent, null),
     onClick: showFileDetails,
     "data-testid": "fm-file-wrapper-file-info-icon"
-  })), /*#__PURE__*/React.createElement(LazyLoad, {
+  })), /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
     height: 200,
     offsetVertical: 300
-  }, /*#__PURE__*/React.createElement(Ripple, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Ripple.Ripple, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "filePreview"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "clickableArea",
     onClick: onSelect
-  }), children)))), /*#__PURE__*/React.createElement("div", {
+  }), children)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "label",
     onClick: onSelect
   }, file.name));
 };
 
-var MemoizedFile = /*#__PURE__*/React.memo(File, function (prev, next) {
+var MemoizedFile = /*#__PURE__*/_react.default.memo(File, function (prev, next) {
   if (prev.selected !== next.selected) {
     return false;
   } else if (prev.file.name !== next.file.name) {
@@ -133,5 +149,7 @@ var MemoizedFile = /*#__PURE__*/React.memo(File, function (prev, next) {
 
   return true;
 });
+
 MemoizedFile.displayName = "MemoizedFile";
-export default MemoizedFile;
+var _default = MemoizedFile;
+exports.default = _default;

package/components/FileManager/File.js.map

@@ -1 +1 @@
-{"version":3,"sources":["File.tsx"],"names":["React","LazyLoad","classNames","css","keyframes","Ripple","IconButton","ReactComponent","Checked","SettingsIcon","COMPONENT_WIDTH","COMPONENT_HEIGHT","grow","styles","display","float","position","zIndex","margin","cursor","width","maxWidth","border","borderRadius","transition","height","overflow","color","top","left","opacity","right","animationName","animationDuration","animationTimingFunction","animationDelay","textAlign","backgroundColor","padding","whiteSpace","textOverflow","fontSize","File","props","file","selected","onSelect","children","showFileDetails","name","MemoizedFile","memo","prev","next","displayName"],"mappings":"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","sourcesContent":["import React from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-ignore\nimport LazyLoad from \"react-lazy-load\";\nimport classNames from \"classnames\";\nimport { css, keyframes } from \"emotion\";\nimport { Ripple } from \"@webiny/ui/Ripple\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as Checked } from \"./icons/round-check_box-24px.svg\";\nimport { ReactComponent as SettingsIcon } from \"../../assets/icons/round-settings-24px.svg\";\n\nconst COMPONENT_WIDTH = 200;\nconst COMPONENT_HEIGHT = 200;\n\nconst grow = keyframes`\n  0% {\n    transform: scale(1)\n  }\n  50% {\n    transform: scale(1.2)\n  }\n  100% {\n    transform: scale(1)\n  }\n`;\nconst styles = css({\n    display: \"inline-block\",\n    float: \"left\",\n    position: \"relative\",\n    zIndex: 1,\n    margin: 10,\n    cursor: \"pointer\",\n    width: \"100%\",\n    maxWidth: COMPONENT_WIDTH,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    borderRadius: 2,\n    \"> .body\": {\n        transition: \"200ms ease-in opacity\",\n        width: COMPONENT_WIDTH,\n        height: COMPONENT_HEIGHT,\n        overflow: \"hidden\",\n        \"--icon-color\": \"var(--mdc-theme-on-background)\",\n        \".checkedIcon\": {\n            color: \"var(--mdc-theme-secondary)\",\n            position: \"absolute\",\n            top: 4,\n            left: 4,\n            zIndex: 11\n        },\n        \".infoIcon\": {\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            right: 0,\n            zIndex: 10,\n            transition: \"all 150ms ease-in\",\n            \"& .mdc-icon-button svg\": {\n                color: \"var(--mdc-theme-secondary)\"\n            },\n            \"&:hover\": {\n                animationName: grow,\n                animationDuration: \".4s\",\n                animationTimingFunction: \"ease-in\",\n                animationDelay: \".2s\"\n            }\n        },\n        \".filePreview\": {\n            textAlign: \"center\",\n            position: \"relative\",\n            backgroundColor: \"#fff\",\n            width: \"100%\",\n            height: \"100%\",\n            \".clickableArea\": {\n                position: \"absolute\",\n                top: 30,\n                left: 0,\n                width: \"100%\",\n                height: 170,\n                zIndex: 2\n            }\n        },\n        \"&:hover .infoIcon\": {\n            opacity: 1\n        }\n    },\n    \"> .label\": {\n        padding: \"15px 10px\",\n        whiteSpace: \"nowrap\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        fontSize: \"0.8rem\",\n        color: \"var(--mdc-theme-on-surface)\",\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&.disable-select\": {\n        cursor: \"auto\"\n    }\n});\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    uploadFile: (item: FileItem[] | FileItem) => Promise<number | null>;\n    onSelect: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: Array<{ label: string; onClick: (file: Object) => void }>;\n    children: React.ReactNode;\n    showFileDetails: (event?: React.MouseEvent) => void;\n}\n\nconst File: React.FC<FileProps> = props => {\n    const { file, selected, onSelect, children, showFileDetails } = props;\n\n    return (\n        <div\n            className={classNames(styles, { \"disable-select\": !onSelect })}\n            data-testid={\"fm-list-wrapper-file\"}\n        >\n            <div className={\"body\"}>\n                <div className={\"checkedIcon\"} onClick={onSelect}>\n                    {selected ? <Checked /> : null}\n                </div>\n                <div className={\"infoIcon\"}>\n                    <IconButton\n                        icon={<SettingsIcon />}\n                        onClick={showFileDetails}\n                        data-testid={\"fm-file-wrapper-file-info-icon\"}\n                    />\n                </div>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <Ripple>\n                        <div className={\"filePreview\"}>\n                            <div className=\"clickableArea\" onClick={onSelect} />\n                            {children}\n                        </div>\n                    </Ripple>\n                </LazyLoad>\n            </div>\n            <div className={\"label\"} onClick={onSelect}>\n                {file.name}\n            </div>\n        </div>\n    );\n};\n\nconst MemoizedFile = React.memo(File, (prev, next) => {\n    if (prev.selected !== next.selected) {\n        return false;\n    } else if (prev.file.name !== next.file.name) {\n        return false;\n    }\n\n    return true;\n});\n\nMemoizedFile.displayName = \"MemoizedFile\";\nexport default MemoizedFile;\n"]}
+{"version":3,"names":["COMPONENT_WIDTH","COMPONENT_HEIGHT","grow","keyframes","styles","css","display","float","position","zIndex","margin","cursor","width","maxWidth","border","borderRadius","transition","height","overflow","color","top","left","opacity","right","animationName","animationDuration","animationTimingFunction","animationDelay","textAlign","backgroundColor","padding","whiteSpace","textOverflow","fontSize","File","props","file","selected","onSelect","children","showFileDetails","classNames","name","MemoizedFile","React","memo","prev","next","displayName"],"sources":["File.tsx"],"sourcesContent":["import React from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-ignore\nimport LazyLoad from \"react-lazy-load\";\nimport classNames from \"classnames\";\nimport { css, keyframes } from \"emotion\";\nimport { Ripple } from \"@webiny/ui/Ripple\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as Checked } from \"./icons/round-check_box-24px.svg\";\nimport { ReactComponent as SettingsIcon } from \"../../assets/icons/round-settings-24px.svg\";\n\nconst COMPONENT_WIDTH = 200;\nconst COMPONENT_HEIGHT = 200;\n\nconst grow = keyframes`\n  0% {\n    transform: scale(1)\n  }\n  50% {\n    transform: scale(1.2)\n  }\n  100% {\n    transform: scale(1)\n  }\n`;\nconst styles = css({\n    display: \"inline-block\",\n    float: \"left\",\n    position: \"relative\",\n    zIndex: 1,\n    margin: 10,\n    cursor: \"pointer\",\n    width: \"100%\",\n    maxWidth: COMPONENT_WIDTH,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    borderRadius: 2,\n    \"> .body\": {\n        transition: \"200ms ease-in opacity\",\n        width: COMPONENT_WIDTH,\n        height: COMPONENT_HEIGHT,\n        overflow: \"hidden\",\n        \"--icon-color\": \"var(--mdc-theme-on-background)\",\n        \".checkedIcon\": {\n            color: \"var(--mdc-theme-secondary)\",\n            position: \"absolute\",\n            top: 4,\n            left: 4,\n            zIndex: 11\n        },\n        \".infoIcon\": {\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            right: 0,\n            zIndex: 10,\n            transition: \"all 150ms ease-in\",\n            \"& .mdc-icon-button svg\": {\n                color: \"var(--mdc-theme-secondary)\"\n            },\n            \"&:hover\": {\n                animationName: grow,\n                animationDuration: \".4s\",\n                animationTimingFunction: \"ease-in\",\n                animationDelay: \".2s\"\n            }\n        },\n        \".filePreview\": {\n            textAlign: \"center\",\n            position: \"relative\",\n            backgroundColor: \"#fff\",\n            width: \"100%\",\n            height: \"100%\",\n            \".clickableArea\": {\n                position: \"absolute\",\n                top: 30,\n                left: 0,\n                width: \"100%\",\n                height: 170,\n                zIndex: 2\n            }\n        },\n        \"&:hover .infoIcon\": {\n            opacity: 1\n        }\n    },\n    \"> .label\": {\n        padding: \"15px 10px\",\n        whiteSpace: \"nowrap\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        fontSize: \"0.8rem\",\n        color: \"var(--mdc-theme-on-surface)\",\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&.disable-select\": {\n        cursor: \"auto\"\n    }\n});\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    uploadFile: (item: FileItem[] | FileItem) => Promise<number | null>;\n    onSelect: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: Array<{ label: string; onClick: (file: Object) => void }>;\n    children: React.ReactNode;\n    showFileDetails: (event?: React.MouseEvent) => void;\n}\n\nconst File: React.FC<FileProps> = props => {\n    const { file, selected, onSelect, children, showFileDetails } = props;\n\n    return (\n        <div\n            className={classNames(styles, { \"disable-select\": !onSelect })}\n            data-testid={\"fm-list-wrapper-file\"}\n        >\n            <div className={\"body\"}>\n                <div className={\"checkedIcon\"} onClick={onSelect}>\n                    {selected ? <Checked /> : null}\n                </div>\n                <div className={\"infoIcon\"}>\n                    <IconButton\n                        icon={<SettingsIcon />}\n                        onClick={showFileDetails}\n                        data-testid={\"fm-file-wrapper-file-info-icon\"}\n                    />\n                </div>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <Ripple>\n                        <div className={\"filePreview\"}>\n                            <div className=\"clickableArea\" onClick={onSelect} />\n                            {children}\n                        </div>\n                    </Ripple>\n                </LazyLoad>\n            </div>\n            <div className={\"label\"} onClick={onSelect}>\n                {file.name}\n            </div>\n        </div>\n    );\n};\n\nconst MemoizedFile = React.memo(File, (prev, next) => {\n    if (prev.selected !== next.selected) {\n        return false;\n    } else if (prev.file.name !== next.file.name) {\n        return false;\n    }\n\n    return true;\n});\n\nMemoizedFile.displayName = \"MemoizedFile\";\nexport default MemoizedFile;\n"],"mappings":"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"}

package/components/FileManager/FileDetails/Name.js

@@ -1,38 +1,60 @@
-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";
+"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.default = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactHooks = require("@apollo/react-hooks");
+
+var _Input = require("@webiny/ui/Input");
+
+var _form = require("@webiny/form");
+
+var _validation = require("@webiny/validation");
+
+var _useSnackbar2 = require("../../../hooks/useSnackbar");
+
+var _graphql = require("./../graphql");
+
+var _FileManagerContext = require("./../FileManagerContext");
 
 var Name = function Name(_ref) {
   var file = _ref.file,
       canEdit = _ref.canEdit;
   var name = file.name || "";
 
-  var _useSnackbar = useSnackbar(),
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var client = useApolloClient();
+  var client = (0, _reactHooks.useApolloClient)();
 
-  var _useFileManager = useFileManager(),
+  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
       queryParams = _useFileManager.queryParams;
 
-  var editContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Form, {
+  var editContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_form.Form, {
       data: {
         name: name
       },
       onSubmit: /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+        var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
           var name;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
@@ -48,7 +70,7 @@ var Name = function Name(_ref) {
                 case 3:
                   _context.next = 5;
                   return client.mutate({
-                    mutation: UPDATE_FILE,
+                    mutation: _graphql.UPDATE_FILE,
                     variables: {
                       id: file.id,
                       data: {
@@ -56,10 +78,9 @@ var Name = function Name(_ref) {
                       }
                     },
                     update: function update(cache, updated) {
-                      var newFileData = _get(updated, "data.fileManager.updateFile.data");
-
-                      var data = _cloneDeep(cache.readQuery({
-                        query: LIST_FILES,
+                      var newFileData = (0, _get2.default)(updated, "data.fileManager.updateFile.data");
+                      var data = (0, _cloneDeep2.default)(cache.readQuery({
+                        query: _graphql.LIST_FILES,
                         variables: queryParams
                       }));
 
@@ -72,7 +93,7 @@ var Name = function Name(_ref) {
                       }
 
                       cache.writeQuery({
-                        query: LIST_FILES,
+                        query: _graphql.LIST_FILES,
                         variables: queryParams,
                         data: data
                       });
@@ -97,10 +118,10 @@ var Name = function Name(_ref) {
     }, function (_ref4) {
       var Bind = _ref4.Bind,
           submit = _ref4.submit;
-      return /*#__PURE__*/React.createElement(Bind, {
+      return /*#__PURE__*/_react.default.createElement(Bind, {
         name: "name",
-        validators: validation.create("required")
-      }, /*#__PURE__*/React.createElement(Input, {
+        validators: _validation.validation.create("required")
+      }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
         disabled: !canEdit(file),
         autoFocus: true,
         placeholder: "Enter name",
@@ -110,7 +131,8 @@ var Name = function Name(_ref) {
       }));
     });
   }, [name, file.name, canEdit]);
-  return /*#__PURE__*/React.createElement("li-content", null, editContent);
+  return /*#__PURE__*/_react.default.createElement("li-content", null, editContent);
 };
 
-export default Name;
+var _default = Name;
+exports.default = _default;

package/components/FileManager/FileDetails/Name.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Name.tsx"],"names":["React","useMemo","useApolloClient","Input","Form","validation","useSnackbar","UPDATE_FILE","LIST_FILES","useFileManager","Name","file","canEdit","name","showSnackbar","client","queryParams","editContent","mutate","mutation","variables","id","data","update","cache","updated","newFileData","readQuery","query","fileManager","listFiles","forEach","item","src","writeQuery","Bind","submit","create"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { get, cloneDeep } from \"lodash\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    UpdateFileMutationResponse,\n    UpdateFileMutationVariables,\n    ListFilesQueryResponse\n} from \"./../graphql\";\nimport { useFileManager } from \"./../FileManagerContext\";\nimport { FileItem } from \"../types\";\n\ninterface NameProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\nconst Name: React.FC<NameProps> = ({ file, canEdit }) => {\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const client = useApolloClient();\n\n    const { queryParams } = useFileManager();\n\n    const editContent = useMemo(() => {\n        return (\n            <Form\n                data={{\n                    name\n                }}\n                onSubmit={async ({ name }) => {\n                    // Bail out if name is same as the current file name.\n                    if (name === file.name) {\n                        return;\n                    }\n                    // Update file.\n                    await client.mutate<UpdateFileMutationResponse, UpdateFileMutationVariables>({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { name }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.src === newFileData.src) {\n                                        item.name = newFileData.name;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data: data\n                            });\n                        }\n                    });\n\n                    showSnackbar(\"Name successfully updated.\");\n                }}\n            >\n                {({ Bind, submit }) => (\n                    <Bind name={\"name\"} validators={validation.create(\"required\")}>\n                        <Input\n                            disabled={!canEdit(file)}\n                            autoFocus\n                            placeholder={\"Enter name\"}\n                            fullwidth={true}\n                            onBlur={submit}\n                            description={\"A descriptive name is easier to remember.\"}\n                        />\n                    </Bind>\n                )}\n            </Form>\n        );\n    }, [name, file.name, canEdit]);\n\n    return <li-content>{editContent}</li-content>;\n};\n\nexport default Name;\n"]}
+{"version":3,"names":["Name","file","canEdit","name","useSnackbar","showSnackbar","client","useApolloClient","useFileManager","queryParams","editContent","useMemo","mutate","mutation","UPDATE_FILE","variables","id","data","update","cache","updated","newFileData","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","src","writeQuery","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { get, cloneDeep } from \"lodash\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    UpdateFileMutationResponse,\n    UpdateFileMutationVariables,\n    ListFilesQueryResponse\n} from \"./../graphql\";\nimport { useFileManager } from \"./../FileManagerContext\";\nimport { FileItem } from \"../types\";\n\ninterface NameProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\nconst Name: React.FC<NameProps> = ({ file, canEdit }) => {\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const client = useApolloClient();\n\n    const { queryParams } = useFileManager();\n\n    const editContent = useMemo(() => {\n        return (\n            <Form\n                data={{\n                    name\n                }}\n                onSubmit={async ({ name }) => {\n                    // Bail out if name is same as the current file name.\n                    if (name === file.name) {\n                        return;\n                    }\n                    // Update file.\n                    await client.mutate<UpdateFileMutationResponse, UpdateFileMutationVariables>({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { name }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.src === newFileData.src) {\n                                        item.name = newFileData.name;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data: data\n                            });\n                        }\n                    });\n\n                    showSnackbar(\"Name successfully updated.\");\n                }}\n            >\n                {({ Bind, submit }) => (\n                    <Bind name={\"name\"} validators={validation.create(\"required\")}>\n                        <Input\n                            disabled={!canEdit(file)}\n                            autoFocus\n                            placeholder={\"Enter name\"}\n                            fullwidth={true}\n                            onBlur={submit}\n                            description={\"A descriptive name is easier to remember.\"}\n                        />\n                    </Bind>\n                )}\n            </Form>\n        );\n    }, [name, file.name, canEdit]);\n\n    return <li-content>{editContent}</li-content>;\n};\n\nexport default Name;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AAOA,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAAuB;EAAA,IAApBC,IAAoB,QAApBA,IAAoB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACrD,IAAMC,IAAI,GAAGF,IAAI,CAACE,IAAL,IAAa,EAA1B;;EACA,mBAAyB,IAAAC,yBAAA,GAAzB;EAAA,IAAQC,YAAR,gBAAQA,YAAR;;EACA,IAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;;EAEA,sBAAwB,IAAAC,kCAAA,GAAxB;EAAA,IAAQC,WAAR,mBAAQA,WAAR;;EAEA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAC9B,oBACI,6BAAC,UAAD;MACI,IAAI,EAAE;QACFR,IAAI,EAAJA;MADE,CADV;MAII,QAAQ;QAAA,mGAAE;UAAA;UAAA;YAAA;cAAA;gBAAA;kBAASA,IAAT,SAASA,IAAT;;kBAAA,MAEFA,IAAI,KAAKF,IAAI,CAACE,IAFZ;oBAAA;oBAAA;kBAAA;;kBAAA;;gBAAA;kBAAA;kBAAA,OAMAG,MAAM,CAACM,MAAP,CAAuE;oBACzEC,QAAQ,EAAEC,oBAD+D;oBAEzEC,SAAS,EAAE;sBACPC,EAAE,EAAEf,IAAI,CAACe,EADF;sBAEPC,IAAI,EAAE;wBAAEd,IAAI,EAAJA;sBAAF;oBAFC,CAF8D;oBAMzEe,MAAM,EAAE,gBAACC,KAAD,EAAQC,OAAR,EAAoB;sBACxB,IAAMC,WAAqB,GAAG,mBAC1BD,OAD0B,EAE1B,kCAF0B,CAA9B;sBAIA,IAAMH,IAAI,GAAG,yBACTE,KAAK,CAACG,SAAN,CAAwC;wBACpCC,KAAK,EAAEC,mBAD6B;wBAEpCT,SAAS,EAAEN;sBAFyB,CAAxC,CADS,CAAb;;sBAOA,IAAIQ,IAAJ,EAAU;wBACNA,IAAI,CAACQ,WAAL,CAAiBC,SAAjB,CAA2BT,IAA3B,CAAgCU,OAAhC,CAAwC,UAAAC,IAAI,EAAI;0BAC5C,IAAIA,IAAI,CAACC,GAAL,KAAaR,WAAW,CAACQ,GAA7B,EAAkC;4BAC9BD,IAAI,CAACzB,IAAL,GAAYkB,WAAW,CAAClB,IAAxB;0BACH;wBACJ,CAJD;sBAKH;;sBAEDgB,KAAK,CAACW,UAAN,CAAiB;wBACbP,KAAK,EAAEC,mBADM;wBAEbT,SAAS,EAAEN,WAFE;wBAGbQ,IAAI,EAAEA;sBAHO,CAAjB;oBAKH;kBA/BwE,CAAvE,CANA;;gBAAA;kBAwCNZ,YAAY,CAAC,4BAAD,CAAZ;;gBAxCM;gBAAA;kBAAA;cAAA;YAAA;UAAA;QAAA,CAAF;;QAAA;UAAA;QAAA;MAAA;IAJZ,GA+CK;MAAA,IAAG0B,IAAH,SAAGA,IAAH;MAAA,IAASC,MAAT,SAASA,MAAT;MAAA,oBACG,6BAAC,IAAD;QAAM,IAAI,EAAE,MAAZ;QAAoB,UAAU,EAAEC,sBAAA,CAAWC,MAAX,CAAkB,UAAlB;MAAhC,gBACI,6BAAC,YAAD;QACI,QAAQ,EAAE,CAAChC,OAAO,CAACD,IAAD,CADtB;QAEI,SAAS,MAFb;QAGI,WAAW,EAAE,YAHjB;QAII,SAAS,EAAE,IAJf;QAKI,MAAM,EAAE+B,MALZ;QAMI,WAAW,EAAE;MANjB,EADJ,CADH;IAAA,CA/CL,CADJ;EA8DH,CA/DmB,EA+DjB,CAAC7B,IAAD,EAAOF,IAAI,CAACE,IAAZ,EAAkBD,OAAlB,CA/DiB,CAApB;EAiEA,oBAAO,iDAAaQ,WAAb,CAAP;AACH,CAzED;;eA2EeV,I"}