fix(list): ProList card support on checked

close #5924
ant-design · Jul 15, 2023 · 2a0257e · 2a0257e
1 parent db09ae9
commit 2a0257e
Show file tree

Hide file tree

Showing 7 changed files with 772 additions and 501 deletions.
diff --git a/packages/card/src/components/CheckCard/index.tsx b/packages/card/src/components/CheckCard/index.tsx
@@ -2,7 +2,9 @@ import { useMountMergeState } from '@ant-design/pro-utils';
 import { Avatar, ConfigProvider } from 'antd';
 
 import classNames from 'classnames';
+import type { MouseEventHandler } from 'react';
 import React, { useContext, useEffect, useMemo } from 'react';
+import ProCardActions from '../Actions';
 import type { CheckCardGroupProps } from './Group';
 import CheckCardGroup, { CardLoading, CheckCardGroupConnext } from './Group';
 import { useStyle } from './style';
@@ -16,11 +18,11 @@ interface CheckCardProps {
   /** Change 回调 */
   onChange?: (checked: boolean) => void;
   /** Click 回调 */
-  onClick?: (e: Event) => void;
+  onClick?: (event: MouseEventHandler<HTMLDivElement> | undefined) => void;
   /** 鼠标进入时的回调 */
-  onMouseEnter?: (event: MouseEvent) => void;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
   /** 鼠标出来时的回调 */
-  onMouseLeave?: (event: MouseEvent) => void;
+  onMouseLeave?: (event: MouseEventHandler<HTMLDivElement> | undefined) => void;
   /**
    * 默认是否勾选
    *
@@ -66,6 +68,12 @@ interface CheckCardProps {
    * @title 标题
    */
   title?: React.ReactNode;
+  /**
+   * 二级标题展示
+   *
+   * @title 二级标题
+   */
+  subTitle?: React.ReactNode;
   /**
    * 描述展示
    *
@@ -111,6 +119,16 @@ interface CheckCardProps {
    * @title 操作栏
    */
   extra?: React.ReactNode;
+
+  children?: React.ReactNode;
+  /**
+   * 内容区域的样式设计
+   */
+  bodyStyle?: React.CSSProperties;
+  /**
+   * 右下角的操作区
+   */
+  actions?: React.ReactNode[];
 }
 
 export interface CheckCardState {
@@ -134,7 +152,7 @@ const CheckCard: React.FC<CheckCardProps> & {
     props?.onClick?.(e);
     const newChecked = !stateChecked;
     checkCardGroup?.toggleOption?.({ value: props.value });
-    setStateChecked?.(newChecked);
+    setStateChecked?.(newChecked, e);
   };
 
   // small => sm large => lg
@@ -246,7 +264,14 @@ const CheckCard: React.FC<CheckCardProps> & {
 
     const headerDom = (title ?? extra) != null && (
       <div className={`${prefixCls}-header ${hashId}`.trim()}>
-        <div className={`${prefixCls}-title ${hashId}`.trim()}>{title}</div>
+        <div className={`${prefixCls}-header-left ${hashId}`.trim()}>
+          <div className={`${prefixCls}-title ${hashId}`.trim()}>{title}</div>
+          {props.subTitle ? (
+            <div className={`${prefixCls}-subTitle ${hashId}`.trim()}>
+              {props.subTitle}
+            </div>
+          ) : null}
+        </div>
         {extra && (
           <div className={`${prefixCls}-extra ${hashId}`.trim()}>{extra}</div>
         )}
@@ -282,6 +307,7 @@ const CheckCard: React.FC<CheckCardProps> & {
     extra,
     hashId,
     prefixCls,
+    props.subTitle,
     title,
   ]);
 
@@ -294,8 +320,20 @@ const CheckCard: React.FC<CheckCardProps> & {
           handleClick(e);
         }
       }}
+      onMouseEnter={props.onMouseEnter}
     >
       {metaDom}
+      {props.children ? (
+        <div
+          className={classNames(`${prefixCls}-body`)}
+          style={props.bodyStyle}
+        >
+          {props.children}
+        </div>
+      ) : null}
+      {props.actions ? (
+        <ProCardActions actions={props.actions} prefixCls={prefixCls} />
+      ) : null}
     </div>,
   );
 };

diff --git a/packages/card/src/components/CheckCard/style.ts b/packages/card/src/components/CheckCard/style.ts
@@ -133,6 +133,10 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
         paddingInline: token.paddingSM,
         paddingBlock: token.padding,
       },
+      '&-body': {
+        paddingInline: token.paddingSM,
+        paddingBlock: token.padding,
+      },
       '&-avatar-header': { display: 'flex', alignItems: 'center' },
       '&-avatar': { paddingInlineEnd: 8 },
       '&-detail': {
@@ -146,6 +150,12 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
+        lineHeight: token.lineHeight,
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          gap: token.sizeSM,
+        },
       },
       '&-title': {
         overflow: 'hidden',
@@ -154,6 +164,9 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
         fontSize: token.fontSize,
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
       },
       '&-description': {
         color: token.colorTextSecondary,

diff --git a/packages/list/src/Item.tsx b/packages/list/src/Item.tsx
@@ -1,6 +1,6 @@
 import { RightOutlined } from '@ant-design/icons';
-import type { ProCardProps } from '@ant-design/pro-card';
-import ProCard from '@ant-design/pro-card';
+import type { CheckCardProps } from '@ant-design/pro-card';
+import { CheckCard } from '@ant-design/pro-card';
 import { ProProvider } from '@ant-design/pro-provider';
 import { ConfigProvider, List, Skeleton } from 'antd';
 
@@ -91,7 +91,7 @@ export type ItemProps<RecordType> = {
   type?: 'new' | 'top' | 'inline' | 'subheader';
   isEditable: boolean;
   recordKey: string | number | undefined;
-  cardProps?: ProCardProps;
+  cardProps?: CheckCardProps;
   record: RecordType;
   onRow?: GetComponentProps<RecordType>;
   onItem?: GetComponentProps<RecordType>;
@@ -270,6 +270,7 @@ function ProListItem<RecordType>(props: ItemProps<RecordType>) {
     return null;
   }, [avatar, getPrefixCls, hashId, title]);
 
+  const itemProps = onItem?.(record, index);
   const defaultDom = !cardProps ? (
     <List.Item
       className={classNames(rowClassName, hashId, {
@@ -279,7 +280,7 @@ function ProListItem<RecordType>(props: ItemProps<RecordType>) {
       actions={extraDom}
       extra={!!extra && <div className={extraClassName}>{extra}</div>}
       {...onRow?.(record, index)}
-      {...onItem?.(record, index)}
+      {...itemProps}
       onClick={(e) => {
         onRow?.(record, index)?.onClick?.(e);
         onItem?.(record, index)?.onClick?.(e);
@@ -328,10 +329,11 @@ function ProListItem<RecordType>(props: ItemProps<RecordType>) {
       </Skeleton>
     </List.Item>
   ) : (
-    <ProCard
+    <CheckCard
       bordered
-      loading={loading}
-      hoverable
+      style={{
+        width: '100%',
+      }}
       {...cardProps}
       title={cardTitleDom}
       subTitle={subTitle}
@@ -341,15 +343,19 @@ function ProListItem<RecordType>(props: ItemProps<RecordType>) {
         padding: 24,
         ...cardProps.bodyStyle,
       }}
-      {...onItem?.(record, index)}
+      {...(itemProps as CheckCardProps)}
+      onClick={(e: any) => {
+        cardProps?.onClick?.(e);
+        itemProps?.onClick?.(e);
+      }}
     >
       <Skeleton avatar title={false} loading={loading} active>
         <div className={`${className}-header ${hashId}`.trim()}>
           {itemTitleRender && itemTitleRender?.(record, index, titleDom)}
           {content}
         </div>
       </Skeleton>
-    </ProCard>
+    </CheckCard>
   );
 
   if (!cardProps) {

diff --git a/packages/list/src/ListView.tsx b/packages/list/src/ListView.tsx
@@ -1,4 +1,4 @@
-import type { ProCardProps } from '@ant-design/pro-card';
+import type { CheckCardProps } from '@ant-design/pro-card';
 import { ProProvider } from '@ant-design/pro-provider';
 import type { ActionType } from '@ant-design/pro-table';
 import type {
@@ -56,7 +56,7 @@ export type ListViewProps<RecordType> = Omit<
     /** Render 除了 header 之后的代码 */
     itemHeaderRender?: ItemProps<RecordType>['itemHeaderRender'];
     itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
-    itemCardProps?: ProCardProps;
+    itemCardProps?: CheckCardProps;
     pagination?: PaginationConfig;
   };
 
@@ -255,9 +255,11 @@ function ListView<RecordType extends AnyObject>(
             : rawData;
           if (data !== '-') listItemProps[column.listKey] = data;
         });
-        let checkboxDom;
+        let checkboxDom: React.ReactNode;
         if (selectItemDom && selectItemDom.render) {
-          checkboxDom = selectItemDom.render(item, item, index) || undefined;
+          checkboxDom =
+            (selectItemDom.render(item, item, index) as React.ReactNode) ||
+            undefined;
         }
         const { isEditable, recordKey } =
           actionRef.current?.isEditable({ ...item, index }) || {};
@@ -273,8 +275,16 @@ function ListView<RecordType extends AnyObject>(
                     ...itemCardProps,
                     ...rest.grid,
                     checked: isChecked,
-                    onChecked: React.isValidElement(checkboxDom)
-                      ? (checkboxDom?.props as any)?.onChange
+                    onChange: React.isValidElement(checkboxDom)
+                      ? (changeChecked) => {
+                          return (
+                            React.isValidElement(checkboxDom) &&
+                            (checkboxDom?.props as any)?.onChange({
+                              nativeEvent: {},
+                              changeChecked,
+                            })
+                          );
+                        }
                       : undefined,
                   }
                 : undefined