@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/blocklet/component/switch-control.js

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import IOSSwitch from '@arcblock/ux/lib/Switch';
+
+/**
+ * 该组件的对 UX 中 iOS 风格的 Switch 组件包装, 统一布局
+ * 具体参考: https://github.com/ArcBlock/blocklet-server/issues/4809
+ *
+ * - label 在左, 切换器在右
+ * - 整体宽度控制, 宽屏下 max-width 为 300px 避免 label 与 switch 相隔太远, 窄屏下 100% 宽度
+ */
+/**
+ * @description
+ * @param {{
+ *  labelProps: object,
+ *  className: string;
+ *  style: import('react').CSSProperties
+ * } & import('@mui/material').SwitchProps} { labelProps, className, style, ...rest }
+ * @return {*}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function SwitchControl({
+  labelProps,
+  className,
+  style,
+  ...rest
+}) {
+  const _labelProps = {
+    ...labelProps,
+    labelPlacement: labelProps?.labelPlacement || 'start'
+  };
+  return /*#__PURE__*/_jsx(Root, {
+    className: className,
+    style: style,
+    children: /*#__PURE__*/_jsx(IOSSwitch, {
+      labelProps: _labelProps,
+      ...rest
+    })
+  });
+}
+SwitchControl.propTypes = IOSSwitch.propTypes;
+SwitchControl.defaultProps = IOSSwitch.defaultProps;
+const Root = styled.div`
+  max-width: 300px;
+  > label {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  ${({
+  theme
+}) => theme.breakpoints.down('sm')} {
+    max-width: 100%;
+  }
+`;
+export default SwitchControl;

package/es/blocklet/config-navigation.js

@@ -0,0 +1,331 @@
+import { useCallback, useMemo, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Paper from '@mui/material/Paper';
+import Select from '@mui/material/Select';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Icon } from '@iconify/react';
+import { useReactive } from 'ahooks';
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import noop from 'lodash/noop';
+import SortableTree from './component/sortable-tree';
+import NavigationDialog from './component/navigation/navigation-dialog';
+import NavigationActions from './component/navigation/navigation-actions';
+import useNavigation from '../hooks/use-navigation';
+import { useBlockletContext } from '../contexts/blocklet';
+import NavigationPreview from './component/navigation/navigation-preview';
+import { useTeamContext } from '../contexts/team';
+import { formatError } from '../util';
+
+// FIXME: @zhanghan 这里还有几处文案没有 i18n
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const mockSession = {
+  login: noop,
+  logout: noop,
+  switch: noop,
+  switchDid: noop,
+  switchProfile: noop,
+  switchPassport: noop,
+  useDid: () => {
+    return {
+      walletDid: 'abcdefghijklmnopqrstuvwxyz'
+    };
+  },
+  useOAuth: () => {
+    return {
+      logoutOAuth: noop,
+      bindOAuth: noop,
+      configs: {},
+      switchOAuthPassport: noop
+    };
+  }
+};
+const navigationTypeMap = {
+  header: 'Header',
+  footer: 'Footer',
+  bottom: 'Footer Link',
+  social: 'Footer Social',
+  dashboard: 'Dashboard',
+  sessionManager: 'SessionManager'
+};
+function ConfigNavigation() {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const refNavigationDialog = useRef(null);
+  const {
+    roles
+  } = useTeamContext();
+  const pageState = useReactive({
+    saveLoading: false,
+    resetLoading: false,
+    showResetConfirm: false,
+    mockRole: 'owner'
+  });
+  const {
+    state: navigationState,
+    navigation,
+    getNavigation,
+    saveNavigationList,
+    resetNavigation,
+    updateActiveSection,
+    updateNavigationTree,
+    updateNavigationItem,
+    delNavigationItem,
+    addNavigationItem
+  } = useNavigation();
+  const handleAddNavigation = useCallback(params => {
+    refNavigationDialog.current.add({
+      parent: params
+    }, (close, data) => {
+      addNavigationItem(data);
+      close();
+    });
+  }, [addNavigationItem]);
+  const handleEditNavigation = useCallback((type, params = {}) => {
+    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 = useCallback(async () => {
+    try {
+      pageState.saveLoading = true;
+      await saveNavigationList(navigationState.rawNavigation);
+      Toast.success(t('common.succeeded'));
+    } catch (e) {
+      Toast.error( /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle2",
+          children: t('navigation.actionFailed')
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          children: formatError(e) || e.error
+        })]
+      }));
+    } finally {
+      pageState.saveLoading = false;
+    }
+  }, [navigationState.rawNavigation, pageState, saveNavigationList, t]);
+  const handleResetNavigation = useCallback(async () => {
+    try {
+      pageState.resetLoading = true;
+      await resetNavigation();
+      Toast.success('重置成功', {
+        variant: 'success'
+      });
+    } catch (e) {
+      Toast.error( /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle2",
+          children: t('navigation.actionFailed')
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          children: formatError(e) || e.error
+        })]
+      }));
+    } finally {
+      pageState.resetLoading = false;
+    }
+  }, [pageState, resetNavigation, t]);
+  const sessionCtxValue = useMemo(() => {
+    return {
+      session: {
+        ...mockSession,
+        user: {
+          did: blocklet.appDid,
+          fullName: 'Preview User',
+          role: pageState.mockRole
+        }
+      }
+    };
+  }, [blocklet.appDid, pageState.mockRole]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonGroup, {
+      variant: "outlined",
+      children: Object.keys(navigationTypeMap).map(key => {
+        return /*#__PURE__*/_jsxs(Button, {
+          variant: navigationState.activeSection === key ? 'contained' : undefined,
+          onClick: () => updateActiveSection(key),
+          children: [navigationTypeMap[key], ` (${getNavigation(key).length})`]
+        }, key);
+      })
+    }), /*#__PURE__*/_jsxs(Toolbar, {
+      variant: "dense",
+      sx: {
+        paddingLeft: '0px !important',
+        paddingRight: '0px !important',
+        mt: 2
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h6",
+        component: "div",
+        sx: {
+          flexGrow: 1
+        },
+        children: "Config"
+      }), /*#__PURE__*/_jsx(ButtonGroup, {
+        variant: "outlined",
+        children: /*#__PURE__*/_jsx(LoadingButton, {
+          size: "small",
+          variant: "outlined",
+          color: "error",
+          startIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: "system-uicons:reset"
+          }),
+          sx: {
+            mr: 2
+          },
+          loading: pageState.resetLoading,
+          loadingPosition: "start",
+          onClick: () => {
+            pageState.showResetConfirm = true;
+          },
+          children: "\u91CD\u7F6E"
+        })
+      }), /*#__PURE__*/_jsxs(ButtonGroup, {
+        variant: "outlined",
+        children: [/*#__PURE__*/_jsx(Button, {
+          size: "small",
+          variant: "outlined",
+          startIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: "mdi:plus"
+          }),
+          onClick: () => handleAddNavigation(),
+          children: "\u65B0\u5EFA"
+        }), /*#__PURE__*/_jsx(LoadingButton, {
+          size: "small",
+          variant: "contained",
+          startIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: "mdi:content-save"
+          }),
+          loading: pageState.saveLoading,
+          loadingPosition: "start",
+          onClick: handleSaveNavigation,
+          children: "\u4FDD\u5B58"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Paper, {
+      variant: "outlined",
+      sx: {
+        display: 'flex',
+        height: 280,
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx(Paper, {
+        elevation: 0,
+        sx: {
+          flex: 1,
+          overflow: 'auto'
+        },
+        children: /*#__PURE__*/_jsx(SortableTree, {
+          treeData: getNavigation(navigationState.activeSection),
+          setTreeData: updateNavigationTree,
+          renderActions: ({
+            data,
+            className
+          }) => {
+            return /*#__PURE__*/_jsx(NavigationActions, {
+              data: data,
+              className: className,
+              section: navigationState.activeSection,
+              add: (...args) => handleAddNavigation(...args),
+              del: (...args) => handleEditNavigation('del', ...args),
+              edit: (...args) => handleEditNavigation('edit', ...args),
+              toggle: (...args) => handleEditNavigation('toggle', ...args)
+            });
+          }
+        })
+      })
+    }), /*#__PURE__*/_jsxs(Toolbar, {
+      variant: "dense",
+      sx: {
+        paddingLeft: '0px !important',
+        paddingRight: '0px !important',
+        mt: 3
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h6",
+        component: "div",
+        sx: {
+          flexGrow: 1
+        },
+        children: "Preview"
+      }), /*#__PURE__*/_jsxs(FormControl, {
+        sx: {
+          m: 1,
+          minWidth: 120
+        },
+        size: "small",
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          children: "Role"
+        }), /*#__PURE__*/_jsx(Select, {
+          value: pageState.mockRole,
+          label: "Role",
+          onChange: e => {
+            pageState.mockRole = e.target.value;
+          },
+          children: roles.map(item => /*#__PURE__*/_jsx(MenuItem, {
+            value: item.name,
+            children: item.title
+          }, item.name))
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Paper, {
+      variant: "outlined",
+      children: /*#__PURE__*/_jsx(SessionContext.Provider, {
+        value: sessionCtxValue,
+        children: /*#__PURE__*/_jsx(NavigationPreview, {
+          navigation: navigation
+        })
+      })
+    }), /*#__PURE__*/_jsx(NavigationDialog, {
+      ref: refNavigationDialog,
+      section: navigationState.activeSection,
+      components: navigationState.components,
+      rawNavigations: navigationState.rawNavigation
+    }), /*#__PURE__*/_jsx(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__*/_jsx("p", {
+        children: "\u6E05\u7A7A\u540E\uFF0C\u5BFC\u822A\u4F1A\u6062\u590D\u5230 Blocklet \u539F\u6709\u9ED8\u8BA4\u7684\u914D\u7F6E"
+      })
+    })]
+  });
+}
+export default ConfigNavigation;