@arcblock/ux 2.4.9 → 2.4.12

package/lib/Layout/dashboard/{with-external-link.js → external-link.js}

@@ -3,14 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavLink = exports.Link = void 0;
-exports.withExternalLink = withExternalLink;
+exports.Link = Link;
+exports.NavLink = NavLink;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactRouterDom = require("react-router-dom");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["to", "external"];
+const _excluded = ["children", "routerLinkComponent", "to", "external"],
+      _excluded2 = ["className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -22,35 +27,64 @@ 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; }
 
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
-function withExternalLink(RouterLinkComponent) {
-  // eslint-disable-next-line react/prop-types
-  return function WithExternalLink(_ref) {
-    let {
-      to,
-      external
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    const handleClick = e => {
-      e.preventDefault();
-      window.location.href = to;
-    };
-
-    if (external) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
-        onClick: handleClick,
-        to: to
-      }, rest));
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
-      to: to
-    }, rest));
-  };
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+function ExternalLink(_ref) {
+  let {
+    children,
+    routerLinkComponent: RouterLinkComponent,
+    to,
+    external
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (external) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+      href: to
+    }, rest), {}, {
+      children: children
+    }));
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread(_objectSpread({
+    to: to
+  }, rest), {}, {
+    children: children
+  }));
 }
 
-const Link = withExternalLink(_reactRouterDom.Link);
-exports.Link = Link;
-const NavLink = withExternalLink(_reactRouterDom.NavLink);
-exports.NavLink = NavLink;
+ExternalLink.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  routerLinkComponent: _propTypes.default.elementType.isRequired,
+  external: _propTypes.default.bool,
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired
+};
+ExternalLink.defaultProps = {
+  external: false
+};
+
+function Link(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
+    routerLinkComponent: _reactRouterDom.Link
+  }, props));
+}
+
+function NavLink(_ref2) {
+  let {
+    className
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  // NavLink#className 支持 function
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
+    routerLinkComponent: _reactRouterDom.NavLink,
+    className: classes
+  }, rest));
+}
+
+NavLink.propTypes = {
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
+};
+NavLink.defaultProps = {
+  className: ''
+};

package/lib/Layout/dashboard/index.js

@@ -31,10 +31,10 @@ var _Footer = _interopRequireDefault(require("../../Footer"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
-var _withExternalLink = require("./with-external-link");
-
 var _Theme = require("../../Theme");
 
+var _externalLink = require("./external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -80,12 +80,13 @@ function formatLinks(links, location) {
     }
 
     return _objectSpread(_objectSpread({}, link), {}, {
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_withExternalLink.Link, {
-        external: link.external,
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_externalLink.Link, {
         to: link.url,
+        external: link.external,
         children: link.title
       }),
-      active: !!(0, _reactRouterDom.matchPath)({
+      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+      active: link.external ? link.active : !!(0, _reactRouterDom.matchPath)({
         path: link.url,
         end: false
       }, location.pathname)

package/lib/Layout/dashboard/sidebar.js

@@ -13,10 +13,10 @@ var _colors = require("@mui/material/colors");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _withExternalLink = require("./with-external-link");
-
 var _Theme = require("../../Theme");
 
+var _externalLink = require("./external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -64,17 +64,21 @@ function renderLinksItem(item) {
     icon,
     title,
     showBadge,
-    external
-  } = item;
+    external,
+    active
+  } = item; // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_withExternalLink.NavLink, {
-      to: url,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_externalLink.NavLink, {
       external: external,
+      to: url,
       className: _ref => {
         let {
           isActive
         } = _ref;
-        return isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link';
+        return (0, _clsx.default)('layout-sidebar-link', {
+          'layout-sidebar-link--active': external ? active : isActive
+        });
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.9",
+  "version": "2.4.12",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "684fff819c74c72f21178b3118dafabe61de76ac",
+  "gitHead": "67b9da0555a2ee6ddd151b2e0dd1e7bdae6108ef",
   "dependencies": {
-    "@arcblock/icons": "^2.4.9",
-    "@arcblock/react-hooks": "^2.4.9",
+    "@arcblock/icons": "^2.4.12",
+    "@arcblock/react-hooks": "^2.4.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/Layout/dashboard/external-link.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+function ExternalLink({ children, routerLinkComponent: RouterLinkComponent, to, external, ...rest }) {
+  if (external) {
+    return (
+      <a href={to} {...rest}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <RouterLinkComponent to={to} {...rest}>
+      {children}
+    </RouterLinkComponent>
+  );
+}
+
+ExternalLink.propTypes = {
+  children: PropTypes.any.isRequired,
+  routerLinkComponent: PropTypes.elementType.isRequired,
+  external: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+};
+
+ExternalLink.defaultProps = {
+  external: false,
+};
+
+export function Link(props) {
+  return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
+}
+
+export function NavLink({ className, ...rest }) {
+  // NavLink#className 支持 function
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
+  return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
+}
+
+NavLink.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+};
+
+NavLink.defaultProps = {
+  className: '',
+};

package/src/Layout/dashboard/index.js

@@ -11,8 +11,8 @@ import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
 import Sidebar from './sidebar';
-import { Link } from './with-external-link';
 import { styled, useTheme } from '../../Theme';
+import { Link } from './external-link';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
@@ -34,11 +34,12 @@ function formatLinks(links, location) {
     return {
       ...link,
       label: (
-        <Link external={link.external} to={link.url}>
+        <Link to={link.url} external={link.external}>
           {link.title}
         </Link>
       ),
-      active: !!matchPath({ path: link.url, end: false }, location.pathname),
+      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+      active: link.external ? link.active : !!matchPath({ path: link.url, end: false }, location.pathname),
     };
   });
 }

package/src/Layout/dashboard/sidebar.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
-
-import { NavLink } from './with-external-link';
 import { styled } from '../../Theme';
+import { NavLink } from './external-link';
 
 // 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
 function renderLinks(links) {
@@ -25,14 +24,15 @@ function renderLinksItem(item) {
   if (Array.isArray(item)) {
     return item.map(renderLinksItem);
   }
-  const { url, icon, title, showBadge, external } = item;
+  const { url, icon, title, showBadge, external, active } = item;
+  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
   return (
     <li key={url}>
       <NavLink
-        to={url}
         external={external}
+        to={url}
         className={({ isActive }) =>
-          isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link'
+          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
         }>
         <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
         <Typography component="span" className="layout-sidebar-link-text">

package/src/Layout/dashboard/with-external-link.js

@@ -1,20 +0,0 @@
-import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
-
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
-export function withExternalLink(RouterLinkComponent) {
-  // eslint-disable-next-line react/prop-types
-  return function WithExternalLink({ to, external, ...rest }) {
-    const handleClick = (e) => {
-      e.preventDefault();
-      window.location.href = to;
-    };
-    if (external) {
-      return <RouterLinkComponent onClick={handleClick} to={to} {...rest} />;
-    }
-    return <RouterLinkComponent to={to} {...rest} />;
-  };
-}
-
-export const Link = withExternalLink(RouterLink);
-
-export const NavLink = withExternalLink(RouterNavLink);