@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/blocklet/config-navigation.js

@@ -0,0 +1,344 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _material = require("@mui/material");
+var _lab = require("@mui/lab");
+var _react2 = require("@iconify/react");
+var _notistack = require("notistack");
+var _ahooks = require("ahooks");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Session = require("@arcblock/did-connect/lib/Session");
+var _sortableTree = _interopRequireDefault(require("./component/sortable-tree"));
+var _navigationDialog = _interopRequireDefault(require("./component/navigation/navigation-dialog"));
+var _navigationActions = _interopRequireDefault(require("./component/navigation/navigation-actions"));
+var _useNavigation = _interopRequireDefault(require("../hooks/use-navigation"));
+var _blocklet = require("../contexts/blocklet");
+var _navigationPreview = _interopRequireDefault(require("./component/navigation/navigation-preview"));
+var _team = require("../contexts/team");
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const mockSession = {
+  login: () => {},
+  logout: () => {},
+  switch: () => {},
+  switchDid: () => {},
+  switchProfile: () => {},
+  switchPassport: () => {}
+};
+const navigationTypeMap = {
+  header: 'Header',
+  footer: 'Footer',
+  bottom: 'Footer Link',
+  social: 'Footer Social',
+  dashboard: 'Dashboard',
+  sessionManager: 'SessionManager'
+};
+function ConfigNavigation() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const refNavigationDialog = (0, _react.useRef)(null);
+  const {
+    roles
+  } = (0, _team.useTeamContext)();
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const pageState = (0, _ahooks.useReactive)({
+    saveLoading: false,
+    resetLoading: false,
+    showResetConfirm: false,
+    mockRole: 'owner'
+  });
+  const {
+    state: navigationState,
+    navigation,
+    getNavigation,
+    saveNavigationList,
+    resetNavigation,
+    updateActiveSection,
+    updateNavigationTree,
+    updateNavigationItem,
+    delNavigationItem,
+    addNavigationItem
+  } = (0, _useNavigation.default)();
+  const handleAddNavigation = (0, _react.useCallback)(params => {
+    refNavigationDialog.current.add({
+      parent: params
+    }, (close, data) => {
+      addNavigationItem(data);
+      close();
+    });
+  }, [addNavigationItem]);
+  const handleEditNavigation = (0, _react.useCallback)(function (type) {
+    let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    switch (type) {
+      case 'edit':
+        refNavigationDialog.current.edit(params, (close, data) => {
+          updateNavigationItem(data);
+          close();
+        });
+        break;
+      case 'toggle':
+        updateNavigationItem({
+          id: params.id,
+          visible: !params.visible
+        });
+        break;
+      case 'del':
+        delNavigationItem(params.id);
+        break;
+      default:
+    }
+  }, [delNavigationItem, updateNavigationItem]);
+  const handleSaveNavigation = (0, _react.useCallback)(async () => {
+    try {
+      pageState.saveLoading = true;
+      await saveNavigationList(navigationState.rawNavigation);
+      enqueueSnackbar('保存成功', {
+        variant: 'success'
+      });
+    } catch (e) {
+      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "subtitle2",
+          children: t('navigation.actionFailed')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body1",
+          children: (0, _util.formatError)(e) || e.error
+        })]
+      }), {
+        variant: 'error'
+      });
+    } finally {
+      pageState.saveLoading = false;
+    }
+  }, [enqueueSnackbar, navigationState.rawNavigation, pageState, saveNavigationList, t]);
+  const handleResetNavigation = (0, _react.useCallback)(async () => {
+    try {
+      pageState.resetLoading = true;
+      await resetNavigation();
+      enqueueSnackbar('重置成功', {
+        variant: 'success'
+      });
+    } catch (e) {
+      enqueueSnackbar( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "subtitle2",
+          children: t('navigation.actionFailed')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body1",
+          children: (0, _util.formatError)(e) || e.error
+        })]
+      }), {
+        variant: 'error'
+      });
+    } finally {
+      pageState.resetLoading = false;
+    }
+  }, [enqueueSnackbar, pageState, resetNavigation, t]);
+  const sessionCtxValue = (0, _react.useMemo)(() => {
+    return {
+      session: _objectSpread(_objectSpread({}, mockSession), {}, {
+        user: {
+          did: blocklet.appDid,
+          fullName: 'Preview User',
+          role: pageState.mockRole
+        }
+      })
+    };
+  }, [blocklet.appDid, pageState.mockRole]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonGroup, {
+      variant: "outlined",
+      children: Object.keys(navigationTypeMap).map(key => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
+          variant: navigationState.activeSection === key ? 'contained' : undefined,
+          onClick: () => updateActiveSection(key),
+          children: [navigationTypeMap[key], " (".concat(getNavigation(key).length, ")")]
+        }, key);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+      variant: "dense",
+      sx: {
+        paddingLeft: '0px !important',
+        paddingRight: '0px !important',
+        mt: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        component: "div",
+        sx: {
+          flexGrow: 1
+        },
+        children: "Config"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonGroup, {
+        variant: "outlined",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          size: "small",
+          variant: "outlined",
+          color: "error",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: "system-uicons:reset"
+          }),
+          sx: {
+            mr: 2
+          },
+          loading: pageState.resetLoading,
+          loadingPosition: "start",
+          onClick: () => {
+            pageState.showResetConfirm = true;
+          },
+          children: "\u91CD\u7F6E"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonGroup, {
+        variant: "outlined",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          size: "small",
+          variant: "outlined",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: "mdi:plus"
+          }),
+          onClick: () => handleAddNavigation(),
+          children: "\u65B0\u5EFA"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          size: "small",
+          variant: "contained",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: "mdi:content-save"
+          }),
+          loading: pageState.saveLoading,
+          loadingPosition: "start",
+          onClick: handleSaveNavigation,
+          children: "\u4FDD\u5B58"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      variant: "outlined",
+      sx: {
+        display: 'flex',
+        height: 280,
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+        elevation: 0,
+        sx: {
+          flex: 1,
+          overflow: 'auto'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sortableTree.default, {
+          treeData: getNavigation(navigationState.activeSection),
+          setTreeData: updateNavigationTree,
+          renderActions: _ref => {
+            let {
+              data,
+              className
+            } = _ref;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationActions.default, {
+              data: data,
+              className: className,
+              section: navigationState.activeSection,
+              add: function add() {
+                return handleAddNavigation(...arguments);
+              },
+              del: function del() {
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+                return handleEditNavigation('del', ...args);
+              },
+              edit: function edit() {
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+                return handleEditNavigation('edit', ...args);
+              },
+              toggle: function toggle() {
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+                return handleEditNavigation('toggle', ...args);
+              }
+            });
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+      variant: "dense",
+      sx: {
+        paddingLeft: '0px !important',
+        paddingRight: '0px !important',
+        mt: 3
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        component: "div",
+        sx: {
+          flexGrow: 1
+        },
+        children: "Preview"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+        sx: {
+          m: 1,
+          minWidth: 120
+        },
+        size: "small",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+          children: "Role"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+          value: pageState.mockRole,
+          label: "Role",
+          onChange: e => {
+            pageState.mockRole = e.target.value;
+          },
+          children: roles.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            value: item.name,
+            children: item.title
+          }, item.name))
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      variant: "outlined",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Session.SessionContext.Provider, {
+        value: sessionCtxValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationPreview.default, {
+          navigation: navigation
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationDialog.default, {
+      ref: refNavigationDialog,
+      section: navigationState.activeSection,
+      components: navigationState.components,
+      rawNavigations: navigationState.rawNavigation
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Confirm, {
+      open: pageState.showResetConfirm,
+      title: "\u662F\u5426\u6E05\u7A7A\u6240\u6709\u81EA\u5B9A\u4E49\u5BFC\u822A",
+      onConfirm: async () => {
+        await handleResetNavigation();
+        pageState.showResetConfirm = false;
+      },
+      onCancel: () => {
+        pageState.showResetConfirm = false;
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "\u6E05\u7A7A\u540E\uFF0C\u5BFC\u822A\u4F1A\u6062\u590D\u5230 Blocklet \u539F\u6709\u9ED8\u8BA4\u7684\u914D\u7F6E"
+      })
+    })]
+  });
+}
+var _default = ConfigNavigation;
+exports.default = _default;