@blocklet/ui-react 2.4.16 → 2.4.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/Dashboard/index.js +30 -25
  2. package/lib/Footer/brand.js +1 -4
  3. package/lib/Footer/layout/row.js +1 -4
  4. package/lib/Footer/links.js +1 -3
  5. package/package.json +4 -4
  6. package/src/Dashboard/index.js +30 -24
  7. package/src/Footer/brand.js +4 -5
  8. package/src/Footer/layout/row.js +3 -4
  9. package/src/Footer/links.js +6 -8
package/lib/Dashboard/index.js CHANGED
@@ -7,12 +7,12 @@ exports.default = void 0;
7
7
 
8
8
  var _react = require("react");
9
9
 
10
- var _reactRouterDom = require("react-router-dom");
11
-
12
10
  var _context = require("@arcblock/ux/lib/Locale/context");
13
11
 
14
12
  var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
15
13
 
14
+ var _ClickToCopy = _interopRequireDefault(require("@arcblock/ux/lib/ClickToCopy"));
15
+
16
16
  var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
17
17
 
18
18
  var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
@@ -43,7 +43,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
43
43
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
44
44
  */
45
45
  function Dashboard(_ref) {
46
- var _formattedBlocklet$na, _localizedNav;
46
+ var _formattedBlocklet$na;
47
47
 
48
48
  let {
49
49
  meta
@@ -73,22 +73,23 @@ function Dashboard(_ref) {
73
73
  appName
74
74
  } = formattedBlocklet;
75
75
  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || [];
76
- localizedNav = localizedNav.map(item => _objectSpread(_objectSpread({}, item), {}, {
76
+ localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
77
+ title: item.title,
77
78
  url: item.link,
78
- label: item.title,
79
79
  icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
80
80
  className: "iconify",
81
81
  "data-icon": item.icon
82
82
  }) : null,
83
83
  // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
84
- external: true
85
- })); // link#active 状态检测
86
- // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
84
+ external: true,
85
+ children: item.items
86
+ }), 'items'); // 展平后使用 matchPaths 检测 link#active 状态
87
87
 
88
- const matchedIndex = (0, _utils.matchPaths)(localizedNav.map(item => item.link));
88
+ const flattened = (0, _utils.flatRecursive)(localizedNav).filter(item => !!item.url);
89
+ const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.url));
89
90
 
90
- if ((_localizedNav = localizedNav) !== null && _localizedNav !== void 0 && _localizedNav.length) {
91
- localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
91
+ if (flattened !== null && flattened !== void 0 && flattened.length) {
92
+ flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
92
93
  }
93
94
 
94
95
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
@@ -99,21 +100,25 @@ function Dashboard(_ref) {
99
100
  }, rest), {}, {
100
101
  headerProps: _objectSpread({
101
102
  brand: appName,
102
- description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
103
- compact: true,
104
- responsive: false,
105
- copyable: false,
106
- prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
107
- did: did,
108
- size: 16,
109
- style: {
110
- marginRight: 4
111
- }
112
- }),
113
- children: did
103
+ description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickToCopy.default, {
104
+ unstyled: true,
105
+ content: did,
106
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
107
+ compact: true,
108
+ responsive: false,
109
+ copyable: false,
110
+ prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
111
+ did: did,
112
+ size: 16,
113
+ style: {
114
+ marginRight: 4
115
+ }
116
+ }),
117
+ children: did
118
+ })
114
119
  }),
115
- logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
116
- to: _blocklets.publicPath,
120
+ logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
121
+ href: _blocklets.publicPath,
117
122
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
118
123
  src: appLogo,
119
124
  alt: "logo"
package/lib/Footer/brand.js CHANGED
@@ -39,8 +39,6 @@ function Brand(_ref) {
39
39
  } = _ref,
40
40
  rest = _objectWithoutProperties(_ref, _excluded);
41
41
 
42
- const theme = (0, _Theme.useTheme)();
43
-
44
42
  if (!name && !logo && !description) {
45
43
  return null;
46
44
  }
@@ -50,7 +48,6 @@ function Brand(_ref) {
50
48
  alt: name
51
49
  });
52
50
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
53
- $theme: theme,
54
51
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
55
52
  children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
56
53
  className: "footer-brand-logo",
@@ -76,4 +73,4 @@ Brand.defaultProps = {
76
73
  logo: '',
77
74
  description: ''
78
75
  };
79
- const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: 14px;\n a {\n text-decoration: none;\n color: inherit;\n }\n > div:first-child {\n display: flex;\n align-items: center;\n }\n .footer-brand-logo {\n display: flex;\n align-items: center;\n margin-right: 16px;\n line-height: 1;\n img,\n svg {\n width: auto;\n height: 44px;\n max-height: 44px;\n }\n }\n .footer-brand-name {\n font-size: 16px;\n font-weight: bold;\n }\n .footer-brand-desc {\n margin-top: 16px;\n }\n\n ", " {\n width: auto;\n }\n\n ", " {\n .footer-brand-logo {\n img,\n svg {\n height: 32px;\n max-height: 32px;\n }\n }\n }\n"])), props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));
76
+ const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: 14px;\n a {\n text-decoration: none;\n color: inherit;\n }\n > div:first-child {\n display: flex;\n align-items: center;\n }\n .footer-brand-logo {\n display: flex;\n align-items: center;\n margin-right: 16px;\n line-height: 1;\n img,\n svg {\n width: auto;\n height: 44px;\n max-height: 44px;\n }\n }\n .footer-brand-name {\n font-size: 16px;\n font-weight: bold;\n }\n .footer-brand-desc {\n margin-top: 16px;\n }\n\n ", " {\n width: auto;\n }\n\n ", " {\n .footer-brand-logo {\n img,\n svg {\n height: 32px;\n max-height: 32px;\n }\n }\n }\n"])), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.down('md'));
package/lib/Footer/layout/row.js CHANGED
@@ -40,8 +40,6 @@ function Row(_ref) {
40
40
  } = _ref,
41
41
  rest = _objectWithoutProperties(_ref, _excluded);
42
42
 
43
- const theme = (0, _Theme.useTheme)();
44
-
45
43
  if (!children) {
46
44
  return null;
47
45
  }
@@ -50,7 +48,6 @@ function Row(_ref) {
50
48
  className: (0, _clsx.default)(rest.className, {
51
49
  'footer-row-auto-center': autoCenter
52
50
  }),
53
- $theme: theme,
54
51
  children: children
55
52
  }));
56
53
  }
@@ -63,4 +60,4 @@ Row.defaultProps = {
63
60
  children: null,
64
61
  autoCenter: false
65
62
  };
66
- const RowRoot = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n & + & {\n margin-top: 24px;\n }\n &.footer-row-auto-center > *:only-child {\n margin: 0 auto;\n }\n\n ", " {\n align-items: stretch;\n flex-direction: column;\n gap: 16px;\n > * {\n flex: 1 0 100%;\n }\n &.footer-row-auto-center > * {\n margin: 0 auto;\n }\n }\n"])), props => props.$theme.breakpoints.down('md'));
63
+ const RowRoot = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n & + & {\n margin-top: 24px;\n }\n &.footer-row-auto-center > *:only-child {\n margin: 0 auto;\n }\n\n ", " {\n align-items: stretch;\n flex-direction: column;\n gap: 16px;\n > * {\n flex: 1 0 100%;\n }\n &.footer-row-auto-center > * {\n margin: 0 auto;\n }\n }\n"])), props => props.theme.breakpoints.down('md'));
package/lib/Footer/links.js CHANGED
@@ -48,7 +48,6 @@ function Links(_ref) {
48
48
  } = _ref,
49
49
  rest = _objectWithoutProperties(_ref, _excluded);
50
50
 
51
- const theme = (0, _Theme.useTheme)();
52
51
  const [activeIndex, setActiveIndex] = (0, _react.useState)(-1);
53
52
 
54
53
  if (!(links !== null && links !== void 0 && links.length)) {
@@ -102,7 +101,6 @@ function Links(_ref) {
102
101
  'footer-links--grouped': isGroupMode,
103
102
  'footer-links--flow': flowLayout
104
103
  }),
105
- $theme: theme,
106
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
107
105
  className: "footer-links-inner",
108
106
  children: [flowLayout && links.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -155,4 +153,4 @@ Links.defaultProps = {
155
153
  links: [],
156
154
  flowLayout: false
157
155
  };
158
- const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-sub .footer-links-item {\n color: ", ";\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n line-height: 1;\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 4px 8px;\n font-size: 14px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding-left: 0;\n padding-right: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props.$theme.palette.grey[600], props => props.$theme.palette.grey[900], props => props.theme.palette.grey[400], props => props.$theme.breakpoints.down('md'), props => props.$theme.palette.grey[200]);
156
+ const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-sub .footer-links-item {\n color: ", ";\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n line-height: 1;\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 4px 8px;\n font-size: 14px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding-left: 0;\n padding-right: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props.theme.palette.grey[600], props => props.theme.palette.grey[900], props => props.theme.palette.grey[400], props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[200]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/ui-react",
3
- "version": "2.4.16",
3
+ "version": "2.4.19",
4
4
  "description": "Some useful front-end web components that can be used in Blocklets.",
5
5
  "keywords": [
6
6
  "react",
@@ -30,8 +30,8 @@
30
30
  "url": "https://github.com/ArcBlock/ux/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@arcblock/did-connect": "^2.4.16",
34
- "@arcblock/ux": "^2.4.16",
33
+ "@arcblock/did-connect": "^2.4.19",
34
+ "@arcblock/ux": "^2.4.19",
35
35
  "@emotion/react": "^11.10.0",
36
36
  "@emotion/styled": "^11.10.0",
37
37
  "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
53
53
  "eslint-plugin-react-hooks": "^4.6.0",
54
54
  "jest": "^24.9.0"
55
55
  },
56
- "gitHead": "adc624cfa03a01f24cb7d78bc35b6ed54664935e"
56
+ "gitHead": "99168fa063ea477b871d603e1067964d26115794"
57
57
  }
package/src/Dashboard/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { useMemo } from 'react';
2
- import { Link } from 'react-router-dom';
3
2
  import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
4
3
  import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
4
+ import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
5
5
  import DidAddress from '@arcblock/did-connect/lib/Address';
6
6
  import DidAvatar from '@arcblock/did-connect/lib/Avatar';
7
7
  import { blockletMetaProps } from '../types';
8
- import { matchPaths } from '../utils';
8
+ import { mapRecursive, flatRecursive, matchPaths } from '../utils';
9
9
  import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
10
10
 
11
11
  /**
@@ -29,19 +29,23 @@ function Dashboard({ meta, ...rest }) {
29
29
 
30
30
  const { did, appLogo, appName } = formattedBlocklet;
31
31
  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
32
- localizedNav = localizedNav.map((item) => ({
33
- ...item,
34
- url: item.link,
35
- label: item.title,
36
- icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
37
- // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
38
- external: true,
39
- }));
40
- // link#active 状态检测
41
- // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
42
- const matchedIndex = matchPaths(localizedNav.map((item) => item.link));
43
- if (localizedNav?.length) {
44
- localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
32
+ localizedNav = mapRecursive(
33
+ localizedNav,
34
+ (item) => ({
35
+ title: item.title,
36
+ url: item.link,
37
+ icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
38
+ // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
39
+ external: true,
40
+ children: item.items,
41
+ }),
42
+ 'items'
43
+ );
44
+ // 展平后使用 matchPaths 检测 link#active 状态
45
+ const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
46
+ const matchedIndex = matchPaths(flattened.map((item) => item.url));
47
+ if (flattened?.length) {
48
+ flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
45
49
  }
46
50
 
47
51
  return (
@@ -54,18 +58,20 @@ function Dashboard({ meta, ...rest }) {
54
58
  headerProps={{
55
59
  brand: appName,
56
60
  description: (
57
- <DidAddress
58
- compact
59
- responsive={false}
60
- copyable={false}
61
- prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
62
- {did}
63
- </DidAddress>
61
+ <ClickToCopy unstyled content={did}>
62
+ <DidAddress
63
+ compact
64
+ responsive={false}
65
+ copyable={false}
66
+ prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
67
+ {did}
68
+ </DidAddress>
69
+ </ClickToCopy>
64
70
  ),
65
71
  logo: (
66
- <Link to={publicPath}>
72
+ <a href={publicPath}>
67
73
  <img src={appLogo} alt="logo" />
68
- </Link>
74
+ </a>
69
75
  ),
70
76
  ...rest.headerProps,
71
77
  }}
package/src/Footer/brand.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { isValidElement } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { useTheme, styled } from '@arcblock/ux/lib/Theme';
3
+ import { styled } from '@arcblock/ux/lib/Theme';
4
4
 
5
5
  export default function Brand({ name, logo, description, ...rest }) {
6
- const theme = useTheme();
7
6
  if (!name && !logo && !description) {
8
7
  return null;
9
8
  }
@@ -11,7 +10,7 @@ export default function Brand({ name, logo, description, ...rest }) {
11
10
  const logoElement = isValidElement(logo) ? logo : <img src={logo} alt={name} />;
12
11
 
13
12
  return (
14
- <Root {...rest} $theme={theme}>
13
+ <Root {...rest}>
15
14
  <div>
16
15
  {logo && <div className="footer-brand-logo">{logoElement}</div>}
17
16
  {name && <div className="footer-brand-name">{name}</div>}
@@ -65,11 +64,11 @@ const Root = styled('div')`
65
64
  margin-top: 16px;
66
65
  }
67
66
 
68
- ${(props) => props.$theme.breakpoints.down('sm')} {
67
+ ${(props) => props.theme.breakpoints.down('sm')} {
69
68
  width: auto;
70
69
  }
71
70
 
72
- ${(props) => props.$theme.breakpoints.down('md')} {
71
+ ${(props) => props.theme.breakpoints.down('md')} {
73
72
  .footer-brand-logo {
74
73
  img,
75
74
  svg {
package/src/Footer/layout/row.js CHANGED
@@ -1,15 +1,14 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import Box from '@mui/material/Box';
3
- import { useTheme, styled } from '@arcblock/ux/lib/Theme';
3
+ import { styled } from '@arcblock/ux/lib/Theme';
4
4
  import clsx from 'clsx';
5
5
 
6
6
  export default function Row({ children, autoCenter, ...rest }) {
7
- const theme = useTheme();
8
7
  if (!children) {
9
8
  return null;
10
9
  }
11
10
  return (
12
- <RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })} $theme={theme}>
11
+ <RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}>
13
12
  {children}
14
13
  </RowRoot>
15
14
  );
@@ -35,7 +34,7 @@ const RowRoot = styled(Box)`
35
34
  margin: 0 auto;
36
35
  }
37
36
 
38
- ${(props) => props.$theme.breakpoints.down('md')} {
37
+ ${(props) => props.theme.breakpoints.down('md')} {
39
38
  align-items: stretch;
40
39
  flex-direction: column;
41
40
  gap: 16px;
package/src/Footer/links.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable react/no-array-index-key */
2
2
  import { useState } from 'react';
3
3
  import PropTypes from 'prop-types';
4
- import { useTheme, styled } from '@arcblock/ux/lib/Theme';
4
+ import { styled } from '@arcblock/ux/lib/Theme';
5
5
  import clsx from 'clsx';
6
6
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
7
7
  import Icon from '../Icon';
@@ -11,7 +11,6 @@ import Icon from '../Icon';
11
11
  * TODO: dark/light theme
12
12
  */
13
13
  export default function Links({ links, flowLayout, ...rest }) {
14
- const theme = useTheme();
15
14
  const [activeIndex, setActiveIndex] = useState(-1);
16
15
  if (!links?.length) {
17
16
  return null;
@@ -42,8 +41,7 @@ export default function Links({ links, flowLayout, ...rest }) {
42
41
  className={clsx(rest.className, {
43
42
  'footer-links--grouped': isGroupMode,
44
43
  'footer-links--flow': flowLayout,
45
- })}
46
- $theme={theme}>
44
+ })}>
47
45
  <div className="footer-links-inner">
48
46
  {flowLayout &&
49
47
  links.map((item, i) => (
@@ -111,7 +109,7 @@ Links.defaultProps = {
111
109
 
112
110
  const Root = styled('div')`
113
111
  overflow: hidden;
114
- color: ${(props) => props.$theme.palette.grey[600]};
112
+ color: ${(props) => props.theme.palette.grey[600]};
115
113
  .footer-links-inner {
116
114
  display: flex;
117
115
  justify-content: space-between;
@@ -123,7 +121,7 @@ const Root = styled('div')`
123
121
  flex-direction: column;
124
122
  }
125
123
  .footer-links-sub .footer-links-item {
126
- color: ${(props) => props.$theme.palette.grey[900]};
124
+ color: ${(props) => props.theme.palette.grey[900]};
127
125
  }
128
126
  .footer-links-group-expand-icon {
129
127
  display: none;
@@ -185,7 +183,7 @@ const Root = styled('div')`
185
183
  }
186
184
  }
187
185
 
188
- ${(props) => props.$theme.breakpoints.down('md')} {
186
+ ${(props) => props.theme.breakpoints.down('md')} {
189
187
  .footer-links-inner {
190
188
  flex-direction: column;
191
189
  margin: 0;
@@ -201,7 +199,7 @@ const Root = styled('div')`
201
199
  }
202
200
  }
203
201
  .footer-links-group + .footer-links-group {
204
- border-top: 1px solid ${(props) => props.$theme.palette.grey[200]};
202
+ border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
205
203
  }
206
204
  .footer-links-group--active {
207
205
  .footer-links-sub {