@arcblock/ux 2.4.14 → 2.4.17

package/lib/ClickToCopy/index.js

@@ -17,8 +17,6 @@ var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize
 
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-
 var _hook = _interopRequireDefault(require("./hook"));
 
 var _Toast = _interopRequireWildcard(require("../Toast"));
@@ -31,9 +29,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _copyButton = _interopRequireDefault(require("./copy-button"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-const _excluded = ["children", "content", "tip", "copiedTip", "tipPlacement", "locale", "style"];
+const _excluded = ["children", "content", "tip", "copiedTip", "tipPlacement", "locale", "style", "unstyled"];
 
 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); }
 
@@ -63,7 +61,8 @@ function ClickToCopy(props) {
     copiedTip,
     tipPlacement,
     locale,
-    style
+    style,
+    unstyled
   } = newProps,
         rest = _objectWithoutProperties(newProps, _excluded);
 
@@ -93,20 +92,16 @@ function ClickToCopy(props) {
     }
   };
 
+  const ContainerComponent = unstyled ? UnstyledContainer : Container;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.ToastProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, _objectSpread(_objectSpread({
       title: copied ? _copiedTip : _tip
     }, rest), {}, {
       placement: tipPlacement,
       disableFocusListener: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContainerComponent, {
         ref: containerRef,
-        component: "span",
-        style: Object.assign({
-          fontSize: 'inherit',
-          color: 'inherit',
-          fontWeight: 'inherit'
-        }, style),
+        style: style,
         onClick: onCopy,
         children: children || content
       })
@@ -121,7 +116,9 @@ ClickToCopy.propTypes = {
   tipPlacement: _propTypes.default.string,
   copiedTip: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['en', 'zh']),
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  // 仅提供点击复制功能, 不提供样式
+  unstyled: _propTypes.default.bool
 };
 ClickToCopy.defaultProps = {
   content: '',
@@ -129,6 +126,8 @@ ClickToCopy.defaultProps = {
   copiedTip: '',
   tipPlacement: 'right',
   locale: 'en',
-  style: {}
+  style: {},
+  unstyled: false
 };
-const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));
+const Container = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));
+const UnstyledContainer = (0, _Theme.styled)('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));

package/lib/Empty/index.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _EmptyIcon = _interopRequireDefault(require("@arcblock/icons/lib/EmptyIcon"));
 
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["name", "color", "size", "children"];
+const _excluded = ["color", "size", "children"];
 
 var _templateObject;
 
@@ -35,7 +35,6 @@ const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject =
 
 function Empty(_ref) {
   let {
-    name,
     color,
     size,
     children
@@ -43,11 +42,13 @@ function Empty(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: name,
-      size: size,
-      className: "empty-icon",
-      color: color
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyIcon.default, {
+      style: {
+        width: size,
+        height: size,
+        color
+      },
+      className: "empty-icon"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "empty-content",
       children: children
@@ -57,13 +58,11 @@ function Empty(_ref) {
 
 Empty.propTypes = {
   color: _propTypes.default.string,
-  name: _propTypes.default.string,
   size: _propTypes.default.number,
   children: _propTypes.default.any
 };
 Empty.defaultProps = {
   color: 'inherit',
-  name: 'inbox',
   size: 36,
   children: null
 };

package/lib/Locale/selector.js

@@ -39,7 +39,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["showText", "popperProps", "popperType", "icon"];
+const _excluded = ["showText", "popperProps", "popperType", "icon", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -62,7 +62,8 @@ function LocaleSelector(props) {
     showText,
     popperProps,
     popperType,
-    icon: Icon
+    icon: Icon,
+    size
   } = props,
         rest = _objectWithoutProperties(props, _excluded);
 
@@ -111,12 +112,12 @@ function LocaleSelector(props) {
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Globe.default, {
       style: {
-        width: 26,
-        height: 24.76,
+        width: 'auto',
+        height: size,
         color: theme.palette.text.secondary
       }
     });
-  }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary]);
+  }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary, size]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
     component: "div",
     dark: dark,
@@ -183,4 +184,4 @@ LocaleSelector.defaultProps = {
 };
 var _default = LocaleSelector;
 exports.default = _default;
-const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-image {\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.14",
+  "version": "2.4.17",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "3bc65e4ac9040d63f8b1a732c647c24d3156f20b",
+  "gitHead": "074d03aa938b1a9f52d2d9ef2bb8d68bb08d061e",
   "dependencies": {
-    "@arcblock/icons": "^2.4.14",
-    "@arcblock/react-hooks": "^2.4.14",
+    "@arcblock/icons": "^2.4.17",
+    "@arcblock/react-hooks": "^2.4.17",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ClickToCopy/index.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
@@ -12,7 +11,7 @@ export { default as CopyButton } from './copy-button';
 
 export default function ClickToCopy(props) {
   const newProps = mergeProps(props, ClickToCopy, ['style']);
-  const { children, content, tip, copiedTip, tipPlacement, locale, style, ...rest } = newProps;
+  const { children, content, tip, copiedTip, tipPlacement, locale, style, unstyled, ...rest } = newProps;
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
@@ -26,16 +25,14 @@ export default function ClickToCopy(props) {
     }
   };
 
+  const ContainerComponent = unstyled ? UnstyledContainer : Container;
+
   return (
     <ToastProvider>
       <Tooltip title={copied ? _copiedTip : _tip} {...rest} placement={tipPlacement} disableFocusListener>
-        <Container
-          ref={containerRef}
-          component="span"
-          style={Object.assign({ fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' }, style)}
-          onClick={onCopy}>
+        <ContainerComponent ref={containerRef} style={style} onClick={onCopy}>
           {children || content}
-        </Container>
+        </ContainerComponent>
       </Tooltip>
     </ToastProvider>
   );
@@ -49,6 +46,8 @@ ClickToCopy.propTypes = {
   copiedTip: PropTypes.string,
   locale: PropTypes.oneOf(['en', 'zh']),
   style: PropTypes.object,
+  // 仅提供点击复制功能, 不提供样式
+  unstyled: PropTypes.bool,
 };
 
 ClickToCopy.defaultProps = {
@@ -58,9 +57,10 @@ ClickToCopy.defaultProps = {
   tipPlacement: 'right',
   locale: 'en',
   style: {},
+  unstyled: false,
 };
 
-const Container = styled(Typography)`
+const Container = styled('span')`
   display: inline;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -72,3 +72,7 @@ const Container = styled(Typography)`
   background-color: rgba(0, 0, 0, 0.08);
   cursor: pointer;
 `;
+
+const UnstyledContainer = styled('span')`
+  cursor: pointer;
+`;

package/src/Empty/index.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-
-import Icon from '../Icon';
+import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
 import { styled } from '../Theme';
 
 const Wrapper = styled('div')`
@@ -16,10 +15,10 @@ const Wrapper = styled('div')`
   }
 `;
 
-function Empty({ name, color, size, children, ...rest }) {
+function Empty({ color, size, children, ...rest }) {
   return (
     <Wrapper {...rest}>
-      <Icon name={name} size={size} className="empty-icon" color={color} />
+      <EmptyIcon style={{ width: size, height: size, color }} className="empty-icon" />
       <div className="empty-content">{children}</div>
     </Wrapper>
   );
@@ -27,13 +26,11 @@ function Empty({ name, color, size, children, ...rest }) {
 
 Empty.propTypes = {
   color: PropTypes.string,
-  name: PropTypes.string,
   size: PropTypes.number,
   children: PropTypes.any,
 };
 Empty.defaultProps = {
   color: 'inherit',
-  name: 'inbox',
   size: 36,
   children: null,
 };

package/src/Locale/selector.js

@@ -18,7 +18,7 @@ import { LocaleContext, languages } from './context';
 import { styled, useTheme } from '../Theme';
 
 function LocaleSelector(props) {
-  const { showText, popperProps, popperType, icon: Icon, ...rest } = props;
+  const { showText, popperProps, popperType, icon: Icon, size, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
@@ -61,8 +61,8 @@ function LocaleSelector(props) {
       return <Icon />;
     }
 
-    return <GlobeIcon style={{ width: 26, height: 24.76, color: theme.palette.text.secondary }} />;
-  }, [Icon, theme?.palette?.text?.secondary]);
+    return <GlobeIcon style={{ width: 'auto', height: size, color: theme.palette.text.secondary }} />;
+  }, [Icon, theme?.palette?.text?.secondary, size]);
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
@@ -130,11 +130,6 @@ const Div = styled('div')`
     justify-content: center;
     font-size: 14px;
 
-    .trigger-image {
-      width: ${(props) => props.size}px;
-      height: ${(props) => props.size}px;
-    }
-
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;