@abtnode/ux 1.8.26 → 1.8.28

package/lib/logs/clock.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Clock() {
+  const [currentTime, setCurrentTime] = (0, _react.useState)(+new Date());
+  (0, _useInterval.default)(() => {
+    setCurrentTime(+new Date());
+  }, 1000);
+  return (0, _util.formatTime)(currentTime, 'MMMM Do YYYY, h:mm:ss a');
+}
+var _default = Clock;
+exports.default = _default;

package/lib/logs/log-terminal.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogTerminal = void 0;
+exports.LogTerminalGroup = LogTerminalGroup;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _Terminal = _interopRequireDefault(require("@arcblock/terminal/lib/Terminal"));
+var _clock = _interopRequireDefault(require("./clock"));
+var _node = require("../contexts/node");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+const _excluded = ["name", "logId", "types", "initialData", "prepend"],
+  _excluded2 = ["logFile"];
+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 _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; }
+/**
+ * 按 level/destination 分类的一组 terminal
+ */
+function LogTerminalGroup(_ref) {
+  let {
+      name,
+      logId,
+      types,
+      initialData,
+      prepend
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    ws: {
+      useSubscription
+    }
+  } = (0, _node.useNodeContext)();
+  const logTypeLabels = {
+    info: 'Info',
+    error: 'Error',
+    access: 'Access',
+    stdout: 'stdout',
+    stderr: 'stderr'
+  };
+  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
+  const [currentType, setCurrentType] = (0, _react.useState)(types[0]);
+  const [logFiles, setLogFiles] = (0, _react.useState)();
+  const terminalRefs = (0, _react.useRef)({});
+
+  // 组件挂载时, 写入初始数据
+  (0, _react.useEffect)(() => {
+    types.forEach(type => {
+      const terminal = terminalRefs.current[type];
+      if (terminal) {
+        terminal.write("Collecting ".concat(type, " logs for ").concat(name, "..."));
+        terminal.write('\r\n\r\n');
+        initialData.forEach(item => terminal.write(item));
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 log 数据, 写入 terminal
+  useSubscription("log.".concat(logId), log => {
+    if (!logFiles) {
+      setLogFiles(log.logFiles || {});
+    }
+    const terminal = terminalRefs.current[log.level];
+    if (terminal) {
+      terminal.write(log.data.replace(/.\n/g, p => p === '\r\n' ? p : "".concat(p[0], "\r\n\r\n")));
+      terminal.write('\r\n\r\n');
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogTerminalGroupRoot, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "log-terminal-group-head",
+      children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+        variant: "outlined",
+        size: isMobile ? 'small' : 'medium',
+        children: types.map(type => {
+          const props = type === currentType ? {
+            variant: 'contained'
+          } : {};
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, props), {}, {
+            onClick: () => setCurrentType(type),
+            children: logTypeLabels[type]
+          }), type);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "log-terminal-group-terminals",
+      children: types.map(type => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogTerminal, {
+          ref: _ref2 => {
+            terminalRefs.current[type] = _ref2;
+          },
+          logFile: logFiles === null || logFiles === void 0 ? void 0 : logFiles[type],
+          style: {
+            visibility: type === currentType ? 'visible' : 'hidden'
+          }
+        }, type);
+      })
+    })]
+  }));
+}
+LogTerminalGroup.propTypes = {
+  // log name, 比如: blocklet display name
+  name: _propTypes.default.string.isRequired,
+  // 比如: abtnode | blocklet-services | blocklet-<did>
+  logId: _propTypes.default.string.isRequired,
+  // 日志类型, info/error 或 stdin/stdout/access
+  types: _propTypes.default.arrayOf(_propTypes.default.string),
+  // 写入 terminal 的初始数据
+  initialData: _propTypes.default.arrayOf(_propTypes.default.string),
+  prepend: _propTypes.default.node
+};
+LogTerminalGroup.defaultProps = {
+  types: ['error', 'info', 'access', 'stdout', 'stderr'],
+  initialData: [],
+  prepend: null
+};
+const LogTerminalGroupRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  .log-terminal-group-head {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding-bottom: 16px;\n\n    ", " {\n      flex-direction: column;\n      align-items: start;\n    }\n  }\n  .log-terminal-group-terminals {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    > * {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const LogTerminal = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+      logFile
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  const terminalStyle = {
+    width: '100%',
+    boxSizing: 'border-box',
+    height: '100%'
+  };
+  const terminalOptions = {
+    theme: {
+      background: '#2C313C',
+      foreground: '#EEEEEE'
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogTerminalRoot, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "log-terminal-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_clock.default, {}), logFile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: logFile
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "log-terminal-container",
+      style: {
+        position: 'relative'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Terminal.default, {
+        ref: ref,
+        style: terminalStyle,
+        options: terminalOptions
+      })
+    })]
+  }));
+});
+exports.LogTerminal = LogTerminal;
+LogTerminal.propTypes = {
+  logFile: _propTypes.default.string
+};
+LogTerminal.defaultProps = {
+  logFile: ''
+};
+const LogTerminalRoot = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  .log-terminal-top {\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: 8px;\n    font-size: 14px;\n    color: aquamarine;\n    background: darkgray;\n    word-break: break-word;\n  }\n  .log-terminal-container {\n    flex: 1;\n    height: 100%;\n    padding: 8px;\n    overflow: hidden;\n    background: #2c313c;\n  }\n\n  .xterm-viewport::-webkit-scrollbar {\n    width: 10px;\n  }\n  .xterm-viewport::-webkit-scrollbar-track {\n    opacity: 0;\n  }\n  .xterm-viewport::-webkit-scrollbar-thumb {\n    min-height: 20px;\n    background-color: #ffffff20;\n  }\n"])));

package/lib/lost-passport.js

@@ -4,59 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _reactRouterDom = require("react-router-dom");
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
-
 var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-
 var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
-
 var _Step = _interopRequireDefault(require("@mui/material/Step"));
-
 var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
-
 var _ViewList = _interopRequireDefault(require("@mui/icons-material/ViewList"));
-
 var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
-
 var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
-
 var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
-
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
-
 var _context = require("@arcblock/ux/lib/Locale/context");
-
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
-
 var _constant = require("@abtnode/constant");
-
 var _cardSelector = _interopRequireDefault(require("./card-selector"));
-
 var _wrapLocale = _interopRequireDefault(require("./wrap-locale"));
-
 var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
-
 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) } })); }
-
 // eslint-disable-next-line react/prop-types
 function ColorStepIcon(_ref) {
   let {
@@ -76,22 +49,19 @@ function ColorStepIcon(_ref) {
     })
   };
   const classNames = ['step-icon-w'];
-
   if (active) {
     classNames.push('step-icon-w--active');
   }
-
   if (completed) {
     classNames.push('step-icon-w--completed');
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classNames.join(' '),
     children: icons[String(icon)]
   });
-} // eslint-disable-next-line react/prop-types
-
+}
 
+// eslint-disable-next-line react/prop-types
 function LostPassport(_ref2) {
   let {
     SessionContext,
@@ -114,66 +84,55 @@ function LostPassport(_ref2) {
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
   const {
     setPassportId
-  } = (0, _usePassportId.default)(); // eslint-disable-next-line no-undef
+  } = (0, _usePassportId.default)();
 
+  // eslint-disable-next-line no-undef
   const {
     searchParams
   } = new URL(window.location.href);
-
   const onNext = () => {
     setActiveStep(activeStep + 1);
   };
-
   const onGetUser = result => {
     setUser(result.user);
   };
-
   const onSelectPassport = () => {
     onNext();
   };
-
   const onReceivePassport = result => {
     if (result !== null && result !== void 0 && result.passportId) {
       setPassportId(result.passportId);
     }
-
     setSuccess(true);
     onNext();
   };
-
   const onUsePassport = () => {
     var _window$env;
-
     try {
       session.logout();
-    } catch (err) {// Do nothing
+    } catch (err) {
+      // Do nothing
     }
-
     const redirect = searchParams.get('redirect');
-
     if (redirect) {
       navigate(redirect, {
         replace: true
       });
       return;
     }
-
     if ((((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '').startsWith(_constant.WELLKNOWN_SERVICE_PATH_PREFIX)) {
       navigate("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"), {
         replace: true
       });
       return;
     }
-
     navigate('/', {
       replace: true
     });
   };
-
   const handleChange = event => {
     setPassport(event.target.value);
   };
-
   const steps = [{
     label: t('lostPassport.selectPassport'),
     content: () => {
@@ -197,7 +156,6 @@ function LostPassport(_ref2) {
           }
         });
       }
-
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         className: "select-passport",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -353,9 +311,6 @@ function LostPassport(_ref2) {
     })
   });
 }
-
 const Div = (0, _styled.default)(_Container.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 46px;\n  padding-bottom: 46px;\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  @media (max-width: ", "px) {\n    display: block;\n  }\n  .header {\n    text-align: center;\n    margin-bottom: 24px;\n  }\n\n  .stepper {\n    padding: 24px;\n    height: auto;\n    width: 100%;\n    min-height: 640px;\n    display: flex;\n    flex-direction: column;\n\n    .stepper-progress {\n      padding: 0;\n      flex: 0;\n      margin-bottom: 24px;\n\n      .MuiStepLabel-label.MuiStepLabel-alternativeLabel {\n        margin-top: 8px;\n      }\n\n      .MuiStepConnector-alternativeLabel {\n        top: 24px;\n      }\n\n      .MuiStepConnector-lineHorizontal {\n        height: 3px;\n        border: none;\n        background-color: #eaeaf0;\n        border-radius: 1px;\n      }\n\n      .step-icon-w {\n        background-color: ", ";\n        z-index: 1;\n        color: ", ";\n        width: 50px;\n        height: 50px;\n        display: flex;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n        .step-icon {\n          font-size: 30px;\n        }\n      }\n\n      .step-icon-w--active {\n        background-color: ", ";\n      }\n\n      .step-icon-w--completed {\n        background-color: ", ";\n      }\n    }\n\n    .stepper-content {\n      padding: 0 64px;\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: 24px;\n\n      .stepper-icon {\n        margin-left: 40px;\n      }\n\n      .stepper-auth {\n        padding: 0;\n\n        .auth-title {\n          margin-bottom: 16px;\n        }\n      }\n\n      .stepper-tip {\n        text-align: center;\n        margin-bottom: 16px;\n      }\n      @media (max-width: ", "px) {\n        padding: 0;\n      }\n    }\n\n    .stepper-actions {\n      flex: 0;\n      text-align: right;\n      padding: 0 64px;\n      display: none;\n      .step-button {\n        margin-right: 8px;\n      }\n    }\n\n    .select-passport {\n      width: 80%;\n      @media (max-width: ", "px) {\n        width: 100%;\n      }\n    }\n\n    .user-info {\n      .name {\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 25px;\n        color: #222222;\n      }\n    }\n  }\n\n  .connect {\n    background: #fafafa;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.palette.grey[500], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.secondary.main, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
-
 var _default = (0, _wrapLocale.default)(LostPassport);
-
 exports.default = _default;

package/lib/nav-logo.js

@@ -4,47 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LogoContainer;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2;
-
 const _excluded = ["logo", "name", "subname", "previousData"],
-      _excluded2 = ["logo"];
-
+  _excluded2 = ["logo"];
 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 _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 LogoContainer(_ref) {
   let {
-    logo,
-    name,
-    subname,
-    previousData
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+      logo,
+      name,
+      subname,
+      previousData
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   let logoEle = /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
     logo: logo
   });
   let nameEle = name;
   let subnameEle = subname;
-
   if (previousData.logo) {
     logoEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
@@ -56,7 +41,6 @@ function LogoContainer(_ref) {
       })]
     });
   }
-
   if (previousData.name && previousData.name !== name) {
     nameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -71,7 +55,6 @@ function LogoContainer(_ref) {
       })]
     });
   }
-
   if (previousData.subname && previousData.subname !== subname) {
     subnameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -86,7 +69,6 @@ function LogoContainer(_ref) {
       })]
     });
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "logo-inner",
@@ -106,7 +88,6 @@ function LogoContainer(_ref) {
     })
   }));
 }
-
 LogoContainer.propTypes = {
   logo: _propTypes.default.element.isRequired,
   name: _propTypes.default.string,
@@ -121,19 +102,17 @@ LogoContainer.defaultProps = {
     name: '',
     subname: ''
   }
-}; // eslint-disable-next-line react/prop-types
+};
 
+// eslint-disable-next-line react/prop-types
 function LogoImg(_ref2) {
   let {
-    logo
-  } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
+      logo
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImgDiv, _objectSpread(_objectSpread({}, rest), {}, {
     children: logo
   }));
 }
-
 const LogoImgDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  > * {\n    display: block;\n  }\n"])));
-
 const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n\n  .logo-inner {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    .logo-img-content {\n      position: relative;\n      display: block;\n    }\n    .logo-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      margin-left: 10px;\n      letter-spacing: 0.1px;\n      &.zero-left {\n        margin-left: 0%;\n      }\n      .logo-name {\n        position: relative;\n        line-height: 16px;\n        font-size: 16px;\n        color: #121319;\n      }\n      .logo-subname {\n        position: relative;\n        line-height: 13px;\n        font-size: 13px;\n        color: #7d8085;\n      }\n    }\n  }\n\n  .postion-abs {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n  }\n\n  .right-fade-out-ele {\n    animation: right-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .right-fade-in-ele {\n    animation: right-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes right-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n  }\n\n  @keyframes right-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n\n  .left-fade-out-ele {\n    animation: left-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .left-fade-in-ele {\n    animation: left-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes left-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n  }\n\n  @keyframes left-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n"])));

package/lib/passport-tag.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportTag;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["passport", "onDelete"];
+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 _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 PassportTag(props) {
+  const {
+      passport,
+      onDelete
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [passport.title || passport.name, ' ', !!onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+      "data-cy": "delete-issuance",
+      className: "delete",
+      onClick: onDelete
+    })]
+  }));
+}
+PassportTag.propTypes = {
+  passport: _propTypes.default.object.isRequired,
+  onDelete: _propTypes.default.func
+};
+PassportTag.defaultProps = {
+  onDelete: null
+};
+const Tag = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  padding: 2px 8px;\n  background: ", ";\n  border-radius: 100vw;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 22px;\n  color: #fff;\n  align-items: center;\n  .delete {\n    font-size: 1em;\n    margin-left: 6px;\n    cursor: pointer;\n  }\n"])), props => props.theme.palette.primary.main);

package/lib/permission.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Permission;
+exports.withPermission = withPermission;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _session = require("./contexts/session");
+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; }
+function Permission(_ref) {
+  let {
+    permission,
+    role,
+    component,
+    children
+  } = _ref;
+  const {
+    session
+  } = (0, _session.useSessionContext)();
+  let can = true;
+  const permissions = [].concat(permission).filter(Boolean);
+  const roles = [].concat(role).filter(Boolean);
+  if (permissions.length) {
+    const userPermissions = session.user && session.user.permissions || [];
+    can = permissions.some(p => userPermissions.includes(p));
+  }
+  if (can && roles.length) {
+    can = roles.includes(session.user.role);
+  }
+  if (typeof component === 'function') {
+    return component(can);
+  }
+  if (typeof children === 'function') {
+    return children(can);
+  }
+  if (can) {
+    return component || children || null;
+  }
+  return null;
+}
+function withPermission(Component, permissionName, role) {
+  return function WithPermission(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Permission, {
+      permission: permissionName,
+      role: role,
+      children: hasPermission => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({}, props), {}, {
+        hasPermission: hasPermission
+      }))
+    });
+  };
+}
+Permission.propTypes = {
+  permission: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  role: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  component: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]),
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element])
+};
+Permission.defaultProps = {
+  permission: '',
+  role: '',
+  component: null,
+  children: null
+};

package/lib/relative-time.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RelativeTime;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _util = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function RelativeTime(_ref) {
+  let {
+    value
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  if (!value) {
+    return '-';
+  }
+  const prettyOption = {
+    locale: locale === 'zh' ? 'zh_CN' : 'zh_US',
+    compact: true
+  };
+  const valTime = new Date(value).getTime();
+  const now = Date.now();
+  if (valTime > now) {
+    const time = (0, _prettyMsI18n.default)(valTime - now, prettyOption);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: (0, _util.formatToDatetime)(value),
+      placement: "top-end",
+      enterTouchDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t('common.afterTime', {
+          time
+        })
+      })
+    });
+  }
+  const time = (0, _prettyMsI18n.default)(now - valTime, prettyOption);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: (0, _util.formatToDatetime)(value),
+    placement: "top-end",
+    enterTouchDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: t('common.timeAgo', {
+        time
+      })
+    })
+  });
+}
+RelativeTime.propTypes = {
+  value: _propTypes.default.any
+};
+RelativeTime.defaultProps = {
+  value: ''
+};