@arcblock/ux 2.9.42 → 2.9.44

Sign up to get free protection for your applications and to get access to all the features.
@@ -63,12 +63,11 @@ export default function LocaleSelector(props) {
63
63
  return /*#__PURE__*/_jsx(IconifyIcon, {
64
64
  icon: LanguageIcon,
65
65
  fontSize: size,
66
- color: theme.palette.text.secondary,
67
66
  style: {
68
67
  transform: 'scale(1.10)'
69
68
  }
70
69
  });
71
- }, [Icon, theme?.palette?.text?.secondary, size]);
70
+ }, [Icon, size]);
72
71
  return /*#__PURE__*/_jsxs(Div, {
73
72
  component: "div",
74
73
  dark: dark,
@@ -4,6 +4,7 @@ import clsx from 'clsx';
4
4
  import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
5
5
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
6
6
  import MenuIcon from '@mui/icons-material/Menu';
7
+ import { useMemoizedFn } from 'ahooks';
7
8
  import { HorizontalStyle, InlineStyle } from './style';
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,7 +91,7 @@ function NavMenu({
90
91
  });
91
92
  });
92
93
  };
93
- const checkItemsFit = () => {
94
+ const checkItemsFit = useMemoizedFn(() => {
94
95
  let totalWidthUsed = 0;
95
96
  let newHiddenCount = 0;
96
97
  let leftAllHidden = false;
@@ -113,7 +114,7 @@ function NavMenu({
113
114
  if (newHiddenCount !== hiddenItemCount) {
114
115
  setHiddenItemCount(newHiddenCount);
115
116
  }
116
- };
117
+ }, [hiddenItemCount]);
117
118
  useEffect(() => {
118
119
  if (mode === 'horizontal') {
119
120
  checkItemsFit();
@@ -124,7 +125,7 @@ function NavMenu({
124
125
  }
125
126
  return undefined;
126
127
  // eslint-disable-next-line react-hooks/exhaustive-deps
127
- }, [mode, hiddenItemCount]);
128
+ }, [mode]);
128
129
  useEffect(() => {
129
130
  // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
130
131
  // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
@@ -29,7 +29,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
29
29
  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; }
30
30
  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; }
31
31
  function LocaleSelector(props) {
32
- var _theme$palette, _theme$palette2, _theme$palette2$text;
32
+ var _theme$palette;
33
33
  const {
34
34
  showText,
35
35
  popperProps,
@@ -81,12 +81,11 @@ function LocaleSelector(props) {
81
81
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
82
82
  icon: _language.default,
83
83
  fontSize: size,
84
- color: theme.palette.text.secondary,
85
84
  style: {
86
85
  transform: 'scale(1.10)'
87
86
  }
88
87
  });
89
- }, [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]);
88
+ }, [Icon, size]);
90
89
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
91
90
  component: "div",
92
91
  dark: dark,
@@ -10,6 +10,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
10
10
  var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
11
11
  var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
12
12
  var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
13
+ var _ahooks = require("ahooks");
13
14
  var _style = require("./style");
14
15
  var _jsxRuntime = require("react/jsx-runtime");
15
16
  const _excluded = ["items", "mode", "children", "activeId", "textColor", "activeTextColor", "bgColor", "onSelected"],
@@ -104,7 +105,7 @@ function NavMenu(_ref) {
104
105
  });
105
106
  });
106
107
  };
107
- const checkItemsFit = () => {
108
+ const checkItemsFit = (0, _ahooks.useMemoizedFn)(() => {
108
109
  var _navMenuRef$current;
109
110
  let totalWidthUsed = 0;
110
111
  let newHiddenCount = 0;
@@ -128,7 +129,7 @@ function NavMenu(_ref) {
128
129
  if (newHiddenCount !== hiddenItemCount) {
129
130
  setHiddenItemCount(newHiddenCount);
130
131
  }
131
- };
132
+ }, [hiddenItemCount]);
132
133
  (0, _react.useEffect)(() => {
133
134
  if (mode === 'horizontal') {
134
135
  checkItemsFit();
@@ -139,7 +140,7 @@ function NavMenu(_ref) {
139
140
  }
140
141
  return undefined;
141
142
  // eslint-disable-next-line react-hooks/exhaustive-deps
142
- }, [mode, hiddenItemCount]);
143
+ }, [mode]);
143
144
  (0, _react.useEffect)(() => {
144
145
  // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
145
146
  // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.42",
3
+ "version": "2.9.44",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -354,12 +354,12 @@
354
354
  "@mui/material": "^5.15.0",
355
355
  "react": ">=18.2.0"
356
356
  },
357
- "gitHead": "bd025306aba57f60f5b019ea863698e7ad07d472",
357
+ "gitHead": "07ad8adac9d7bfb9faec224a56f1524bfd5cc5fc",
358
358
  "dependencies": {
359
359
  "@arcblock/did-motif": "^1.1.13",
360
- "@arcblock/icons": "^2.9.42",
361
- "@arcblock/nft-display": "^2.9.42",
362
- "@arcblock/react-hooks": "^2.9.42",
360
+ "@arcblock/icons": "^2.9.44",
361
+ "@arcblock/nft-display": "^2.9.44",
362
+ "@arcblock/react-hooks": "^2.9.44",
363
363
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
364
364
  "@emotion/react": "^11.10.4",
365
365
  "@emotion/styled": "^11.10.4",
@@ -58,15 +58,8 @@ export default function LocaleSelector(props) {
58
58
  return <Icon />;
59
59
  }
60
60
 
61
- return (
62
- <IconifyIcon
63
- icon={LanguageIcon}
64
- fontSize={size}
65
- color={theme.palette.text.secondary}
66
- style={{ transform: 'scale(1.10)' }}
67
- />
68
- );
69
- }, [Icon, theme?.palette?.text?.secondary, size]);
61
+ return <IconifyIcon icon={LanguageIcon} fontSize={size} style={{ transform: 'scale(1.10)' }} />;
62
+ }, [Icon, size]);
70
63
 
71
64
  return (
72
65
  <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
@@ -15,6 +15,7 @@ import clsx from 'clsx';
15
15
  import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
16
16
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
17
17
  import MenuIcon from '@mui/icons-material/Menu';
18
+ import { useMemoizedFn } from 'ahooks';
18
19
  import { HorizontalStyle, InlineStyle } from './style';
19
20
 
20
21
  const NavMenuContext = createContext();
@@ -56,6 +57,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
56
57
  const close = useCallback((id) => {
57
58
  setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
58
59
  }, []);
60
+
59
61
  const contextValue = useMemo(() => {
60
62
  return {
61
63
  ...state,
@@ -82,7 +84,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
82
84
  });
83
85
  });
84
86
  };
85
- const checkItemsFit = () => {
87
+ const checkItemsFit = useMemoizedFn(() => {
86
88
  let totalWidthUsed = 0;
87
89
  let newHiddenCount = 0;
88
90
  let leftAllHidden = false;
@@ -110,7 +112,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
110
112
  if (newHiddenCount !== hiddenItemCount) {
111
113
  setHiddenItemCount(newHiddenCount);
112
114
  }
113
- };
115
+ }, [hiddenItemCount]);
114
116
 
115
117
  useEffect(() => {
116
118
  if (mode === 'horizontal') {
@@ -123,7 +125,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
123
125
  }
124
126
  return undefined;
125
127
  // eslint-disable-next-line react-hooks/exhaustive-deps
126
- }, [mode, hiddenItemCount]);
128
+ }, [mode]);
127
129
 
128
130
  useEffect(() => {
129
131
  // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)