@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
+var _Footer = _interopRequireDefault(require("@blocklet/ui-react/lib/Footer"));
+var _Dashboard = _interopRequireDefault(require("@blocklet/ui-react/lib/Dashboard"));
+var _linkBlocker = _interopRequireDefault(require("@blocklet/ui-react/lib/common/link-blocker"));
+var _material = require("@mui/material");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _blocklet = require("../../../contexts/blocklet");
+var _useAppLogo = _interopRequireDefault(require("../../../hooks/use-app-logo"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function NavigationPreview(_ref) {
+  let {
+    className,
+    navigation
+  } = _ref;
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    logoUrl
+  } = (0, _useAppLogo.default)({
+    blocklet
+  });
+  const blockletInfo = {
+    appId: blocklet.appDid,
+    appLogo: logoUrl,
+    appName: blocklet.meta.title,
+    enableConnect: true,
+    enableLocale: false,
+    navigation
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkBlocker.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+        meta: blockletInfo
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.default, {
+          meta: blockletInfo,
+          invalidPathFallback: () => {},
+          headerProps: {
+            style: {
+              display: 'none'
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            container: true,
+            spacing: 2,
+            children: new Array(6).fill().map((item, index) => {
+              return (
+                /*#__PURE__*/
+                // eslint-disable-next-line react/no-array-index-key
+                (0, _jsxRuntime.jsxs)(_material.Grid, {
+                  item: true,
+                  xs: 4,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    animation: false,
+                    variant: "rectangular",
+                    width: "100%",
+                    height: 120
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                      pt: 0.5
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                      animation: false
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                      width: "60%",
+                      animation: false
+                    })]
+                  })]
+                }, index)
+              );
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
+        meta: blockletInfo
+      })]
+    })
+  });
+}
+NavigationPreview.propTypes = {
+  className: _propTypes.default.string,
+  navigation: _propTypes.default.array
+};
+NavigationPreview.defaultProps = {
+  className: '',
+  navigation: []
+};
+const StyledNavigationPreview = (0, _styled.default)(NavigationPreview)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .dashboard {\n    height: auto !important;\n  }\n  .dashboard-content + div {\n    display: none;\n  }\n"])));
+var _default = StyledNavigationPreview;
+exports.default = _default;

package/lib/blocklet/component/navigation/simple-select.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["fullWidth", "multiple", "required", "label", "placeholer", "options", "helperText", "error", "margin"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function SimpleSelect(_ref) {
+  let {
+      fullWidth,
+      multiple,
+      required,
+      label,
+      placeholer,
+      options,
+      helperText,
+      error,
+      margin
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const defaultOption = options.find(item => item.value === rest.value);
+  const defaultValue = defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    margin: margin,
+    fullWidth: fullWidth,
+    error: error,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      children: "".concat(label).concat(required ? '*' : '')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, _objectSpread(_objectSpread({
+      multiple: multiple,
+      input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.OutlinedInput, {
+        defaultValue: defaultValue,
+        sx: {
+          flex: 1
+        },
+        required: required,
+        label: label,
+        inputProps: {
+          margin
+        }
+      }),
+      renderValue: selected => {
+        if (multiple) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5
+            },
+            children: selected.map(value => {
+              const option = options.find(item => item.value === value);
+              return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                size: "small",
+                label: option.title
+              }, value);
+            })
+          });
+        }
+        const option = options.find(item => item.value === selected);
+        return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "span",
+            children: option.title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            marginLeft: 1,
+            component: "span",
+            variant: "body2",
+            color: "text.secondary",
+            children: option.description
+          })]
+        });
+      }
+    }, rest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        disabled: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+          children: placeholer
+        })
+      }), !multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "",
+        children: "None"
+      }), options.map(option => option && option.value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        value: option.value,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+          children: option.title
+        }), option.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          children: option.description
+        })]
+      }, option.value))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormHelperText, {
+      children: helperText
+    })]
+  });
+}
+SimpleSelect.propTypes = {
+  error: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  multiple: _propTypes.default.bool,
+  fullWidth: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  placeholer: _propTypes.default.string,
+  options: _propTypes.default.array,
+  helperText: _propTypes.default.string,
+  margin: _propTypes.default.string
+};
+SimpleSelect.defaultProps = {
+  error: false,
+  required: false,
+  multiple: false,
+  fullWidth: false,
+  label: '',
+  placeholer: '',
+  options: [],
+  helperText: '',
+  margin: ''
+};
+var _default = SimpleSelect;
+exports.default = _default;

package/lib/blocklet/component/select-store.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectStore;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _constant = require("@abtnode/constant");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+var _constants = require("../../util/constants");
+var _node = require("../../contexts/node");
+var _blocklet = require("../../contexts/blocklet");
+var _add = _interopRequireDefault(require("../../store/add"));
+var _item = _interopRequireDefault(require("../../store/item"));
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function SelectStore(_ref) {
+  let {
+    onChange: _onChange,
+    loading,
+    children,
+    extra
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    info: nodeInfo,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const storeSelectRef = (0, _react.useRef)(null);
+  const storageKey = inService ? _constants.STORAGE_KEY_STORE_BLOCKLET : _constants.STORAGE_KEY_STORE_SERVER;
+  const [storeUrl, setStoreUrl] = (0, _useLocalStorage.default)(storageKey);
+  const {
+    storeList,
+    teamDid
+  } = (0, _util.getStoreList)({
+    fromBlocklet: inService,
+    blocklet,
+    nodeInfo
+  });
+  const currentRegistry = storeUrl && storeList.find(x => storeUrl === x.url) || storeList[0];
+  const isServerlessMode = nodeInfo.mode === _constant.NODE_MODES.SERVERLESS;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(SelectStoreTitle, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ref: storeSelectRef,
+        color: "secondary",
+        "data-cy": "add-component-select-store",
+        endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {
+          color: "secondary"
+        }),
+        onClick: () => {
+          setOpen(true);
+        },
+        style: {
+          padding: '0 2px'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          color: "secondary",
+          children: currentRegistry.name
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        color: "secondary",
+        children: extra
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TextField.default, {
+      id: "mui-registry-select",
+      select: true,
+      autoComplete: "off",
+      variant: "outlined",
+      name: "did",
+      helperText: t('blocklet.component.selectRegistryTip'),
+      "data-cy": "component-registry-select",
+      fullWidth: true,
+      value: currentRegistry,
+      autoFocus: true,
+      onChange: e => {
+        const newRegistry = e.target.value;
+        setStoreUrl(newRegistry.url);
+        _onChange(newRegistry);
+      },
+      SelectProps: {
+        open,
+        MenuProps: {
+          anchorEl: storeSelectRef.current
+        },
+        renderValue: item => {
+          return item === null || item === void 0 ? void 0 : item.name;
+        },
+        onClose: () => {
+          setOpen(false);
+        }
+      },
+      style: {
+        display: 'none'
+      },
+      margin: "normal",
+      children: [storeList === null || storeList === void 0 ? void 0 : storeList.map(x => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: x,
+          "data-cy": x.url,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+            teamDid: teamDid,
+            store: x,
+            onDelete: () => {
+              if (storeUrl === x.url) {
+                var _storeList$;
+                setStoreUrl((_storeList$ = storeList[0]) === null || _storeList$ === void 0 ? void 0 : _storeList$.url);
+              }
+            }
+          })
+        }, x.url);
+      }), !isServerlessMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
+        disabled: loading,
+        storeList: storeList,
+        teamDid: teamDid,
+        onAdd: url => {
+          setStoreUrl(url);
+        }
+      })]
+    }), children({
+      currentRegistry
+    })]
+  });
+}
+SelectStore.propTypes = {
+  onChange: _propTypes.default.func,
+  loading: _propTypes.default.bool,
+  children: _propTypes.default.any.isRequired,
+  extra: _propTypes.default.node
+};
+SelectStore.defaultProps = {
+  onChange: () => {},
+  loading: false,
+  extra: ''
+};
+const SelectStoreTitle = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n\n  span {\n    font-size: 16px;\n    color: ", ";\n    // font-weight: bold;\n  }\n"])), props => props.theme.palette.common.black);

package/lib/blocklet/component/setting.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentSettingWithPermission;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _urlFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-friendly"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _formTextInput = _interopRequireDefault(require("../../form/form-text-input"));
+var _node = require("../../contexts/node");
+var _permission = require("../../permission");
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["blocklet", "ancestors", "hasPermission"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ComponentSetting(_ref) {
+  let {
+      blocklet,
+      ancestors,
+      hasPermission
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const isRoot = !ancestors.length;
+  const rootDid = isRoot ? blocklet.meta.did : ancestors.map(x => x.meta.did)[0];
+  const [loading, setLoading] = (0, _react.useState)('');
+  const [mountPointHelperText, setMountPointHelperText] = (0, _react.useState)('');
+  const disabled = loading || !hasPermission;
+  if (!rootDid) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && (0, _util.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  const onSubmitTitle = async value => {
+    setLoading(true);
+    try {
+      setLoading(false);
+      await api.updateComponentTitle({
+        input: {
+          rootDid,
+          did: blocklet.meta.did,
+          title: value
+        }
+      });
+    } catch (err) {
+      setLoading(false);
+      err.message = (0, _util.formatError)(err);
+      _toast.default.error(err.message);
+      throw err;
+    }
+  };
+  const onSubmitMountPoint = async value => {
+    setLoading(true);
+    try {
+      const input = {
+        rootDid,
+        mountPoint: (0, _urlFriendly.default)(value)
+      };
+      if (!isRoot) {
+        input.did = blocklet.meta.did;
+      }
+      await api.updateComponentMountPoint({
+        input
+      });
+      setLoading(false);
+      return true;
+    } catch (err) {
+      setLoading(false);
+      err.message = (0, _util.formatError)(err);
+      _toast.default.error(err.message);
+      throw err;
+    }
+  };
+  const handleMountPointChange = value => {
+    setMountPointHelperText(t('common.slugifyHint', {
+      value: (0, _util.formatMountPoint)(value)
+    }));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
+    component: "div"
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      mt: 3,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
+        label: t('common.title'),
+        style: {
+          marginTop: -24
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        required: true,
+        initialValue: blocklet.meta.title,
+        onSubmit: onSubmitTitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
+        label: t('blocklet.component.mountPoint'),
+        style: {
+          marginTop: -24
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        required: true,
+        initialValue: blocklet.mountPoint,
+        onSubmit: onSubmitMountPoint,
+        onChange: handleMountPointChange,
+        helperText: mountPointHelperText,
+        formatterBeforeSubmit: value => (0, _urlFriendly.default)(value)
+      })]
+    })
+  }));
+}
+const ComponentSettingInDaemon = (0, _permission.withPermission)(ComponentSetting, 'mutate_blocklets');
+const ComponentSettingInService = (0, _permission.withPermission)(ComponentSetting, '', _util.BlockletAdminRoles);
+function ComponentSettingWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentSettingInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentSettingInDaemon, _objectSpread({}, props));
+}
+ComponentSetting.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array,
+  hasPermission: _propTypes.default.bool
+};
+ComponentSetting.defaultProps = {
+  ancestors: [],
+  hasPermission: false
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));

package/lib/blocklet/component/sortable-tree.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactSortableTree = require("react-sortable-tree");
+var _reactSortableTreeThemeMaterialUi = _interopRequireDefault(require("react-sortable-tree-theme-material-ui"));
+var _react2 = require("@iconify/react");
+var _isObject = _interopRequireDefault(require("lodash/isObject"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+var _reactDnd = require("react-dnd");
+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); }
+function checkCanDrop(_ref) {
+  let {
+    prevPath,
+    nextPath
+  } = _ref;
+  const prevLen = prevPath.length;
+  const nextLen = nextPath.length;
+  if (prevLen === nextLen) {
+    if ((0, _isEqual.default)(prevPath.slice(0, prevLen - 1), nextPath.slice(0, nextLen - 1))) {
+      return true;
+    }
+  }
+  return false;
+}
+function TreeTitle(_ref2) {
+  let {
+    treeNode
+  } = _ref2;
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  function renderTitle() {
+    const {
+      title,
+      subtitle
+    } = treeNode;
+    let titleShow = title;
+    let subtitleShow = subtitle;
+    if ((0, _isObject.default)(title)) {
+      titleShow = title[locale];
+    }
+    if (! /*#__PURE__*/(0, _react.isValidElement)(subtitle) && (0, _isObject.default)(subtitle)) {
+      subtitleShow = subtitle[locale];
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "subtitle1",
+        fontSize: 16,
+        children: titleShow
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        color: "gray",
+        ml: 1.5,
+        children: subtitleShow
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [treeNode.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+      style: {
+        marginRight: 4
+      },
+      icon: treeNode.icon
+    }), renderTitle()]
+  });
+}
+TreeTitle.propTypes = {
+  treeNode: _propTypes.default.object.isRequired
+};
+function SortableTree(_ref3) {
+  let {
+    treeData,
+    setTreeData,
+    renderActions
+  } = _ref3;
+  const expandedData = treeData.map(item => _objectSpread(_objectSpread({}, item), {}, {
+    expanded: true
+  }));
+
+  // HACK: 兼容 mui-datatables 中的 react-dnd 使用
+  const dndProps = {};
+  if (typeof window !== 'undefined') {
+    dndProps.context = window;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDnd.DndProvider, _objectSpread(_objectSpread({
+    backend: _reactDndHtml5Backend.HTML5Backend
+  }, dndProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSortableTree.SortableTreeWithoutDndContext, {
+      generateNodeProps: rowInfo => {
+        return {
+          buttons: renderActions({
+            data: rowInfo.node,
+            className: 'list-item-actions'
+          }),
+          icons: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: "ic:round-drag-indicator"
+          }),
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeTitle, {
+            treeNode: rowInfo.node
+          })
+        };
+      },
+      maxDepth: 2,
+      isVirtualized: false,
+      treeData: expandedData,
+      onChange: setTreeData,
+      canDrop: checkCanDrop,
+      theme: _reactSortableTreeThemeMaterialUi.default
+    })
+  }));
+}
+SortableTree.propTypes = {
+  treeData: _propTypes.default.object.isRequired,
+  setTreeData: _propTypes.default.func,
+  renderActions: _propTypes.default.func
+};
+SortableTree.defaultProps = {
+  setTreeData: () => {},
+  renderActions: () => {}
+};
+var _default = SortableTree;
+exports.default = _default;