✨ feat(list): support expandIcon(#1710) (#1771)

* ✨ feat(list): support expandIcon(#1710) * 🎨 chore: Delete unused variables * 🐛 fix(list): fix Typescript type error * 🐛 fix(list): fix test * fix error * fix ts * ✨ feat(list): add expandIcon test * 🐛 fix(list): fix test Co-authored-by: chenshuai2144 <qixian.cs@outlook.com>
ant-design · Jan 29, 2021 · ff822b6 · ff822b6
1 parent 12220d5
commit ff822b6
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 12 deletions.
diff --git a/packages/list/src/Item.tsx b/packages/list/src/Item.tsx
@@ -2,32 +2,45 @@ import React, { useContext } from 'react';
 import { List, Avatar, Skeleton, ConfigProvider } from 'antd';
 import type { ProCardProps } from '@ant-design/pro-card';
 import ProCard from '@ant-design/pro-card';
-import { RightOutlined } from '@ant-design/icons';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { ListGridType } from 'antd/lib/list';
 import type { ExpandableConfig } from 'antd/lib/table/interface';
+import { RightOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 
-export type RenderExpandIconProps = {
+export type RenderExpandIconProps<RecordType> = {
   prefixCls: string;
   expanded: boolean;
-  expandIcon: React.ReactNode;
+  expandIcon:
+    | React.ReactNode
+    | ((props: {
+        onExpand: (expanded: boolean) => void;
+        expanded: boolean;
+        record: RecordType;
+      }) => React.ReactNode);
   onExpand: (expanded: boolean) => void;
+  record: RecordType;
 };
 
-export function renderExpandIcon({
+export function renderExpandIcon<RecordType>({
   prefixCls,
   expandIcon = <RightOutlined />,
   onExpand,
   expanded,
-}: RenderExpandIconProps) {
+  record,
+}: RenderExpandIconProps<RecordType>) {
+  let icon = expandIcon;
   const expandClassName = `${prefixCls}-row-expand-icon`;
 
   const onClick: React.MouseEventHandler<HTMLElement> = (event) => {
     onExpand(!expanded);
     event.stopPropagation();
   };
 
+  if (typeof expandIcon === 'function') {
+    icon = expandIcon({ expanded, onExpand, record });
+  }
+
   return (
     <span
       className={classNames(expandClassName, {
@@ -36,12 +49,12 @@ export function renderExpandIcon({
       })}
       onClick={onClick}
     >
-      {expandIcon}
+      {icon}
     </span>
   );
 }
 
-export type ItemProps = {
+export type ItemProps<RecordType> = {
   title?: React.ReactNode;
   subTitle?: React.ReactNode;
   checkbox?: React.ReactNode;
@@ -71,9 +84,10 @@ export type ItemProps = {
   isEditable: boolean;
   recordKey: string | number | undefined;
   cardProps?: ProCardProps;
+  record?: RecordType;
 };
 
-function ProListItem(props: ItemProps) {
+function ProListItem<RecordType>(props: ItemProps<RecordType>) {
   const { prefixCls: customizePrefixCls } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
@@ -103,6 +117,7 @@ function ProListItem(props: ItemProps) {
     type,
     style,
     className: propsClassName = defaultClassName,
+    record,
     ...rest
   } = props;
 
@@ -148,6 +163,7 @@ function ProListItem(props: ItemProps) {
                 expandIcon,
                 onExpand,
                 expanded,
+                record,
               })}
           </div>
           {title || avatar || subTitle || description ? (

diff --git a/packages/list/src/ListView.tsx b/packages/list/src/ListView.tsx
@@ -175,6 +175,7 @@ function ListView<RecordType>(props: ListViewProps<RecordType>) {
             onExpand={() => {
               onTriggerExpand(item);
             }}
+            record={item}
             showActions={showActions}
             rowSupportExpand={!rowExpandable || (rowExpandable && rowExpandable(item))}
             selected={selectedKeySet.has(getRowKey(item, index))}

diff --git a/packages/table/src/components/Form/index.tsx b/packages/table/src/components/Form/index.tsx
@@ -78,15 +78,15 @@ const getFromProps = (isForm: boolean, searchConfig: any, name: string) => {
  * 从formConfig中获取传给相应表单的配置
  *
  * @param isForm
- * @param formCofig
+ * @param formConfig
  */
-const getFormConfigs = (isForm: boolean, formCofig: any) => {
+const getFormConfigs = (isForm: boolean, formConfig: any) => {
   if (isForm) {
     // 传给Form的配置
-    return omit(formCofig, ['ignoreRules']);
+    return omit(formConfig, ['ignoreRules']);
   }
   // 传给Filter的配置
-  return { ignoreRules: true, ...formCofig };
+  return { ignoreRules: true, ...formConfig };
 };
 
 export type TableFormItem<T, U = any> = {

diff --git a/tests/list/index.test.tsx b/tests/list/index.test.tsx
@@ -234,6 +234,41 @@ describe('List', () => {
     );
   });
 
+  it('🚏 expandable with expandIcon', async () => {
+    const fn = jest.fn();
+    const Wrapper = () => {
+      return (
+        <ProList
+          dataSource={[
+            {
+              name: '我是名称',
+              content: <div>我是内容</div>,
+            },
+          ]}
+          metas={{
+            title: {
+              dataIndex: 'name',
+            },
+            content: {},
+          }}
+          expandable={{
+            expandIcon: ({ record }) => (
+              <div onClick={() => fn(record.name)} className="expand-icon" />
+            ),
+          }}
+          rowKey={(item) => {
+            return item.name;
+          }}
+        />
+      );
+    };
+    const html = mount(<Wrapper />);
+
+    expect(html.find('.expand-icon')).toHaveLength(1);
+
+    expect(fn).toBeCalledWith('我是名称');
+  });
+
   it('🚏 rowSelection', async () => {
     const Wrapper = () => {
       const [selectedRowKeys, setSelectedRowKeys] = useState<ReactText[]>([]);