@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/blocklet/component/space-gateway-selector.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
+var _session = require("../../../lib/contexts/session");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["onSelect", "endpoint", "loading"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const DEFAULT_GATEWAY_LIST = [{
+  value: 'https://www.didspaces.com/app',
+  label: 'Prod DID Spaces',
+  avatar: 'P'
+}, {
+  value: 'https://storage.staging.abtnet.io/app',
+  label: 'Staging DID Spaces',
+  avatar: 'S'
+}];
+const filter = (0, _Autocomplete.createFilterOptions)();
+function SpaceGatewaySelector(_ref) {
+  let {
+      onSelect,
+      endpoint,
+      loading
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const [gatewayList, setGatewayList] = (0, _useLocalStorage.default)('did-space-gateway-list', DEFAULT_GATEWAY_LIST);
+  const [gatewayUrl, setGatewayUrl] = (0, _useLocalStorage.default)('did-space-gateway-url', DEFAULT_GATEWAY_LIST[0].value);
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _session.useSessionContext)();
+  (0, _react.useEffect)(() => {
+    if (gatewayUrl && !gatewayList.find(x => x.value === gatewayUrl)) {
+      api.get((0, _urlJoin.default)(gatewayUrl, '/__blocklet__.js?type=json')).then(res => {
+        // FIXME: @wangshijun handle mountPoint
+        setGatewayList([...gatewayList, {
+          value: gatewayUrl,
+          label: res.data.appName
+        }]);
+      }).catch(err => {
+        console.error(err);
+        _toast.default.error('Can not add this gateway, please check the url and try again');
+      });
+    }
+  }, [gatewayUrl]); // eslint-disable-line
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, rest), {}, {
+    freeSolo: true,
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    value: gatewayUrl,
+    options: gatewayList,
+    onChange: (e, v) => {
+      if (!v) {
+        return;
+      }
+      if (typeof v === 'string') {
+        const x = gatewayList.find(o => o.label === v);
+        if (x) {
+          setGatewayUrl(x.value);
+        }
+      } else if (v.inputValue) {
+        // Create a new value from the user input
+        setGatewayUrl(v.inputValue);
+      } else if (v.value) {
+        setGatewayUrl(v.value);
+      }
+    },
+    getOptionLabel: x => {
+      // Value selected with enter, right from the input
+      if (typeof x === 'string') {
+        return x;
+      }
+
+      // Add "xxx" x created dynamically
+      if (x.inputValue) {
+        return x.inputValue;
+      }
+      return x.label;
+    },
+    renderOption: (props, x) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+            children: x.avatar
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+          primary: x.label,
+          secondary: x.value
+        })]
+      }), x.value);
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params);
+
+      // Suggest the creation of a new value if its a valid url
+      if (params.inputValue && (0, _isUrl.default)(params.inputValue)) {
+        const isExisting = options.some(x => params.inputValue === x.value);
+        if (!isExisting) {
+          filtered.push({
+            value: params.inputValue,
+            label: 'Add new gateway'
+          });
+        }
+      }
+      return filtered;
+    },
+    renderInput: params => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+        label: t('storage.spaces.label'),
+        size: "small",
+        InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
+          type: 'search',
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            onClick: () => onSelect(gatewayUrl),
+            size: "small",
+            loading: loading,
+            disable: loading,
+            sx: {
+              position: 'absolute',
+              right: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100px',
+              height: '100%'
+            },
+            children: endpoint ? t('storage.spaces.reconnect') : t('storage.spaces.connect')
+          })
+        })
+      }));
+    }
+  }));
+}
+const Container = (0, _styled.default)(_Autocomplete.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 40px;\n  width: 100%;\n  max-width: 720px;\n  ", " {\n    width: 75%;\n  }\n  input.MuiInputBase-input {\n    max-width: calc(100% - 80px);\n  }\n"])), props => props.theme.breakpoints.down('md'));
+SpaceGatewaySelector.propTypes = {
+  onSelect: _propTypes.default.func.isRequired,
+  endpoint: _propTypes.default.string,
+  loading: _propTypes.default.bool
+};
+SpaceGatewaySelector.defaultProps = {
+  endpoint: undefined,
+  loading: false
+};
+var _default = SpaceGatewaySelector;
+exports.default = _default;

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

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletList;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+var _reactErrorBoundary = require("react-error-boundary");
+var _list = _interopRequireDefault(require("@blocklet/list"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Blocklet = _interopRequireWildcard(require("@arcblock/ux/lib/Blocklet"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _util = require("@blocklet/meta/lib/util");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _util2 = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["handleButtonClick", "handleSearchSelect", "storeUrl", "handleBlockletRender", "extraFilter"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getStoreDetail = (meta, endpoint) => {
+  return (0, _urlJoin.default)(endpoint, "/blocklets/".concat(meta.did));
+};
+const displayAttributes = _ref => {
+  let {
+    blocklet,
+    attribute,
+    value
+  } = _ref;
+  if (blocklet._formatted) {
+    return blocklet._formatted[attribute];
+  }
+  return value;
+};
+const requirePurchase = meta => meta.inStore && (0, _util.isFreeBlocklet)(meta) === false;
+function BlockletItem(_ref2) {
+  let {
+    blocklet,
+    blocklets,
+    handleButtonClick,
+    endpoint
+  } = _ref2;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const logoUrl = (0, _urlJoin.default)(endpoint, (0, _util2.formatRegistryLogoPath)(blocklet.did, blocklet.logo || ''));
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const onClickLink = e => {
+    if (!e.currentTarget.contains(e.target)) {
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  };
+  const btnTxt = requirePurchase(blocklet) ? t('common.purchase') : t('blocklet.component.choose');
+  const onAction = async e => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      setLoading(true);
+      await handleButtonClick({
+        meta: blocklet,
+        registryUrl: endpoint,
+        blocklets
+      });
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+    href: getStoreDetail(blocklet, endpoint),
+    style: {
+      color: 'initial',
+      textDecoration: 'none'
+    },
+    onClick: onClickLink,
+    target: "_blank",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBlocklet, {
+      title: displayAttributes({
+        blocklet,
+        attribute: 'title',
+        value: blocklet.title || blocklet.name
+      }),
+      did: blocklet.did,
+      description: displayAttributes({
+        blocklet,
+        attribute: 'description',
+        value: blocklet.description
+      }),
+      cover: blocklet.logo ? logoUrl : '',
+      version: blocklet.version,
+      button: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Blocklet.ActionButton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onClick: onAction,
+            size: "small",
+            disabled: loading,
+            variant: "outlined",
+            color: "primary",
+            "data-cy": "install-blocklet",
+            children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                size: 16,
+                style: {
+                  marginRight: 3
+                }
+              }), btnTxt]
+            }) : btnTxt
+          }, blocklet.did)
+        })
+      })
+    })
+  });
+}
+BlockletItem.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  blocklets: _propTypes.default.array,
+  handleButtonClick: _propTypes.default.func,
+  endpoint: _propTypes.default.string
+};
+BlockletItem.defaultProps = {
+  handleButtonClick: null,
+  endpoint: '',
+  blocklets: []
+};
+function BlockletList(_ref3) {
+  let {
+      handleButtonClick,
+      handleSearchSelect,
+      storeUrl,
+      handleBlockletRender,
+      extraFilter
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [filters, setFilters] = (0, _react.useState)({});
+  const handleChange = changeData => {
+    setFilters(changeData);
+  };
+  const endpoint = storeUrl;
+  (0, _react.useEffect)(() => {
+    setFilters({});
+  }, [endpoint]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: _ErrorBoundary.ErrorFallback,
+    resetKeys: [endpoint],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+        blockletRender: blockletRenderProps => {
+          const defaultProps = _objectSpread(_objectSpread({}, blockletRenderProps), {}, {
+            handleButtonClick,
+            endpoint
+          });
+          return handleBlockletRender(_objectSpread(_objectSpread({}, blockletRenderProps), {}, {
+            defaultRender: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockletItem, _objectSpread({}, defaultProps))
+          }));
+        },
+        baseSearch: true,
+        endpoint: endpoint,
+        locale: locale,
+        onFilterChange: handleChange,
+        onSearchSelect: handleSearchSelect,
+        filters: filters,
+        extraFilter: extraFilter
+      })
+    }))
+  });
+}
+BlockletList.propTypes = {
+  storeUrl: _propTypes.default.string.isRequired,
+  handleButtonClick: _propTypes.default.func,
+  handleSearchSelect: _propTypes.default.func,
+  handleBlockletRender: _propTypes.default.func,
+  extraFilter: _propTypes.default.func
+};
+BlockletList.defaultProps = {
+  handleButtonClick: null,
+  handleSearchSelect: null,
+  handleBlockletRender: null,
+  extraFilter: undefined
+};
+const StyledBlocklet = (0, _styled.default)(_Blocklet.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ms-highlight {\n    color: ", ";\n  }\n"])), props => props.theme.palette.primary.main);