@webiny/app-aco 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/presentation/folderTree/FolderTree.js

@@ -0,0 +1,260 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { Dialog, OverlayLoader, Text, Tooltip, Tree } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
+import { observer } from "mobx-react-lite";
+import { FormView, useSnackbar } from "@webiny/app-admin";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { ROOT_FOLDER } from "../../constants.js";
+import { FolderProvider } from "../../contexts/folder.js";
+import { Node } from "../../components/FolderTree/Node/Node.js";
+import { Loader } from "../../components/FolderTree/Loader/Loader.js";
+import { ButtonCreate } from "../../components/FolderTree/ButtonCreate/ButtonCreate.js";
+import { useConfirmMoveFolderDialog } from "../../dialogs/index.js";
+import { createInitialOpenList, createTreeData } from "../../components/FolderTree/List/utils.js";
+import { FolderTreePresenterFeature } from "./feature.js";
+const t = i18n.ns("app-aco/presentation/folder-tree");
+const FolderTree_FolderOperationDialog = observer(function({ operation, actions }) {
+    const [loading, setLoading] = useState(false);
+    if (!operation.active) return null;
+    const handleClose = ()=>{
+        if (!loading) actions.cancelOperation();
+    };
+    const withLoading = async (fn)=>{
+        setLoading(true);
+        try {
+            await fn();
+        } finally{
+            setLoading(false);
+        }
+    };
+    if ("delete" === operation.mode) return /*#__PURE__*/ react.createElement(Dialog, {
+        open: true,
+        onClose: handleClose,
+        title: t`Delete Folder`,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
+            onClick: handleClose,
+            text: t`Cancel`
+        }), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+            onClick: ()=>{
+                if (operation.folderId) withLoading(()=>actions.deleteFolder(operation.folderId));
+            },
+            text: t`Delete`
+        }))
+    }, loading && /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: t`Deleting folder...`
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "md"
+    }, t`Are you sure you want to delete this folder? This action cannot be undone.`));
+    if (("create" === operation.mode || "edit" === operation.mode) && operation.form) {
+        const title = "create" === operation.mode ? t`Create Folder` : t`Edit Folder`;
+        const confirmLabel = "create" === operation.mode ? t`Create` : t`Save`;
+        const loadingLabel = "create" === operation.mode ? t`Creating folder...` : t`Saving folder...`;
+        return /*#__PURE__*/ react.createElement(Dialog, {
+            open: true,
+            onClose: handleClose,
+            title: title,
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
+                onClick: handleClose,
+                text: t`Cancel`
+            }), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+                onClick: ()=>{
+                    withLoading(()=>actions.submitOperation());
+                },
+                text: confirmLabel
+            }))
+        }, loading && /*#__PURE__*/ react.createElement(OverlayLoader, {
+            text: loadingLabel
+        }), /*#__PURE__*/ react.createElement(FormView, {
+            name: "Folder Tree",
+            form: operation.form.vm
+        }));
+    }
+    return null;
+});
+const FolderTree = ({ vm, actions, folderActions = [], enableCreate, enableActions, dropConfirmation = false, rootFolderLabel, hiddenFolderIds })=>{
+    const { showSnackbar } = useSnackbar();
+    const { showDialog: showConfirmMoveFolderDialog } = useConfirmMoveFolderDialog();
+    const focusedFolderId = vm.currentFolderId ?? ROOT_FOLDER;
+    const folders = vm.folders;
+    const localFolders = useMemo(()=>{
+        if (!folders.length) return [];
+        return folders.map((item)=>item.id === ROOT_FOLDER && rootFolderLabel ? {
+                ...item,
+                title: rootFolderLabel
+            } : item);
+    }, [
+        folders,
+        rootFolderLabel
+    ]);
+    const [treeData, setTreeData] = useState([]);
+    const [openFolderIds, setOpenFolderIds] = useState([
+        ROOT_FOLDER
+    ]);
+    useEffect(()=>{
+        setTreeData(createTreeData(localFolders, focusedFolderId, hiddenFolderIds));
+    }, [
+        localFolders,
+        focusedFolderId,
+        hiddenFolderIds
+    ]);
+    useEffect(()=>{
+        setOpenFolderIds((prev)=>{
+            const expanded = createInitialOpenList(localFolders, prev, focusedFolderId);
+            return [
+                ...new Set([
+                    ROOT_FOLDER,
+                    ...expanded
+                ])
+            ];
+        });
+    }, [
+        focusedFolderId,
+        localFolders
+    ]);
+    const handleChangeOpen = async (nodes)=>{
+        const folderIds = nodes.map((node)=>node.id);
+        const updatedOpenIds = [
+            ...new Set([
+                ROOT_FOLDER,
+                ...folderIds
+            ])
+        ];
+        const newlyOpened = updatedOpenIds.filter((id)=>!openFolderIds.includes(id));
+        setOpenFolderIds(updatedOpenIds);
+        if (newlyOpened.length > 0) await actions.loadChildFolders(newlyOpened);
+    };
+    const handleDrop = async (_, { dragSourceId, dropTargetId })=>{
+        try {
+            const targetParentId = dropTargetId !== ROOT_FOLDER ? dropTargetId : null;
+            await actions.moveFolder(dragSourceId, targetParentId);
+        } catch (error) {
+            showSnackbar(error.message);
+        }
+    };
+    const onDrop = useCallback(async (newTree, options)=>{
+        const runDrop = async ()=>handleDrop(newTree, options);
+        if (dropConfirmation) {
+            const { dragSourceId, dropTargetId } = options;
+            const folder = localFolders.find((f)=>f.id === dragSourceId);
+            const targetFolder = localFolders.find((f)=>f.id === dropTargetId);
+            if (!folder || !targetFolder) return;
+            await new Promise((resolve, reject)=>{
+                showConfirmMoveFolderDialog({
+                    folder,
+                    targetFolder,
+                    onAccept: async ()=>{
+                        await runDrop();
+                        resolve();
+                    },
+                    onClose: ()=>{
+                        reject(new Error("cancelled"));
+                    }
+                });
+            });
+        } else await runDrop();
+    }, [
+        localFolders,
+        dropConfirmation,
+        showConfirmMoveFolderDialog
+    ]);
+    const sort = useMemo(()=>(a, b)=>{
+            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) return 1;
+            return a.label.localeCompare(b.label, void 0, {
+                numeric: true
+            });
+        }, []);
+    const canDrag = useCallback((node)=>node.id !== ROOT_FOLDER && actions.canManageStructure(node.id), [
+        actions
+    ]);
+    const canDrop = (_, options)=>{
+        const { dragSourceId, dropTargetId } = options;
+        const ancestorIds = actions.getAncestorIds(dropTargetId);
+        return !(dragSourceId && ancestorIds.includes(dragSourceId));
+    };
+    const nodeRenderer = (node)=>{
+        const folder = localFolders.find((f)=>f.id === node.id);
+        return /*#__PURE__*/ react.createElement(FolderProvider, {
+            folder: folder
+        }, /*#__PURE__*/ react.createElement(Node, {
+            enableActions: enableActions,
+            folderActions: folderActions
+        }));
+    };
+    const handleNodeClick = useCallback((node)=>{
+        actions.selectFolder(node.id === ROOT_FOLDER ? null : node.id);
+    }, [
+        actions
+    ]);
+    const createButton = useMemo(()=>{
+        if (!enableCreate) return null;
+        const canCreate = actions.canManageStructure(focusedFolderId);
+        const button = /*#__PURE__*/ react.createElement(ButtonCreate, {
+            disabled: !canCreate,
+            onCreateFolder: ()=>actions.createFolder(focusedFolderId === ROOT_FOLDER ? void 0 : focusedFolderId)
+        });
+        return canCreate ? button : /*#__PURE__*/ react.createElement(Tooltip, {
+            content: "Cannot create folder because you're not an owner.",
+            trigger: button
+        });
+    }, [
+        enableCreate,
+        actions,
+        focusedFolderId,
+        localFolders
+    ]);
+    if (vm.loading) return /*#__PURE__*/ react.createElement(Loader, null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "my-xs"
+    }, /*#__PURE__*/ react.createElement(Tree, {
+        nodes: treeData,
+        rootId: "0",
+        defaultOpenNodeIds: openFolderIds,
+        onChangeOpen: handleChangeOpen,
+        onDrop: onDrop,
+        onNodeClick: handleNodeClick,
+        sort: sort,
+        canDrag: canDrag,
+        canDrop: canDrop,
+        renderer: nodeRenderer,
+        defaultLockedOpenNodeIds: [
+            ROOT_FOLDER
+        ],
+        loadingNodeIds: vm.loadingNodeIds
+    }), enableCreate && /*#__PURE__*/ react.createElement("div", {
+        className: "m-xs-plus mt-sm-plus mb-lg pl-sm-extra"
+    }, createButton), /*#__PURE__*/ react.createElement(FolderTree_FolderOperationDialog, {
+        operation: vm.operation,
+        actions: actions
+    }));
+};
+const UncontrolledFolderTree = ({ focusedFolderId, onFolderClick, ...props })=>{
+    const { presenter } = useFeature(FolderTreePresenterFeature);
+    const vm = useMemo(()=>{
+        if (void 0 === focusedFolderId) return presenter.vm;
+        return {
+            ...presenter.vm,
+            currentFolderId: focusedFolderId
+        };
+    }, [
+        presenter.vm,
+        focusedFolderId
+    ]);
+    const actions = useMemo(()=>{
+        if (!onFolderClick) return presenter;
+        return {
+            ...presenter,
+            selectFolder: onFolderClick
+        };
+    }, [
+        presenter,
+        onFolderClick
+    ]);
+    return /*#__PURE__*/ react.createElement(FolderTree, {
+        vm: vm,
+        actions: actions,
+        ...props
+    });
+};
+export { FolderTree, UncontrolledFolderTree };
+
+//# sourceMappingURL=FolderTree.js.map

package/presentation/folderTree/FolderTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/folderTree/FolderTree.js","sources":["../../../src/presentation/folderTree/FolderTree.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n    Tree,\n    Tooltip,\n    Dialog,\n    Text,\n    OverlayLoader,\n    type NodeDto,\n    type TreeProps,\n    type WithDefaultNodeData,\n    type DropOptions\n} from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { observer } from \"mobx-react-lite\";\nimport { useSnackbar, FormView } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ROOT_FOLDER } from \"~/constants.js\";\nimport { FolderProvider } from \"~/contexts/folder.js\";\nimport { Node } from \"~/components/FolderTree/Node/Node.js\";\nimport { Loader } from \"~/components/FolderTree/Loader/Loader.js\";\nimport { ButtonCreate } from \"~/components/FolderTree/ButtonCreate/ButtonCreate.js\";\nimport { useConfirmMoveFolderDialog } from \"~/dialogs/index.js\";\nimport { createTreeData, createInitialOpenList } from \"~/components/FolderTree/List/utils.js\";\nimport { FolderTreePresenterFeature } from \"./feature.js\";\nimport type { FolderDto } from \"~/domain/folder/FolderDto.js\";\nimport type { FolderActionConfig } from \"~/config/AcoConfig.js\";\nimport type {\n    IFolderTreeCallbacks,\n    IFolderTreeViewModel,\n    IFolderOperationState\n} from \"./abstractions.js\";\n\nconst t = i18n.ns(\"app-aco/presentation/folder-tree\");\n\nconst FolderOperationDialog = observer(function FolderOperationDialog({\n    operation,\n    actions\n}: {\n    operation: IFolderOperationState;\n    actions: IFolderTreeCallbacks;\n}) {\n    const [loading, setLoading] = useState(false);\n\n    if (!operation.active) {\n        return null;\n    }\n\n    const handleClose = () => {\n        if (!loading) {\n            actions.cancelOperation();\n        }\n    };\n\n    const withLoading = async (fn: () => Promise<unknown>) => {\n        setLoading(true);\n        try {\n            await fn();\n        } finally {\n            setLoading(false);\n        }\n    };\n\n    if (operation.mode === \"delete\") {\n        return (\n            <Dialog\n                open={true}\n                onClose={handleClose}\n                title={t`Delete Folder`}\n                actions={\n                    <>\n                        <Dialog.CancelAction onClick={handleClose} text={t`Cancel`} />\n                        <Dialog.ConfirmAction\n                            onClick={() => {\n                                if (operation.folderId) {\n                                    void withLoading(() =>\n                                        actions.deleteFolder(operation.folderId!)\n                                    );\n                                }\n                            }}\n                            text={t`Delete`}\n                        />\n                    </>\n                }\n            >\n                {loading && <OverlayLoader text={t`Deleting folder...`} />}\n                <Text size={\"md\"}>\n                    {t`Are you sure you want to delete this folder? This action cannot be undone.`}\n                </Text>\n            </Dialog>\n        );\n    }\n\n    if ((operation.mode === \"create\" || operation.mode === \"edit\") && operation.form) {\n        const title = operation.mode === \"create\" ? t`Create Folder` : t`Edit Folder`;\n        const confirmLabel = operation.mode === \"create\" ? t`Create` : t`Save`;\n        const loadingLabel =\n            operation.mode === \"create\" ? t`Creating folder...` : t`Saving folder...`;\n\n        return (\n            <Dialog\n                open={true}\n                onClose={handleClose}\n                title={title}\n                actions={\n                    <>\n                        <Dialog.CancelAction onClick={handleClose} text={t`Cancel`} />\n                        <Dialog.ConfirmAction\n                            onClick={() => {\n                                void withLoading(() => actions.submitOperation());\n                            }}\n                            text={confirmLabel}\n                        />\n                    </>\n                }\n            >\n                {loading && <OverlayLoader text={loadingLabel} />}\n                <FormView name={\"Folder Tree\"} form={operation.form.vm} />\n            </Dialog>\n        );\n    }\n\n    return null;\n});\n\nexport interface PresenterFolderTreeProps {\n    vm: IFolderTreeViewModel;\n    actions: IFolderTreeCallbacks;\n    folderActions?: FolderActionConfig[];\n    enableCreate?: boolean;\n    enableActions?: boolean;\n    dropConfirmation?: boolean;\n    rootFolderLabel?: string;\n    hiddenFolderIds?: string[];\n}\n\nexport interface UncontrolledFolderTreeProps extends Omit<\n    PresenterFolderTreeProps,\n    \"vm\" | \"actions\"\n> {\n    focusedFolderId?: string | null;\n    onFolderClick?: (folderId: string | null) => void;\n}\n\nexport const FolderTree = ({\n    vm,\n    actions,\n    folderActions = [],\n    enableCreate,\n    enableActions,\n    dropConfirmation = false,\n    rootFolderLabel,\n    hiddenFolderIds\n}: PresenterFolderTreeProps) => {\n    const { showSnackbar } = useSnackbar();\n    const { showDialog: showConfirmMoveFolderDialog } = useConfirmMoveFolderDialog();\n\n    const focusedFolderId = vm.currentFolderId ?? ROOT_FOLDER;\n\n    const folders = vm.folders;\n\n    const localFolders = useMemo(() => {\n        if (!folders.length) {\n            return [];\n        }\n        return folders.map(item =>\n            item.id === ROOT_FOLDER && rootFolderLabel ? { ...item, title: rootFolderLabel } : item\n        );\n    }, [folders, rootFolderLabel]);\n\n    const [treeData, setTreeData] = useState<NodeDto<FolderDto>[]>([]);\n    const [openFolderIds, setOpenFolderIds] = useState<string[]>([ROOT_FOLDER]);\n\n    useEffect(() => {\n        setTreeData(createTreeData(localFolders, focusedFolderId, hiddenFolderIds));\n    }, [localFolders, focusedFolderId, hiddenFolderIds]);\n\n    useEffect(() => {\n        setOpenFolderIds(prev => {\n            const expanded = createInitialOpenList(localFolders, prev, focusedFolderId);\n            return [...new Set([ROOT_FOLDER, ...expanded])];\n        });\n    }, [focusedFolderId, localFolders]);\n\n    const handleChangeOpen: TreeProps[\"onChangeOpen\"] = async nodes => {\n        const folderIds = nodes.map(node => node.id);\n        const updatedOpenIds = [...new Set([ROOT_FOLDER, ...folderIds])];\n        const newlyOpened = updatedOpenIds.filter(id => !openFolderIds.includes(id));\n        setOpenFolderIds(updatedOpenIds);\n\n        if (newlyOpened.length > 0) {\n            await actions.loadChildFolders(newlyOpened);\n        }\n    };\n\n    const handleDrop: TreeProps[\"onDrop\"] = async (_, { dragSourceId, dropTargetId }) => {\n        try {\n            const targetParentId = dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null;\n            await actions.moveFolder(dragSourceId as string, targetParentId);\n        } catch (error) {\n            showSnackbar((error as Error).message);\n        }\n    };\n\n    const onDrop = useCallback<NonNullable<TreeProps[\"onDrop\"]>>(\n        async (newTree, options: DropOptions) => {\n            const runDrop = async () => handleDrop(newTree, options);\n\n            if (dropConfirmation) {\n                const { dragSourceId, dropTargetId } = options;\n                const folder = localFolders.find(f => f.id === dragSourceId);\n                const targetFolder = localFolders.find(f => f.id === dropTargetId);\n\n                if (!folder || !targetFolder) {\n                    return;\n                }\n\n                await new Promise<void>((resolve, reject) => {\n                    showConfirmMoveFolderDialog({\n                        folder,\n                        targetFolder,\n                        onAccept: async () => {\n                            await runDrop();\n                            resolve();\n                        },\n                        onClose: () => {\n                            reject(new Error(\"cancelled\"));\n                        }\n                    });\n                });\n            } else {\n                await runDrop();\n            }\n        },\n        [localFolders, dropConfirmation, showConfirmMoveFolderDialog]\n    );\n\n    const sort = useMemo(\n        () => (a: NodeDto<any>, b: NodeDto<any>) => {\n            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {\n                return 1;\n            }\n            return a.label.localeCompare(b.label, undefined, { numeric: true });\n        },\n        []\n    );\n\n    const canDrag: TreeProps<FolderDto>[\"canDrag\"] = useCallback(\n        (node: NodeDto<FolderDto>) =>\n            node.id !== ROOT_FOLDER && actions.canManageStructure(node.id),\n        [actions]\n    );\n\n    const canDrop: TreeProps<FolderDto>[\"canDrop\"] = (_, options: DropOptions<FolderDto>) => {\n        const { dragSourceId, dropTargetId } = options;\n        const ancestorIds = actions.getAncestorIds(dropTargetId as string);\n        return !(dragSourceId && ancestorIds.includes(dragSourceId as string));\n    };\n\n    const nodeRenderer: TreeProps<FolderDto>[\"renderer\"] = node => {\n        const folder = localFolders.find(f => f.id === node.id);\n        return (\n            <FolderProvider folder={folder}>\n                <Node enableActions={enableActions} folderActions={folderActions} />\n            </FolderProvider>\n        );\n    };\n\n    const handleNodeClick = useCallback(\n        (node: WithDefaultNodeData<FolderDto>) => {\n            actions.selectFolder(node.id === ROOT_FOLDER ? null : node.id);\n        },\n        [actions]\n    );\n\n    const createButton = useMemo(() => {\n        if (!enableCreate) {\n            return null;\n        }\n\n        const canCreate = actions.canManageStructure(focusedFolderId);\n        const button = (\n            <ButtonCreate\n                disabled={!canCreate}\n                onCreateFolder={() =>\n                    actions.createFolder(\n                        focusedFolderId === ROOT_FOLDER ? undefined : focusedFolderId\n                    )\n                }\n            />\n        );\n\n        return canCreate ? (\n            button\n        ) : (\n            <Tooltip\n                content={`Cannot create folder because you're not an owner.`}\n                trigger={button}\n            />\n        );\n    }, [enableCreate, actions, focusedFolderId, localFolders]);\n\n    if (vm.loading) {\n        return <Loader />;\n    }\n\n    return (\n        <div className=\"my-xs\">\n            <Tree<FolderDto>\n                nodes={treeData}\n                rootId={\"0\"}\n                defaultOpenNodeIds={openFolderIds}\n                onChangeOpen={handleChangeOpen}\n                onDrop={onDrop}\n                onNodeClick={handleNodeClick}\n                sort={sort}\n                canDrag={canDrag}\n                canDrop={canDrop}\n                renderer={nodeRenderer}\n                defaultLockedOpenNodeIds={[ROOT_FOLDER]}\n                loadingNodeIds={vm.loadingNodeIds}\n            />\n            {enableCreate && (\n                <div className={\"m-xs-plus mt-sm-plus mb-lg pl-sm-extra\"}>{createButton}</div>\n            )}\n            <FolderOperationDialog operation={vm.operation} actions={actions} />\n        </div>\n    );\n};\n\nexport const UncontrolledFolderTree = ({\n    focusedFolderId,\n    onFolderClick,\n    ...props\n}: UncontrolledFolderTreeProps) => {\n    const { presenter } = useFeature(FolderTreePresenterFeature);\n\n    const vm = useMemo(() => {\n        if (focusedFolderId === undefined) {\n            return presenter.vm;\n        }\n        return { ...presenter.vm, currentFolderId: focusedFolderId };\n    }, [presenter.vm, focusedFolderId]);\n\n    const actions = useMemo(() => {\n        if (!onFolderClick) {\n            return presenter;\n        }\n        return { ...presenter, selectFolder: onFolderClick };\n    }, [presenter, onFolderClick]);\n\n    return <FolderTree vm={vm} actions={actions} {...props} />;\n};\n"],"names":["t","i18n","FolderOperationDialog","observer","operation","actions","loading","setLoading","useState","handleClose","withLoading","fn","Dialog","OverlayLoader","Text","title","confirmLabel","loadingLabel","FormView","FolderTree","vm","folderActions","enableCreate","enableActions","dropConfirmation","rootFolderLabel","hiddenFolderIds","showSnackbar","useSnackbar","showConfirmMoveFolderDialog","useConfirmMoveFolderDialog","focusedFolderId","ROOT_FOLDER","folders","localFolders","useMemo","item","treeData","setTreeData","openFolderIds","setOpenFolderIds","useEffect","createTreeData","prev","expanded","createInitialOpenList","Set","handleChangeOpen","nodes","folderIds","node","updatedOpenIds","newlyOpened","id","handleDrop","_","dragSourceId","dropTargetId","targetParentId","error","onDrop","useCallback","newTree","options","runDrop","folder","f","targetFolder","Promise","resolve","reject","Error","sort","a","b","undefined","canDrag","canDrop","ancestorIds","nodeRenderer","FolderProvider","Node","handleNodeClick","createButton","canCreate","button","ButtonCreate","Tooltip","Loader","Tree","UncontrolledFolderTree","onFolderClick","props","presenter","useFeature","FolderTreePresenterFeature"],"mappings":"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"}

package/presentation/folderTree/FolderTreeFieldRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        folderTree: {
+            fieldType: "text";
+            options: false;
+            settings: undefined;
+        };
+    }
+}
+export declare const FolderTreeFieldRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index").IFieldVM;
+}>;

package/presentation/folderTree/FolderTreeFieldRenderer.js

@@ -0,0 +1,23 @@
+import react from "react";
+import { FormComponentLabel, cn } from "@webiny/admin-ui";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { FolderTree } from "../../components/FolderTree/index.js";
+import { ROOT_FOLDER } from "../../constants.js";
+const FolderTreeFieldRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "px-sm-extra py-sm-extra",
+            "border-sm border-neutral-muted rounded-md",
+            "bg-neutral-base",
+            "max-h-[280px] overflow-x-hidden overflow-y-scroll"
+        ])
+    }, /*#__PURE__*/ react.createElement(FolderTree, {
+        focusedFolderId: field.value ? String(field.value) : ROOT_FOLDER,
+        onFolderClick: (folder)=>{
+            field.onChange(folder.id === ROOT_FOLDER ? null : folder.id);
+        }
+    }))));
+export { FolderTreeFieldRenderer };
+
+//# sourceMappingURL=FolderTreeFieldRenderer.js.map

package/presentation/folderTree/FolderTreeFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/folderTree/FolderTreeFieldRenderer.js","sources":["../../../src/presentation/folderTree/FolderTreeFieldRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FolderTree } from \"~/components/FolderTree/index.js\";\nimport { ROOT_FOLDER } from \"~/constants.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        folderTree: { fieldType: \"text\"; options: false; settings: undefined };\n    }\n}\n\nexport const FolderTreeFieldRenderer = createFieldRenderer<\"folderTree\">(({ field }) => {\n    return (\n        <div>\n            <FormComponentLabel text={field.label} />\n            <div\n                className={cn([\n                    \"px-sm-extra py-sm-extra\",\n                    \"border-sm border-neutral-muted rounded-md\",\n                    \"bg-neutral-base\",\n                    \"max-h-[280px] overflow-x-hidden overflow-y-scroll\"\n                ])}\n            >\n                <FolderTree\n                    focusedFolderId={field.value ? String(field.value) : ROOT_FOLDER}\n                    onFolderClick={folder => {\n                        field.onChange(folder.id === ROOT_FOLDER ? null : folder.id);\n                    }}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["FolderTreeFieldRenderer","createFieldRenderer","field","FormComponentLabel","cn","FolderTree","String","ROOT_FOLDER","folder"],"mappings":";;;;;AAYO,MAAMA,0BAA0BC,oBAAkC,CAAC,EAAEC,KAAK,EAAE,GACxE,WAAP,GACI,oBAAC,2BACG,oBAACC,oBAAkBA;QAAC,MAAMD,MAAM,KAAK;sBACrC,oBAAC;QACG,WAAWE,GAAG;YACV;YACA;YACA;YACA;SACH;qBAED,oBAACC,YAAUA;QACP,iBAAiBH,MAAM,KAAK,GAAGI,OAAOJ,MAAM,KAAK,IAAIK;QACrD,eAAeC,CAAAA;YACXN,MAAM,QAAQ,CAACM,OAAO,EAAE,KAAKD,cAAc,OAAOC,OAAO,EAAE;QAC/D"}

package/presentation/folderTree/FolderTreePresenter.d.ts

@@ -0,0 +1,55 @@
+import { StringFormatter } from "@webiny/app-admin/features/stringFormatter/abstractions.js";
+import { FolderTreePresenter as Abstraction, type IFolderTreeViewModel } from "./abstractions.js";
+import { FoldersCache, FoldersContext } from "../../features/folders/abstractions.js";
+import { ListFoldersUseCase } from "../../features/folders/listFolders/abstractions.js";
+import { ListFoldersByParentIdsUseCase } from "../../features/folders/listFoldersByParentIds/abstractions.js";
+import { CreateFolderUseCase } from "../../features/folders/createFolder/abstractions.js";
+import { UpdateFolderUseCase } from "../../features/folders/updateFolder/abstractions.js";
+import { DeleteFolderUseCase } from "../../features/folders/deleteFolder/abstractions.js";
+import { GetFolderAncestorsUseCase } from "../../features/folders/getFolderAncestors/abstractions.js";
+import { GetFolderLevelPermissionUseCase } from "../../features/folders/getFolderLevelPermission/abstractions.js";
+import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
+type FolderChangeCallback = (folderId: string | null) => void;
+declare class FolderTreePresenterImpl implements Abstraction.Interface {
+    private foldersContext;
+    private foldersCache;
+    private listFoldersUseCase;
+    private listFoldersByParentIdsUseCase;
+    private createFolderUseCase;
+    private updateFolderUseCase;
+    private deleteFolderUseCase;
+    private getFolderAncestorsUseCase;
+    private getFolderLevelPermissionUseCase;
+    private formModelFactory;
+    private stringFormatter;
+    private currentFolderId;
+    private loading;
+    private _loadingNodeIds;
+    private operation;
+    private callbacks;
+    private disposed;
+    private previousFolders;
+    constructor(foldersContext: FoldersContext.Interface, foldersCache: FoldersCache.Interface, listFoldersUseCase: ListFoldersUseCase.Interface, listFoldersByParentIdsUseCase: ListFoldersByParentIdsUseCase.Interface, createFolderUseCase: CreateFolderUseCase.Interface, updateFolderUseCase: UpdateFolderUseCase.Interface, deleteFolderUseCase: DeleteFolderUseCase.Interface, getFolderAncestorsUseCase: GetFolderAncestorsUseCase.Interface, getFolderLevelPermissionUseCase: GetFolderLevelPermissionUseCase.Interface, formModelFactory: FormModelFactory.Interface, stringFormatter: StringFormatter.Interface);
+    get vm(): IFolderTreeViewModel;
+    selectFolder(folderId: string | null): void;
+    onFolderChange(callback: FolderChangeCallback): () => void;
+    loadChildFolders(parentIds: string[]): Promise<void>;
+    moveFolder(folderId: string, targetParentId: string | null): Promise<void>;
+    canManageStructure(folderId: string): boolean;
+    getAncestorIds(folderId: string): string[];
+    createFolder(parentFolderId?: string): void;
+    editFolder(folderId: string): void;
+    submitOperation(): Promise<boolean>;
+    deleteFolder(folderId: string): Promise<void>;
+    cancelOperation(): void;
+    private loadFolders;
+    private resolveValidFolderId;
+    private buildTree;
+    private buildTreeFromFolders;
+    private findFolder;
+    private findNode;
+}
+export declare const FolderTreePresenter: typeof FolderTreePresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IFolderTreePresenter>;
+};
+export {};