feat(list): add event param in the onClick (#1693)

Co-authored-by: maxin <maxin@growingio.com>

src/list/List.tsx

@@ -90,11 +90,11 @@ export const InnerList = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
   const childrens = renderOptions.slice(0, collapse);
   const isNeedCollapse = useMemo(() => renderOptions?.length > collapse, [renderOptions, collapse]);
 
-  const handleClick = (val?: string) => {
+  const handleClick = (val?: string, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => {
     if (val === `${prefixCls}-collapse`) {
       return;
     }
-    onClick?.(val);
+    onClick?.(val, event);
     // multiple
     if (isArray(value)) {
       const resultValue = getResultValue(value, val) as string[];

src/list/context.tsx

@@ -11,7 +11,7 @@ export interface ListContextProps {
   isEmpty?: boolean;
   selectParent?: any;
   onChange?: (value?: MaybeArray<string | number>, options?: OptionProps | OptionProps[]) => void;
-  onClick?: (value?: string | number) => void;
+  onClick?: (value?: string | number, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
   options?: Map<string | number, OptionProps>;
   recentId?: string;
   prefix?: (option?: OptionProps) => string | React.ReactNode;

src/list/inner/CascaderItem.tsx

@@ -1,5 +1,5 @@
 import React, { DOMAttributes, useContext, useEffect, useMemo } from 'react';
-import { isEmpty, noop } from 'lodash';
+import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { RightFilled } from '@gio-design/icons';
 import Popover from '../../popover';
@@ -10,6 +10,7 @@ import WithRef from '../../utils/withRef';
 import List from '../List';
 import { convertChildrenToData, generateSelectParent, generateString } from '../util';
 import { ListContext } from '../context';
+import { BaseItemProps } from '..';
 
 const CascaderItem: React.ForwardRefRenderFunction<
   HTMLLIElement,
@@ -36,10 +37,10 @@ const CascaderItem: React.ForwardRefRenderFunction<
   // list
   const prefixClsItem = `${prefixCls}--item`;
 
-  const handleOnClick = () => {
+  const handleOnClick: BaseItemProps['onClick'] = (_, event) => {
     if (!mergedDisabled) {
-      contextOnClick?.(generateString(value, selectParent));
-      propsOnClick?.(generateString(value, selectParent));
+      contextOnClick?.(generateString(value, selectParent), event);
+      propsOnClick?.(generateString(value, selectParent), event);
     }
   };
   const content = () => {
@@ -106,7 +107,11 @@ const CascaderItem: React.ForwardRefRenderFunction<
       value={value}
       disabled={mergedDisabled}
       suffix={React.isValidElement(children) || !isEmpty(childrens) ? <RightFilled size="14px" /> : undefined}
-      onClick={React.isValidElement(children) || !isEmpty(childrens) ? noop : handleOnClick}
+      onClick={
+        React.isValidElement(children) || !isEmpty(childrens)
+          ? (itemValue, event) => propsOnClick?.(itemValue, event)
+          : handleOnClick
+      }
     />
   );
   return PopoverRender(renderItem);

src/list/inner/CheckboxItem.tsx

@@ -31,8 +31,8 @@ const CheckboxItem: React.ForwardRefRenderFunction<
         disabled={mergedDisabled}
         onClick={(e) => {
           if (!mergedDisabled) {
-            contextOnClick?.(value);
-            onClick?.(value);
+            contextOnClick?.(value, e);
+            onClick?.(value, e);
             e?.stopPropagation();
           }
         }}

src/list/inner/baseItem.tsx

@@ -63,13 +63,13 @@ const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<
 
     /** =================== events =================== */
 
-    const handleOnClick = () => {
+    const handleOnClick = (event: React.MouseEvent<HTMLLIElement>) => {
       if (!mergedDisabled) {
         /** cascader click 从上级来 */
         if (model !== 'cascader') {
-          contextOnClick?.(value);
+          contextOnClick?.(value, event);
         }
-        onClick?.(value);
+        onClick?.(value, event);
       }
     };
     const content = children ?? label;

src/list/interfance.ts

@@ -59,7 +59,7 @@ export interface ListProps {
   /**
    *
    */
-  onClick?: (value?: string | number) => void;
+  onClick?: (value?: string | number, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
   /**
    *
    */
@@ -87,7 +87,7 @@ export interface OptionProps {
    * @deprecated 未来版本迭代后会弃用 1.x.x -> 2.x.x
    */
   wrapper?: (element: React.ReactNode) => React.ReactElement;
-  onClick?: (v?: string) => void;
+  onClick?: (v?: string, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
   [key: string]: unknown;
 }
 
@@ -131,7 +131,7 @@ export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled' |
   children?: React.ReactNode;
   disabledTooltip?: string;
   selected?: boolean;
-  onClick?: (value?: string | number) => void;
+  onClick?: (value?: string | number, event?: React.MouseEvent<HTMLLIElement | HTMLInputElement>) => void;
 }
 
 export interface TriggerProps {