@arcblock/ux 1.16.60 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.60",
+  "version": "1.16.61",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "7747d27c27d53c64a05209031851e02d70f3dae0",
+  "gitHead": "7fea6393d63b83059873613993172a6dc98508ce",
   "dependencies": {
-    "@arcblock/icons": "^1.16.60",
-    "@arcblock/react-hooks": "^1.16.60",
+    "@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",

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};