@arcblock/ux 2.1.54 → 2.1.57

package/lib/ActivityIndicator/index.js

@@ -34,7 +34,9 @@ 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; }
 
-// inspired by: https://codepen.io/wangshijun/pen/oQvwdX?editors=1100
+/**
+ * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ */
 function ActivityIndicator(_ref) {
   let {
     messages,

package/lib/Header/header.js

@@ -19,7 +19,7 @@ var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend"];
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,7 +45,8 @@ function Header(_ref) {
     description,
     children,
     addons,
-    prepend
+    prepend,
+    align
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -80,7 +81,9 @@ function Header(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-brand-addon",
         children: brandAddon
-      }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), align === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        flexGrow: 1
+      }), children, align === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         flexGrow: 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-addons",
@@ -103,7 +106,8 @@ Header.propTypes = {
   // 右侧区域, 可以放置 icons/actions/login 等
   addons: _propTypes.default.node,
   // logo 左侧内容
-  prepend: _propTypes.default.node
+  prepend: _propTypes.default.node,
+  align: _propTypes.default.oneOf(['left', 'right'])
 };
 Header.defaultProps = {
   logo: null,
@@ -112,7 +116,8 @@ Header.defaultProps = {
   description: null,
   children: null,
   addons: null,
-  prepend: null
+  prepend: null,
+  align: 'left'
 };
 
 const Root = _styledComponents.default.div.withConfig({

package/lib/Img/index.js

@@ -62,7 +62,8 @@ const Root = (0, _styles.styled)('div')(() => ({
       height: '100%'
     },
     '& .image--img': {
-      opacity: 0
+      opacity: 0,
+      visibility: 'hidden'
     },
     '& .image--icon': {
       fontSize: 30,

package/lib/SplitButton/index.js

@@ -25,7 +25,7 @@ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 
 var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -43,6 +43,9 @@ 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; }
 
+/**
+ * SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
+ */
 function SplitButton(_ref) {
   let {
     size,
@@ -57,6 +60,10 @@ function SplitButton(_ref) {
 
   const [open, setOpen] = (0, _react.useState)(false);
   const anchorRef = (0, _react.useRef)(null);
+  const menuItems = Array.isArray(menu) ? menu.map((item, index) => /*#__PURE__*/(0, _react.isValidElement)(item) ? item : /*#__PURE__*/(0, _react.createElement)(_MenuItem.default, _objectSpread(_objectSpread({}, item), {}, {
+    key: index
+  }))) // eslint-disable-line react/no-array-index-key
+  : menu;
 
   const onToggle = () => {
     setOpen(prevOpen => !prevOpen);
@@ -105,7 +112,7 @@ function SplitButton(_ref) {
           onClickAway: handleClose,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
             onClick: handleItemClick,
-            children: menu
+            children: menuItems
           })
         })
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.54",
+  "version": "2.1.57",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a3907bf6904c52478a692d09ee0c4fc4fab7d42e",
+  "gitHead": "3bf280fd6c092c0cf1649f42f65fc052b7598bbf",
   "dependencies": {
-    "@arcblock/icons": "^2.1.54",
-    "@arcblock/react-hooks": "^2.1.54",
+    "@arcblock/icons": "^2.1.57",
+    "@arcblock/react-hooks": "^2.1.57",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/ActivityIndicator/index.js

@@ -6,7 +6,9 @@ import { green, blue } from '@mui/material/colors';
 import Logo from '../Logo';
 import colors from '../Colors';
 
-// inspired by: https://codepen.io/wangshijun/pen/oQvwdX?editors=1100
+/**
+ * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ */
 export default function ActivityIndicator({ messages, interval, ...rest }) {
   const [index, setIndex] = useState(0);
 

package/src/Header/header.js

@@ -9,7 +9,7 @@ import AutoHidden from './auto-hidden';
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-function Header({ logo, brand, brandAddon, description, children, addons, prepend, ...rest }) {
+function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, ...rest }) {
   const theme = useTheme();
   return (
     <Root {...rest} $theme={theme}>
@@ -25,8 +25,9 @@ function Header({ logo, brand, brandAddon, description, children, addons, prepen
           </div>
         </AutoHidden>
         <div className="header-brand-addon">{brandAddon}</div>
+        {align === 'right' && <Box flexGrow={1} />}
         {children}
-        <Box flexGrow={1} />
+        {align === 'left' && <Box flexGrow={1} />}
         <div className="header-addons">{addons}</div>
       </Container>
     </Root>
@@ -47,6 +48,7 @@ Header.propTypes = {
   addons: PropTypes.node,
   // logo 左侧内容
   prepend: PropTypes.node,
+  align: PropTypes.oneOf(['left', 'right']),
 };
 
 Header.defaultProps = {
@@ -57,6 +59,7 @@ Header.defaultProps = {
   children: null,
   addons: null,
   prepend: null,
+  align: 'left',
 };
 
 const Root = styled.div`

package/src/Img/index.js

@@ -36,6 +36,7 @@ const Root = styled('div')(() => ({
     },
     '& .image--img': {
       opacity: 0,
+      visibility: 'hidden',
     },
     '& .image--icon': {
       fontSize: 30,

package/src/SplitButton/index.js

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -8,11 +8,17 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '../Button';
+import Button from '@mui/material/Button';
 
+/**
+ * SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
+ */
 export default function SplitButton({ size, color, menu, children, variant, onClick, menuButtonProps, ...rest }) {
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
+  const menuItems = Array.isArray(menu)
+    ? menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />)) // eslint-disable-line react/no-array-index-key
+    : menu;
 
   const onToggle = () => {
     setOpen((prevOpen) => !prevOpen);
@@ -49,7 +55,7 @@ export default function SplitButton({ size, color, menu, children, variant, onCl
       <StyledPopper open={open} anchorEl={anchorRef.current} placement="bottom-end" disablePortal={false}>
         <Paper>
           <ClickAwayListener onClickAway={handleClose}>
-            <MenuList onClick={handleItemClick}>{menu}</MenuList>
+            <MenuList onClick={handleItemClick}>{menuItems}</MenuList>
           </ClickAwayListener>
         </Paper>
       </StyledPopper>