@arcblock/ux 2.0.0 → 2.0.3

package/lib/ActivityIndicator/index.js

@@ -11,9 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _green = _interopRequireDefault(require("@mui/material/colors/green"));
-
-var _blue = _interopRequireDefault(require("@mui/material/colors/blue"));
+var _colors = require("@mui/material/colors");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
 
@@ -62,13 +60,13 @@ function ActivityIndicator(_ref) {
     showText: false
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 56,
-    orbitColor: _green.default[500],
-    atomColor: _green.default[500],
+    orbitColor: _colors.green[500],
+    atomColor: _colors.green[500],
     duration: 1
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 80,
-    orbitColor: _blue.default[800],
-    atomColor: _blue.default[800],
+    orbitColor: _colors.blue[800],
+    atomColor: _colors.blue[800],
     duration: 1.5
   }), /*#__PURE__*/_react.default.createElement(Orbit, {
     size: 100,

package/lib/Alert/index.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _blueGrey = _interopRequireDefault(require("@mui/material/colors/blueGrey"));
+var _colors = require("@mui/material/colors");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -75,7 +75,7 @@ const Alert = props => {
     borderColor
   } = types[type] || types.success;
   const styles = Object.assign({
-    color: _blueGrey.default[500],
+    color: _colors.blueGrey[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
     borderLeft: variant === 'border' ? "5px solid ".concat(borderColor) : 'none'
   }, style);

package/lib/Layout/dashboard/sidebar.js

@@ -19,7 +19,7 @@ var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _teal = _interopRequireDefault(require("@mui/material/colors/teal"));
+var _colors = require("@mui/material/colors");
 
 var _image = _interopRequireDefault(require("../../Icon/image"));
 
@@ -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:flex;flex-direction:column;justify-content:center;align-items:center;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%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700, props => props.theme.palette.text.primary);
+})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;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%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
 

package/lib/Switch/index.js

@@ -9,14 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@mui/styles");
+var _styles = require("@mui/material/styles");
 
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
-const _excluded = ["classes"],
-      _excluded2 = ["labelProps"];
+const _excluded = ["labelProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -24,62 +23,59 @@ 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; }
 
-// 参考: https://v4.mui.com/components/switches/
-const IOSSwitch = (0, _styles.withStyles)(theme => ({
-  root: {
+// 参考: https://mui.com/material-ui/react-switch/#customization
+const IOSSwitch = (0, _styles.styled)(props => /*#__PURE__*/_react.default.createElement(_Switch.default, Object.assign({
+  focusVisibleClassName: ".Mui-focusVisible",
+  disableRipple: true
+}, props)))(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
     width: 42,
     height: 26,
     padding: 0,
-    margin: theme.spacing(1)
-  },
-  switchBase: {
-    padding: 1,
-    '&$checked': {
-      transform: 'translateX(16px)',
-      color: theme.palette.common.white,
-      '& + $track': {
-        backgroundColor: '#52d869',
-        opacity: 1,
-        border: 'none'
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(16px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
+          opacity: 1,
+          border: 0
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5
+        }
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff'
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3
       }
     },
-    '&$focusVisible $thumb': {
-      color: '#52d869',
-      border: '6px solid #fff'
-    }
-  },
-  thumb: {
-    width: 24,
-    height: 24
-  },
-  track: {
-    // fix: 下边框截断问题
-    boxSizing: 'border-box',
-    borderRadius: 26 / 2,
-    border: "1px solid ".concat(theme.palette.grey[400]),
-    backgroundColor: theme.palette.grey[50],
-    opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border'])
-  },
-  checked: {},
-  focusVisible: {}
-}))(_ref => {
-  let {
-    classes
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(_Switch.default, Object.assign({
-    focusVisibleClassName: classes.focusVisible,
-    disableRipple: true,
-    classes: {
-      root: classes.root,
-      switchBase: classes.switchBase,
-      thumb: classes.thumb,
-      track: classes.track,
-      checked: classes.checked
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 22,
+      height: 22
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500
+      })
     }
-  }, props));
+  };
 });
 /**
  * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
@@ -90,18 +86,22 @@ function Switch(_ref2) {
   let {
     labelProps
   } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  if (labelProps) {
+    return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, Object.assign({
+      control: /*#__PURE__*/_react.default.createElement(IOSSwitch, rest)
+    }, labelProps));
+  }
 
-  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, Object.assign({
-    control: /*#__PURE__*/_react.default.createElement(IOSSwitch, rest)
-  }, labelProps));
+  return /*#__PURE__*/_react.default.createElement(IOSSwitch, rest);
 }
 
 Switch.propTypes = {
   labelProps: _propTypes.default.object
 };
 Switch.defaultProps = {
-  labelProps: {}
+  labelProps: null
 };
 var _default = Switch;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "e246936f30652b6d526c33b1462f8ad5e93e7722",
+  "gitHead": "98bbad1ac5bd83c71dc49c1d883babe5b46731a6",
   "dependencies": {
-    "@arcblock/icons": "^2.0.0",
-    "@arcblock/react-hooks": "^2.0.0",
+    "@arcblock/icons": "^2.0.3",
+    "@arcblock/react-hooks": "^2.0.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/ActivityIndicator/index.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import green from '@mui/material/colors/green';
-import blue from '@mui/material/colors/blue';
+import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';
 import colors from '../Colors';

package/src/Alert/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
-import blueGrey from '@mui/material/colors/blueGrey';
+import { blueGrey } from '@mui/material/colors';
 
 import Icon from '../Icon';
 import { mergeProps } from '../Util';

package/src/Layout/dashboard/sidebar.js

@@ -6,7 +6,7 @@ import withTheme from '@mui/styles/withTheme';
 import { withRouter, Link } from 'react-router-dom';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import teal from '@mui/material/colors/teal';
+import { teal } from '@mui/material/colors';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';

package/src/Switch/index.js

@@ -1,78 +1,74 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MuiSwitch from '@mui/material/Switch';
 
-// 参考: https://v4.mui.com/components/switches/
-const IOSSwitch = withStyles(theme => ({
-  root: {
-    width: 42,
-    height: 26,
+// 参考: https://mui.com/material-ui/react-switch/#customization
+const IOSSwitch = styled(props => (
+  <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+))(({ theme }) => ({
+  width: 42,
+  height: 26,
+  padding: 0,
+  '& .MuiSwitch-switchBase': {
     padding: 0,
-    margin: theme.spacing(1),
-  },
-  switchBase: {
-    padding: 1,
-    '&$checked': {
+    margin: 2,
+    transitionDuration: '300ms',
+    '&.Mui-checked': {
       transform: 'translateX(16px)',
-      color: theme.palette.common.white,
-      '& + $track': {
-        backgroundColor: '#52d869',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
         opacity: 1,
-        border: 'none',
+        border: 0,
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5,
       },
     },
-    '&$focusVisible $thumb': {
-      color: '#52d869',
+    '&.Mui-focusVisible .MuiSwitch-thumb': {
+      color: '#33cf4d',
       border: '6px solid #fff',
     },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
   },
-  thumb: {
-    width: 24,
-    height: 24,
-  },
-  track: {
-    // fix: 下边框截断问题
+  '& .MuiSwitch-thumb': {
     boxSizing: 'border-box',
+    width: 22,
+    height: 22,
+  },
+  '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    border: `1px solid ${theme.palette.grey[400]}`,
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border']),
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500,
+    }),
   },
-  checked: {},
-  focusVisible: {},
-}))(({ classes, ...props }) => {
-  return (
-    <MuiSwitch
-      focusVisibleClassName={classes.focusVisible}
-      disableRipple
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-      }}
-      {...props}
-    />
-  );
-});
+}));
 
 /**
  * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
  * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
  */
 function Switch({ labelProps, ...rest }) {
-  return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
+  if (labelProps) {
+    return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
+  }
+  return <IOSSwitch {...rest} />;
 }
 
 Switch.propTypes = {
   labelProps: PropTypes.object,
 };
 Switch.defaultProps = {
-  labelProps: {},
+  labelProps: null,
 };
 
 export default Switch;