@arcblock/ux 1.16.44 → 1.16.45

package/lib/ButtonGroup/index.js

@@ -5,27 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
 
 var _wrap = _interopRequireDefault(require("../Button/wrap"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const sizes = {
-  small: 16,
-  medium: 18,
-  large: 20
-};
-
-const getBorderRadius = size => sizes[size || 'medium'];
-
-const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
-  displayName: "ButtonGroup__StyledButtonGroup",
-  componentId: "sc-1popzk9-0"
-})([".MuiButton-root:first-of-type{border-radius:", "px 0 0 ", "px;}.MuiButton-root:last-of-type{border-radius:0 ", "px ", "px 0;}"], props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size));
-
-var _default = (0, _wrap.default)(StyledButtonGroup);
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+var _default = (0, _wrap.default)(_ButtonGroup.default);
 
 exports.default = _default;

package/lib/SplitButton/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SplitButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+const _excluded = ["size", "color", "menu", "children", "variant", "onClick"];
+
+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 _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 SplitButton(_ref) {
+  let {
+    size,
+    color,
+    menu,
+    children,
+    variant,
+    onClick
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [open, setOpen] = (0, _react.useState)(false);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const onToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = e => {
+    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+      return;
+    }
+
+    setOpen(false);
+  }; // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
+
+
+  const handleItemClick = e => {
+    if (e.target.classList.contains('MuiListItem-root')) {
+      setOpen(false);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledButtonGroup, Object.assign({
+    variant: variant,
+    size: size,
+    color: color,
+    ref: anchorRef
+  }, rest), typeof children === 'function' ? children() : /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onClick,
+    color: color
+  }, children), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onToggle,
+    color: color
+  }, /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null))), /*#__PURE__*/_react.default.createElement(StyledPopper, {
+    open: open,
+    anchorEl: anchorRef.current,
+    placement: "bottom-end",
+    disablePortal: false
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, null, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+    onClickAway: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
+    onClick: handleItemClick
+  }, menu)))));
+}
+
+SplitButton.propTypes = {
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  color: _propTypes.default.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  menu: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.array]),
+  // 也可以是用于渲染主按钮的 function
+  children: _propTypes.default.any,
+  variant: _propTypes.default.oneOf(['outlined', 'contained']),
+  onClick: _propTypes.default.func
+};
+SplitButton.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+  menu: [],
+  children: null,
+  variant: 'contained',
+  onClick: () => {}
+};
+SplitButton.Item = _MenuItem.default;
+const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
+  displayName: "SplitButton__StyledButtonGroup",
+  componentId: "sc-1meco5z-0"
+})(["> .MuiButtonBase-root:last-child{min-width:2em;padding-left:0;padding-right:0;}"]);
+const StyledPopper = (0, _styledComponents.default)(_Popper.default).withConfig({
+  displayName: "SplitButton__StyledPopper",
+  componentId: "sc-1meco5z-1"
+})([".MuiList-root{padding:4px 0;}.MuiListItem-root{padding-top:4px;padding-bottom:4px;}"]);

package/lib/Theme/index.js

@@ -61,7 +61,6 @@ const create = function create() {
         main: mode === 'light' ? '#222222' : _Colors.default.common.white,
         gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
-      fontSize: 16,
       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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.44",
+  "version": "1.16.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "912f6b79061afd403605e241044579d60a1149fc",
+  "gitHead": "2158b9836301fd2f258b0603f9bbaed41a367466",
   "dependencies": {
-    "@arcblock/icons": "^1.16.44",
-    "@arcblock/react-hooks": "^1.16.44",
+    "@arcblock/icons": "^1.16.45",
+    "@arcblock/react-hooks": "^1.16.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/ButtonGroup/index.js

@@ -1,19 +1,6 @@
-import styled from 'styled-components';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import wrap from '../Button/wrap';
 
-const sizes = { small: 16, medium: 18, large: 20 };
-const getBorderRadius = size => sizes[size || 'medium'];
-
-const StyledButtonGroup = styled(ButtonGroup)`
-  .MuiButton-root:first-of-type {
-    border-radius: ${props => getBorderRadius(props.size)}px 0 0
-      ${props => getBorderRadius(props.size)}px;
-  }
-  .MuiButton-root:last-of-type {
-    border-radius: 0 ${props => getBorderRadius(props.size)}px
-      ${props => getBorderRadius(props.size)}px 0;
-  }
-`;
-
-export default wrap(StyledButtonGroup);
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+export default wrap(ButtonGroup);

package/src/SplitButton/index.js

@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Popper from '@material-ui/core/Popper';
+import Paper from '@material-ui/core/Paper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '../Button';
+
+export default function SplitButton({ size, color, menu, children, variant, onClick, ...rest }) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const onToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = e => {
+    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
+  const handleItemClick = e => {
+    if (e.target.classList.contains('MuiListItem-root')) {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <StyledButtonGroup variant={variant} size={size} color={color} ref={anchorRef} {...rest}>
+        {typeof children === 'function' ? (
+          children()
+        ) : (
+          <Button onClick={onClick} color={color}>
+            {children}
+          </Button>
+        )}
+        <Button onClick={onToggle} color={color}>
+          <ExpandMore />
+        </Button>
+      </StyledButtonGroup>
+      <StyledPopper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="bottom-end"
+        disablePortal={false}>
+        <Paper>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList onClick={handleItemClick}>{menu}</MenuList>
+          </ClickAwayListener>
+        </Paper>
+      </StyledPopper>
+    </>
+  );
+}
+
+SplitButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  // 也可以是用于渲染主按钮的 function
+  children: PropTypes.any,
+  variant: PropTypes.oneOf(['outlined', 'contained']),
+  onClick: PropTypes.func,
+};
+
+SplitButton.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+  menu: [],
+  children: null,
+  variant: 'contained',
+  onClick: () => {},
+};
+
+SplitButton.Item = MenuItem;
+
+const StyledButtonGroup = styled(ButtonGroup)`
+  > .MuiButtonBase-root:last-child {
+    min-width: 2em;
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+const StyledPopper = styled(Popper)`
+  .MuiList-root {
+    padding: 4px 0;
+  }
+  .MuiListItem-root {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+`;

package/src/Theme/index.js

@@ -39,7 +39,6 @@ export const create = ({
           main: mode === 'light' ? '#222222' : colors.common.white,
           gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
         },
-        fontSize: 16,
         fontFamily: [
           'Lato',
           'Avenir',