@webiny/app-aco 5.34.8 → 5.35.0-beta.1

package/README.md

@@ -12,14 +12,15 @@ A set of frontend aco-related utilities.
 - [Overview](#overview)
 - [Reference](#reference)
     - [Components](#components)
-        - [`FoldersProvider`](#FoldersProvider)
+        - [`ACOProvider`](#ACOProvider)
         - [`FolderTree`](#FolderTree)
+        - [`EntryDialogMove`](#EntryDialogMove)
         - [`FolderDialogCreate`](#FolderDialogCreate)
-        - [`FolderDialogUpdate`](#FolderDialogUpdate)
         - [`FolderDialogDelete`](#FolderDialogDelete)
+        - [`FolderDialogUpdate`](#FolderDialogUpdate)
     - [Hooks](#hooks)
         - [`useFolder`](#useFolders)
-        - [`useLinks`](#useLinks)
+        - [`useRecords`](#useRecords)
 
 ## Installation
 ```
@@ -32,40 +33,40 @@ yarn add @webiny/app-aco
 ```
 
 ## Overview
-The `@webiny/app-aco` package contains essential aco-related utilities (Advanced Content Organisation), that can be used within a React app. These include the `FoldersProvider` provider component, the `useFolders` and `useLinks` hooks, which can be used to retrieve the current folder and link information and interact with them.
+The `@webiny/app-aco` package contains essential aco-related utilities (Advanced Content Organisation), that can be used within a React app. These include the `FoldersProvider` provider component, the `useFolders` and `useRecords` hooks, which can be used to retrieve the current folder and search record information and interact with them.
 
 > ℹ️ **INFO**
 >
-> Internally, the [`FoldersProvider`](#FoldersProvider) provider retrieves information from the Webiny's default GraphQL API. Because of this, note that this project relies on [`@webiny/api-aco`](./../api-aco) when it comes to retrieving folders and links information (via GraphQL).
+> Internally, the [`FoldersProvider`](#FoldersProvider) provider retrieves information from the Webiny's default GraphQL API. Because of this, note that this project relies on [`@webiny/api-aco`](./../api-aco) when it comes to retrieving folders and records information (via GraphQL).
 
 ## Reference
 
 ### Components
 
-#### `FoldersProvider`
+#### `ACOProvider`
 
 <details>
 <summary>Type Declaration</summary>
 <p>
 
 ```tsx
-export declare const FoldersProvider: React.FC;
+export declare const ACOProvider: React.FC;
 ```
 
 </p>
 </details>
 
-The [`FoldersProvider`](#FoldersProvider) is a provider component, which retrieves the folders and links information. The component also makes it possible to use the [`useFolders`](#useFolders) and [`useLinks`](#useLinks) hook, which can be used to list, create, update or delete folders and links within the React app.
+The [`ACOProvider`](#ACOProvider) is a provider component, which retrieves the folders and records information. The component also makes it possible to use the [`useFolders`](#useFolders) and [`useRecords`](#useRecords) hook, which can be used to list, create, update or delete folders and records within the React app.
 
 ```tsx
 import React from "react";
-import { FoldersProvider } from "@webiny/app-aco";
+import { ACOProvider } from "@webiny/app-aco";
 
 export const App = () => {
   return (
-    <FoldersProvider>
+    <ACOProvider>
       <MyApp />
-    </FoldersProvider>
+    </ACOProvider>
   );
 };
 ```
@@ -82,9 +83,12 @@ import { DndItemData } from "~/types";
 interface Props {
     type: string;
     title: string;
+    enableCreate?: boolean;
+    enableActions?: boolean;
+    focusedFolderId?: string;
+    hiddenFolderId?: string;
     onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
     onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    focusedFolderId?: string;
 }
 
 declare function FolderTree(props: Props): React.FC;
@@ -103,9 +107,12 @@ export const MyComponent = () => {
         <FolderTree
             type={"page"}
             title={"All pages"}
+            enableCreate={true}
+            enableActions={true}
+            focusedFolderId={"anyExistingId"}
+            hiddenFolderId={"folderIdToHide"}
             onFolderClick={item => console.log(item)}
             onTitleClick={() => console.log("Do whatever you like on title click")}
-            focusedFolderId={"anyExistingId"}
         />
     );
 };
@@ -114,6 +121,54 @@ export const MyComponent = () => {
 >
 > Internally, the `FolderTree` uses [react-dnd-treeview](https://www.npmjs.com/package/@minoru/react-dnd-treeview) to render and manage the folder list: DO NOT rely on any of this package features, we might change it in the future.
 
+#### `EntryDialogMove`
+<details>
+<summary>Type Declaration</summary>
+<p>
+
+```tsx
+import { DialogOnClose } from "@webiny/ui/Dialog";
+import { SearchRecordItem } from "@webiny/app-aco";
+
+interface Props {
+    type: string;
+    searchRecord: SearchRecordItem;
+    open: boolean;
+    onClose: DialogOnClose;
+}
+
+declare function EntryDialogMove(props: Props): React.FC;
+```
+</p>
+</details>
+
+`EntryDialogMove` component shows a dialog to allow users to move a search record into a folder.
+
+```tsx
+import React, { useState } from "react";
+import { EntryDialogMove } from "@webiny/app-aco";
+
+type Props = {
+    searchRecord: SearchRecordItem;
+}
+
+export const MyComponent = ({ searchRecord }: Props) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    
+    return (
+        <>
+            <button onClick={() => setDialogOpen(true)}>Edit folder</button>
+            <EntryDialogMove
+                type={"anyType"}
+                searchRecord={searchRecord}
+                open={dialogOpen}
+                onClose={() => setDialogOpen(false)}
+            />
+        </>
+    );
+};
+```
+
 #### `FolderDialogCreate`
 <details>
 <summary>Type Declaration</summary>
@@ -126,7 +181,7 @@ interface Props {
     type: string;
     open: boolean;
     onClose: DialogOnClose;
-    parentId?: string | null;
+    currentParentId?: string | null;
 }
 
 declare function FolderDialogCreate(props: Props): React.FC;
@@ -150,14 +205,13 @@ export const MyComponent = () => {
                 type={"page"}
                 open={dialogOpen}
                 onClose={() => setDialogOpen(false)}
-                parentId={"anyParentId"}
+                currentParentId={"anyParentId"}
             />
         </>
     );
 };
 ```
-
-#### `FolderDialogUpdate`
+#### `FolderDialogDelete`
 <details>
 <summary>Type Declaration</summary>
 <p>
@@ -171,16 +225,16 @@ interface Props {
     onClose: DialogOnClose;
 }
 
-declare function FolderDialogUpdate(props: Props): React.FC;
+declare function FolderDialogDelete(props: Props): React.FC;
 ```
 </p>
 </details>
 
-`FolderDialogUpdate` component shows a dialog to allow users to update an existing folder.
+`FolderDialogDelete` component shows a dialog to allow users to delete an existing folder.
 
 ```tsx
 import React, { useState } from "react";
-import { FolderDialogUpdate } from "@webiny/app-aco";
+import { FolderDialogDelete } from "@webiny/app-aco";
 
 type Props = {
     folder: FolderItem;
@@ -191,8 +245,8 @@ export const MyComponent = ({ folder }: Props) => {
     
     return (
         <>
-            <button onClick={() => setDialogOpen(true)}>Edit folder</button>
-            <FolderDialogUpdate
+            <button onClick={() => setDialogOpen(true)}>Delete folder</button>
+            <FolderDialogDelete
                 folder={folder}
                 open={dialogOpen}
                 onClose={() => setDialogOpen(false)}
@@ -202,7 +256,7 @@ export const MyComponent = ({ folder }: Props) => {
 };
 ```
 
-#### `FolderDialogDelete`
+#### `FolderDialogUpdate`
 <details>
 <summary>Type Declaration</summary>
 <p>
@@ -216,16 +270,16 @@ interface Props {
     onClose: DialogOnClose;
 }
 
-declare function FolderDialogDelete(props: Props): React.FC;
+declare function FolderDialogUpdate(props: Props): React.FC;
 ```
 </p>
 </details>
 
-`FolderDialogDelete` component shows a dialog to allow users to delete an existing folder.
+`FolderDialogUpdate` component shows a dialog to allow users to update an existing folder.
 
 ```tsx
 import React, { useState } from "react";
-import { FolderDialogDelete } from "@webiny/app-aco";
+import { FolderDialogUpdate } from "@webiny/app-aco";
 
 type Props = {
     folder: FolderItem;
@@ -236,8 +290,8 @@ export const MyComponent = ({ folder }: Props) => {
     
     return (
         <>
-            <button onClick={() => setDialogOpen(true)}>Delete folder</button>
-            <FolderDialogDelete
+            <button onClick={() => setDialogOpen(true)}>Edit folder</button>
+            <FolderDialogUpdate
                 folder={folder}
                 open={dialogOpen}
                 onClose={() => setDialogOpen(false)}
@@ -294,49 +348,57 @@ As you might notice, there is not `listFolders` method available from `useFolder
 
 You don't need to store the result of it to any local state; that is managed by the context provider.
 
-#### `useLinks`
+#### `useRecords`
 <details>
 <summary>Type Declaration</summary>
 <p>
 
 ```tsx
-import { LinkItem, LinksActions } from "./types";
-
-interface UseLinksHook {
-    links: LinkItem[];
-    loading: Record<LinksActions, boolean>;
-    getLink: (id: string, folderId: string) => Promise<LinkItem>;
-    createLink: (link: Omit<LinkItem, "linkId">) => Promise<LinkItem>;
-    updateLink: (link: LinkItem, contextFolderId: string) => Promise<LinkItem>;
-    deleteLink(link: LinkItem): Promise<true>;
+import { SearchRecordItem, Loading, LoadingActions, ListMeta } from "./types";
+
+interface UseRecordsHook {
+    records: SearchRecordItem[];
+    loading: Loading<LoadingActions>;
+    meta: Meta<ListMeta>;
+    listRecords: (params: {
+        type?: string;
+        folderId?: string;
+        limit?: number;
+        after?: string;
+        sort?: ListSort;
+    }) => Promise<SearchRecordItem[]>;
+    getRecord: (id: string) => Promise<SearchRecordItem>;
+    createRecord: (record: Omit<SearchRecordItem, "id">) => Promise<SearchRecordItem>;
+    updateRecord: (record: SearchRecordItem, contextFolderId?: string) => Promise<SearchRecordItem>;
+    deleteRecord(record: SearchRecordItem): Promise<true>;
 }
 
-export declare function useLinks(folderId: string): UseLinksHook;
+export declare function useRecords(type: string, folderId: string): UseRecordsHook;
 ```
 </p>
 </details>
 
 
-`useLinks()` hook allows you to interact with folders links state and related APIs while building your custom component.
+`useRecords()` hook allows you to interact with search records state and related APIs while building your custom component.
 
 ```tsx
 import React, { useEffect, useState } from "react";
-import { useLinks } from "@webiny/app-aco";
+import { useRecords } from "@webiny/app-aco";
 
 import { getEntryDetails } from "./any-custom-hook"
 
 export const MyComponent = () => {
-    const { links } = useLinks("anyFolderId");
+    const { records } = useRecords("anyType", "anyFolderId");
     const [entries, setEntries] = useState([]);
     
     useEffect(() => {
-        const details = getEntryDetails(links);
+        const details = getEntryDetails(records);
         setEntries(details)
-    }, [links])
+    }, [records])
     
     if (entries) {
         return entries.map(entry => {
-            return <span key={entry.id}>{entry.name}</span>;
+            return <span key={entry.id}>{entry.title}</span>;
         });
     }
     
@@ -344,6 +406,4 @@ export const MyComponent = () => {
 };
 ```
 
-As you might notice, there is not `listLinks` method available from `useLinks()` hook: this is because on first mount, `listLinks` is called internally, which will either issue a network request, or load links from cache.
-
 You don't need to store the result of it to any local state; that is managed by the context provider.

package/components/Dialogs/DialogCreate.d.ts

@@ -4,7 +4,7 @@ declare type Props = {
     type: string;
     open: boolean;
     onClose: DialogOnClose;
-    parentId?: string | null;
+    currentParentId?: string | null;
 };
 export declare const FolderDialogCreate: React.FC<Props>;
 export {};

package/components/Dialogs/DialogCreate.js

@@ -1,111 +1,102 @@
 "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.FolderDialogCreate = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-
+var _i18n = require("@webiny/app/i18n");
+var _appAdmin = require("@webiny/app-admin");
+var _form = require("@webiny/form");
 var _Button = require("@webiny/ui/Button");
-
 var _Dialog = require("@webiny/ui/Dialog");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Input = require("@webiny/ui/Input");
-
 var _Progress = require("@webiny/ui/Progress");
-
-var _form = require("@webiny/form");
-
+var _Typography = require("@webiny/ui/Typography");
 var _validation = require("@webiny/validation");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _appAdmin = require("@webiny/app-admin");
-
+var _slugify = _interopRequireDefault(require("slugify"));
+var _ = require("./..");
 var _useFolders2 = require("../../hooks/useFolders");
-
 var _styled = require("./styled");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var t = _i18n.i18n.ns("app-aco/components/tree/dialog-create");
-
 var FolderDialogCreate = function FolderDialogCreate(_ref) {
   var type = _ref.type,
-      onClose = _ref.onClose,
-      open = _ref.open,
-      parentId = _ref.parentId;
-
+    onClose = _ref.onClose,
+    open = _ref.open,
+    currentParentId = _ref.currentParentId;
   var _useFolders = (0, _useFolders2.useFolders)(type),
-      folders = _useFolders.folders,
-      loading = _useFolders.loading,
-      createFolder = _useFolders.createFolder;
-
+    loading = _useFolders.loading,
+    createFolder = _useFolders.createFolder;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      dialogOpen = _useState2[0],
-      setDialogOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dialogOpen = _useState2[0],
+    setDialogOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    parentId = _useState4[0],
+    setParentId = _useState4[1];
   var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var onSubmit = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return createFolder((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
-                type: type
-              }, typeof parentId !== "undefined" && {
-                parentId: parentId
-              }));
-
-            case 3:
-              setDialogOpen(false);
-              showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Folder created successfully!"]))));
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              showSnackbar(_context.t0.message);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return createFolder((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              type: type,
+              parentId: parentId || null
+            }));
+          case 3:
+            setDialogOpen(false);
+            showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Folder created successfully!"]))));
+            _context.next = 10;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            showSnackbar(_context.t0.message);
+          case 10:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[0, 7]]);
     }));
-
     return function onSubmit(_x) {
       return _ref2.apply(this, arguments);
     };
   }();
+  var generateSlug = function generateSlug(form) {
+    return function () {
+      if (form.data.slug) {
+        return;
+      }
+      if (!form.data.title) {
+        return;
+      }
 
+      // We want to update slug only when the folder is first being created.
+      form.setValue("slug", (0, _slugify.default)(form.data.title, {
+        replacement: "-",
+        lower: true,
+        remove: /[*#\?<>_\{\}\[\]+~.()'"!:;@]/g,
+        trim: false
+      }));
+    };
+  };
+  (0, _react.useEffect)(function () {
+    setParentId(currentParentId);
+  }, [currentParentId]);
   (0, _react.useEffect)(function () {
     setDialogOpen(open);
   }, [open]);
@@ -115,17 +106,19 @@ var FolderDialogCreate = function FolderDialogCreate(_ref) {
   }, dialogOpen && /*#__PURE__*/_react.default.createElement(_form.Form, {
     onSubmit: onSubmit
   }, function (_ref3) {
-    var Bind = _ref3.Bind,
-        submit = _ref3.submit;
+    var form = _ref3.form,
+      Bind = _ref3.Bind,
+      submit = _ref3.submit;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading.CREATE && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
       label: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Creating folder..."])))
     }), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Create a new folder"])))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12
     }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "name",
+      name: "title",
       validators: [_validation.validation.create("required,minLength:3")]
     }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-      label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Name"])))
+      label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Title"]))),
+      onBlur: generateSlug(form)
     }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12
     }, /*#__PURE__*/_react.default.createElement(Bind, {
@@ -133,21 +126,27 @@ var FolderDialogCreate = function FolderDialogCreate(_ref) {
       validators: [_validation.validation.create("required,minLength:3,slug")]
     }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
       label: t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Slug"])))
-    }))), typeof parentId === "undefined" && /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12
-    }, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "parentId"
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, {
-      options: folders,
-      label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Parent"])))
-    }))))), /*#__PURE__*/_react.default.createElement(_styled.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      use: "body1"
+    }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Parent folder"])))), /*#__PURE__*/_react.default.createElement(_styled.DialogFoldersContainer, null, /*#__PURE__*/_react.default.createElement(_.FolderTree, {
+      title: t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Root folder"]))),
+      type: type,
+      focusedFolderId: parentId || undefined,
+      onFolderClick: function onFolderClick(data) {
+        return setParentId((data === null || data === void 0 ? void 0 : data.id) || null);
+      },
+      onTitleClick: function onTitleClick() {
+        return setParentId(null);
+      }
+    }))))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
       onClick: function onClick() {
         setDialogOpen(false);
       }
-    }, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
       onClick: submit
-    }, t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Create Folder"]))))));
+    }, t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Create Folder"]))))));
   }));
 };
-
 exports.FolderDialogCreate = FolderDialogCreate;

package/components/Dialogs/DialogCreate.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FolderDialogCreate","type","onClose","open","parentId","useFolders","folders","loading","createFolder","useState","dialogOpen","setDialogOpen","useSnackbar","showSnackbar","onSubmit","data","message","useEffect","Bind","submit","CREATE","validation","create"],"sources":["DialogCreate.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { ButtonPrimary, ButtonDefault } from \"@webiny/ui/Button\";\nimport { DialogTitle, DialogContent, DialogOnClose } from \"@webiny/ui/Dialog\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin\";\n\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { DialogContainer, DialogActions } from \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\ntype Props = {\n    type: string;\n    open: boolean;\n    onClose: DialogOnClose;\n    parentId?: string | null;\n};\n\nconst t = i18n.ns(\"app-aco/components/tree/dialog-create\");\n\ntype SubmitData = Omit<FolderItem, \"id\">;\n\nexport const FolderDialogCreate: React.FC<Props> = ({ type, onClose, open, parentId }) => {\n    const { folders, loading, createFolder } = useFolders(type);\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const { showSnackbar } = useSnackbar();\n\n    const onSubmit: FormOnSubmit<SubmitData> = async data => {\n        try {\n            await createFolder({\n                ...data,\n                type,\n                ...(typeof parentId !== \"undefined\" && { parentId })\n            });\n            setDialogOpen(false);\n            showSnackbar(t`Folder created successfully!`);\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    useEffect(() => {\n        setDialogOpen(open);\n    }, [open]);\n\n    return (\n        <DialogContainer open={dialogOpen} onClose={onClose}>\n            {dialogOpen && (\n                <Form onSubmit={onSubmit}>\n                    {({ Bind, submit }) => (\n                        <>\n                            {loading.CREATE && <CircularProgress label={t`Creating folder...`} />}\n                            <DialogTitle>{t`Create a new folder`}</DialogTitle>\n                            <DialogContent>\n                                <Grid>\n                                    <Cell span={12}>\n                                        <Bind\n                                            name={\"name\"}\n                                            validators={[validation.create(\"required,minLength:3\")]}\n                                        >\n                                            <Input label={t`Name`} />\n                                        </Bind>\n                                    </Cell>\n                                    <Cell span={12}>\n                                        <Bind\n                                            name={\"slug\"}\n                                            validators={[\n                                                validation.create(\"required,minLength:3,slug\")\n                                            ]}\n                                        >\n                                            <Input label={t`Slug`} />\n                                        </Bind>\n                                    </Cell>\n                                    {typeof parentId === \"undefined\" && (\n                                        <Cell span={12}>\n                                            <Bind name=\"parentId\">\n                                                <AutoComplete options={folders} label={t`Parent`} />\n                                            </Bind>\n                                        </Cell>\n                                    )}\n                                </Grid>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    onClick={() => {\n                                        setDialogOpen(false);\n                                    }}\n                                >\n                                    {t`Cancel`}\n                                </ButtonDefault>\n                                <ButtonPrimary onClick={submit}>{t`Create Folder`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    )}\n                </Form>\n            )}\n        </DialogContainer>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","FolderDialogCreate","type","onClose","open","currentParentId","useFolders","loading","createFolder","useState","dialogOpen","setDialogOpen","parentId","setParentId","useSnackbar","showSnackbar","onSubmit","data","message","generateSlug","form","slug","title","setValue","slugify","replacement","lower","remove","trim","useEffect","Bind","submit","CREATE","validation","create","undefined","id"],"sources":["DialogCreate.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { Form, FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { DialogTitle, DialogActions, DialogContent, DialogOnClose } from \"@webiny/ui/Dialog\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { validation } from \"@webiny/validation\";\nimport slugify from \"slugify\";\n\nimport { FolderTree } from \"~/components\";\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { DialogContainer, DialogFoldersContainer } from \"./styled\";\n\nimport { FolderItem } from \"~/types\";\n\ntype Props = {\n    type: string;\n    open: boolean;\n    onClose: DialogOnClose;\n    currentParentId?: string | null;\n};\n\nconst t = i18n.ns(\"app-aco/components/tree/dialog-create\");\n\ntype SubmitData = Omit<FolderItem, \"id\">;\n\nexport const FolderDialogCreate: React.FC<Props> = ({ type, onClose, open, currentParentId }) => {\n    const { loading, createFolder } = useFolders(type);\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [parentId, setParentId] = useState<string | null>();\n    const { showSnackbar } = useSnackbar();\n\n    const onSubmit: FormOnSubmit<SubmitData> = async data => {\n        try {\n            await createFolder({\n                ...data,\n                type,\n                parentId: parentId || null\n            });\n            setDialogOpen(false);\n            showSnackbar(t`Folder created successfully!`);\n        } catch (error) {\n            showSnackbar(error.message);\n        }\n    };\n\n    const generateSlug = (form: FormAPI) => () => {\n        if (form.data.slug) {\n            return;\n        }\n\n        if (!form.data.title) {\n            return;\n        }\n\n        // We want to update slug only when the folder is first being created.\n        form.setValue(\n            \"slug\",\n            slugify(form.data.title, {\n                replacement: \"-\",\n                lower: true,\n                remove: /[*#\\?<>_\\{\\}\\[\\]+~.()'\"!:;@]/g,\n                trim: false\n            })\n        );\n    };\n\n    useEffect(() => {\n        setParentId(currentParentId);\n    }, [currentParentId]);\n\n    useEffect(() => {\n        setDialogOpen(open);\n    }, [open]);\n\n    return (\n        <DialogContainer open={dialogOpen} onClose={onClose}>\n            {dialogOpen && (\n                <Form<SubmitData> onSubmit={onSubmit}>\n                    {({ form, Bind, submit }) => (\n                        <>\n                            {loading.CREATE && <CircularProgress label={t`Creating folder...`} />}\n                            <DialogTitle>{t`Create a new folder`}</DialogTitle>\n                            <DialogContent>\n                                <Grid>\n                                    <Cell span={12}>\n                                        <Bind\n                                            name={\"title\"}\n                                            validators={[validation.create(\"required,minLength:3\")]}\n                                        >\n                                            <Input label={t`Title`} onBlur={generateSlug(form)} />\n                                        </Bind>\n                                    </Cell>\n                                    <Cell span={12}>\n                                        <Bind\n                                            name={\"slug\"}\n                                            validators={[\n                                                validation.create(\"required,minLength:3,slug\")\n                                            ]}\n                                        >\n                                            <Input label={t`Slug`} />\n                                        </Bind>\n                                    </Cell>\n                                    <Cell span={12}>\n                                        <Typography use=\"body1\">{t`Parent folder`}</Typography>\n                                        <DialogFoldersContainer>\n                                            <FolderTree\n                                                title={t`Root folder`}\n                                                type={type}\n                                                focusedFolderId={parentId || undefined}\n                                                onFolderClick={data =>\n                                                    setParentId(data?.id || null)\n                                                }\n                                                onTitleClick={() => setParentId(null)}\n                                            />\n                                        </DialogFoldersContainer>\n                                    </Cell>\n                                </Grid>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    onClick={() => {\n                                        setDialogOpen(false);\n                                    }}\n                                >\n                                    {t`Cancel`}\n                                </ButtonDefault>\n                                <ButtonPrimary onClick={submit}>{t`Create Folder`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    )}\n                </Form>\n            )}\n        </DialogContainer>\n    );\n};\n"],"mappings":"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"}