@arcblock/ux 0.78.26 → 1.6.60

package/lib/QRCode/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _qrCodeStyling = _interopRequireDefault(require("@solana/qr-code-styling"));
+
+const _excluded = ["data", "size", "image", "config"];
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const defaults = {
+  margin: 0,
+  dotsOptions: {
+    type: 'dots'
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded'
+  },
+  cornersDotOptions: {
+    type: 'dot'
+  }
+}; // 该组件用于生成与 android wallet 样式风格相似的 qrcode
+// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
+
+function QRCode(_ref) {
+  let {
+    data,
+    size,
+    image,
+    config
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const ref = _react.default.useRef(null);
+
+  (0, _react.useEffect)(() => {
+    const qrCode = new _qrCodeStyling.default(_objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
+      data,
+      width: size,
+      height: size
+    }, image && {
+      image,
+      imageOptions: {
+        crossOrigin: 'anonymous',
+        margin: 0
+      }
+    }), config));
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    ref: ref
+  }, rest));
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  image: _propTypes.default.string,
+  // 覆盖 qr-code-styling 配置
+  config: _propTypes.default.object
+};
+QRCode.defaultProps = {
+  image: null,
+  config: {}
+};
+var _default = QRCode;
+exports.default = _default;

package/lib/Result/common.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageNotFound = exports.Maintenance = exports.InternalServerError = exports.Info = exports.Forbidden = exports.Error = exports.ComingSoon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _CancelRounded = _interopRequireDefault(require("@material-ui/icons/CancelRounded"));
+
+var _result = _interopRequireDefault(require("./result"));
+
+var _translations = _interopRequireDefault(require("./translations"));
+
+var _context = require("../Locale/context");
+
+const _excluded = ["locale"],
+      _excluded2 = ["locale"],
+      _excluded3 = ["locale"],
+      _excluded4 = ["locale"],
+      _excluded5 = ["locale"],
+      _excluded6 = ["locale"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
+const useLocale = locale => {
+  locale = ['zh', 'en'].includes(locale) ? locale : '';
+  const {
+    locale: localeFromContext
+  } = (0, _context.useLocaleContext)() || {
+    locale: 'en'
+  };
+  return locale || localeFromContext;
+}; // 404
+
+
+const PageNotFound = _ref => {
+  let {
+    locale
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
+    title: _translations.default[locale][404].title,
+    description: _translations.default[locale][404].description
+  }, rest));
+};
+
+exports.PageNotFound = PageNotFound;
+PageNotFound.status = '404'; // 403
+
+const Forbidden = _ref2 => {
+  let {
+    locale
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
+    title: _translations.default[locale][403].title,
+    description: _translations.default[locale][403].description
+  }, rest));
+};
+
+exports.Forbidden = Forbidden;
+Forbidden.status = '403'; // 500
+
+const InternalServerError = _ref3 => {
+  let {
+    locale
+  } = _ref3,
+      rest = _objectWithoutProperties(_ref3, _excluded3);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
+    title: _translations.default[locale][500].title,
+    description: _translations.default[locale][500].description
+  }, rest));
+};
+
+exports.InternalServerError = InternalServerError;
+InternalServerError.status = '500'; // 通用错误
+
+const Error = _ref4 => {
+  let {
+    locale
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded4);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
+    title: _translations.default[locale].error.title,
+    description: _translations.default[locale].error.description
+  }, rest));
+};
+
+exports.Error = Error;
+Error.status = 'error'; // under maintenance
+
+const Maintenance = _ref5 => {
+  let {
+    locale
+  } = _ref5,
+      rest = _objectWithoutProperties(_ref5, _excluded5);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null),
+    title: _translations.default[locale].maintenance.title,
+    description: _translations.default[locale].maintenance.description
+  }, rest));
+};
+
+exports.Maintenance = Maintenance;
+Maintenance.status = 'maintenance'; // coming soon
+
+const ComingSoon = _ref6 => {
+  let {
+    locale
+  } = _ref6,
+      rest = _objectWithoutProperties(_ref6, _excluded6);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null),
+    title: _translations.default[locale]['coming-soon'].title,
+    description: _translations.default[locale]['coming-soon'].description
+  }, rest));
+};
+
+exports.ComingSoon = ComingSoon;
+ComingSoon.status = 'coming-soon'; // info, 与其它 status 不同, title/description 需要使用方自己传入
+
+const Info = props => {
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null)
+  }, props));
+};
+
+exports.Info = Info;
+Info.status = 'info';
+
+const StyledErrorIcon = props => {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_CancelRounded.default, Object.assign({
+    style: {
+      color: theme.palette.error.main,
+      fontSize: 72
+    }
+  }, props));
+};
+
+const StyledInfoIcon = props => {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_Info.default, Object.assign({
+    style: {
+      color: theme.palette.info.main,
+      fontSize: 72
+    }
+  }, props));
+};

package/lib/Result/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResultWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _result = _interopRequireDefault(require("./result"));
+
+var common = _interopRequireWildcard(require("./common"));
+
+const _excluded = ["status"];
+
+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 _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 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; }
+
+const componentsKeyByStatus = Object.keys(common).reduce((acc, cur) => _objectSpread(_objectSpread({}, acc), {}, {
+  [common[cur].status || cur]: common[cur]
+}), {});
+
+function ResultWrapper(_ref) {
+  let {
+    status
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (status) {
+    if (componentsKeyByStatus[status]) {
+      const Component = componentsKeyByStatus[status];
+      return /*#__PURE__*/_react.default.createElement(Component, rest);
+    }
+
+    throw new Error("Please provide a valid status for Result.status. Valid values are: ".concat(Object.keys(componentsKeyByStatus).join(', ')));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_result.default, rest);
+}
+
+ResultWrapper.propTypes = {
+  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+ResultWrapper.defaultProps = {
+  status: ''
+};

package/lib/Result/result.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+const _excluded = ["icon", "title", "description", "extra"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 Result(_ref) {
+  let {
+    icon,
+    title,
+    description,
+    extra
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Root, rest, icon, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 3,
+    fontSize: 22,
+    fontWeight: 400,
+    color: "#47494E",
+    textAlign: "center"
+  }, title) : title, typeof description === 'string' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 1,
+    fontSize: 14,
+    color: "#7F828B",
+    textAlign: "center"
+  }, description) : description, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 3
+  }, extra));
+}
+
+Result.propTypes = {
+  icon: _propTypes.default.any,
+  title: _propTypes.default.any.isRequired,
+  description: _propTypes.default.any,
+  actions: _propTypes.default.any,
+  extra: _propTypes.default.any
+};
+Result.defaultProps = {
+  icon: '',
+  description: '',
+  actions: null,
+  extra: null
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "result__Root",
+  componentId: "sc-1ttf6c9-0"
+})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
+
+var _default = Result;
+exports.default = _default;

package/lib/Result/translations.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    404: {
+      title: '404 - Page Not Found',
+      description: 'Sorry about that, the page you are looking for does not exist or has been moved.'
+    },
+    403: {
+      title: '403 – Forbidden',
+      description: 'Sorry, you are not authorized to access this page.'
+    },
+    500: {
+      title: '500 - Internal Server Error',
+      description: 'An internal server error has occured. Please try again later.'
+    },
+    error: {
+      title: 'Application Error',
+      description: 'Something went wrong. Please try again later.'
+    },
+    maintenance: {
+      title: 'Offline for maintenance',
+      description: 'This app is undergoing maintenance right now. Please check back later.'
+    },
+    'coming-soon': {
+      title: 'Coming Soon',
+      description: "Our website is under construction. We'll be here soon with our new website."
+    }
+  },
+  zh: {
+    404: {
+      title: '404 - 页面未找到',
+      description: '很抱歉，您正在寻找的页面不存在或已被移动。'
+    },
+    403: {
+      title: '403 – 禁止访问',
+      description: '很抱歉，您没有权限访问此页面。'
+    },
+    500: {
+      title: '500 - 内部服务器错误',
+      description: '发生了一个内部服务器错误。请稍后再试。'
+    },
+    error: {
+      title: 'Application Error',
+      description: '出错了, 请稍后再试。'
+    },
+    maintenance: {
+      title: '维护中',
+      description: '应用程序正在进行维护。请稍后再查看。'
+    },
+    'coming-soon': {
+      title: '即将上线',
+      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。'
+    }
+  }
+};
+exports.default = _default;

package/lib/Screenshot/index.js

@@ -15,6 +15,8 @@ var _Util = require("../Util");
 
 require("./devices.css");
 
+const _excluded = ["type", "children", "style", "className", "width", "height"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -93,7 +95,7 @@ const childProps = {
   video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children']
 };
 
-const createChild = child => [_react.default.createElement(child.type, childProps[child.type].reduce((acc, x) => {
+const createChild = child => [/*#__PURE__*/_react.default.createElement(child.type, childProps[child.type].reduce((acc, x) => {
   acc[x] = child.props[x];
   return acc;
 }, {}))];
@@ -101,7 +103,6 @@ const createChild = child => [_react.default.createElement(child.type, childProp
 const findChildren = function findChildren(children) {
   let returnArgWhenNotFound = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
-  // eslint-disable-next-line no-plusplus
   for (let i = 0; i < children.length; i++) {
     const child = children[i];
 
@@ -141,39 +142,39 @@ const Screenshot = props => {
     width,
     height
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "children", "style", "className", "width", "height"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const {
     zIndex = 0,
     borderRadius = 0
   } = types[type] || {};
-  return _react.default.createElement(Div, Object.assign({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
     type: type,
     className: "device device-".concat(type, " ").concat(className).trim(),
     style: style,
     contentRadius: borderRadius,
     contentZIndex: zIndex
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-frame"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "device-content"
-  }, findChildren(_react.default.Children.toArray(children)))), _react.default.createElement("div", {
+  }, findChildren(_react.default.Children.toArray(children)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-stripe"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-header"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-sensors"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-btns"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "device-power"
   }));
 };
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Screenshot__Div",
-  componentId: "el6nkq-0"
-})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
+  componentId: "sc-el6nkq-0"
+})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content{overflow:hidden;}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
 
 Screenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),

package/lib/Spinner/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Spinner;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+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; }
+
+/**
+ * Spinner
+ *
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @material-ui/core/CircularProgress 的实现
+ *
+ * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
+ * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
+ */
+function Spinner(props) {
+  const _props = _objectSpread({}, props); // 兼容之前的 size prop (设置外圈/内圈的尺寸)
+
+
+  if (_props.size && Array.isArray(_props.size)) {
+    [_props.size] = _props.size;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_CircularProgress.default, _props);
+}