@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

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, _context.useLocaleContext)();
+  const isRoot = !ancestors.map(x => x.meta.did)[0];
+  const isLevel1 = ancestors.length === 1;
+  const [tab, setTab] = (0, _react.useState)('settings');
+  const name = ancestors.concat(blocklet).slice(1).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 || isLevel1 ? /*#__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]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_environment.default, {
+      blocklet: blocklet,
+      ancestors: ancestors
+    })
+  })];
+}
+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,117 @@
+"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) { 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 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"])));

package/lib/blocklet/component/environment.js

@@ -0,0 +1,289 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentEnvironment;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = _interopRequireDefault(require("@material-table/core"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _constant = require("@blocklet/constant");
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _tableIcons = _interopRequireDefault(require("../../table-icons"));
+var _table = _interopRequireDefault(require("../../table"));
+var _permission = _interopRequireDefault(require("../../permission"));
+var _util2 = require("../../util");
+var _icons = _interopRequireDefault(require("../icons"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+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 ComponentEnvironment(_ref) {
+  let {
+    blocklet,
+    ancestors
+  } = _ref;
+  const node = (0, _node.useNodeContext)();
+  const {
+    inService
+  } = node;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
+  const onConfigChanged = () => _toast.default.success(t('blocklet.config.changedTip'));
+  const isConfigEditable = x => x.custom;
+  if ((0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && (0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  const onAddConfig = async data => {
+    if (!data.key.trim() || !data.value.trim()) {
+      _toast.default.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (data.key.startsWith('BLOCKLET_') || data.key.startsWith('COMPONENT_')) {
+      _toast.default.error(t('blocklet.config.environment.invalidKey'));
+      return;
+    }
+    data.custom = true;
+    const result = await node.api.configBlocklet({
+      input: {
+        did: dids,
+        configs: [data]
+      }
+    });
+    if (result.code === 'ok') {
+      onConfigChanged(result.blocklet);
+    }
+  };
+  const onEditConfig = async (newData, oldData) => {
+    // only required field can't be empty
+    if (newData.required && (!newData.key.trim() || !newData.value.trim())) {
+      _toast.default.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (newData.key.startsWith('BLOCKLET_') && !_constant.BLOCKLET_CONFIGURABLE_KEY[newData.key]) {
+      _toast.default.error(t('blocklet.config.environment.invalidKey'));
+      return;
+    }
+    if (newData.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
+      const errMessage = (0, _util2.isValidClusterSize)(newData);
+      if (errMessage) {
+        _toast.default.error(errMessage);
+        return;
+      }
+    }
+    const configs = [newData];
+    if (newData.key !== oldData.key) {
+      if (!newData.custom) {
+        _toast.default.error('Only key of custom env can be changed');
+        return;
+      }
+      configs.push({
+        key: oldData.key,
+        custom: true
+      });
+    }
+    try {
+      const result = await node.api.configBlocklet({
+        input: {
+          did: dids,
+          configs
+        }
+      });
+      if (result.code === 'ok') {
+        onConfigChanged(result.blocklet);
+      }
+    } catch (err) {
+      _toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const onDeleteConfig = async data => {
+    if (data.required) {
+      _toast.default.error(t('blocklet.config.environment.deleteForbidden'));
+      return;
+    }
+    if (!data.custom) {
+      _toast.default.error('Only key of custom env can be changed');
+      return;
+    }
+    const result = await node.api.configBlocklet({
+      input: {
+        did: dids,
+        configs: [{
+          key: data.key,
+          custom: true
+        }]
+      }
+    });
+    if (result.code === 'ok') {
+      onConfigChanged(result.blocklet);
+    }
+  };
+
+  // configs
+  const componentConfigs = (blocklet.configs || []).filter(x => !_constant.BLOCKLET_CONFIGURABLE_KEY[x.key]);
+  const sharedConfigObj = (0, _util.getSharedConfigObj)(blocklet, ancestors);
+  const missingRequiredConfigs = (0, _util.getComponentMissingConfigs)(blocklet, ancestors);
+  const configs = componentConfigs.map(x => _objectSpread(_objectSpread({}, x), {}, {
+    value: sharedConfigObj[x.key] || x.value
+  }));
+  const hasBWAConfig = configs.some(x => x.key && x.key.startsWith('BWA_'));
+  const action = {
+    onRowAdd: onAddConfig,
+    onRowUpdate: onEditConfig,
+    onRowDelete: onDeleteConfig,
+    // environment declare in blocklet.yml can't be deleted, only custom env can be deleted
+    isDeletable: isConfigEditable
+  };
+  const onColumns = () => [{
+    title: t('common.key'),
+    field: 'key',
+    initialEditValue: 'Key',
+    width: '30%',
+    render: d => /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+      value: d.value,
+      style: {
+        color: d.required && !d.value ? '#ff4436' : '#222222',
+        fontWeight: d.required ? 'bold' : 'normal'
+      },
+      children: d.key
+    }),
+    editComponent: props => {
+      const {
+        value,
+        rowData,
+        onChange: _onChange
+      } = props;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditDiv, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          fullWidth: true,
+          size: "small",
+          disabled: isConfigEditable(rowData) === false,
+          value: value,
+          onChange: e => _onChange(e.target.value),
+          variant: "outlined",
+          label: "Key",
+          placeholder: t('blocklet.config.environment.key'),
+          margin: "dense",
+          autoFocus: true
+        })
+      });
+    }
+  }, {
+    title: t('common.value'),
+    field: 'value',
+    initialEditValue: 'Value',
+    width: 'calc((100% - (96px + 30%)) / 1)',
+    render: d => {
+      if (d.secure) {
+        return '******';
+      }
+      if (!d.value) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+        unstyled: true,
+        value: d.value,
+        style: {
+          wordBreak: 'break-all'
+        },
+        children: d.value
+      });
+    },
+    // eslint-disable-next-line no-shadow
+    editComponent: props => {
+      const {
+        value,
+        rowData,
+        onChange: _onChange2
+      } = props;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditDiv, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          fullWidth: true,
+          size: "small",
+          value: value === '__encrypted__' ? '' : value,
+          onChange: e => _onChange2(e.target.value),
+          variant: "outlined",
+          label: t('common.value'),
+          placeholder: t('blocklet.config.environment.value'),
+          margin: "dense",
+          autoFocus: true
+        }), rowData.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginLeft: 12
+          },
+          children: rowData.description
+        })]
+      });
+    }
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [!!missingRequiredConfigs.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      severity: "error",
+      style: {
+        marginTop: 24
+      },
+      children: t('blocklet.config.missingRequired')
+    }), hasBWAConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      severity: "info",
+      children: t('blocklet.config.environment.tip')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+      permission: inService ? '' : 'mutate_blocklets',
+      role: inService ? _util2.BlockletAdminRoles : [],
+      children: hasPermission => /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, {
+        className: (0, _util2.isBlockletDev)(blocklet) ? 'readonly-block config-table' : 'config-table',
+        "data-disabled-text": t('blocklet.config.disabledText'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_core.default, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+            children: t('common.environment')
+          }),
+          columns: onColumns(),
+          icons: _objectSpread(_objectSpread({}, _icons.default), _tableIcons.default),
+          options: {
+            emptyRowsWhenPaging: false,
+            actionsColumnIndex: -1,
+            tableLayout: 'auto',
+            maxBodyHeight: '100%',
+            paging: false,
+            search: false
+          },
+          localization: {
+            header: {
+              actions: t('common.actions')
+            },
+            body: {
+              emptyDataSourceMessage: t('common.noData')
+            }
+          },
+          data: configs,
+          editable: hasPermission ? action : {}
+        })
+      })
+    })]
+  });
+}
+ComponentEnvironment.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array
+};
+ComponentEnvironment.defaultProps = {
+  ancestors: []
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .readonly-block {\n    position: relative;\n    &::after {\n      content: attr(data-disabled-text);\n      position: absolute;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-color: rgba(230, 230, 230, 0.7);\n      font-size: 24px;\n      letter-spacing: 2px;\n      color: #e33371;\n      padding: 20px;\n      word-break: break-all;\n      word-wrap: break-word;\n      z-index: 10;\n    }\n  }\n  .config-table {\n    margin-bottom: 24px;\n    position: relative;\n    .hide-control {\n      position: absolute;\n      top: 10px;\n      left: 200px;\n      @media (max-width: ", "px) {\n        left: 160px;\n      }\n    }\n\n    .MuiToolbar-root {\n      display: flex;\n    }\n\n    .MuiTableRow-head {\n      display: none;\n    }\n\n    &.hide-header {\n      .MuiToolbar-root {\n        display: none;\n      }\n    }\n  }\n\n  .accordion {\n    margin-bottom: 16px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n    padding: 8px 0 8px 0px;\n    &.MuiAccordion-root {\n      background: transparent;\n      box-shadow: none;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      &::before,\n      &::after {\n        height: 0;\n      }\n      .MuiAccordionSummary-root {\n        padding-left: 0;\n      }\n      .accordion-title {\n        font-weight: bold;\n        padding-left: 16px;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm);
+const EditDiv = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 60px;\n"])));

package/lib/blocklet/component/expiration.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _last = _interopRequireDefault(require("lodash/last"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Expiration(_ref) {
+  var _state$value, _state$value$data, _state$value$data$val;
+  let {
+    controller
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const state = (0, _useAsync.default)(async () => (0, _util.getAsset)(controller.chainHost, controller.nftId));
+  if (state.loading) {
+    return '';
+  }
+  const expirationDate = (0, _last.default)((0, _get.default)(state.value, 'data.value.expirationDate', []));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+      value: expirationDate,
+      locale: locale
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      style: {
+        marginLeft: '5px'
+      },
+      variant: "contained",
+      component: _Link.default,
+      href: (0, _urlJoin.default)((_state$value = state.value) === null || _state$value === void 0 ? void 0 : (_state$value$data = _state$value.data) === null || _state$value$data === void 0 ? void 0 : (_state$value$data$val = _state$value$data.value) === null || _state$value$data$val === void 0 ? void 0 : _state$value$data$val.launcherUrl, "/instances/".concat(controller.nftId, "/renewal?locale=").concat(locale, "&return-url=").concat(encodeURIComponent(window.location.href))),
+      children: t('common.renew')
+    })]
+  });
+}
+Expiration.propTypes = {
+  controller: _propTypes.default.object.isRequired
+};
+var _default = Expiration;
+exports.default = _default;