@arcblock/ux 2.1.68 → 2.1.69

package/lib/Locale/selector.js

@@ -31,17 +31,15 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
+var _Globe = _interopRequireDefault(require("@arcblock/icons/lib/Globe"));
+
 var _Util = require("../Util");
 
 var _context = require("./context");
 
-var _globeDark = _interopRequireDefault(require("./images/globe-dark.png"));
-
-var _globeLight = _interopRequireDefault(require("./images/globe-light.png"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["dark", "showText", "popperProps", "popperType", "icon"];
+const _excluded = ["showText", "popperProps", "popperType", "icon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,8 +54,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; }
 
 function LocaleSelector(props) {
+  var _theme$palette, _theme$palette2, _theme$palette2$text;
+
   const {
-    dark,
     showText,
     popperProps,
     popperType,
@@ -72,6 +71,7 @@ function LocaleSelector(props) {
   const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
   const theme = (0, _styles.useTheme)();
+  const dark = (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.mode) === 'dark';
 
   const onSelect = newLocale => {
     changeLocale(newLocale);
@@ -107,12 +107,14 @@ function LocaleSelector(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {});
     }
 
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: dark ? _globeDark.default : _globeLight.default,
-      className: "trigger-image",
-      alt: "globe"
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Globe.default, {
+      style: {
+        width: 26,
+        height: 24.76,
+        color: theme.palette.text.secondary
+      }
     });
-  }, [Icon, dark]);
+  }, [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]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
     component: "div",
     dark: dark,
@@ -162,7 +164,6 @@ function LocaleSelector(props) {
 }
 
 LocaleSelector.propTypes = {
-  dark: _propTypes.default.bool,
   size: _propTypes.default.number,
   showText: _propTypes.default.bool,
   popperProps: _propTypes.default.object,
@@ -171,7 +172,6 @@ LocaleSelector.propTypes = {
   icon: _propTypes.default.any
 };
 LocaleSelector.defaultProps = {
-  dark: false,
   showText: true,
   size: 24,
   popperProps: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.68",
+  "version": "2.1.69",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "eb2261cc2a82cf9db7cec0dc66d1e32bc3bf7398",
+  "gitHead": "84373c9197af46cc11f69940e31163e11d55fe6f",
   "dependencies": {
-    "@arcblock/icons": "^2.1.68",
-    "@arcblock/react-hooks": "^2.1.68",
+    "@arcblock/icons": "^2.1.69",
+    "@arcblock/react-hooks": "^2.1.69",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Locale/selector.js

@@ -13,20 +13,19 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import Box from '@mui/material/Box';
 import CheckIcon from '@mui/icons-material/Check';
+import GlobeIcon from '@arcblock/icons/lib/Globe';
 
 import { getColor, getBackground } from '../Util';
 
 import { LocaleContext, languages } from './context';
 
-import globeDark from './images/globe-dark.png';
-import globeLight from './images/globe-light.png';
-
 function LocaleSelector(props) {
-  const { dark, showText, popperProps, popperType, icon: Icon, ...rest } = props;
+  const { showText, popperProps, popperType, icon: Icon, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
   const theme = useTheme();
+  const dark = theme?.palette?.mode === 'dark';
 
   const onSelect = (newLocale) => {
     changeLocale(newLocale);
@@ -64,8 +63,8 @@ function LocaleSelector(props) {
       return <Icon />;
     }
 
-    return <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />;
-  }, [Icon, dark]);
+    return <GlobeIcon style={{ width: 26, height: 24.76, color: theme.palette.text.secondary }} />;
+  }, [Icon, theme?.palette?.text?.secondary]);
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
@@ -105,7 +104,6 @@ function LocaleSelector(props) {
 }
 
 LocaleSelector.propTypes = {
-  dark: PropTypes.bool,
   size: PropTypes.number,
   showText: PropTypes.bool,
   popperProps: PropTypes.object,
@@ -115,7 +113,6 @@ LocaleSelector.propTypes = {
 };
 
 LocaleSelector.defaultProps = {
-  dark: false,
   showText: true,
   size: 24,
   popperProps: {},