@abtnode/ux 1.8.39 → 1.8.40

package/lib/blocklet/component/navigation/navigation-dialog.js

@@ -0,0 +1,613 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _values = _interopRequireDefault(require("lodash/values"));
+var _without = _interopRequireDefault(require("lodash/without"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isString = _interopRequireDefault(require("lodash/isString"));
+var _isObject = _interopRequireDefault(require("lodash/isObject"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _react = require("react");
+var _reactHookForm = require("react-hook-form");
+var _react2 = require("@iconify/react");
+var _notistack = require("notistack");
+var _parseNavigationFromBlocklet = require("@blocklet/meta/lib/parse-navigation-from-blocklet");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _index = require("ufo/dist/index.mjs");
+var _isAbsoluteUrl = _interopRequireDefault(require("is-absolute-url"));
+var _localeTabs = _interopRequireDefault(require("./locale-tabs"));
+var _simpleSelect = _interopRequireDefault(require("./simple-select"));
+var _team = require("../../../contexts/team");
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+const MAX_TITLE_LENGTH = 24;
+const defaultType = 'add';
+const defaultLocale = 'en';
+const initialFormState = {
+  title: {
+    [defaultLocale]: ''
+  },
+  link: {
+    [defaultLocale]: ''
+  }
+};
+function IconSuffix(_ref) {
+  let {
+    icon
+  } = _ref;
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  (0, _ahooks.useAsyncEffect)(async () => {
+    setLoaded(false);
+    await (0, _react2.loadIcon)(icon);
+    setLoaded(true);
+  }, [icon]);
+  if (icon) {
+    if (loaded) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: icon
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+      color: "#f06f6e",
+      icon: "ic:baseline-error"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+    icon: "codicon:blank"
+  });
+}
+IconSuffix.propTypes = {
+  icon: _propTypes.default.string.isRequired
+};
+const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function NavigationDialog(_ref2, ref) {
+  let {
+    section,
+    components,
+    rawNavigations
+  } = _ref2;
+  const {
+    roles
+  } = (0, _team.useTeamContext)();
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const saveFn = (0, _react.useRef)(() => {});
+  const [show, {
+    setFalse,
+    setTrue
+  }] = (0, _ahooks.useBoolean)(false);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const state = (0, _ahooks.useReactive)({
+    isRoot: true,
+    type: defaultType,
+    linkDisabled: false,
+    locale: defaultLocale,
+    formState: (0, _cloneDeep.default)(initialFormState),
+    get localeList() {
+      // eslint-disable-next-line react/no-this-in-sfc
+      return (0, _without.default)(Object.keys(this.formState.title), defaultLocale);
+    }
+  });
+  const {
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    clearErrors,
+    formState: {
+      errors
+    }
+  } = (0, _reactHookForm.useForm)({
+    mode: 'onChange',
+    defaultValues: {
+      id: undefined,
+      title: undefined,
+      icon: undefined,
+      link: undefined,
+      component: undefined,
+      parent: undefined,
+      role: []
+    }
+  });
+  (0, _react.useEffect)(() => {
+    setValue('title', state.formState.title[state.locale]);
+    setValue('link', state.formState.link[state.locale]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setValue, state.locale, show]);
+  const watchComponent = watch('component');
+  const watchTitle = watch('title');
+  const watchLink = watch('link');
+  const watchIcon = watch('icon');
+  const watchParent = watch('parent');
+  (0, _react.useEffect)(() => {
+    state.formState.title[state.locale] = watchTitle;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchTitle]);
+  (0, _react.useEffect)(() => {
+    state.formState.link[state.locale] = watchLink;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchLink]);
+  const selectedOption = (0, _react.useMemo)(() => {
+    const parentData = rawNavigations.find(item => {
+      if (watchComponent) {
+        return item.component === watchComponent;
+      }
+      return item.id === watchParent;
+    });
+    return parentData;
+  }, [rawNavigations, watchComponent, watchParent]);
+  const linkPrefix = (0, _react.useMemo)(() => {
+    if (selectedOption !== null && selectedOption !== void 0 && selectedOption.component) {
+      const findComponent = components.find(item => item.name === selectedOption.component);
+      const {
+        link
+      } = findComponent || {};
+      const stringLink = (0, _isObject.default)(link) ? link[locale] : link;
+      return (0, _index.withoutTrailingSlash)((0, _urlJoin.default)(stringLink, selectedOption.link || '/'));
+    }
+    return null;
+  }, [components, locale, selectedOption]);
+  const autocompleteOptions = (0, _react.useMemo)(() => {
+    const {
+      component
+    } = selectedOption || {};
+    const componentBlocklet = components.find(item => item.name === component);
+    const {
+      navigation = []
+    } = componentBlocklet || {};
+    const flatternedNavigation = (0, _parseNavigationFromBlocklet.flatternNavigation)(navigation, {
+      transform(item, parent) {
+        if (parent !== null && parent !== void 0 && parent.section) {
+          item.section = item.section || parent.section;
+        }
+        return item;
+      }
+    });
+    return flatternedNavigation.filter(item => item.link)
+    // 在指定 section 下只展示能够展示的 navigation
+    .filter(item => (0, _parseNavigationFromBlocklet.isMatchSection)(item.section, section)).map(item => {
+      return {
+        label: item.link,
+        title: item.title[locale] || item.title
+      };
+    });
+  }, [selectedOption, components, section, locale]);
+  const name = (0, _react.useMemo)(() => {
+    const typeMap = {
+      add: t('common.create'),
+      edit: t('common.edit')
+    };
+    const typeName = typeMap[state.type];
+    if (typeName) {
+      return "".concat(typeName, " ").concat(t('navigation.navigation'));
+    }
+    return '--';
+  }, [state.type, t]);
+  const reset = (0, _react.useCallback)(() => {
+    state.type = defaultType;
+    state.linkDisabled = false;
+    saveFn.current = () => {};
+    setValue('id', undefined);
+    setValue('icon', undefined);
+    setValue('title', undefined);
+    setValue('link', undefined);
+    setValue('component', undefined);
+    setValue('parent', undefined);
+    setValue('role', []);
+    state.formState = (0, _cloneDeep.default)(initialFormState);
+    clearErrors();
+  }, [clearErrors, setValue, state]);
+  const patchFormValues = (0, _react.useCallback)(function () {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (state.localeList.length > 0) {
+      if (new Set((0, _values.default)(state.formState.title)).size > 1) {
+        params.title = state.formState.title;
+      }
+      if (new Set((0, _values.default)(state.formState.link)).size > 1) {
+        params.link = state.formState.link;
+      }
+    }
+    if ((0, _isEmpty.default)(params.role)) {
+      params.role = undefined;
+    }
+    return params;
+  }, [state.formState.link, state.formState.title, state.localeList]);
+  const close = (0, _react.useCallback)(() => {
+    setFalse();
+    setTimeout(() => {
+      reset();
+    });
+  }, [reset, setFalse]);
+  const add = (0, _react.useCallback)(function () {
+    let {
+      parent
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
+    state.type = 'add';
+    state.isRoot = !parent;
+    setValue('parent', parent === null || parent === void 0 ? void 0 : parent.id);
+    saveFn.current = params => {
+      cb(close, params);
+    };
+    setTrue();
+  }, [close, setTrue, setValue, state]);
+  const edit = (0, _react.useCallback)(function () {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
+    const {
+      id,
+      title,
+      icon,
+      link,
+      parent,
+      component,
+      role = []
+    } = data;
+    setValue('id', id);
+    setValue('icon', icon);
+    if (data.from === 'tmpl') {
+      state.linkDisabled = true;
+    }
+    if ((0, _isString.default)(title)) {
+      state.formState.title = state.localeList.reduce((resData, localeItem) => {
+        resData[localeItem] = title;
+        return resData;
+      }, {
+        [defaultLocale]: title
+      });
+    } else if ((0, _isObject.default)(title)) {
+      state.formState.title = (0, _cloneDeep.default)(title);
+    } else {
+      state.formState.title = {};
+    }
+    if ((0, _isString.default)(link)) {
+      state.formState.link = state.localeList.reduce((resData, localeItem) => {
+        resData[localeItem] = link;
+        return resData;
+      }, {
+        [defaultLocale]: link
+      });
+    } else if ((0, _isObject.default)(link)) {
+      state.formState.link = (0, _cloneDeep.default)(link);
+    } else {
+      state.formState.link = {};
+    }
+    setValue('component', component);
+    setValue('parent', parent);
+    setValue('role', role || []);
+    setTrue();
+    state.type = 'edit';
+    state.isRoot = !parent;
+    saveFn.current = params => {
+      const pickData = (0, _pick.default)(params, ['id', 'title', 'icon', 'link', 'role']);
+      cb(close, pickData);
+    };
+  }, [close, setTrue, setValue, state]);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      add,
+      edit,
+      close
+    };
+  }, [add, close, edit]);
+  function validTitle(raw) {
+    const value = raw === null || raw === void 0 ? void 0 : raw.trim();
+    if (!value) return t('common.requiredErrorText', {
+      name: t('navigation.form.title')
+    });
+    if (value.length > MAX_TITLE_LENGTH) return t('navigation.form.titleTooLong', {
+      len: MAX_TITLE_LENGTH
+    });
+    return true;
+  }
+  async function validIcon(raw) {
+    const value = raw === null || raw === void 0 ? void 0 : raw.trim();
+    if (value) {
+      try {
+        await (0, _react2.loadIcon)(value);
+      } catch (_unused) {
+        return t('navigation.form.invalidIcon');
+      }
+    }
+    return true;
+  }
+  function validLink(raw) {
+    const value = raw === null || raw === void 0 ? void 0 : raw.trim();
+    if (!value) {
+      if (!state.isRoot) {
+        return t('common.requiredErrorText', {
+          name: t('navigation.form.link')
+        });
+      }
+      return true;
+    }
+    if (!(0, _parseNavigationFromBlocklet.checkLink)(value)) {
+      return t('navigation.form.invalidLink');
+    }
+    return true;
+  }
+  const handleChangeLocale = (0, _react.useCallback)(currentLocale => {
+    state.locale = currentLocale;
+    if (!state.formState.title[currentLocale]) {
+      state.formState.title[currentLocale] = '';
+    }
+    if (!state.formState.link[currentLocale]) {
+      state.formState.link[currentLocale] = '';
+    }
+    setTimeout(() => {
+      clearErrors();
+    });
+  }, [clearErrors, state]);
+  const checkFormState = (0, _react.useCallback)(() => {
+    const {
+      title,
+      link
+    } = state.formState;
+    for (const key of Object.keys(title)) {
+      const validRes = validTitle(title[key]);
+      if (validRes !== true) {
+        return validRes;
+      }
+    }
+    for (const key of Object.keys(link)) {
+      const validRes = validLink(link[key]);
+      if (validRes !== true) {
+        return validRes;
+      }
+    }
+    return true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.formState]);
+  const handleFormSubmit = (0, _react.useCallback)(params => {
+    const checkRes = checkFormState();
+    if (checkRes === true) {
+      saveFn.current(patchFormValues(params));
+    } else {
+      enqueueSnackbar(checkRes, {
+        variant: 'error'
+      });
+    }
+  }, [checkFormState, enqueueSnackbar, patchFormValues]);
+  const handleRemoveLocale = (0, _react.useCallback)(currentLocale => {
+    state.formState.title = (0, _omit.default)(state.formState.title, currentLocale);
+    state.formState.link = (0, _omit.default)(state.formState.link, currentLocale);
+  }, [state.formState]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    open: show,
+    title: name,
+    onClose: close,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: handleSubmit(handleFormSubmit),
+      color: "primary",
+      autoFocus: true,
+      variant: "contained",
+      children: t('common.confirm')
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_localeTabs.default, {
+      sx: {
+        mb: 1
+      },
+      onChange: handleChangeLocale,
+      onRemoveLocale: handleRemoveLocale,
+      locales: state.localeList
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+      noValidate: true,
+      autoComplete: "off",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "title",
+        control: control,
+        rules: {
+          validate: validTitle
+        },
+        render: _ref3 => {
+          var _errors$title, _errors$title2;
+          let {
+            field
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread({
+            fullWidth: true,
+            variant: "outlined",
+            margin: "dense",
+            required: true,
+            placeholder: t('navigation.form.titlePlaceholder'),
+            label: t('navigation.form.title'),
+            disabled: state.isEdit,
+            error: !!(errors !== null && errors !== void 0 && (_errors$title = errors.title) !== null && _errors$title !== void 0 && _errors$title.message),
+            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$title2 = errors.title) === null || _errors$title2 === void 0 ? void 0 : _errors$title2.message) || ' '
+          }, field));
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "icon",
+        control: control,
+        rules: {
+          validate: validIcon
+        },
+        render: _ref4 => {
+          var _errors$icon, _errors$icon2;
+          let {
+            field
+          } = _ref4;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({
+            fullWidth: true,
+            variant: "outlined",
+            margin: "dense",
+            placeholder: t('navigation.form.iconPlaceholder'),
+            label: t('navigation.form.icon'),
+            error: !!(errors !== null && errors !== void 0 && (_errors$icon = errors.icon) !== null && _errors$icon !== void 0 && _errors$icon.message),
+            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$icon2 = errors.icon) === null || _errors$icon2 === void 0 ? void 0 : _errors$icon2.message) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              display: "flex",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                component: "a",
+                href: "https://icones.js.org",
+                target: "_blank",
+                display: "flex",
+                alignItems: "center",
+                children: [t('navigation.form.findMoreIcon'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                  style: {
+                    marginLeft: 4
+                  },
+                  icon: "radix-icons:external-link"
+                })]
+              })
+            })
+          }, field), {}, {
+            InputProps: {
+              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                  sx: {
+                    cursor: 'default'
+                  },
+                  disableFocusRipple: true,
+                  disableRipple: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSuffix, {
+                    icon: watchIcon
+                  })
+                })
+              })
+            }
+          }));
+        }
+      }), state.isRoot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "component",
+        control: control,
+        render: _ref5 => {
+          var _errors$component, _errors$component2;
+          let {
+            field
+          } = _ref5;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleSelect.default, _objectSpread({
+            fullWidth: true,
+            margin: "dense",
+            disabled: state.type === 'edit',
+            label: t('navigation.form.component'),
+            placeholer: t('navigation.form.componentPlaceholder'),
+            options: components.map(item => ({
+              title: item.title,
+              value: item.name,
+              description: item.link
+            })),
+            error: !!(errors !== null && errors !== void 0 && (_errors$component = errors.component) !== null && _errors$component !== void 0 && _errors$component.message),
+            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$component2 = errors.component) === null || _errors$component2 === void 0 ? void 0 : _errors$component2.message) || ' '
+          }, field));
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "link",
+        control: control,
+        rules: {
+          validate: validLink
+        },
+        render: _ref6 => {
+          var _errors$link3, _errors$link4;
+          let {
+            field
+          } = _ref6;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+            fullWidth: true,
+            margin: "dense",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, _objectSpread(_objectSpread({
+              disablePortal: true,
+              freeSolo: true,
+              blurOnSelect: true,
+              autoSelect: true,
+              fullWidth: true,
+              disabled: state.linkDisabled,
+              isOptionEqualToValue: option => option.label,
+              options: autocompleteOptions,
+              renderInput: params => {
+                var _errors$link, _errors$link2;
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+                  placeholder: t('navigation.form.linkPlaceholder'),
+                  label: t('navigation.form.link'),
+                  error: !!(errors !== null && errors !== void 0 && (_errors$link = errors.link) !== null && _errors$link !== void 0 && _errors$link.message),
+                  helperText: (errors === null || errors === void 0 ? void 0 : (_errors$link2 = errors.link) === null || _errors$link2 === void 0 ? void 0 : _errors$link2.message) || '/abc/bcd or /abc or https://arcblock.io'
+                  // FIXME: 添加了 startAdornment 后，autocomplete 选项无法显示，之后换成 antd 的 autocomplete 可以解决这个问题
+                  ,
+                  InputProps: {
+                    startAdornment: linkPrefix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                      position: "start",
+                      sx: {
+                        textDecoration: (0, _isAbsoluteUrl.default)(watchLink || '') ? 'line-through' : ''
+                      },
+                      children: linkPrefix
+                    }) : null
+                  }
+                }));
+              },
+              renderOption: (props, option) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({
+                component: "li"
+              }, props), {}, {
+                children: [option.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                  marginLeft: 1,
+                  component: "span",
+                  variant: "body2",
+                  color: "text.secondary",
+                  children: option.title
+                })]
+              })),
+              error: !!(errors !== null && errors !== void 0 && (_errors$link3 = errors.link) !== null && _errors$link3 !== void 0 && _errors$link3.message),
+              helperText: (errors === null || errors === void 0 ? void 0 : (_errors$link4 = errors.link) === null || _errors$link4 === void 0 ? void 0 : _errors$link4.message) || ' ',
+              margin: "dense"
+            }, field), {}, {
+              onChange: () => {},
+              onInputChange: (e, value) => {
+                field.onChange(value);
+              }
+            }))
+          });
+        }
+      }), ['dashboard', 'sessionManager'].includes(section) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+        name: "role",
+        control: control,
+        render: _ref7 => {
+          var _errors$role, _errors$role2;
+          let {
+            field
+          } = _ref7;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleSelect.default, _objectSpread({
+            fullWidth: true,
+            multiple: true,
+            margin: "dense",
+            label: t('navigation.form.role'),
+            placeholer: t('navigation.form.rolePlaceholder'),
+            options: roles.map(role => ({
+              title: role.title,
+              value: role.name
+            })),
+            error: !!(errors !== null && errors !== void 0 && (_errors$role = errors.role) !== null && _errors$role !== void 0 && _errors$role.message),
+            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$role2 = errors.role) === null || _errors$role2 === void 0 ? void 0 : _errors$role2.message) || ' '
+          }, field));
+        }
+      })]
+    })]
+  });
+});
+NavigationDialog.propTypes = {
+  section: _propTypes.default.string,
+  components: _propTypes.default.array,
+  rawNavigations: _propTypes.default.array
+};
+NavigationDialog.defaultProps = {
+  section: '',
+  components: [],
+  rawNavigations: []
+};
+var _default = NavigationDialog;
+exports.default = _default;