@webiny/app-admin 0.0.0-unstable.611c5af35e → 0.0.0-unstable.615a930a68

package/components/FileManager/BottomInfoBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["mime","define","BottomInfoBarWrapper","styled","fontSize","position","bottom","height","color","borderTop","backgroundColor","width","transform","overflow","display","alignItems","zIndex","padding","BottomInfoBar","props"],"sources":["BottomInfoBar.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime/lite\";\nimport styled from \"@emotion/styled\";\nimport SupportedFileTypes, { SupportedFileTypesProps } from \"./BottomInfoBar/SupportedFileTypes\";\nimport UploadStatus, { UploadStatusProps } from \"./BottomInfoBar/UploadStatus\";\n\nmime.define({ \"image/x-icon\": [\"ico\"] }, true);\nmime.define({ \"image/jpg\": [\"jpg\"] }, true);\nmime.define({ \"image/vnd.microsoft.icon\": [\"ico\"] }, true);\n\nconst BottomInfoBarWrapper = styled(\"div\")({\n    fontSize: \"0.8rem\",\n    position: \"sticky\",\n    bottom: 0,\n    height: 30,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    width: \"100%\",\n    transform: \"translateZ(0)\",\n    overflow: \"hidden\",\n    display: \"flex\",\n    alignItems: \"center\",\n    zIndex: 1,\n    \"> div\": {\n        padding: \"0 10px\",\n        width: \"100%\"\n    }\n});\n\nconst BottomInfoBar: React.FC<SupportedFileTypesProps & UploadStatusProps> = props => {\n    return (\n        <BottomInfoBarWrapper>\n            <div>\n                <SupportedFileTypes {...props} />\n                <UploadStatus {...props} />\n            </div>\n        </BottomInfoBarWrapper>\n    );\n};\n\nexport default BottomInfoBar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEAA,aAAI,CAACC,MAAM,CAAC;EAAE,cAAc,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC9CD,aAAI,CAACC,MAAM,CAAC;EAAE,WAAW,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAC3CD,aAAI,CAACC,MAAM,CAAC;EAAE,0BAA0B,EAAE,CAAC,KAAK;AAAE,CAAC,EAAE,IAAI,CAAC;AAE1D,IAAMC,oBAAoB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvCC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,+CAA+C;EACtDC,SAAS,EAAE,0CAA0C;EACrDC,eAAe,EAAE,0BAA0B;EAC3CC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,eAAe;EAC1BC,QAAQ,EAAE,QAAQ;EAClBC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE;IACLC,OAAO,EAAE,QAAQ;IACjBN,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAEF,IAAMO,aAAoE,GAAG,SAAvEA,aAAoE,CAAGC,KAAK,EAAI;EAClF,oBACI,6BAAC,oBAAoB,qBACjB,uDACI,6BAAC,2BAAkB,EAAKA,KAAK,CAAI,eACjC,6BAAC,qBAAY,EAAKA,KAAK,CAAI,CACzB,CACa;AAE/B,CAAC;AAAC,eAEaD,aAAa;AAAA"}
+{"version":3,"names":["mime","define","BottomInfoBarWrapper","styled","fontSize","position","bottom","height","color","borderTop","backgroundColor","width","transform","overflow","display","alignItems","zIndex","padding","BottomInfoBar","props"],"sources":["BottomInfoBar.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime/lite\";\nimport styled from \"@emotion/styled\";\nimport SupportedFileTypes, { SupportedFileTypesProps } from \"./BottomInfoBar/SupportedFileTypes\";\nimport UploadStatus, { UploadStatusProps } from \"./BottomInfoBar/UploadStatus\";\n\nmime.define({ \"image/x-icon\": [\"ico\"] }, true);\nmime.define({ \"image/jpg\": [\"jpg\"] }, true);\nmime.define({ \"image/vnd.microsoft.icon\": [\"ico\"] }, true);\n\nconst BottomInfoBarWrapper = styled(\"div\")({\n    fontSize: \"0.8rem\",\n    position: \"sticky\",\n    bottom: 0,\n    height: 30,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    width: \"100%\",\n    transform: \"translateZ(0)\",\n    overflow: \"hidden\",\n    display: \"flex\",\n    alignItems: \"center\",\n    zIndex: 1,\n    \"> div\": {\n        padding: \"0 10px\",\n        width: \"100%\"\n    }\n});\n\nconst BottomInfoBar: React.FC<SupportedFileTypesProps & UploadStatusProps> = props => {\n    return (\n        <BottomInfoBarWrapper>\n            <div>\n                <SupportedFileTypes {...props} />\n                <UploadStatus {...props} />\n            </div>\n        </BottomInfoBarWrapper>\n    );\n};\n\nexport default BottomInfoBar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEAA,aAAA,CAAKC,MAAL,CAAY;EAAE,gBAAgB,CAAC,KAAD;AAAlB,CAAZ,EAAyC,IAAzC;;AACAD,aAAA,CAAKC,MAAL,CAAY;EAAE,aAAa,CAAC,KAAD;AAAf,CAAZ,EAAsC,IAAtC;;AACAD,aAAA,CAAKC,MAAL,CAAY;EAAE,4BAA4B,CAAC,KAAD;AAA9B,CAAZ,EAAqD,IAArD;;AAEA,IAAMC,oBAAoB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvCC,QAAQ,EAAE,QAD6B;EAEvCC,QAAQ,EAAE,QAF6B;EAGvCC,MAAM,EAAE,CAH+B;EAIvCC,MAAM,EAAE,EAJ+B;EAKvCC,KAAK,EAAE,+CALgC;EAMvCC,SAAS,EAAE,0CAN4B;EAOvCC,eAAe,EAAE,0BAPsB;EAQvCC,KAAK,EAAE,MARgC;EASvCC,SAAS,EAAE,eAT4B;EAUvCC,QAAQ,EAAE,QAV6B;EAWvCC,OAAO,EAAE,MAX8B;EAYvCC,UAAU,EAAE,QAZ2B;EAavCC,MAAM,EAAE,CAb+B;EAcvC,SAAS;IACLC,OAAO,EAAE,QADJ;IAELN,KAAK,EAAE;EAFF;AAd8B,CAAjB,CAA1B;;AAoBA,IAAMO,aAAoE,GAAG,SAAvEA,aAAuE,CAAAC,KAAK,EAAI;EAClF,oBACI,6BAAC,oBAAD,qBACI,uDACI,6BAAC,2BAAD,EAAwBA,KAAxB,CADJ,eAEI,6BAAC,qBAAD,EAAkBA,KAAlB,CAFJ,CADJ,CADJ;AAQH,CATD;;eAWeD,a"}

package/components/FileManager/DropFilesHere.js

@@ -1,15 +1,22 @@
 "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,
@@ -47,11 +54,12 @@ var styles = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:styles;");
+
 var DropFilesHere = function DropFilesHere(_ref) {
   var onDrop = _ref.onDrop,
-    onDragLeave = _ref.onDragLeave,
-    empty = _ref.empty,
-    onClick = _ref.onClick;
+      onDragLeave = _ref.onDragLeave,
+      empty = _ref.empty,
+      onClick = _ref.onClick;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles, {
       empty: empty
@@ -63,5 +71,6 @@ var DropFilesHere = function DropFilesHere(_ref) {
     icon: /*#__PURE__*/_react.default.createElement(_roundCloud_upload24px.ReactComponent, null)
   }), /*#__PURE__*/_react.default.createElement("div", null, "Drop files here"))));
 };
+
 var _default = DropFilesHere;
 exports.default = _default;

package/components/FileManager/DropFilesHere.js.map

@@ -1 +1 @@
-{"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,YAAG,EAAC;EACfC,MAAM,EAAE,QAAQ;EAChBC,UAAU,EAAE,CAAC;EACbC,MAAM,EAAE,MAAM;EACdC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAE,UAAU;EACpBC,eAAe,EAAE,qCAAqC;EACtD,SAAS,EAAE;IACPA,eAAe,EAAE,aAAa;IAC9B,OAAO,EAAE;MACLA,eAAe,EAAE;IACrB;EACJ,CAAC;EACD,OAAO,EAAE;IACLC,SAAS,EAAE,QAAQ;IACnBH,KAAK,EAAE,GAAG;IACVF,MAAM,EAAE,GAAG;IACXI,eAAe,EAAE,6BAA6B;IAC9CE,YAAY,EAAE,KAAK;IACnBH,QAAQ,EAAE,UAAU;IACpBI,IAAI,EAAE,KAAK;IACXC,GAAG,EAAE,KAAK;IACVC,SAAS,EAAE,oCAAoC;IAC/C,OAAO,EAAE;MACLN,QAAQ,EAAE,UAAU;MACpBK,GAAG,EAAE,EAAE;MACPN,KAAK,EAAE,GAAG;MACVQ,KAAK,EAAE,6BAA6B;MACpC,sBAAsB,EAAE;QACpBR,KAAK,EAAE,GAAG;QACVS,OAAO,EAAE,cAAc;QACvBD,KAAK,EAAE;MACX;IACJ;EACJ;AACJ,CAAC,kBAAC;AASF,IAAME,aAA2C,GAAG,SAA9CA,aAA2C,OAAgD;EAAA,IAA1CC,MAAM,QAANA,MAAM;IAAEC,WAAW,QAAXA,WAAW;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;EACtF,oBACI;IACI,SAAS,EAAE,IAAAC,mBAAU,EAACrB,MAAM,EAAE;MAAEmB,KAAK,EAALA;IAAM,CAAC,CAAE;IACzC,MAAM,EAAEF,MAAO;IACf,OAAO,EAAEG,OAAQ;IACjB,WAAW,EAAEF;EAAY,gBAEzB,uDACI,uDACI,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,qCAAU;EAAI,EAAG,eAC9B,4DAA0B,CACxB,CACJ,CACJ;AAEd,CAAC;AAAC,eACaF,aAAa;AAAA"}
+{"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,23 +1,32 @@
 "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
-
 var COMPONENT_WIDTH = 200;
 var COMPONENT_HEIGHT = 200;
 var grow = /*#__PURE__*/(0, _emotion.keyframes)("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
@@ -94,12 +103,13 @@ var styles = /*#__PURE__*/(0, _emotion.css)({
     cursor: "auto"
   }
 }, "label:styles;");
+
 var File = function File(props) {
   var file = props.file,
-    selected = props.selected,
-    onSelect = props.onSelect,
-    children = props.children,
-    showFileDetails = props.showFileDetails;
+      selected = props.selected,
+      onSelect = props.onSelect,
+      children = props.children,
+      showFileDetails = props.showFileDetails;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles, {
       "disable-select": !onSelect
@@ -129,14 +139,17 @@ var File = function File(props) {
     onClick: onSelect
   }, file.name));
 };
+
 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) {
     return false;
   }
+
   return true;
 });
+
 MemoizedFile.displayName = "MemoizedFile";
 var _default = MemoizedFile;
 exports.default = _default;

package/components/FileManager/File.js.map

@@ -1 +1 @@
-{"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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"}
+{"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":";;;;;;;;;AAAA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAVA;AACA;AACA;AACA;AASA,IAAMA,eAAe,GAAG,GAAxB;AACA,IAAMC,gBAAgB,GAAG,GAAzB;AAEA,IAAMC,IAAI,oBAAGC,kBAAH,uFAAV;AAWA,IAAMC,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,OAAO,EAAE,cADM;EAEfC,KAAK,EAAE,MAFQ;EAGfC,QAAQ,EAAE,UAHK;EAIfC,MAAM,EAAE,CAJO;EAKfC,MAAM,EAAE,EALO;EAMfC,MAAM,EAAE,SANO;EAOfC,KAAK,EAAE,MAPQ;EAQfC,QAAQ,EAAEb,eARK;EASfc,MAAM,EAAE,0CATO;EAUfC,YAAY,EAAE,CAVC;EAWf,WAAW;IACPC,UAAU,EAAE,uBADL;IAEPJ,KAAK,EAAEZ,eAFA;IAGPiB,MAAM,EAAEhB,gBAHD;IAIPiB,QAAQ,EAAE,QAJH;IAKP,gBAAgB,gCALT;IAMP,gBAAgB;MACZC,KAAK,EAAE,4BADK;MAEZX,QAAQ,EAAE,UAFE;MAGZY,GAAG,EAAE,CAHO;MAIZC,IAAI,EAAE,CAJM;MAKZZ,MAAM,EAAE;IALI,CANT;IAaP,aAAa;MACTa,OAAO,EAAE,CADA;MAETd,QAAQ,EAAE,UAFD;MAGTY,GAAG,EAAE,CAHI;MAITG,KAAK,EAAE,CAJE;MAKTd,MAAM,EAAE,EALC;MAMTO,UAAU,EAAE,mBANH;MAOT,0BAA0B;QACtBG,KAAK,EAAE;MADe,CAPjB;MAUT,WAAW;QACPK,aAAa,EAAEtB,IADR;QAEPuB,iBAAiB,EAAE,KAFZ;QAGPC,uBAAuB,EAAE,SAHlB;QAIPC,cAAc,EAAE;MAJT;IAVF,CAbN;IA8BP,gBAAgB;MACZC,SAAS,EAAE,QADC;MAEZpB,QAAQ,EAAE,UAFE;MAGZqB,eAAe,EAAE,MAHL;MAIZjB,KAAK,EAAE,MAJK;MAKZK,MAAM,EAAE,MALI;MAMZ,kBAAkB;QACdT,QAAQ,EAAE,UADI;QAEdY,GAAG,EAAE,EAFS;QAGdC,IAAI,EAAE,CAHQ;QAIdT,KAAK,EAAE,MAJO;QAKdK,MAAM,EAAE,GALM;QAMdR,MAAM,EAAE;MANM;IANN,CA9BT;IA6CP,qBAAqB;MACjBa,OAAO,EAAE;IADQ;EA7Cd,CAXI;EA4Df,YAAY;IACRQ,OAAO,EAAE,WADD;IAERC,UAAU,EAAE,QAFJ;IAGRb,QAAQ,EAAE,QAHF;IAIRc,YAAY,EAAE,UAJN;IAKRC,QAAQ,EAAE,QALF;IAMRd,KAAK,EAAE,6BANC;IAORU,eAAe,EAAE;EAPT,CA5DG;EAqEf,oBAAoB;IAChBlB,MAAM,EAAE;EADQ;AArEL,CAAJ,kBAAf;;AAqFA,IAAMuB,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;EACvC,IAAQC,IAAR,GAAgED,KAAhE,CAAQC,IAAR;EAAA,IAAcC,QAAd,GAAgEF,KAAhE,CAAcE,QAAd;EAAA,IAAwBC,QAAxB,GAAgEH,KAAhE,CAAwBG,QAAxB;EAAA,IAAkCC,QAAlC,GAAgEJ,KAAhE,CAAkCI,QAAlC;EAAA,IAA4CC,eAA5C,GAAgEL,KAAhE,CAA4CK,eAA5C;EAEA,oBACI;IACI,SAAS,EAAE,IAAAC,mBAAA,EAAWrC,MAAX,EAAmB;MAAE,kBAAkB,CAACkC;IAArB,CAAnB,CADf;IAEI,eAAa;EAFjB,gBAII;IAAK,SAAS,EAAE;EAAhB,gBACI;IAAK,SAAS,EAAE,aAAhB;IAA+B,OAAO,EAAEA;EAAxC,GACKD,QAAQ,gBAAG,6BAAC,kCAAD,OAAH,GAAiB,IAD9B,CADJ,eAII;IAAK,SAAS,EAAE;EAAhB,gBACI,6BAAC,kBAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,OAAO,EAAEG,eAFb;IAGI,eAAa;EAHjB,EADJ,CAJJ,eAWI,6BAAC,sBAAD;IAAU,MAAM,EAAE,GAAlB;IAAuB,cAAc,EAAE;EAAvC,gBACI,6BAAC,cAAD,qBACI;IAAK,SAAS,EAAE;EAAhB,gBACI;IAAK,SAAS,EAAC,eAAf;IAA+B,OAAO,EAAEF;EAAxC,EADJ,EAEKC,QAFL,CADJ,CADJ,CAXJ,CAJJ,eAwBI;IAAK,SAAS,EAAE,OAAhB;IAAyB,OAAO,EAAED;EAAlC,GACKF,IAAI,CAACM,IADV,CAxBJ,CADJ;AA8BH,CAjCD;;AAmCA,IAAMC,YAAY,gBAAGC,cAAA,CAAMC,IAAN,CAAWX,IAAX,EAAiB,UAACY,IAAD,EAAOC,IAAP,EAAgB;EAClD,IAAID,IAAI,CAACT,QAAL,KAAkBU,IAAI,CAACV,QAA3B,EAAqC;IACjC,OAAO,KAAP;EACH,CAFD,MAEO,IAAIS,IAAI,CAACV,IAAL,CAAUM,IAAV,KAAmBK,IAAI,CAACX,IAAL,CAAUM,IAAjC,EAAuC;IAC1C,OAAO,KAAP;EACH;;EAED,OAAO,IAAP;AACH,CARoB,CAArB;;AAUAC,YAAY,CAACK,WAAb,GAA2B,cAA3B;eACeL,Y"}

package/components/FileManager/FileDetails/Name.js

@@ -1,32 +1,51 @@
 "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;
+      canEdit = _ref.canEdit;
   var name = file.name || "";
+
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
+      showSnackbar = _useSnackbar.showSnackbar;
+
   var client = (0, _reactHooks.useApolloClient)();
+
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-    queryParams = _useFileManager.queryParams;
+      queryParams = _useFileManager.queryParams;
+
   var editContent = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_form.Form, {
       data: {
@@ -40,11 +59,14 @@ var Name = function Name(_ref) {
               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({
@@ -61,6 +83,7 @@ var Name = function Name(_ref) {
                         query: _graphql.LIST_FILES,
                         variables: queryParams
                       }));
+
                       if (data) {
                         data.fileManager.listFiles.data.forEach(function (item) {
                           if (item.src === newFileData.src) {
@@ -68,6 +91,7 @@ var Name = function Name(_ref) {
                           }
                         });
                       }
+
                       cache.writeQuery({
                         query: _graphql.LIST_FILES,
                         variables: queryParams,
@@ -75,8 +99,10 @@ var Name = function Name(_ref) {
                       });
                     }
                   });
+
                 case 5:
                   showSnackbar("Name successfully updated.");
+
                 case 6:
                 case "end":
                   return _context.stop();
@@ -84,13 +110,14 @@ var Name = function Name(_ref) {
             }
           }, _callee);
         }));
+
         return function (_x) {
           return _ref3.apply(this, arguments);
         };
       }()
     }, function (_ref4) {
       var Bind = _ref4.Bind,
-        submit = _ref4.submit;
+          submit = _ref4.submit;
       return /*#__PURE__*/_react.default.createElement(Bind, {
         name: "name",
         validators: _validation.validation.create("required")
@@ -106,5 +133,6 @@ var Name = function Name(_ref) {
   }, [name, file.name, canEdit]);
   return /*#__PURE__*/_react.default.createElement("li-content", null, editContent);
 };
+
 var _default = Name;
 exports.default = _default;

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

@@ -1 +1 @@
-{"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 = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            ) as unknown as FileItem;\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,IAAyB,OAA0B;EAAA,IAApBC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EAC9C,IAAMC,IAAI,GAAGF,IAAI,CAACE,IAAI,IAAI,EAAE;EAC5B,mBAAyB,IAAAC,yBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,IAAMC,MAAM,GAAG,IAAAC,2BAAe,GAAE;EAEhC,sBAAwB,IAAAC,kCAAc,GAAE;IAAhCC,WAAW,mBAAXA,WAAW;EAEnB,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MACD,IAAI,EAAE;QACFR,IAAI,EAAJA;MACJ,CAAE;MACF,QAAQ;QAAA,mGAAE;UAAA;UAAA;YAAA;cAAA;gBAAA;kBAASA,IAAI,SAAJA,IAAI;kBAAA,MAEfA,IAAI,KAAKF,IAAI,CAACE,IAAI;oBAAA;oBAAA;kBAAA;kBAAA;gBAAA;kBAAA;kBAAA,OAIhBG,MAAM,CAACM,MAAM,CAA0D;oBACzEC,QAAQ,EAAEC,oBAAW;oBACrBC,SAAS,EAAE;sBACPC,EAAE,EAAEf,IAAI,CAACe,EAAE;sBACXC,IAAI,EAAE;wBAAEd,IAAI,EAAJA;sBAAK;oBACjB,CAAC;oBACDe,MAAM,EAAE,gBAACC,KAAK,EAAEC,OAAO,EAAK;sBACxB,IAAMC,WAAW,GAAG,mBAChBD,OAAO,EACP,kCAAkC,CACd;sBACxB,IAAMH,IAAI,GAAG,yBACTE,KAAK,CAACG,SAAS,CAAyB;wBACpCC,KAAK,EAAEC,mBAAU;wBACjBT,SAAS,EAAEN;sBACf,CAAC,CAAC,CACL;sBAED,IAAIQ,IAAI,EAAE;wBACNA,IAAI,CAACQ,WAAW,CAACC,SAAS,CAACT,IAAI,CAACU,OAAO,CAAC,UAAAC,IAAI,EAAI;0BAC5C,IAAIA,IAAI,CAACC,GAAG,KAAKR,WAAW,CAACQ,GAAG,EAAE;4BAC9BD,IAAI,CAACzB,IAAI,GAAGkB,WAAW,CAAClB,IAAI;0BAChC;wBACJ,CAAC,CAAC;sBACN;sBAEAgB,KAAK,CAACW,UAAU,CAAC;wBACbP,KAAK,EAAEC,mBAAU;wBACjBT,SAAS,EAAEN,WAAW;wBACtBQ,IAAI,EAAEA;sBACV,CAAC,CAAC;oBACN;kBACJ,CAAC,CAAC;gBAAA;kBAEFZ,YAAY,CAAC,4BAA4B,CAAC;gBAAC;gBAAA;kBAAA;cAAA;YAAA;UAAA;QAAA,CAC9C;QAAA;UAAA;QAAA;MAAA;IAAC,GAED;MAAA,IAAG0B,IAAI,SAAJA,IAAI;QAAEC,MAAM,SAANA,MAAM;MAAA,oBACZ,6BAAC,IAAI;QAAC,IAAI,EAAE,MAAO;QAAC,UAAU,EAAEC,sBAAU,CAACC,MAAM,CAAC,UAAU;MAAE,gBAC1D,6BAAC,YAAK;QACF,QAAQ,EAAE,CAAChC,OAAO,CAACD,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAE+B,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAAC7B,IAAI,EAAEF,IAAI,CAACE,IAAI,EAAED,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaQ,WAAW,CAAc;AACjD,CAAC;AAAC,eAEaV,IAAI;AAAA"}
+{"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 = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            ) as unknown as FileItem;\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,WAAW,GAAG,mBAChBD,OADgB,EAEhB,kCAFgB,CAApB;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"}

package/components/FileManager/FileDetails/Tags.js

@@ -1,42 +1,71 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tagWithoutScopePrefix = exports.formatTagAsLabel = exports.default = void 0;
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _emotion = require("emotion");
+
 var _reactHooks = require("@apollo/react-hooks");
+
 var _set = _interopRequireDefault(require("lodash/set"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
+
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _Chips = require("@webiny/ui/Chips");
+
 var _Button = require("@webiny/ui/Button");
+
 var _AutoComplete = require("@webiny/ui/AutoComplete");
+
 var _Icon = require("@webiny/ui/Icon");
+
 var _form = require("@webiny/form");
+
 var _useSnackbar2 = require("../../../hooks/useSnackbar");
+
 var _FileManagerContext = require("./../FileManagerContext");
+
 var _graphql = require("./../graphql");
+
 var _roundEdit24px = require("./../icons/round-edit-24px.svg");
+
 var _roundLabel24px = require("./../icons/round-label-24px.svg");
+
 var _excluded = ["value"];
 var SCOPE_SEPARATOR = ":";
+
 var formatTagAsLabel = function formatTagAsLabel(tag, scope) {
   if (!scope) {
     return tag;
   }
+
   return tag.replace("".concat(scope).concat(SCOPE_SEPARATOR), "");
 };
+
 exports.formatTagAsLabel = formatTagAsLabel;
+
 var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
   return tags.filter(function (tag) {
     return tag !== scope;
@@ -44,6 +73,7 @@ var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
     return formatTagAsLabel(tag, scope);
   });
 };
+
 exports.tagWithoutScopePrefix = tagWithoutScopePrefix;
 var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-chip-set": {
@@ -74,26 +104,33 @@ var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
     marginRight: 16
   }
 }, "label:actionWrapperStyle;");
+
 var Tags = function Tags(_ref) {
   var file = _ref.file,
-    canEdit = _ref.canEdit;
+      canEdit = _ref.canEdit;
   var client = (0, _reactHooks.useApolloClient)();
+
   var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    editing = _useState2[0],
-    setEdit = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editing = _useState2[0],
+      setEdit = _useState2[1];
+
   var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    saving = _useState4[0],
-    setSaving = _useState4[1];
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      saving = _useState4[0],
+      setSaving = _useState4[1];
+
   var _useState5 = (0, _react.useState)(Array.isArray(file.tags) ? (0, _toConsumableArray2.default)(file.tags) : []),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    initialTags = _useState6[0],
-    setInitialTags = _useState6[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      initialTags = _useState6[0],
+      setInitialTags = _useState6[1];
+
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
+      showSnackbar = _useSnackbar.showSnackbar;
+
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-    queryParams = _useFileManager.queryParams;
+      queryParams = _useFileManager.queryParams;
+
   var handleEdit = (0, _react.useCallback)(function () {
     return setEdit(true);
   }, []);
@@ -107,10 +144,13 @@ var Tags = function Tags(_ref) {
   var isEditingAllowed = canEdit(file);
   var renderHeaderContent = (0, _react.useCallback)(function (_ref2) {
     var data = _ref2.data;
+
     if (editing) {
       return null;
     }
+
     var hasTags = data.tags.length > 0;
+
     if (hasTags) {
       // Render existing tags and "edit tags" action.
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
@@ -128,8 +168,9 @@ var Tags = function Tags(_ref) {
         icon: /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null),
         onClick: handleEdit
       }));
-    }
-    // Render "add tags" action.
+    } // Render "add tags" action.
+
+
     return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
       className: addTagsStyle,
       onClick: handleEdit,
@@ -159,13 +200,13 @@ var Tags = function Tags(_ref) {
                     }
                   },
                   update: function update(cache, updated) {
-                    var newFileData = (0, _get.default)(updated, "data.fileManager.updateFile.data");
+                    var newFileData = (0, _get.default)(updated, "data.fileManager.updateFile.data"); // 1. Update files list cache
 
-                    // 1. Update files list cache
                     var data = (0, _cloneDeep.default)(cache.readQuery({
                       query: _graphql.LIST_FILES,
                       variables: queryParams
                     }));
+
                     if (data) {
                       data.fileManager.listFiles.data.forEach(function (item) {
                         if (item.key === newFileData.key) {
@@ -173,12 +214,13 @@ var Tags = function Tags(_ref) {
                         }
                       });
                     }
+
                     cache.writeQuery({
                       query: _graphql.LIST_FILES,
                       variables: queryParams,
                       data: data
-                    });
-                    // 2. Update "LIST_TAGS" cache
+                    }); // 2. Update "LIST_TAGS" cache
+
                     if (Array.isArray(newFileData.tags)) {
                       // Get list tags data
                       var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
@@ -187,11 +229,14 @@ var Tags = function Tags(_ref) {
                           where: (0, _FileManagerContext.getWhere)(queryParams.scope)
                         }
                       }));
+
                       if (!listTagsData) {
                         return;
-                      }
-                      // Add new tag in list
+                      } // Add new tag in list
+
+
                       var updatedTagsList = (0, _toConsumableArray2.default)(newFileData.tags);
+
                       if (Array.isArray(listTagsData.fileManager.listTags)) {
                         listTagsData.fileManager.listTags.forEach(function (tag) {
                           if (!updatedTagsList.includes(tag)) {
@@ -199,8 +244,9 @@ var Tags = function Tags(_ref) {
                           }
                         });
                       }
-                      (0, _set.default)(listTagsData, "fileManager.listTags", updatedTagsList);
-                      // Write it to cache
+
+                      (0, _set.default)(listTagsData, "fileManager.listTags", updatedTagsList); // Write it to cache
+
                       cache.writeQuery({
                         query: _graphql.LIST_TAGS,
                         variables: {
@@ -216,6 +262,7 @@ var Tags = function Tags(_ref) {
                   setEdit(false);
                   showSnackbar("Tags successfully updated.");
                 });
+
               case 3:
               case "end":
                 return _context.stop();
@@ -223,15 +270,16 @@ var Tags = function Tags(_ref) {
           }
         }, _callee);
       }));
+
       return function (_x) {
         return _ref4.apply(this, arguments);
       };
     }()
   }, function (_ref5) {
     var Bind = _ref5.Bind,
-      data = _ref5.data,
-      setValue = _ref5.setValue,
-      submit = _ref5.submit;
+        data = _ref5.data,
+        setValue = _ref5.setValue,
+        submit = _ref5.submit;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       className: "list-item__icon",
       icon: /*#__PURE__*/_react.default.createElement(_roundLabel24px.ReactComponent, null)
@@ -247,16 +295,18 @@ var Tags = function Tags(_ref) {
           /**
            * If "scope" exists, prefix tag with "scope" if not already.
            */
+
           if (queryParams.scope && !tagInLowerCase.startsWith(queryParams.scope)) {
             return "".concat(queryParams.scope).concat(SCOPE_SEPARATOR).concat(tagInLowerCase);
           }
+
           return tagInLowerCase;
         });
         baseOnChange(formattedTags);
       }
     }, function (_ref6) {
       var value = _ref6.value,
-        bindProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+          bindProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
       return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bindProps, {
         value: tagWithoutScopePrefix(value, queryParams.scope),
         options: allTags,
@@ -284,5 +334,6 @@ var Tags = function Tags(_ref) {
     }, "Cancel"))));
   });
 };
+
 var _default = Tags;
 exports.default = _default;