feat: CP support collapse expandIcon (#47473)

* feat: CP support Avatar icon * fix: fix * fix: fix * test: fix test case * fix: fix * fix: fix type * Update avatar.tsx Signed-off-by: lijianan <[email protected]> * Update avatar.tsx Signed-off-by: lijianan <[email protected]> --------- Signed-off-by: lijianan <[email protected]>
ant-design · Feb 20, 2024 · cf51b5f · cf51b5f
1 parent b96f4c8
commit cf51b5f
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 29 deletions.
diff --git a/components/_util/reactNode.ts b/components/_util/reactNode.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { AnyObject } from './type';
 
 export const { isValidElement } = React;
@@ -9,20 +10,20 @@ export function isFragment(child: any): boolean {
 
 type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
 
-export function replaceElement(
+export function replaceElement<P>(
   element: React.ReactNode,
   replacement: React.ReactNode,
   props?: RenderProps,
-): React.ReactNode {
-  if (!isValidElement(element)) {
+) {
+  if (!isValidElement<P>(element)) {
     return replacement;
   }
-  return React.cloneElement(
+  return React.cloneElement<P>(
     element,
     typeof props === 'function' ? props(element.props || {}) : props,
   );
 }
 
-export function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement {
-  return replaceElement(element, element, props) as React.ReactElement;
+export function cloneElement<P>(element: React.ReactNode, props?: RenderProps) {
+  return replaceElement<P>(element, element, props) as React.ReactElement;
 }
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
@@ -90,29 +90,29 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   }
 
   // Align with logic position
-  const mergedExpandIconPosition = React.useMemo(() => {
+  const mergedExpandIconPosition = React.useMemo<'start' | 'end'>(() => {
     if (expandIconPosition === 'left') {
       return 'start';
     }
     return expandIconPosition === 'right' ? 'end' : expandIconPosition;
   }, [expandIconPosition]);
 
-  const renderExpandIcon = (panelProps: PanelProps = {}) => {
-    const icon = (
-      expandIcon ? (
-        expandIcon(panelProps)
-      ) : (
-        <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
-      )
-    ) as React.ReactNode;
-
-    return cloneElement(icon, () => ({
-      className: classNames(
-        (icon as React.ReactElement<any>).props.className,
-        `${prefixCls}-arrow`,
-      ),
-    }));
-  };
+  const mergedExpandIcon = expandIcon ?? collapse?.expandIcon;
+
+  const renderExpandIcon = React.useCallback(
+    (panelProps: PanelProps = {}) => {
+      const icon =
+        typeof mergedExpandIcon === 'function' ? (
+          mergedExpandIcon(panelProps)
+        ) : (
+          <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
+        );
+      return cloneElement(icon, () => ({
+        className: classNames((icon as React.ReactElement)?.props?.className, `${prefixCls}-arrow`),
+      }));
+    },
+    [mergedExpandIcon, prefixCls],
+  );
 
   const collapseClassName = classNames(
     `${prefixCls}-icon-position-${mergedExpandIconPosition}`,

diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -273,7 +273,7 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
-  it('Should Collapse className works', () => {
+  it('Should Collapse className & expandIcon works', () => {
     const items = [
       {
         key: '1',
@@ -285,13 +285,14 @@ describe('ConfigProvider support style and className props', () => {
       <ConfigProvider
         collapse={{
           className: 'test-class',
+          expandIcon: (props) => <span className="cp-test-icon">{props.isActive}</span>,
         }}
       >
         <Collapse items={items} />
       </ConfigProvider>,
     );
-
     expect(container.querySelector('.ant-collapse')).toHaveClass('test-class');
+    expect(container.querySelector<HTMLSpanElement>('.cp-test-icon')).toBeTruthy();
   });
 
   it('Should Collapse style works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -6,6 +6,7 @@ import type { AlertProps } from '../alert';
 import type { BadgeProps } from '../badge';
 import type { ButtonProps } from '../button';
 import type { CardProps } from '../card';
+import type { CollapseProps } from '../collapse';
 import type { DrawerProps } from '../drawer';
 import type { FlexProps } from '../flex/interface';
 import type { FormProps } from '../form/Form';
@@ -82,6 +83,8 @@ export interface ImageConfig extends ComponentStyleConfig {
   preview?: Partial<Record<'closeIcon', React.ReactNode>>;
 }
 
+export type CollapseConfig = ComponentStyleConfig & Pick<CollapseProps, 'expandIcon'>;
+
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
 export type ModalConfig = ComponentStyleConfig &
@@ -148,7 +151,7 @@ export interface ConfigConsumerProps {
   calendar?: ComponentStyleConfig;
   carousel?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
-  collapse?: ComponentStyleConfig;
+  collapse?: CollapseConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -112,7 +112,7 @@ const {
 | carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -24,6 +24,7 @@ import type {
   BadgeConfig,
   ButtonConfig,
   CardConfig,
+  CollapseConfig,
   ComponentStyleConfig,
   ConfigConsumerProps,
   CSPConfig,
@@ -142,7 +143,7 @@ export interface ConfigProviderProps {
   calendar?: ComponentStyleConfig;
   carousel?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
-  collapse?: ComponentStyleConfig;
+  collapse?: CollapseConfig;
   divider?: ComponentStyleConfig;
   drawer?: DrawerConfig;
   typography?: ComponentStyleConfig;

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -114,7 +114,7 @@ const {
 | carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |