@abtnode/ux 1.8.1 → 1.8.4

package/lib/invitation/invitation-receive.js

@@ -112,7 +112,7 @@ InvitationReceive.defaultProps = {
   onReceive: null
 };
 
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  .invite-receive__logo-wrapper {\n    display: inline-flex;\n    align-items: center;\n    color: #9397a1;\n    font-size: 14px;\n  }\n  .invite-receive__logo {\n    height: 16px;\n    margin-left: 8px;\n  }\n  .invite-receive__button {\n    width: 100%;\n    margin: 16px 0;\n  }\n  .invite-receive__until {\n    text-align: center;\n    font-size: 14px;\n  }\n  .invite-receive__description {\n    color: #999;\n    text-align: left;\n    list-style: decimal;\n    padding: 0;\n    padding-left: 1.2em;\n    margin: 40px 0;\n  }\n  .invite-receive__description-item {\n    list-style: decimal;\n  }\n  .invite-receive__link {\n    color: ", ";\n  }\n"])), _ref2 => {
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  .invite-receive__logo-wrapper {\n    display: inline-flex;\n    align-items: center;\n    color: #9397a1;\n    font-size: 14px;\n  }\n  .invite-receive__logo {\n    height: 16px;\n    margin-left: 8px;\n  }\n  .invite-receive__button {\n    width: 100%;\n    margin: 16px 0;\n    white-space: nowrap;\n  }\n  .invite-receive__until {\n    text-align: center;\n    font-size: 14px;\n  }\n  .invite-receive__description {\n    color: #999;\n    text-align: left;\n    list-style: decimal;\n    padding: 0;\n    padding-left: 1.2em;\n    margin: 40px 0;\n  }\n  .invite-receive__description-item {\n    list-style: decimal;\n  }\n  .invite-receive__link {\n    color: ", ";\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;

package/lib/locales/en.js

@@ -1,9 +1,6 @@
 "use strict";
 
-/* eslint-disable import/no-extraneous-dependencies */
-const flat = require('flat');
-
-module.exports = flat({
+module.exports = {
   issuePassport: {
     title: 'Receive Passport',
     description: 'Use DID Wallet to receive the passport issued by {name}',
@@ -50,5 +47,46 @@ module.exports = flat({
       confirm: 'Confirm on your DID Wallet',
       success: 'You are successfully connected'
     }
+  },
+  blocklet: {
+    config: {
+      name: 'Blocklet Name',
+      description: 'Blocklet Nescription',
+      sk: 'Secret key for the blocklet wallet',
+      clusterSize: 'Instance count when run this blocklet in cluster mode',
+      deletable: {
+        name: 'Delete Protection',
+        enable: 'This blocklet can NOT currently be deleted',
+        disable: 'This blocklet can currently be deleted'
+      },
+      walletType: {
+        name: 'Wallet Type',
+        description: 'Blocklet instance wallet type, will change the derived DID'
+      },
+      passportColor: 'Passport Color',
+      appUrl: 'Blocklet URL',
+      access: {
+        title: 'Who Can Access',
+        description: 'Who can access the blocklet',
+        useDefault: 'Use default',
+        defaultDescription: "Use the application's default configuration",
+        whoCanAccess: {
+          all: {
+            title: 'Accessible to all',
+            description: 'Open to the world anyone can access without passport'
+          },
+          owner: {
+            title: 'Only me can access',
+            description: 'You must provide owner passport to access this application'
+          },
+          invited: {
+            title: 'Only invited people can access',
+            description: 'You can invite members later in the admin page'
+          }
+        },
+        publicToStore: 'Public On Store',
+        publicInstanceTip: 'The access address of this blocklet will be displayed in the Store (along with your DID for accepting donations)'
+      }
+    }
   }
-});
+};

package/lib/locales/index.js

@@ -1,12 +1,14 @@
 "use strict";
 
+const flat = require('flat');
+
 const en = require('./en');
 
 const zh = require('./zh');
 
 module.exports = {
   translations: {
-    zh,
-    en
+    zh: flat(zh),
+    en: flat(en)
   }
 };

package/lib/locales/zh.js

@@ -1,9 +1,6 @@
 "use strict";
 
-/* eslint-disable import/no-extraneous-dependencies */
-const flat = require('flat');
-
-module.exports = flat({
+module.exports = {
   issuePassport: {
     title: '领取通行证',
     description: '使用 DID 钱包领取 {name} 颁发的通行证',
@@ -37,7 +34,7 @@ module.exports = flat({
     emptyPermission: '没有权限',
     open: '打开',
     description: {
-      step1: '下载并设置好你的 {wallet}',
+      step1: '下载并设置好您的 {wallet}',
       step2: '点击上面的按钮领取通行证',
       step3: '使用通行证登录 {dapp}'
     }
@@ -49,5 +46,47 @@ module.exports = flat({
       confirm: '在您的 DID 钱包上确认',
       success: '连接成功'
     }
+  },
+  blocklet: {
+    config: {
+      name: '应用名称',
+      description: '应用描述',
+      sk: '应用账户私钥',
+      clusterSize: '以 Cluster 模式启动时的实例数量',
+      deletable: {
+        name: '删除保护',
+        enable: '此 Blocklet 当前不可被删除',
+        disable: '此 Blocklet 当前可以被删除'
+      },
+      walletType: {
+        name: '钱包类型',
+        description: '应用钱包类型，会影响派生出来的 DID'
+      },
+      passportColor: '通行证颜色',
+      appUrl: '应用访问地址',
+      access: {
+        title: '谁可以访问',
+        description: '谁可以访问应用',
+        useDefault: '使用该应用默认配置',
+        invitedTip: '稍后您可以在管理页面中邀请和管理成员',
+        defaultDescription: '使用应用的默认配置',
+        whoCanAccess: {
+          all: {
+            title: '所有人可访问',
+            description: '向所有人开放，无需通行证即可访问应用'
+          },
+          owner: {
+            title: '只有我自己可访问',
+            description: '必须提供所有者通行证才能访问应用'
+          },
+          invited: {
+            title: '只有被邀请的人可以访问',
+            description: '稍后您可以在管理页面中邀请成员'
+          }
+        },
+        publicToStore: '在 Store 公开',
+        publicInstanceTip: '此应用的访问地址将展示在 Store 中（同时也会展示你的 DID，用于接受捐赠）'
+      }
+    }
   }
-});
+};

package/lib/schema-form/color-input.js

@@ -13,8 +13,6 @@ var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
 
 var _reactColor = require("react-color");
 
-var _context = require("@arcblock/ux/lib/Locale/context");
-
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,9 +25,6 @@ function ColorInput(_ref) {
     value,
     onChange
   } = _ref;
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
   const [open, setOpen] = (0, _react.useState)(false);
   const colorElm = (0, _react.useRef)();
   const colorValue = (0, _react.useRef)(value); // auto open color picker when editing, should wait the useRef to be ready
@@ -81,11 +76,11 @@ function ColorInput(_ref) {
     alignItems: "center",
     height: "40px",
     onKeyDown: handleEnterKeyDown,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       display: "flex",
       alignItems: "center",
       onClick: () => setOpen(true),
-      children: [t('config.customColor'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: colorElm,
         style: {
           flexShrink: 0,
@@ -98,7 +93,7 @@ function ColorInput(_ref) {
           border: '1px solid #eee',
           cursor: value === 'auto' ? 'default' : 'pointer'
         }
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
       open: open,
       anchorEl: colorElm.current,

package/lib/schema-form/index.js

@@ -79,7 +79,8 @@ function SchemaForm(_ref2) {
     value,
     defaultValue,
     onChange,
-    style
+    style,
+    disabled
   } = _ref2;
   const isControlled = Object.prototype.toString.call(value) === '[object Object]';
   const [editingItem, setEditingItem] = (0, _react.useState)(null);
@@ -88,7 +89,8 @@ function SchemaForm(_ref2) {
 
   function onFormItemChange(item, changeValue, action) {
     const {
-      key
+      key,
+      secure
     } = item;
     const oldValue = formValues[key];
     const isChanged = oldValue !== changeValue;
@@ -107,7 +109,13 @@ function SchemaForm(_ref2) {
       allValues: newValues,
       action,
       currentItem: item
-    });
+    }); // hide secure text after confirm
+
+    if (action === 'confirm' && secure) {
+      setFormValues(_objectSpread(_objectSpread({}, formValues), {}, {
+        [key]: '__encrypted__'
+      }));
+    }
   }
 
   function onItemEditingStatusChange(item) {
@@ -198,7 +206,7 @@ function SchemaForm(_ref2) {
                   onFormItemChange(x, currentValue, 'confirm');
                   onItemEditingStatusChange(null);
                 },
-                disabled: loading,
+                disabled: disabled || loading,
                 size: "large",
                 children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
                   size: 24
@@ -209,7 +217,7 @@ function SchemaForm(_ref2) {
                   onFormItemChange(x, editingItemInitialValue.current, 'cancel');
                   onItemEditingStatusChange(null);
                 },
-                disabled: loading,
+                disabled: disabled || loading,
                 size: "large",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
               })]
@@ -219,7 +227,7 @@ function SchemaForm(_ref2) {
                 onFormItemChange(x, formValues[key], 'edit');
                 onItemEditingStatusChange(x);
               },
-              disabled: editingItem,
+              disabled: disabled || editingItem,
               size: "large",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
             })
@@ -236,12 +244,14 @@ SchemaForm.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   value: _propTypes.default.object,
   defaultValue: _propTypes.default.object,
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  disabled: _propTypes.default.bool
 };
 SchemaForm.defaultProps = {
   loading: false,
   value: undefined,
   defaultValue: {},
-  style: {}
+  style: {},
+  disabled: false
 };
-const FormWrapper = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 80%;\n  flex-grow: 1;\n  overflow-y: auto;\n  ", " {\n    width: 100%;\n    flex-shrink: 0;\n    padding: 0 24px;\n    transform: translate(0, 0);\n    max-height: 60vh;\n  }\n\n  .form-item {\n    width: 100%;\n    margin-bottom: 24px;\n    position: relative;\n    ", " {\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n      flex-shrink: 0;\n    }\n  }\n\n  .form-item-body {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n  }\n\n  .form-item-label {\n    line-height: 1.2;\n    font-size: 14px;\n    color: #888;\n\n    ", " {\n      text-align: left;\n      width: auto;\n      flex-grow: 1;\n    }\n  }\n\n  .form-item-input {\n    flex-grow: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    &.slot {\n      height: 40px;\n      line-height: 40px;\n      background: #f8f8f8;\n      font-size: 16px;\n    }\n  }\n\n  .form-item-action {\n    width: 100px;\n    text-align: left;\n    margin-left: 12px;\n    flex-shrink: 0;\n    ", " {\n      width: auto;\n      margin-left: 0px;\n    }\n    .MuiIconButton-root {\n      padding: 8px;\n      svg {\n        fill: #888;\n      }\n      &.Mui-disabled {\n        opacity: 0.4;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
+const FormWrapper = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 80%;\n  flex-grow: 1;\n  overflow-y: auto;\n  ", " {\n    width: 100%;\n    flex-shrink: 0;\n    padding: 0 24px;\n    transform: translate(0, 0);\n    /* max-height: 60vh; */\n  }\n\n  .form-item {\n    width: 100%;\n    margin-bottom: 24px;\n    position: relative;\n    ", " {\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n      flex-shrink: 0;\n    }\n  }\n\n  .form-item-body {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n  }\n\n  .form-item-label {\n    line-height: 1.2;\n    font-size: 14px;\n    color: #888;\n    font-weight: bold;\n\n    ", " {\n      text-align: left;\n      width: auto;\n      flex-grow: 1;\n    }\n  }\n\n  .form-item-input {\n    flex-grow: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    &.slot {\n      height: 40px;\n      line-height: 40px;\n      background: #f8f8f8;\n      font-size: 16px;\n    }\n  }\n\n  .form-item-action {\n    // width: 100px;\n    text-align: left;\n    margin-left: 12px;\n    flex-shrink: 0;\n    ", " {\n      width: auto;\n      margin-left: 0px;\n    }\n    .MuiIconButton-root {\n      padding: 8px;\n      svg {\n        fill: #888;\n      }\n      &.Mui-disabled {\n        opacity: 0.4;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));

package/lib/who-can-access/config.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Lock = _interopRequireDefault(require("@mui/icons-material/Lock"));
+
+var _ContactMail = _interopRequireDefault(require("@mui/icons-material/ContactMail"));
+
+var _Group = _interopRequireDefault(require("@mui/icons-material/Group"));
+
+var _constant = require("@abtnode/constant");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = [{
+  value: _constant.WHO_CAN_ACCESS.OWNER,
+  icon: _Lock.default,
+  title: {
+    zh: '只有我自己可访问',
+    en: 'Only me can access'
+  },
+  description: {
+    zh: '必须提供所有者通行证才能访问应用',
+    en: 'You must provide owner passport to access this application'
+  }
+}, {
+  value: _constant.WHO_CAN_ACCESS.INVITED,
+  icon: _ContactMail.default,
+  title: {
+    zh: '只有被邀请的人可以访问',
+    en: 'Only invited people can access'
+  },
+  description: {
+    zh: '稍后您可以在管理页面中邀请成员',
+    en: 'You can invite members later in the admin page'
+  }
+}, {
+  value: _constant.WHO_CAN_ACCESS.ALL,
+  icon: _Group.default,
+  title: {
+    zh: '所有人可访问',
+    en: 'Accessible to all'
+  },
+  description: {
+    zh: '向所有人开放，无需通行证即可访问应用',
+    en: 'Open to the world anyone can access without passport'
+  }
+}];
+exports.default = _default;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -21,12 +21,12 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@abtnode/auth": "1.8.1",
-    "@abtnode/constant": "1.8.1",
-    "@arcblock/did-connect": "^2.1.51",
-    "@arcblock/icons": "^2.1.51",
-    "@arcblock/ux": "^2.1.51",
-    "@blocklet/meta": "1.8.1",
+    "@abtnode/auth": "1.8.4",
+    "@abtnode/constant": "1.8.4",
+    "@arcblock/did-connect": "^2.1.68",
+    "@arcblock/icons": "^2.1.68",
+    "@arcblock/ux": "^2.1.68",
+    "@blocklet/meta": "1.8.4",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -34,6 +34,7 @@
     "@mui/styles": "^5.6.2",
     "ahooks": "^3.4.0",
     "dayjs": "^1.11.2",
+    "flat": "^5.0.0",
     "notistack": "2.0.5",
     "prop-types": "^15.7.2",
     "react": "^18.1.0",
@@ -51,5 +52,5 @@
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "c970b8a386bebd7fe6dbc8b8eedf8bd8328b4bb5"
+  "gitHead": "c42fb1bb84c5eef0f753fd5397d8007c7a6eee19"
 }