@arcblock/ux 1.16.43 → 1.16.44

package/lib/Button/wrap.js

@@ -15,10 +15,16 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
-const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef"];
+const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef", "color"];
 
 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 _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; }
@@ -33,7 +39,8 @@ function _default(BaseComponent) {
       loading,
       disabled,
       style,
-      forwardedRef
+      forwardedRef,
+      color
     } = newProps,
           rest = _objectWithoutProperties(newProps, _excluded);
 
@@ -55,36 +62,59 @@ function _default(BaseComponent) {
     const styles = Object.assign({}, style, {
       boxShadow: 'none',
       textTransform: 'capitalize'
-    });
-
-    if (rest.color === '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;
-      }
-    }
+    }); // 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.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
 
-    if (!rest.color || rest.color === 'default') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-        styles.color = _Colors.default.common.white;
-      } else {
-        styles.borderColor = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-        styles.color = isDisabled ? _Colors.default.grey[400] : _Colors.default.grey[900];
-      }
-    }
-
-    if (rest.color === '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];
-      }
+      default:
+        {
+          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+            color
+          });
+        }
     }
 
     if (rounded) {
@@ -96,7 +126,7 @@ function _default(BaseComponent) {
       style: styles,
       ref: forwardedRef,
       disabled: isDisabled
-    }, rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    }, _rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       size: loadingSize,
       style: {
         marginRight: 5

package/lib/Colors/themes/default.js

@@ -19,12 +19,12 @@ const colors = {
     white: '#fff'
   },
   primary: {
-    main: '#4F6AF6',
+    main: '#3773F2',
     contrastText: '#fff'
   },
   // override
   secondary: {
-    main: '#31AB86',
+    main: '#16CED1',
     contrastText: '#fff'
   },
   // override
@@ -78,7 +78,8 @@ const colors = {
   did: {
     primary: '#4598FA',
     secondary: '#49C3AD'
-  }
+  } // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
+
 };
 var _default = colors;
 exports.default = _default;

package/lib/Theme/index.js

@@ -7,6 +7,10 @@ exports.create = void 0;
 
 var _styles = require("@material-ui/core/styles");
 
+require("@fontsource/lato/400.css");
+
+require("@fontsource/lato/700.css");
+
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
@@ -58,12 +62,11 @@ const create = function create() {
         gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
       fontSize: 16,
-      fontFamily: ['Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
     }, typography || {}),
     overrides: Object.assign({
       MuiButton: {
         root: {
-          borderRadius: 0,
           boxShadow: 'none'
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.43",
+  "version": "1.16.44",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,11 +53,12 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "e4ea73a6f81cb2b5ef424bf15158091432bcc75b",
+  "gitHead": "912f6b79061afd403605e241044579d60a1149fc",
   "dependencies": {
-    "@arcblock/icons": "^1.16.43",
-    "@arcblock/react-hooks": "^1.16.43",
+    "@arcblock/icons": "^1.16.44",
+    "@arcblock/react-hooks": "^1.16.44",
     "@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",
     "axios": "^0.21.1",

package/src/Button/wrap.js

@@ -10,7 +10,7 @@ import { mergeProps } from '../Util';
 export default function (BaseComponent) {
   function WrappedComponent(props) {
     const newProps = mergeProps(props, WrappedComponent, ['style']);
-    const { children, rounded, loading, disabled, style, forwardedRef, ...rest } = newProps;
+    const { children, rounded, loading, disabled, style, forwardedRef, color, ...rest } = newProps;
 
     const isDisabled = disabled || loading;
 
@@ -29,31 +29,44 @@ export default function (BaseComponent) {
       textTransform: 'capitalize',
     });
 
-    if (rest.color === '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;
+    // 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;
       }
-    }
-    if (!rest.color || rest.color === 'default') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = isDisabled ? colors.grey[400] : colors.grey[900];
-        styles.color = colors.common.white;
-      } else {
-        styles.borderColor = isDisabled ? colors.grey[400] : colors.grey[900];
-        styles.color = isDisabled ? colors.grey[400] : colors.grey[900];
+      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;
       }
-    }
-    if (rest.color === '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];
+      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 (rounded) {
@@ -62,7 +75,7 @@ export default function (BaseComponent) {
     }
 
     return (
-      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {...rest}>
+      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
         {loading && <Spinner size={loadingSize} style={{ marginRight: 5 }} />}
         {children}
       </BaseComponent>

package/src/Colors/themes/default.js

@@ -11,8 +11,8 @@ const colors = {
     black: '#000',
     white: '#fff',
   },
-  primary: { main: '#4F6AF6', contrastText: '#fff' }, // override
-  secondary: { main: '#31AB86', contrastText: '#fff' }, // override
+  primary: { main: '#3773F2', contrastText: '#fff' }, // override
+  secondary: { main: '#16CED1', contrastText: '#fff' }, // override
   error: { main: '#F16E6E', contrastText: '#fff' }, // override
   warning: { main: '#DE9E37', contrastText: '#fff' }, // override
   info: { main: '#0775F8', contrastText: '#fff' }, // override
@@ -48,6 +48,7 @@ const colors = {
     primary: '#4598FA',
     secondary: '#49C3AD',
   },
+  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
 };
 
 export default colors;

package/src/Theme/index.js

@@ -1,5 +1,7 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme } from '@material-ui/core/styles';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
 import responsiveFontSizes from './responsiveFontSizes';
 import colors from '../Colors';
 
@@ -39,6 +41,7 @@ export const create = ({
         },
         fontSize: 16,
         fontFamily: [
+          'Lato',
           'Avenir',
           '-apple-system',
           'BlinkMacSystemFont',
@@ -58,7 +61,6 @@ export const create = ({
       {
         MuiButton: {
           root: {
-            borderRadius: 0,
             boxShadow: 'none',
           },
         },