@arcblock/ux 2.2.4 → 2.3.0

package/lib/Layout/dashboard/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DashboardWrapper;
 
 var _react = require("react");
 
@@ -83,10 +83,10 @@ function formatLinks(links, location) {
         to: link.url,
         children: link.title
       }),
-      active: !!(0, _reactRouterDom.matchPath)(location.pathname, {
+      active: !!(0, _reactRouterDom.matchPath)({
         path: link.url,
-        exact: false
-      })
+        end: false
+      }, location.pathname)
     });
   });
 }
@@ -209,8 +209,4 @@ DashboardWrapper.propTypes = _objectSpread(_objectSpread({}, Dashboard.propTypes
 });
 DashboardWrapper.defaultProps = _objectSpread(_objectSpread({}, Dashboard.defaultProps), {}, {
   legacy: true
-});
-
-var _default = (0, _reactRouterDom.withRouter)(DashboardWrapper);
-
-exports.default = _default;
+});

package/lib/Layout/dashboard/sidebar.js

@@ -66,8 +66,12 @@ function renderLinksItem(item) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_withExternalLink.NavLink, {
       to: url,
       external: external,
-      className: "layout-sidebar-link",
-      activeClassName: "layout-sidebar-link--active",
+      className: _ref => {
+        let {
+          isActive
+        } = _ref;
+        return isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link';
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
         children: icon
@@ -80,13 +84,13 @@ function renderLinksItem(item) {
   }, url);
 }
 
-function Sidebar(_ref) {
+function Sidebar(_ref2) {
   let {
     links,
     addons,
     dense
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     className: (0, _clsx.default)({

package/lib/Layout/dashboard-legacy/sidebar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Sidebar;
 
 var _react = require("react");
 
@@ -27,7 +27,7 @@ var _Logo = _interopRequireDefault(require("../../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["location", "images", "links", "prefix", "addons", "logo"];
+const _excluded = ["images", "links", "prefix", "addons", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,7 +43,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function Sidebar(_ref) {
   let {
-    location,
     images,
     links,
     prefix,
@@ -53,6 +52,7 @@ function Sidebar(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _styles.useTheme)();
+  const location = (0, _reactRouterDom.useLocation)();
 
   const isSelected = (url, name) => {
     const pattern = new RegExp("/".concat(name));
@@ -100,7 +100,6 @@ function Sidebar(_ref) {
 }
 
 Sidebar.propTypes = {
-  location: _propTypes.default.object.isRequired,
   images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
   prefix: _propTypes.default.string,
@@ -120,8 +119,4 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gtwxx4-1"
-})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
-
-var _default = (0, _reactRouterDom.withRouter)(Sidebar);
-
-exports.default = _default;
+})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);

package/lib/withTracker/index.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactGa = _interopRequireDefault(require("react-ga"));
 
 var Sentry = _interopRequireWildcard(require("@sentry/browser"));
 
+var _useDeepCompareEffect = _interopRequireDefault(require("react-use/lib/useDeepCompareEffect"));
+
+var _useMount = _interopRequireDefault(require("react-use/lib/useMount"));
+
 var _reactRouterDom = require("react-router-dom");
 
 var _error_boundary = _interopRequireDefault(require("./error_boundary"));
@@ -65,38 +65,23 @@ var _default = function _default(WrappedComponent) {
     }
   };
 
-  class TrackedComponent extends _react.Component {
-    componentDidMount() {
-      const page = this.props.location.pathname;
-      trackPage(page);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      const currentPage = this.props.location.pathname;
-      const nextPage = nextProps.location.pathname;
-
-      if (currentPage !== nextPage) {
-        trackPage(nextPage);
-      }
-    }
-
-    render() {
-      if (process.env.NODE_ENV === 'production') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_error_boundary.default, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props))
-        });
-      }
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props));
+  return function TrackedComponent(props) {
+    const location = (0, _reactRouterDom.useLocation)();
+    (0, _useMount.default)(() => {
+      trackPage(location.pathname);
+    });
+    (0, _useDeepCompareEffect.default)(() => {
+      trackPage(location.pathname);
+    }, [location.pathname]);
+
+    if (process.env.NODE_ENV === 'production') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_error_boundary.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, props))
+      });
     }
 
-  }
-
-  _defineProperty(TrackedComponent, "propTypes", {
-    location: _propTypes.default.object.isRequired
-  });
-
-  return (0, _reactRouterDom.withRouter)(TrackedComponent);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, props));
+  };
 };
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963",
+  "gitHead": "1d17ca422c95117bbf74c199b21692e478aa5003",
   "dependencies": {
-    "@arcblock/icons": "^2.2.4",
-    "@arcblock/react-hooks": "^2.2.4",
+    "@arcblock/icons": "^2.3.0",
+    "@arcblock/react-hooks": "^2.3.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
@@ -79,7 +79,7 @@
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",
-    "react-router-dom": "^5.3.3",
+    "react-router-dom": "^6.3.0",
     "react-shadow": "^19.0.3",
     "react-use": "^17.4.0",
     "rebound": "^0.1.0",

package/src/Layout/dashboard/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter, useLocation, matchPath } from 'react-router-dom';
+import { useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 import { useTheme } from '@mui/material/styles';
@@ -39,7 +39,7 @@ function formatLinks(links, location) {
           {link.title}
         </Link>
       ),
-      active: !!matchPath(location.pathname, { path: link.url, exact: false }),
+      active: !!matchPath({ path: link.url, end: false }, location.pathname),
     };
   });
 }
@@ -165,7 +165,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
 `;
 
 // 兼容旧版 dashboard
-function DashboardWrapper({ legacy, ...rest }) {
+export default function DashboardWrapper({ legacy, ...rest }) {
   if (legacy) {
     return <DashboardLegacy {...rest} />;
   }
@@ -181,5 +181,3 @@ DashboardWrapper.defaultProps = {
   ...Dashboard.defaultProps,
   legacy: true,
 };
-
-export default withRouter(DashboardWrapper);

package/src/Layout/dashboard/sidebar.js

@@ -31,8 +31,9 @@ function renderLinksItem(item) {
       <NavLink
         to={url}
         external={external}
-        className="layout-sidebar-link"
-        activeClassName="layout-sidebar-link--active">
+        className={({ isActive }) =>
+          isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link'
+        }>
         <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
         <Typography component="span" className="layout-sidebar-link-text">
           {title}

package/src/Layout/dashboard-legacy/sidebar.js

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { withRouter, Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -11,8 +11,9 @@ import { teal } from '@mui/material/colors';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 
-function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
+export default function Sidebar({ images, links, prefix, addons, logo, ...rest }) {
   const theme = useTheme();
+  const location = useLocation();
   const isSelected = (url, name) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
@@ -47,7 +48,6 @@ function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
 }
 
 Sidebar.propTypes = {
-  location: PropTypes.object.isRequired,
   images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
   prefix: PropTypes.string,
@@ -116,5 +116,3 @@ const MenuItem = styled(Button)`
     }
   }
 `;
-
-export default withRouter(Sidebar);

package/src/withTracker/index.js

@@ -1,11 +1,10 @@
-/* eslint-disable react/no-deprecated */
-/* eslint-disable react/static-property-placement */
 /* eslint-disable import/no-unresolved */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
-import { withRouter } from 'react-router-dom';
+
+import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
+import useMount from 'react-use/lib/useMount';
+import { useLocation } from 'react-router-dom';
 
 import ErrorBoundary from './error_boundary';
 
@@ -34,37 +33,25 @@ export default (WrappedComponent, options = {}) => {
     }
   };
 
-  class TrackedComponent extends Component {
-    static propTypes = {
-      location: PropTypes.object.isRequired,
-    };
-
-    componentDidMount() {
-      const page = this.props.location.pathname;
-      trackPage(page);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      const currentPage = this.props.location.pathname;
-      const nextPage = nextProps.location.pathname;
+  return function TrackedComponent(props) {
+    const location = useLocation();
 
-      if (currentPage !== nextPage) {
-        trackPage(nextPage);
-      }
-    }
+    useMount(() => {
+      trackPage(location.pathname);
+    });
 
-    render() {
-      if (process.env.NODE_ENV === 'production') {
-        return (
-          <ErrorBoundary>
-            <WrappedComponent {...this.props} />
-          </ErrorBoundary>
-        );
-      }
+    useDeepCompareEffect(() => {
+      trackPage(location.pathname);
+    }, [location.pathname]);
 
-      return <WrappedComponent {...this.props} />;
+    if (process.env.NODE_ENV === 'production') {
+      return (
+        <ErrorBoundary>
+          <WrappedComponent {...props} />
+        </ErrorBoundary>
+      );
     }
-  }
 
-  return withRouter(TrackedComponent);
+    return <WrappedComponent {...props} />;
+  };
 };