@arcblock/ux 1.16.57 → 1.16.61

package/lib/Button/wrap.js

@@ -29,6 +29,49 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 extendedColors = {
+  danger: {
+    contained: {
+      backgroundColor: _Colors.default.error.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.error.main,
+      color: _Colors.default.error.main
+    }
+  },
+  warning: {
+    contained: {
+      backgroundColor: _Colors.default.warning.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.warning.main,
+      color: _Colors.default.warning.main
+    }
+  },
+  did: {
+    contained: {
+      backgroundColor: _Colors.default.did.primary,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.did.primary,
+      color: _Colors.default.did.primary
+    }
+  },
+  reverse: {
+    contained: {
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      color: _Colors.default.grey[900]
+    },
+    outlined: {
+      borderColor: _Colors.default.grey[900],
+      color: _Colors.default.grey[900]
+    }
+  }
+};
+
 function _default(BaseComponent) {
   function WrappedComponent(props) {
     const newProps = (0, _Util.mergeProps)(props, WrappedComponent, ['style']);
@@ -57,64 +100,22 @@ function _default(BaseComponent) {
         break;
 
       default:
-    }
+    } // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse/did 四种 color
+
 
-    const styles = Object.assign({}, style, {
+    const matched = extendedColors[color] && extendedColors[color][rest.variant];
+    const styles = Object.assign({}, style, _objectSpread({
       boxShadow: 'none',
       textTransform: 'capitalize'
-    }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse 三种 color
-
+    }, matched));
     let _rest = rest;
 
-    switch (color) {
-      case 'error':
-      case 'danger':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.error.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.error.main;
-            styles.color = _Colors.default.error.main;
-          }
-
-          break;
-        }
-
-      case 'warning':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.warning.main;
-          }
-
-          break;
-        }
-
-      case 'reverse':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-            styles.color = _Colors.default.grey[900];
-          } else {
-            styles.borderColor = _Colors.default.grey[900];
-            styles.color = _Colors.default.grey[900];
-          }
-
-          break;
-        }
-      // 除扩展的几种 color 外, 由 mui button 自己处理 color
-
-      default:
-        {
-          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
-            color
-          });
-        }
+    if (!matched) {
+      // mui button 本身支持的 color 交由 mui 处理
+      _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+        color
+      });
     }
 
     if (rounded) {

package/lib/Layout/dashboard/sidebar.js

@@ -110,7 +110,7 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gaosgy-1"
-})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
+})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.57",
+  "version": "1.16.61",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,14 +53,15 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "39bcb1d450409158a35acfdd486d8c79f7dfc5a6",
+  "gitHead": "7fea6393d63b83059873613993172a6dc98508ce",
   "dependencies": {
-    "@arcblock/icons": "^1.16.57",
-    "@arcblock/react-hooks": "^1.16.57",
+    "@arcblock/icons": "^1.16.61",
+    "@arcblock/react-hooks": "^1.16.61",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
+    "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.1",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.2.0",

package/src/Button/wrap.js

@@ -7,6 +7,25 @@ import Spinner from '../Spinner';
 import colors from '../Colors';
 import { mergeProps } from '../Util';
 
+const extendedColors = {
+  danger: {
+    contained: { backgroundColor: colors.error.main, color: colors.common.white },
+    outlined: { borderColor: colors.error.main, color: colors.error.main },
+  },
+  warning: {
+    contained: { backgroundColor: colors.warning.main, color: colors.common.white },
+    outlined: { borderColor: colors.warning.main, color: colors.warning.main },
+  },
+  did: {
+    contained: { backgroundColor: colors.did.primary, color: colors.common.white },
+    outlined: { borderColor: colors.did.primary, color: colors.did.primary },
+  },
+  reverse: {
+    contained: { backgroundColor: 'rgba(255, 255, 255, 0.9)', color: colors.grey[900] },
+    outlined: { borderColor: colors.grey[900], color: colors.grey[900] },
+  },
+};
+
 export default function (BaseComponent) {
   function WrappedComponent(props) {
     const newProps = mergeProps(props, WrappedComponent, ['style']);
@@ -24,50 +43,19 @@ export default function (BaseComponent) {
         break;
       default:
     }
+
+    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse/did 四种 color
+    const matched = extendedColors[color] && extendedColors[color][rest.variant];
     const styles = Object.assign({}, style, {
       boxShadow: 'none',
       textTransform: 'capitalize',
+      ...matched,
     });
-
-    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse 三种 color
     let _rest = rest;
-    switch (color) {
-      case 'error':
-      case 'danger': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = colors.error.main;
-          styles.color = colors.common.white;
-        } else {
-          styles.borderColor = colors.error.main;
-          styles.color = colors.error.main;
-        }
-        break;
-      }
-      case 'warning': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = colors.warning.main;
-          styles.color = colors.common.white;
-        } else {
-          styles.borderColor = colors.warning.main;
-          styles.color = colors.warning.main;
-        }
-        break;
-      }
-      case 'reverse': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-          styles.color = colors.grey[900];
-        } else {
-          styles.borderColor = colors.grey[900];
-          styles.color = colors.grey[900];
-        }
-        break;
-      }
-      // 除扩展的几种 color 外, 由 mui button 自己处理 color
-      default: {
-        _rest = { ..._rest, color };
-      }
+    if (!matched) {
+      // mui button 本身支持的 color 交由 mui 处理
+      _rest = { ..._rest, color };
     }
     if (rounded) {
       // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];

package/src/Layout/dashboard/sidebar.js

@@ -94,6 +94,7 @@ const MenuItem = styled(Button)`
     background: ${props => (props.selected ? gradient : '')};
     padding: 24px 0;
     border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
+    border-radius: 0;
 
     &:hover {
       background: ${gradient};

package/src/QRCode/index.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import QRCodeStyling from '@solana/qr-code-styling';
+
+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({ data, size, image, config, ...rest }) {
+  const ref = React.useRef(null);
+  useEffect(() => {
+    const qrCode = new QRCodeStyling({
+      ...defaults,
+      data,
+      width: size,
+      height: size,
+      ...(image && {
+        image,
+        imageOptions: {
+          crossOrigin: 'anonymous',
+          margin: 0,
+        },
+      }),
+      ...config,
+    });
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return <div ref={ref} {...rest} />;
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  image: PropTypes.string,
+  // 覆盖 qr-code-styling 配置
+  config: PropTypes.object,
+};
+
+QRCode.defaultProps = {
+  image: null,
+  config: {},
+};
+
+export default QRCode;