feat(Breadcrumb):Add onClick eventHandler (#4457)

* feat(Breadcrumb):Add onClick eventHandler close #4359
alibaba-fusion · Oct 31, 2023 · fdcf494 · fdcf494
1 parent dae8daf
commit fdcf494
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 36 deletions.
diff --git a/docs/breadcrumb/index.en-us.md b/docs/breadcrumb/index.en-us.md
@@ -23,13 +23,13 @@ It is used to inform the user of the current position and the position of the cu
 | maxNode   | The maximum number of breadcrumbs is displayed and the excess is hidden, can set auto compute  maximum number         | Number    | 100, 'auto'                        |
 | separator | Separator, can be text or Icon            | ReactNode | &lt;Icon type="arrow-right" /> |
 | component | Set Element type                     | String/Function | 'nav'                          |
-
+  
 ### Breadcrumb.Item
 
 | Param           | Description                                                                                                                  | Type       | Default Value          |
 | ---- | -------------------------------------------- | ------ | --- |
 | link | The breadcrumb item link, if this property is set, the node is `<a />`, otherwise it is `<span />` | String | -   |
-
+| onClick   | Click event | Function (event: MouseEvent) => void 
 ## ARIA and KeyBoard
 
 | KeyBoard          | Descripiton                              |

diff --git a/docs/breadcrumb/index.md b/docs/breadcrumb/index.md
@@ -28,13 +28,13 @@
 | popupProps      | 添加到弹层上的属性（在showHiddenItems为true时才有意义）       | Object           | -     | 1.23 |
 | separator       | 分隔符，可以是文本或 Icon                             | ReactNode/String | -     |      |
 | component       | 设置标签类型                                      | String/Function  | 'nav' |      |
-
+   
 ### Breadcrumb.Item
 
 | 参数   | 说明                                           | 类型     | 默认值 |
 | ---- | -------------------------------------------- | ------ | --- |
 | link | 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />` | String | -   |
-
+| onClick | 单击事件 | Function (event: MouseEvent) => void
 ## 无障碍键盘操作指南
 
 | 按键  | 说明     |

diff --git a/src/breadcrumb/index.jsx b/src/breadcrumb/index.jsx
@@ -71,6 +71,7 @@ class Breadcrumb extends Component {
          */
         component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
         className: PropTypes.any,
+        onClick: PropTypes.func,
     };
 
     static defaultProps = {
@@ -149,10 +150,12 @@ class Breadcrumb extends Component {
         // 拿到被隐藏的项
         const hiddenItems = [];
         Children.forEach(children, (item, i) => {
-            const { link, children: itemChildren } = item.props;
+            const { link, children: itemChildren, onClick } = item.props;
             if (i > 0 && i <= breakpointer) {
                 hiddenItems.push(
-                    <Menu.Item key={i}>{link ? <a href={link}>{itemChildren}</a> : itemChildren}</Menu.Item>
+                    <Menu.Item key={i} onClick={onClick}>
+                        {link ? <a href={link}>{itemChildren}</a> : itemChildren}
+                    </Menu.Item>
                 );
             }
         });

diff --git a/src/breadcrumb/item.jsx b/src/breadcrumb/item.jsx
@@ -18,6 +18,7 @@ class Item extends Component {
         separator: PropTypes.node,
         className: PropTypes.any,
         children: PropTypes.node,
+        onClick: PropTypes.func,
     };
 
     static defaultProps = {
@@ -28,28 +29,17 @@ class Item extends Component {
 
     // stateless separator component
     static Separator({ prefix, children }) {
-        return (
-            <span className={`${prefix}breadcrumb-separator`}>{children}</span>
-        );
+        return <span className={`${prefix}breadcrumb-separator`}>{children}</span>;
     }
 
     render() {
-        const {
-            prefix,
-            rtl,
-            className,
-            children,
-            link,
-            activated,
-            separator,
-            ...others
-        } = this.props;
+        const { prefix, rtl, className, children, link, activated, separator, onClick, ...others } = this.props;
         const clazz = classNames(`${prefix}breadcrumb-text`, className, {
             activated,
         });
 
         return (
-            <li dir={rtl ? 'rtl' : null} className={`${prefix}breadcrumb-item`}>
+            <li dir={rtl ? 'rtl' : null} className={`${prefix}breadcrumb-item`} onClick={onClick}>
                 {link ? (
                     <a href={link} className={clazz} {...others}>
                         {children}
@@ -59,9 +49,7 @@ class Item extends Component {
                         {children}
                     </span>
                 )}
-                {activated
-                    ? null
-                    : Item.Separator({ prefix, children: separator })}
+                {activated ? null : Item.Separator({ prefix, children: separator })}
             </li>
         );
     }

diff --git a/test/breadcrumb/index-spec.js b/test/breadcrumb/index-spec.js
@@ -201,4 +201,26 @@ describe('Breadcrumb', () => {
         );
         wrapper.unmount();
     });
+    it('should support onClick', () => {
+        let isClicked = {};
+        const wrapper = mount(
+            <Breadcrumb maxNode={2} showHiddenItems popupProps={{ triggerType: 'click', visible: true }}>
+                <Breadcrumb.Item link="javascript:void(0);">Home 1</Breadcrumb.Item>
+                <Breadcrumb.Item
+                    link="javascript:void(0);"
+                    onClick={v => {
+                        isClicked = true;
+                    }}
+                >
+                    Whatever 2
+                </Breadcrumb.Item>
+                <Breadcrumb.Item link="javascript:void(0);">All Categories 3</Breadcrumb.Item>
+            </Breadcrumb>
+        );
+        wrapper
+            .find('.next-menu-item')
+            .at(0)
+            .simulate('click');
+        assert(isClicked === true);
+    });
 });
diff --git a/types/breadcrumb/index.d.ts b/types/breadcrumb/index.d.ts
@@ -8,6 +8,7 @@ export interface ItemProps extends React.HTMLAttributes<HTMLElement> {
      * 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`
      */
     link?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 
 export class Item extends React.Component<ItemProps, any> {}
@@ -39,19 +40,19 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * 当超过的项被隐藏时，是否可通过点击省略号展示菜单（包含被隐藏的项）
      */
-     showHiddenItems?: boolean;
-     /**
-      * 弹层挂载的容器节点（在showHiddenItems为true时才有意义）
-      */
-     popupContainer?: any;
-     /**
-      * 是否跟随trigger滚动（在showHiddenItems为true时才有意义）
-      */
-     followTrigger?: boolean;
-     /**
-      * 添加到弹层上的属性（在showHiddenItems为true时才有意义）
-      */
-     popupProps?: PopupProps;
+    showHiddenItems?: boolean;
+    /**
+     * 弹层挂载的容器节点（在showHiddenItems为true时才有意义）
+     */
+    popupContainer?: any;
+    /**
+     * 是否跟随trigger滚动（在showHiddenItems为true时才有意义）
+     */
+    followTrigger?: boolean;
+    /**
+     * 添加到弹层上的属性（在showHiddenItems为true时才有意义）
+     */
+    popupProps?: PopupProps;
 }
 
 export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {