@abtnode/ux 1.8.26 → 1.8.28

package/lib/blocklet/audit-logs.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WrappedAuditLogs;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactRouterDom = require("react-router-dom");
+var _reactMarkdownPreview = _interopRequireDefault(require("@uiw/react-markdown-preview"));
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Pagination = _interopRequireDefault(require("@mui/lab/Pagination"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _auditLog = require("../contexts/audit-log");
+var _node = require("../contexts/node");
+var _relativeTime = _interopRequireDefault(require("../relative-time"));
+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) } })); }
+const getUserLink = _ref => {
+  let {
+    log,
+    info,
+    inService
+  } = _ref;
+  if (inService) {
+    // TODO
+    return "/members?did=".concat(log.actor.did);
+  }
+  if (log.scope === info.did) {
+    return "/team/members?did=".concat(log.actor.did);
+  }
+  return "/blocklets/".concat(log.scope, "/members?did=").concat(log.actor.did);
+};
+function AuditLog(_ref2) {
+  var _log$env$os, _log$env$browser;
+  let {
+    log
+  } = _ref2;
+  const {
+    inService,
+    info
+  } = (0, _node.useNodeContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    className: "log-entry",
+    "data-cy": "log-entry",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "log-author",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        did: log.actor.did,
+        size: 36,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "log-body",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        className: "log-header",
+        color: "textSecondary",
+        component: "p",
+        gutterBottom: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Link, {
+          to: getUserLink({
+            log,
+            inService,
+            info
+          }),
+          target: "_blank",
+          children: [log.actor.fullName, log.actor.role ? "(".concat(log.actor.role, ")") : '']
+        }), ' ', "- ", log.action]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        className: "log-content",
+        color: "textPrimary",
+        component: "div",
+        "data-color-mode": "light",
+        gutterBottom: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview.default, {
+          source: log.content,
+          linkTarget: "_blank"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "log-meta",
+        variant: "body2",
+        children: [!!log.ip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          color: "textSecondary",
+          children: "IP: ".concat(log.ip)
+        }), !!((_log$env$os = log.env.os) !== null && _log$env$os !== void 0 && _log$env$os.name) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "span",
+          color: "textSecondary",
+          children: [log.env.os.name, "(", log.env.os.version, ")"]
+        }), !!((_log$env$browser = log.env.browser) !== null && _log$env$browser !== void 0 && _log$env$browser.name) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "span",
+          color: "textSecondary",
+          children: [log.env.browser.name, "(", log.env.browser.version, ")"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          color: "textSecondary",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_relativeTime.default, {
+            value: log.createdAt
+          })
+        })]
+      })]
+    })]
+  });
+}
+function AuditLogs() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    data,
+    loading,
+    paging,
+    filter,
+    categories,
+    setCategory,
+    fetch
+  } = (0, _auditLog.useAuditLogContext)();
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        textAlign: 'center',
+        marginTop: '50px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    "data-cy": "audit-logs",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "log-controls",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+        style: {
+          width: '240px'
+        },
+        variant: "outlined",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+          children: t('common.filter')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          "data-cy": "filter-by-category-trigger",
+          value: filter.category,
+          onChange: e => setCategory(e.target.value),
+          fullWidth: true,
+          label: t('common.category'),
+          disabled: loading,
+          children: categories.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            value: x.value,
+            "data-cy": "filter-by-category-".concat(x.value),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: x.label
+              })
+            })
+          }, x.label))
+        })]
+      })
+    }), data.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: t('common.empty')
+    }), data.length > 0 && data.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(AuditLog, {
+      log: x
+    }, x.id)), paging.pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
+      page: paging.page,
+      count: paging.pageCount,
+      onChange: (e, page) => fetch({
+        page
+      }),
+      showFirstButton: true,
+      showLastButton: true
+    })]
+  });
+}
+function WrappedAuditLogs(_ref3) {
+  let {
+    scope
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_auditLog.AuditLogProvider, {
+    scope: scope,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AuditLogs, {})
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .log-controls {\n    display: flex;\n    justify-content: space-between;\n  }\n  .log-entry {\n    display: flex;\n    margin: 16px 0;\n\n    .log-author {\n      margin-right: 8px;\n    }\n\n    .log-body {\n      flex: 1;\n\n      a {\n        color: ", ";\n      }\n\n      .log-header {\n      }\n\n      .log-content {\n        p {\n          margin-bottom: 4px;\n        }\n        ul,\n        ol {\n          padding-left: 2rem;\n        }\n        li {\n          list-style-type: disc;\n        }\n      }\n\n      .log-meta {\n        margin-top: 4px;\n\n        span {\n          font-size: 0.8rem;\n          display: inline-block;\n          margin-right: 8px;\n          padding-right: 8px;\n          border-right: 1px solid #ccc;\n\n          &:last-of-type {\n            border-right: none;\n          }\n        }\n      }\n    }\n  }\n"])), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.palette.primary.main;
+});

package/lib/blocklet/avatar.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletAvatar;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _constant = require("@abtnode/constant");
+var _node = require("../contexts/node");
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["blocklet", "style", "size", "ancestors"];
+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; }
+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; }
+const getDeployedFrom = (blocklet, node) => {
+  let {
+    deployedFrom
+  } = blocklet || {};
+  if (!deployedFrom && blocklet.source === 'registry') {
+    deployedFrom = node.info.blockletRegistry;
+  }
+  return deployedFrom;
+};
+function BlockletAvatar(_ref) {
+  var _blocklet$meta;
+  let {
+      blocklet,
+      style,
+      size,
+      ancestors
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const node = (0, _node.useNodeContext)();
+  const {
+    inService
+  } = node;
+  let logoUrl = inService ? (0, _urlJoin.default)(_util.APP_PREFIX, _constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/blocklet/logo?version=".concat(blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version)) : (0, _urlJoin.default)(node.prefix, 'blocklet.png');
+  const {
+    variant
+  } = rest;
+  if (!inService) {
+    const deployedFrom = getDeployedFrom(blocklet, node);
+    if (blocklet.source === 'registry' && blocklet.meta.logo) {
+      logoUrl = (0, _urlJoin.default)(deployedFrom, (0, _util.formatRegistryLogoPath)(blocklet.meta.bundleDid, blocklet.meta.logo));
+    } else {
+      const prefix = window.env.apiPrefix || '/';
+      logoUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo".concat(ancestors.map(x => "/".concat(x.meta.did)).join(''), "/").concat(blocklet.meta.did));
+    }
+  }
+  const setFallBackUrl = inService ? () => {} : ev => {
+    ev.target.src = "".concat(node.prefix, "/blocklet.png");
+  };
+  let imgEle = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    src: logoUrl,
+    onError: setFallBackUrl,
+    alt: blocklet.meta.name,
+    style: {
+      width: size
+    }
+  });
+  if (!blocklet.meta.logo) {
+    imgEle = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+      did: blocklet.meta.did || '',
+      responsive: true
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
+    variant: variant || 'square',
+    style: Object.assign({
+      backgroundColor: 'transparent',
+      width: size,
+      height: size,
+      borderRadius: 10
+    }, style)
+  }, rest), {}, {
+    children: imgEle
+  }));
+}
+BlockletAvatar.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  style: _propTypes.default.object,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  ancestors: _propTypes.default.array
+};
+BlockletAvatar.defaultProps = {
+  style: {},
+  size: 40,
+  ancestors: []
+};

package/lib/blocklet/blocklet-source.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletSource;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _toUpper = _interopRequireDefault(require("lodash/toUpper"));
+var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function BlockletSource(_ref) {
+  var _blocklet$meta;
+  let {
+    sourceInfo,
+    blocklet
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+      type: "success",
+      children: (0, _toUpper.default)(sourceInfo.source)
+    }, "source"), sourceInfo.source === 'registry' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+      href: (0, _urlJoin.default)(sourceInfo.deployedFrom, 'blocklets', (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.bundleDid) || ''),
+      target: "_blank",
+      className: "page-link",
+      underline: "hover",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 8
+      },
+      children: t('blocklet.overview.viewInStore')
+    })]
+  });
+}
+BlockletSource.propTypes = {
+  sourceInfo: _propTypes.default.shape({
+    source: _propTypes.default.string,
+    deployedFrom: _propTypes.default.string
+  }),
+  blocklet: _propTypes.default.object
+};
+BlockletSource.defaultProps = {
+  sourceInfo: {},
+  blocklet: {}
+};

package/lib/blocklet/component/configuration.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentConfiguration;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _util2 = require("../../util");
+var _environment = _interopRequireDefault(require("./environment"));
+var _setting = _interopRequireDefault(require("./setting"));
+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 ComponentConfiguration(_ref) {
+  let {
+    blocklet,
+    ancestors,
+    children
+  } = _ref;
+  const [showDialog, setShowDialog] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const isRoot = !ancestors.map(x => x.meta.did)[0];
+  const isDynamic = blocklet.dynamic;
+  const [tab, setTab] = (0, _react.useState)('settings');
+  const name = ancestors.concat(blocklet).map(x => (0, _util.getDisplayName)(x, true)).join(' / ');
+  if ((0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && (0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  const onClose = () => {
+    setShowDialog(false);
+  };
+  const onOpen = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setShowDialog(true);
+  };
+  const tabConfigs = {
+    settings: {
+      label: t('blocklet.component.setting'),
+      value: 'settings',
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_setting.default, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      })
+    },
+    environments: {
+      label: t('common.environment'),
+      value: 'environments',
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_environment.default, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      })
+    }
+  };
+  const tabs = Object.values(tabConfigs).map(_ref2 => {
+    let {
+      label,
+      value
+    } = _ref2;
+    return {
+      label,
+      value
+    };
+  });
+  const onTabChange = newTab => {
+    setTab(newTab);
+  };
+  const tabConfig = tabConfigs[tab] || tabConfigs.settings;
+  return [typeof children === 'function' ? children({
+    open: onOpen
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    onClick: onOpen,
+    "data-cy": "action-config-component",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {})
+  }), showDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDialog, {
+    open: true,
+    fullWidth: true,
+    maxWidth: "md",
+    title: name,
+    onClose: onClose,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    children: isRoot || !isDynamic ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_environment.default, {
+      blocklet: blocklet,
+      ancestors: ancestors
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      mt: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+        tabs: tabs,
+        current: tab,
+        onChange: onTabChange,
+        scrollButtons: "auto"
+      }), tabConfig.component]
+    })
+  })];
+}
+ComponentConfiguration.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array,
+  children: _propTypes.default.any
+};
+ComponentConfiguration.defaultProps = {
+  ancestors: [],
+  children: null
+};
+const StyledDialog = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n    padding-top: 0;\n    margin-top: -32px;\n  }\n  .MuiToolbar-root {\n    padding-right: 12px;\n  }\n  .ux-dialog_right {\n    padding-right: 20px;\n  }\n"])));

package/lib/blocklet/component/delete.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DeleteComponent;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _confirm = _interopRequireDefault(require("../../confirm"));
+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 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; }
+function DeleteComponent(_ref) {
+  let {
+    component,
+    remove,
+    disabled,
+    tip
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [deleteSetting, setDeleteSetting] = (0, _react.useState)(null);
+  const deleteComponent = async param => {
+    setLoading(true);
+    await remove(param.component, param.removeType);
+    setLoading(false);
+    setDeleteSetting(null);
+  };
+  const componentDisabled = disabled || loading;
+  const btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    disabled: componentDisabled,
+    onClick: () => setDeleteSetting({
+      title: t('blocklet.component.delete'),
+      // eslint-disable-next-line react/no-unstable-nested-components
+      description: (params, setParams) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        component: "div",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          gutterBottom: true,
+          children: t('blocklet.action.removeComponentDescription')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RadioGroup.default, {
+          name: "removeType",
+          value: params.removeType,
+          onChange: e => setParams(_objectSpread(_objectSpread({}, params), {}, {
+            removeType: e.target.value
+          })),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+            value: "keepData",
+            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {}),
+            label: t('blocklet.action.removeComponentKeepData')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+            value: "complete",
+            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {}),
+            label: t('blocklet.action.removeComponentComplete')
+          })]
+        })]
+      }),
+      confirm: t('common.confirm'),
+      cancel: t('common.cancel'),
+      params: {
+        component,
+        removeType: 'keepData'
+      },
+      onConfirm: deleteComponent,
+      onCancel: () => setDeleteSetting(null)
+    }),
+    "data-cy": "delete-component-btn",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+      disabled: componentDisabled
+    })
+  });
+  const btnWithToolTip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: tip || t('common.delete'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: btn
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [btnWithToolTip, deleteSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: deleteSetting.title,
+      description: deleteSetting.description,
+      confirm: deleteSetting.confirm,
+      cancel: deleteSetting.cancel,
+      params: deleteSetting.params,
+      onConfirm: deleteSetting.onConfirm,
+      onCancel: deleteSetting.onCancel
+    })]
+  });
+}
+DeleteComponent.propTypes = {
+  component: _propTypes.default.object.isRequired,
+  remove: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  tip: _propTypes.default.string
+};
+DeleteComponent.defaultProps = {
+  remove: async () => {},
+  disabled: false,
+  tip: ''
+};
+const StyledButton = (0, _styled.default)(_IconButton.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.Mui-disabled {\n    opacity: 0.5;\n  }\n"])));