@webiny/app-admin 0.0.0-unstable.e3f4727c56 → 0.0.0-unstable.ecd8734205

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/components/FileManager/File.d.ts +2 -2
  2. package/components/FileManager/File.js.map +1 -1
  3. package/components/FileManager/FileDetails/Aliases.d.ts +3 -0
  4. package/components/FileManager/FileDetails/Aliases.js +244 -0
  5. package/components/FileManager/FileDetails/Aliases.js.map +1 -0
  6. package/components/FileManager/FileDetails/FileProvider.d.ts +15 -0
  7. package/components/FileManager/FileDetails/FileProvider.js +30 -0
  8. package/components/FileManager/FileDetails/FileProvider.js.map +1 -0
  9. package/components/FileManager/FileDetails/Name.js +50 -57
  10. package/components/FileManager/FileDetails/Name.js.map +1 -1
  11. package/components/FileManager/FileDetails/Tags.js +86 -101
  12. package/components/FileManager/FileDetails/Tags.js.map +1 -1
  13. package/components/FileManager/FileDetails/useUpdateFile.d.ts +8 -0
  14. package/components/FileManager/FileDetails/useUpdateFile.js +56 -0
  15. package/components/FileManager/FileDetails/useUpdateFile.js.map +1 -0
  16. package/components/FileManager/FileDetails.d.ts +1 -1
  17. package/components/FileManager/FileDetails.js +11 -13
  18. package/components/FileManager/FileDetails.js.map +1 -1
  19. package/components/FileManager/FileManagerView.js.map +1 -1
  20. package/components/FileManager/graphql.js +3 -3
  21. package/components/FileManager/graphql.js.map +1 -1
  22. package/components/FileManager/types.d.ts +1 -0
  23. package/components/FileManager/types.js.map +1 -1
  24. package/package.json +16 -15
  25. package/plugins/FileManagerFileTypePlugin.d.ts +2 -15
  26. package/plugins/FileManagerFileTypePlugin.js.map +1 -1
  27. package/types.d.ts +2 -21
  28. package/types.js.map +1 -1
@@ -1,9 +1,9 @@
1
- /// <reference types="react-butterfiles" />
2
1
  import React from "react";
2
+ import { FileItem } from "./types";
3
3
  export interface FileProps {
4
4
  file: FileItem;
5
5
  selected: boolean;
6
- uploadFile: (item: FileItem[] | FileItem) => Promise<number | null>;
6
+ uploadFile: (item: FileItem | FileItem[]) => Promise<number | null>;
7
7
  onSelect: (event?: React.MouseEvent) => void;
8
8
  onClick?: (event?: React.MouseEvent) => void;
9
9
  options?: Array<{
@@ -1 +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":";;;;;;;AAAA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AACA;AACA;AACA;;AASA,IAAMA,eAAe,GAAG,GAAG;AAC3B,IAAMC,gBAAgB,GAAG,GAAG;AAE5B,IAAMC,IAAI,oBAAGC,kBAAS,uFAUrB;AACD,IAAMC,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,OAAO,EAAE,cAAc;EACvBC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE,SAAS;EACjBC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAEb,eAAe;EACzBc,MAAM,EAAE,0CAA0C;EAClDC,YAAY,EAAE,CAAC;EACf,SAAS,EAAE;IACPC,UAAU,EAAE,uBAAuB;IACnCJ,KAAK,EAAEZ,eAAe;IACtBiB,MAAM,EAAEhB,gBAAgB;IACxBiB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,gCAAgC;IAChD,cAAc,EAAE;MACZC,KAAK,EAAE,4BAA4B;MACnCX,QAAQ,EAAE,UAAU;MACpBY,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPZ,MAAM,EAAE;IACZ,CAAC;IACD,WAAW,EAAE;MACTa,OAAO,EAAE,CAAC;MACVd,QAAQ,EAAE,UAAU;MACpBY,GAAG,EAAE,CAAC;MACNG,KAAK,EAAE,CAAC;MACRd,MAAM,EAAE,EAAE;MACVO,UAAU,EAAE,mBAAmB;MAC/B,wBAAwB,EAAE;QACtBG,KAAK,EAAE;MACX,CAAC;MACD,SAAS,EAAE;QACPK,aAAa,EAAEtB,IAAI;QACnBuB,iBAAiB,EAAE,KAAK;QACxBC,uBAAuB,EAAE,SAAS;QAClCC,cAAc,EAAE;MACpB;IACJ,CAAC;IACD,cAAc,EAAE;MACZC,SAAS,EAAE,QAAQ;MACnBpB,QAAQ,EAAE,UAAU;MACpBqB,eAAe,EAAE,MAAM;MACvBjB,KAAK,EAAE,MAAM;MACbK,MAAM,EAAE,MAAM;MACd,gBAAgB,EAAE;QACdT,QAAQ,EAAE,UAAU;QACpBY,GAAG,EAAE,EAAE;QACPC,IAAI,EAAE,CAAC;QACPT,KAAK,EAAE,MAAM;QACbK,MAAM,EAAE,GAAG;QACXR,MAAM,EAAE;MACZ;IACJ,CAAC;IACD,mBAAmB,EAAE;MACjBa,OAAO,EAAE;IACb;EACJ,CAAC;EACD,UAAU,EAAE;IACRQ,OAAO,EAAE,WAAW;IACpBC,UAAU,EAAE,QAAQ;IACpBb,QAAQ,EAAE,QAAQ;IAClBc,YAAY,EAAE,UAAU;IACxBC,QAAQ,EAAE,QAAQ;IAClBd,KAAK,EAAE,6BAA6B;IACpCU,eAAe,EAAE;EACrB,CAAC;EACD,kBAAkB,EAAE;IAChBlB,MAAM,EAAE;EACZ;AACJ,CAAC,kBAAC;AAaF,IAAMuB,IAAyB,GAAG,SAA5BA,IAAyB,CAAGC,KAAK,EAAI;EACvC,IAAQC,IAAI,GAAoDD,KAAK,CAA7DC,IAAI;IAAEC,QAAQ,GAA0CF,KAAK,CAAvDE,QAAQ;IAAEC,QAAQ,GAAgCH,KAAK,CAA7CG,QAAQ;IAAEC,QAAQ,GAAsBJ,KAAK,CAAnCI,QAAQ;IAAEC,eAAe,GAAKL,KAAK,CAAzBK,eAAe;EAE3D,oBACI;IACI,SAAS,EAAE,IAAAC,mBAAU,EAACrC,MAAM,EAAE;MAAE,gBAAgB,EAAE,CAACkC;IAAS,CAAC,CAAE;IAC/D,eAAa;EAAuB,gBAEpC;IAAK,SAAS,EAAE;EAAO,gBACnB;IAAK,SAAS,EAAE,aAAc;IAAC,OAAO,EAAEA;EAAS,GAC5CD,QAAQ,gBAAG,6BAAC,kCAAO,OAAG,GAAG,IAAI,CAC5B,eACN;IAAK,SAAS,EAAE;EAAW,gBACvB,6BAAC,kBAAU;IACP,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,OAAO,EAAEG,eAAgB;IACzB,eAAa;EAAiC,EAChD,CACA,eACN,6BAAC,sBAAQ;IAAC,MAAM,EAAE,GAAI;IAAC,cAAc,EAAE;EAAI,gBACvC,6BAAC,cAAM,qBACH;IAAK,SAAS,EAAE;EAAc,gBAC1B;IAAK,SAAS,EAAC,eAAe;IAAC,OAAO,EAAEF;EAAS,EAAG,EACnDC,QAAQ,CACP,CACD,CACF,CACT,eACN;IAAK,SAAS,EAAE,OAAQ;IAAC,OAAO,EAAED;EAAS,GACtCF,IAAI,CAACM,IAAI,CACR,CACJ;AAEd,CAAC;AAED,IAAMC,YAAY,gBAAGC,cAAK,CAACC,IAAI,CAACX,IAAI,EAAE,UAACY,IAAI,EAAEC,IAAI,EAAK;EAClD,IAAID,IAAI,CAACT,QAAQ,KAAKU,IAAI,CAACV,QAAQ,EAAE;IACjC,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIS,IAAI,CAACV,IAAI,CAACM,IAAI,KAAKK,IAAI,CAACX,IAAI,CAACM,IAAI,EAAE;IAC1C,OAAO,KAAK;EAChB;EAEA,OAAO,IAAI;AACf,CAAC,CAAC;AAEFC,YAAY,CAACK,WAAW,GAAG,cAAc;AAAC,eAC3BL,YAAY;AAAA"}
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\";\nimport { FileItem } from \"~/components/FileManager/types\";\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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"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const AliasEditor: () => JSX.Element;
3
+ export declare const Aliases: () => JSX.Element;
@@ -0,0 +1,244 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Aliases = exports.AliasEditor = void 0;
9
+ var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
10
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+ var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _DynamicFieldset = require("@webiny/ui/DynamicFieldset");
16
+ var _Input = require("@webiny/ui/Input");
17
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
18
+ var _Typography = require("@webiny/ui/Typography");
19
+ var _Button = require("@webiny/ui/Button");
20
+ var _validation = require("@webiny/validation");
21
+ var _form = require("@webiny/form");
22
+ var _Icon = require("@webiny/ui/Icon");
23
+ var _link = require("@material-design-icons/svg/filled/link.svg");
24
+ var _edit = require("@material-design-icons/svg/filled/edit.svg");
25
+ var _delete = require("@material-design-icons/svg/filled/delete.svg");
26
+ var _FileProvider = require("./FileProvider");
27
+ var _useUpdateFile2 = require("./useUpdateFile");
28
+ var _graphql = require("../graphql");
29
+ var _FileManagerContext = require("../FileManagerContext");
30
+ var _useSnackbar2 = require("../../../hooks/useSnackbar");
31
+ var Fieldset = /*#__PURE__*/(0, _styled.default)("div", {
32
+ target: "erkxevw0",
33
+ label: "Fieldset"
34
+ })({
35
+ position: "relative",
36
+ width: "100%",
37
+ marginBottom: 15,
38
+ ".webiny-ui-button": {
39
+ position: "absolute",
40
+ display: "block",
41
+ right: 10,
42
+ top: 13
43
+ }
44
+ });
45
+ var Header = /*#__PURE__*/(0, _styled.default)("div", {
46
+ target: "erkxevw1",
47
+ label: "Header"
48
+ })({
49
+ display: "flex",
50
+ justifyContent: "space-between",
51
+ marginBottom: 15
52
+ });
53
+ var DeleteAliasButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
54
+ label: "DeleteAliasButton",
55
+ target: "erkxevw2"
56
+ })("position:absolute;top:5px;right:5px;");
57
+ var AliasList = /*#__PURE__*/(0, _styled.default)("ul", {
58
+ label: "AliasList",
59
+ target: "erkxevw3"
60
+ })("padding-left:48px;li{padding:0;}");
61
+ var PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-]+$/;
62
+ var AliasEditor = function AliasEditor() {
63
+ var _useBind = (0, _form.useBind)({
64
+ name: "aliases"
65
+ }),
66
+ value = _useBind.value,
67
+ onChange = _useBind.onChange;
68
+ var addAlias = function addAlias() {
69
+ var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
70
+ newValue.push("");
71
+ if (!onChange) {
72
+ return;
73
+ }
74
+ onChange(newValue);
75
+ };
76
+ var aliasValidator = (0, _react.useMemo)(function () {
77
+ return [_validation.validation.create("required"), function (value) {
78
+ if (!PATHNAME_REGEX.test(value)) {
79
+ throw new Error("Value must be a valid pathname.");
80
+ }
81
+ }];
82
+ }, []);
83
+ return /*#__PURE__*/_react.default.createElement(_DynamicFieldset.DynamicFieldset, {
84
+ value: value || [""],
85
+ onChange: onChange
86
+ }, function (_ref) {
87
+ var actions = _ref.actions,
88
+ header = _ref.header,
89
+ row = _ref.row,
90
+ empty = _ref.empty;
91
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row(function (_ref2) {
92
+ var index = _ref2.index;
93
+ return /*#__PURE__*/_react.default.createElement(Fieldset, null, /*#__PURE__*/_react.default.createElement(_form.Bind, {
94
+ validators: aliasValidator,
95
+ name: "aliases.".concat(index)
96
+ }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
97
+ placeholder: "Alias",
98
+ description: "Enter a file path, e.g., /my/custom/file/path.png"
99
+ })), /*#__PURE__*/_react.default.createElement(DeleteAliasButton, {
100
+ icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null),
101
+ onClick: actions.remove(index)
102
+ }));
103
+ }), empty(function () {
104
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
105
+ use: "overline"
106
+ }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
107
+ onClick: addAlias
108
+ }, "+ Add Alias")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
109
+ use: "body2"
110
+ }, "To make your file accessible via custom paths, add one or more aliases."));
111
+ }), header(function () {
112
+ return /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
113
+ use: "overline"
114
+ }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
115
+ onClick: addAlias
116
+ }, "+ Add Alias"));
117
+ }));
118
+ });
119
+ };
120
+ exports.AliasEditor = AliasEditor;
121
+ var EditButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
122
+ label: "EditButton",
123
+ target: "erkxevw4"
124
+ })("&.mdc-icon-button svg{width:20px;height:20px;}");
125
+ var EmptyAddAlias = /*#__PURE__*/(0, _styled.default)(_Button.ButtonDefault, {
126
+ label: "EmptyAddAlias",
127
+ target: "erkxevw5"
128
+ })("&.mdc-button:not(:disabled){color:var(--mdc-theme-text-secondary-on-background);text-transform:capitalize;letter-spacing:initial;margin-left:-8px;}");
129
+ var ButtonsWrapper = /*#__PURE__*/(0, _styled.default)("div", {
130
+ label: "ButtonsWrapper",
131
+ target: "erkxevw6"
132
+ })("margin-top:16px;& button:first-child{margin-right:16px;}");
133
+ var Aliases = function Aliases() {
134
+ var _useFileManager = (0, _FileManagerContext.useFileManager)(),
135
+ queryParams = _useFileManager.queryParams;
136
+ var _useFile = (0, _FileProvider.useFile)(),
137
+ file = _useFile.file,
138
+ isEditingAllowed = _useFile.isEditingAllowed;
139
+ var _useUpdateFile = (0, _useUpdateFile2.useUpdateFile)(file),
140
+ updateFile = _useUpdateFile.updateFile,
141
+ updateInProgress = _useUpdateFile.updateInProgress;
142
+ var _useState = (0, _react.useState)(false),
143
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
144
+ isEditing = _useState2[0],
145
+ setIsEditing = _useState2[1];
146
+ var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
147
+ showSnackbar = _useSnackbar.showSnackbar;
148
+ var getUrlWithAlias = function getUrlWithAlias(alias) {
149
+ var url = new URL(file.src);
150
+ url.pathname = alias;
151
+ return url.toString();
152
+ };
153
+ var onEdit = function onEdit() {
154
+ return setIsEditing(true);
155
+ };
156
+ var cancelEdit = function cancelEdit() {
157
+ return setIsEditing(false);
158
+ };
159
+ var onSubmit = /*#__PURE__*/function () {
160
+ var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
161
+ var aliases;
162
+ return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
163
+ while (1) switch (_context.prev = _context.next) {
164
+ case 0:
165
+ aliases = _ref3.aliases;
166
+ _context.next = 3;
167
+ return updateFile({
168
+ aliases: aliases
169
+ }, function (cache) {
170
+ var data = (0, _cloneDeep2.default)(cache.readQuery({
171
+ query: _graphql.LIST_FILES,
172
+ variables: queryParams
173
+ }));
174
+ if (data) {
175
+ data.fileManager.listFiles.data.forEach(function (item) {
176
+ if (item.id === file.id) {
177
+ item.aliases = aliases;
178
+ }
179
+ });
180
+ }
181
+ cache.writeQuery({
182
+ query: _graphql.LIST_FILES,
183
+ variables: queryParams,
184
+ data: data
185
+ });
186
+ });
187
+ case 3:
188
+ setIsEditing(false);
189
+ showSnackbar("Aliases successfully updated.");
190
+ case 5:
191
+ case "end":
192
+ return _context.stop();
193
+ }
194
+ }, _callee);
195
+ }));
196
+ return function onSubmit(_x) {
197
+ return _ref4.apply(this, arguments);
198
+ };
199
+ }();
200
+ var aliases = file.aliases || [];
201
+ return /*#__PURE__*/_react.default.createElement(_form.Form, {
202
+ // An empty string immediately creates an input, for better UX.
203
+ data: {
204
+ aliases: aliases.length ? aliases : [""]
205
+ },
206
+ onSubmit: onSubmit
207
+ }, function (_ref5) {
208
+ var submit = _ref5.submit;
209
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
210
+ className: "list-item__icon",
211
+ icon: /*#__PURE__*/_react.default.createElement(_link.ReactComponent, null)
212
+ }), aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
213
+ use: "subtitle1",
214
+ className: "list-item__content"
215
+ }, "File aliases") : null, !aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(EmptyAddAlias, {
216
+ onClick: onEdit,
217
+ disabled: !isEditingAllowed,
218
+ "data-testid": "fm.alias.add"
219
+ }, "Add aliases...") : null, isEditingAllowed && aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(EditButton, {
220
+ icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
221
+ onClick: onEdit
222
+ }) : null), isEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AliasEditor, null), /*#__PURE__*/_react.default.createElement(ButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
223
+ small: true,
224
+ onClick: submit,
225
+ disabled: updateInProgress,
226
+ "data-testid": "fm.aliases.submit"
227
+ }, updateInProgress ? "Saving..." : "Save changes"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
228
+ small: true,
229
+ onClick: cancelEdit
230
+ }, "Cancel"))) : /*#__PURE__*/_react.default.createElement(AliasList, null, aliases.map(function (alias) {
231
+ return /*#__PURE__*/_react.default.createElement("li", {
232
+ key: alias
233
+ }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
234
+ use: "subtitle1",
235
+ className: "list-item__content"
236
+ }, "-", " ", /*#__PURE__*/_react.default.createElement("a", {
237
+ rel: "noreferrer",
238
+ href: getUrlWithAlias(alias),
239
+ target: "_blank"
240
+ }, alias)));
241
+ })));
242
+ });
243
+ };
244
+ exports.Aliases = Aliases;
@@ -0,0 +1 @@
1
+ {"version":3,"names":["Fieldset","styled","position","width","marginBottom","display","right","top","Header","justifyContent","DeleteAliasButton","IconButton","AliasList","PATHNAME_REGEX","AliasEditor","useBind","name","value","onChange","addAlias","newValue","Array","isArray","push","aliasValidator","useMemo","validation","create","test","Error","actions","header","row","empty","index","remove","EditButton","EmptyAddAlias","ButtonDefault","ButtonsWrapper","Aliases","useFileManager","queryParams","useFile","file","isEditingAllowed","useUpdateFile","updateFile","updateInProgress","useState","isEditing","setIsEditing","useSnackbar","showSnackbar","getUrlWithAlias","alias","url","URL","src","pathname","toString","onEdit","cancelEdit","onSubmit","aliases","cache","data","readQuery","query","LIST_FILES","variables","fileManager","listFiles","forEach","item","id","writeQuery","length","submit","map"],"sources":["Aliases.tsx"],"sourcesContent":["import React, { Fragment, useMemo, useState } from \"react\";\nimport { cloneDeep } from \"lodash\";\n\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Input } from \"@webiny/ui/Input\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonSecondary, ButtonDefault, IconButton, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { validation } from \"@webiny/validation\";\nimport { Form, Bind, FormOnSubmit, useBind } from \"@webiny/form\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { ReactComponent as LinkIcon } from \"@material-design-icons/svg/filled/link.svg\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/filled/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/filled/delete.svg\";\nimport { useFile } from \"~/components/FileManager/FileDetails/FileProvider\";\nimport { useUpdateFile } from \"~/components/FileManager/FileDetails/useUpdateFile\";\nimport { LIST_FILES, ListFilesQueryResponse } from \"~/components/FileManager/graphql\";\nimport { useFileManager } from \"~/components/FileManager/FileManagerContext\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\n\nconst Fieldset = styled(\"div\")({\n position: \"relative\",\n width: \"100%\",\n marginBottom: 15,\n \".webiny-ui-button\": {\n position: \"absolute\",\n display: \"block\",\n right: 10,\n top: 13\n }\n});\n\nconst Header = styled(\"div\")({\n display: \"flex\",\n justifyContent: \"space-between\",\n marginBottom: 15\n});\n\nconst DeleteAliasButton = styled(IconButton)`\n position: absolute;\n top: 5px;\n right: 5px;\n`;\n\nconst AliasList = styled.ul`\n padding-left: 48px;\n li {\n padding: 0;\n }\n`;\n\nconst PATHNAME_REGEX = /^\\/[/.a-zA-Z0-9-]+$/;\n\nexport const AliasEditor = () => {\n const { value, onChange } = useBind<string[]>({ name: \"aliases\" });\n\n const addAlias = () => {\n const newValue = Array.isArray(value) ? [...value] : [];\n newValue.push(\"\");\n if (!onChange) {\n return;\n }\n onChange(newValue);\n };\n\n const aliasValidator = useMemo(() => {\n return [\n validation.create(\"required\"),\n (value: string) => {\n if (!PATHNAME_REGEX.test(value)) {\n throw new Error(\"Value must be a valid pathname.\");\n }\n }\n ];\n }, []);\n\n return (\n <DynamicFieldset value={value || [\"\"]} onChange={onChange}>\n {({ actions, header, row, empty }) => (\n <>\n {row(({ index }) => (\n <Fieldset>\n <Bind validators={aliasValidator} name={`aliases.${index}`}>\n <Input\n placeholder={\"Alias\"}\n description={\n \"Enter a file path, e.g., /my/custom/file/path.png\"\n }\n />\n </Bind>\n <DeleteAliasButton\n icon={<DeleteIcon />}\n onClick={actions.remove(index)}\n />\n </Fieldset>\n ))}\n {empty(() => (\n <Fragment>\n <Header>\n <Typography use={\"overline\"}>File Aliases</Typography>\n <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n </Header>\n <Typography use={\"body2\"}>\n To make your file accessible via custom paths, add one or more\n aliases.\n </Typography>\n </Fragment>\n ))}\n {header(() => (\n <Header>\n <Typography use={\"overline\"}>File Aliases</Typography>\n <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n </Header>\n ))}\n </>\n )}\n </DynamicFieldset>\n );\n};\n\nconst EditButton = styled(IconButton)`\n &.mdc-icon-button svg {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst EmptyAddAlias = styled(ButtonDefault)`\n &.mdc-button:not(:disabled) {\n color: var(--mdc-theme-text-secondary-on-background);\n text-transform: capitalize;\n letter-spacing: initial;\n margin-left: -8px;\n }\n`;\n\nconst ButtonsWrapper = styled.div`\n margin-top: 16px;\n & button:first-child {\n margin-right: 16px;\n }\n`;\n\ninterface AliasesFormData {\n aliases: string[];\n}\n\nexport const Aliases = () => {\n const { queryParams } = useFileManager();\n const { file, isEditingAllowed } = useFile();\n const { updateFile, updateInProgress } = useUpdateFile(file);\n const [isEditing, setIsEditing] = useState(false);\n const { showSnackbar } = useSnackbar();\n\n const getUrlWithAlias = (alias: string) => {\n const url = new URL(file.src);\n url.pathname = alias;\n return url.toString();\n };\n\n const onEdit = () => setIsEditing(true);\n const cancelEdit = () => setIsEditing(false);\n const onSubmit: FormOnSubmit<AliasesFormData> = async ({ aliases }) => {\n await updateFile({ aliases }, cache => {\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.id === file.id) {\n item.aliases = aliases;\n }\n });\n }\n\n cache.writeQuery({\n query: LIST_FILES,\n variables: queryParams,\n data: data\n });\n });\n\n setIsEditing(false);\n showSnackbar(\"Aliases successfully updated.\");\n };\n\n const aliases = file.aliases || [];\n\n return (\n <Form<AliasesFormData>\n // An empty string immediately creates an input, for better UX.\n data={{ aliases: aliases.length ? aliases : [\"\"] }}\n onSubmit={onSubmit}\n >\n {({ submit }) => (\n <>\n <li-title>\n <Icon className={\"list-item__icon\"} icon={<LinkIcon />} />\n {aliases.length && !isEditing ? (\n <Typography use={\"subtitle1\"} className={\"list-item__content\"}>\n File aliases\n </Typography>\n ) : null}\n {!aliases.length && !isEditing ? (\n <EmptyAddAlias\n onClick={onEdit}\n disabled={!isEditingAllowed}\n data-testid=\"fm.alias.add\"\n >\n Add aliases...\n </EmptyAddAlias>\n ) : null}\n\n {isEditingAllowed && aliases.length && !isEditing ? (\n <EditButton icon={<EditIcon />} onClick={onEdit} />\n ) : null}\n </li-title>\n {isEditing ? (\n <>\n <AliasEditor />\n <ButtonsWrapper>\n <ButtonPrimary\n small\n onClick={submit}\n disabled={updateInProgress}\n data-testid={\"fm.aliases.submit\"}\n >\n {updateInProgress ? \"Saving...\" : \"Save changes\"}\n </ButtonPrimary>\n <ButtonSecondary small onClick={cancelEdit}>\n Cancel\n </ButtonSecondary>\n </ButtonsWrapper>\n </>\n ) : (\n <AliasList>\n {aliases.map(alias => (\n <li key={alias}>\n <Typography use={\"subtitle1\"} className={\"list-item__content\"}>\n -{\" \"}\n <a\n rel=\"noreferrer\"\n href={getUrlWithAlias(alias)}\n target={\"_blank\"}\n >\n {alias}\n </a>\n </Typography>\n </li>\n ))}\n </AliasList>\n )}\n </>\n )}\n </Form>\n );\n};\n"],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ import { FileItem } from "../types";
3
+ import { FileDetailsProps } from "../FileDetails";
4
+ export interface FileContext {
5
+ file: FileItem;
6
+ isEditingAllowed: boolean;
7
+ }
8
+ interface FileProviderProps {
9
+ file: FileItem;
10
+ canEdit: FileDetailsProps["canEdit"];
11
+ children: React.ReactNode;
12
+ }
13
+ export declare const FileProvider: ({ file, canEdit, children }: FileProviderProps) => JSX.Element;
14
+ export declare const useFile: () => FileContext;
15
+ export {};
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useFile = exports.FileProvider = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var FileContext = /*#__PURE__*/(0, _react.createContext)(undefined);
10
+ var FileProvider = function FileProvider(_ref) {
11
+ var file = _ref.file,
12
+ canEdit = _ref.canEdit,
13
+ children = _ref.children;
14
+ var value = {
15
+ file: file,
16
+ isEditingAllowed: canEdit(file)
17
+ };
18
+ return /*#__PURE__*/_react.default.createElement(FileContext.Provider, {
19
+ value: value
20
+ }, children);
21
+ };
22
+ exports.FileProvider = FileProvider;
23
+ var useFile = function useFile() {
24
+ var context = _react.default.useContext(FileContext);
25
+ if (!context) {
26
+ throw Error("FileContext is missing in the component tree. Are you using \"useFile()\" hook in the right place?");
27
+ }
28
+ return context;
29
+ };
30
+ exports.useFile = useFile;
@@ -0,0 +1 @@
1
+ {"version":3,"names":["FileContext","createContext","undefined","FileProvider","file","canEdit","children","value","isEditingAllowed","useFile","context","React","useContext","Error"],"sources":["FileProvider.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { FileItem } from \"~/components/FileManager/types\";\nimport { FileDetailsProps } from \"~/components/FileManager/FileDetails\";\n\nexport interface FileContext {\n file: FileItem;\n isEditingAllowed: boolean;\n}\n\nconst FileContext = createContext<FileContext | undefined>(undefined);\n\ninterface FileProviderProps {\n file: FileItem;\n canEdit: FileDetailsProps[\"canEdit\"];\n children: React.ReactNode;\n}\n\nexport const FileProvider = ({ file, canEdit, children }: FileProviderProps) => {\n const value: FileContext = { file, isEditingAllowed: canEdit(file) };\n\n return <FileContext.Provider value={value}>{children}</FileContext.Provider>;\n};\n\nexport const useFile = () => {\n const context = React.useContext(FileContext);\n if (!context) {\n throw Error(\n `FileContext is missing in the component tree. Are you using \"useFile()\" hook in the right place?`\n );\n }\n\n return context;\n};\n"],"mappings":";;;;;;;AAAA;AASA,IAAMA,WAAW,gBAAG,IAAAC,oBAAa,EAA0BC,SAAS,CAAC;AAQ9D,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAAuD;EAAA,IAAjDC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;EAClD,IAAMC,KAAkB,GAAG;IAAEH,IAAI,EAAJA,IAAI;IAAEI,gBAAgB,EAAEH,OAAO,CAACD,IAAI;EAAE,CAAC;EAEpE,oBAAO,6BAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEG;EAAM,GAAED,QAAQ,CAAwB;AAChF,CAAC;AAAC;AAEK,IAAMG,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,IAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACZ,WAAW,CAAC;EAC7C,IAAI,CAACU,OAAO,EAAE;IACV,MAAMG,KAAK,sGAEV;EACL;EAEA,OAAOH,OAAO;AAClB,CAAC;AAAC"}
@@ -9,83 +9,76 @@ exports.default = void 0;
9
9
  var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
10
10
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
11
  var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
12
- var _get2 = _interopRequireDefault(require("lodash/get"));
13
12
  var _react = _interopRequireWildcard(require("react"));
14
- var _reactHooks = require("@apollo/react-hooks");
15
13
  var _Input = require("@webiny/ui/Input");
16
14
  var _form = require("@webiny/form");
17
15
  var _validation = require("@webiny/validation");
18
16
  var _useSnackbar2 = require("../../../hooks/useSnackbar");
19
17
  var _graphql = require("./../graphql");
20
18
  var _FileManagerContext = require("./../FileManagerContext");
19
+ var _useUpdateFile2 = require("./useUpdateFile");
21
20
  var Name = function Name(_ref) {
22
21
  var file = _ref.file,
23
22
  canEdit = _ref.canEdit;
24
23
  var name = file.name || "";
25
24
  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
26
25
  showSnackbar = _useSnackbar.showSnackbar;
27
- var client = (0, _reactHooks.useApolloClient)();
26
+ var _useUpdateFile = (0, _useUpdateFile2.useUpdateFile)(file),
27
+ updateFile = _useUpdateFile.updateFile;
28
28
  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
29
29
  queryParams = _useFileManager.queryParams;
30
+ var onSubmit = /*#__PURE__*/function () {
31
+ var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
32
+ var name;
33
+ return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
34
+ while (1) switch (_context.prev = _context.next) {
35
+ case 0:
36
+ name = _ref2.name;
37
+ if (!(name === file.name)) {
38
+ _context.next = 3;
39
+ break;
40
+ }
41
+ return _context.abrupt("return");
42
+ case 3:
43
+ _context.next = 5;
44
+ return updateFile({
45
+ name: name
46
+ }, function (cache) {
47
+ var data = (0, _cloneDeep2.default)(cache.readQuery({
48
+ query: _graphql.LIST_FILES,
49
+ variables: queryParams
50
+ }));
51
+ if (data) {
52
+ data.fileManager.listFiles.data.forEach(function (item) {
53
+ if (item.src === file.src) {
54
+ item.name = name;
55
+ }
56
+ });
57
+ }
58
+ cache.writeQuery({
59
+ query: _graphql.LIST_FILES,
60
+ variables: queryParams,
61
+ data: data
62
+ });
63
+ });
64
+ case 5:
65
+ showSnackbar("Name successfully updated.");
66
+ case 6:
67
+ case "end":
68
+ return _context.stop();
69
+ }
70
+ }, _callee);
71
+ }));
72
+ return function onSubmit(_x) {
73
+ return _ref3.apply(this, arguments);
74
+ };
75
+ }();
30
76
  var editContent = (0, _react.useMemo)(function () {
31
77
  return /*#__PURE__*/_react.default.createElement(_form.Form, {
32
78
  data: {
33
79
  name: name
34
80
  },
35
- onSubmit: /*#__PURE__*/function () {
36
- var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
37
- var name;
38
- return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
39
- while (1) switch (_context.prev = _context.next) {
40
- case 0:
41
- name = _ref2.name;
42
- if (!(name === file.name)) {
43
- _context.next = 3;
44
- break;
45
- }
46
- return _context.abrupt("return");
47
- case 3:
48
- _context.next = 5;
49
- return client.mutate({
50
- mutation: _graphql.UPDATE_FILE,
51
- variables: {
52
- id: file.id,
53
- data: {
54
- name: name
55
- }
56
- },
57
- update: function update(cache, updated) {
58
- var newFileData = (0, _get2.default)(updated, "data.fileManager.updateFile.data");
59
- var data = (0, _cloneDeep2.default)(cache.readQuery({
60
- query: _graphql.LIST_FILES,
61
- variables: queryParams
62
- }));
63
- if (data) {
64
- data.fileManager.listFiles.data.forEach(function (item) {
65
- if (item.src === newFileData.src) {
66
- item.name = newFileData.name;
67
- }
68
- });
69
- }
70
- cache.writeQuery({
71
- query: _graphql.LIST_FILES,
72
- variables: queryParams,
73
- data: data
74
- });
75
- }
76
- });
77
- case 5:
78
- showSnackbar("Name successfully updated.");
79
- case 6:
80
- case "end":
81
- return _context.stop();
82
- }
83
- }, _callee);
84
- }));
85
- return function (_x) {
86
- return _ref3.apply(this, arguments);
87
- };
88
- }()
81
+ onSubmit: onSubmit
89
82
  }, function (_ref4) {
90
83
  var Bind = _ref4.Bind,
91
84
  submit = _ref4.submit;
@@ -1 +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;gBAASA,IAAI,SAAJA,IAAI;gBAAA,MAEfA,IAAI,KAAKF,IAAI,CAACE,IAAI;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA;gBAAA,OAIhBG,MAAM,CAACM,MAAM,CAA0D;kBACzEC,QAAQ,EAAEC,oBAAW;kBACrBC,SAAS,EAAE;oBACPC,EAAE,EAAEf,IAAI,CAACe,EAAE;oBACXC,IAAI,EAAE;sBAAEd,IAAI,EAAJA;oBAAK;kBACjB,CAAC;kBACDe,MAAM,EAAE,gBAACC,KAAK,EAAEC,OAAO,EAAK;oBACxB,IAAMC,WAAW,GAAG,mBAChBD,OAAO,EACP,kCAAkC,CACd;oBACxB,IAAMH,IAAI,GAAG,yBACTE,KAAK,CAACG,SAAS,CAAyB;sBACpCC,KAAK,EAAEC,mBAAU;sBACjBT,SAAS,EAAEN;oBACf,CAAC,CAAC,CACL;oBAED,IAAIQ,IAAI,EAAE;sBACNA,IAAI,CAACQ,WAAW,CAACC,SAAS,CAACT,IAAI,CAACU,OAAO,CAAC,UAAAC,IAAI,EAAI;wBAC5C,IAAIA,IAAI,CAACC,GAAG,KAAKR,WAAW,CAACQ,GAAG,EAAE;0BAC9BD,IAAI,CAACzB,IAAI,GAAGkB,WAAW,CAAClB,IAAI;wBAChC;sBACJ,CAAC,CAAC;oBACN;oBAEAgB,KAAK,CAACW,UAAU,CAAC;sBACbP,KAAK,EAAEC,mBAAU;sBACjBT,SAAS,EAAEN,WAAW;sBACtBQ,IAAI,EAAEA;oBACV,CAAC,CAAC;kBACN;gBACJ,CAAC,CAAC;cAAA;gBAEFZ,YAAY,CAAC,4BAA4B,CAAC;cAAC;cAAA;gBAAA;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"}
1
+ {"version":3,"names":["Name","file","canEdit","name","useSnackbar","showSnackbar","useUpdateFile","updateFile","useFileManager","queryParams","onSubmit","cache","data","readQuery","query","LIST_FILES","variables","fileManager","listFiles","forEach","item","src","writeQuery","editContent","useMemo","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cloneDeep } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { LIST_FILES, ListFilesQueryResponse } from \"./../graphql\";\nimport { useFileManager } from \"./../FileManagerContext\";\nimport { FileItem } from \"../types\";\nimport { useUpdateFile } from \"./useUpdateFile\";\n\ninterface NameProps {\n file: FileItem;\n canEdit: (file: FileItem) => boolean;\n}\n\ninterface NameFormData {\n name: string;\n}\n\nconst Name: React.FC<NameProps> = ({ file, canEdit }) => {\n const name = file.name || \"\";\n const { showSnackbar } = useSnackbar();\n const { updateFile } = useUpdateFile(file);\n\n const { queryParams } = useFileManager();\n\n const onSubmit: FormOnSubmit<NameFormData> = async ({ name }) => {\n // Bail out if name is same as the current file name.\n if (name === file.name) {\n return;\n }\n\n await updateFile({ name }, cache => {\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 === file.src) {\n item.name = name;\n }\n });\n }\n\n cache.writeQuery({\n query: LIST_FILES,\n variables: queryParams,\n data: data\n });\n });\n\n showSnackbar(\"Name successfully updated.\");\n };\n\n const editContent = useMemo(() => {\n return (\n <Form<NameFormData> data={{ name }} onSubmit={onSubmit}>\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;AAEA;AAWA,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,qBAAuB,IAAAC,6BAAa,EAACL,IAAI,CAAC;IAAlCM,UAAU,kBAAVA,UAAU;EAElB,sBAAwB,IAAAC,kCAAc,GAAE;IAAhCC,WAAW,mBAAXA,WAAW;EAEnB,IAAMC,QAAoC;IAAA,mGAAG;MAAA;MAAA;QAAA;UAAA;YAASP,IAAI,SAAJA,IAAI;YAAA,MAElDA,IAAI,KAAKF,IAAI,CAACE,IAAI;cAAA;cAAA;YAAA;YAAA;UAAA;YAAA;YAAA,OAIhBI,UAAU,CAAC;cAAEJ,IAAI,EAAJA;YAAK,CAAC,EAAE,UAAAQ,KAAK,EAAI;cAChC,IAAMC,IAAI,GAAG,yBACTD,KAAK,CAACE,SAAS,CAAyB;gBACpCC,KAAK,EAAEC,mBAAU;gBACjBC,SAAS,EAAEP;cACf,CAAC,CAAC,CACL;cAED,IAAIG,IAAI,EAAE;gBACNA,IAAI,CAACK,WAAW,CAACC,SAAS,CAACN,IAAI,CAACO,OAAO,CAAC,UAAAC,IAAI,EAAI;kBAC5C,IAAIA,IAAI,CAACC,GAAG,KAAKpB,IAAI,CAACoB,GAAG,EAAE;oBACvBD,IAAI,CAACjB,IAAI,GAAGA,IAAI;kBACpB;gBACJ,CAAC,CAAC;cACN;cAEAQ,KAAK,CAACW,UAAU,CAAC;gBACbR,KAAK,EAAEC,mBAAU;gBACjBC,SAAS,EAAEP,WAAW;gBACtBG,IAAI,EAAEA;cACV,CAAC,CAAC;YACN,CAAC,CAAC;UAAA;YAEFP,YAAY,CAAC,4BAA4B,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAC9C;IAAA,gBA9BKK,QAAoC;MAAA;IAAA;EAAA,GA8BzC;EAED,IAAMa,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MAAe,IAAI,EAAE;QAAErB,IAAI,EAAJA;MAAK,CAAE;MAAC,QAAQ,EAAEO;IAAS,GAClD;MAAA,IAAGe,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,CAAC1B,OAAO,CAACD,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAEyB,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAACvB,IAAI,EAAEF,IAAI,CAACE,IAAI,EAAED,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaqB,WAAW,CAAc;AACjD,CAAC;AAAC,eAEavB,IAAI;AAAA"}