Merge pull request #1111 from oceanbase/feat/use-new-collapsible-icon-for-pro-card

improve(ui): [pro-card] use new collapsible icon

Author: wzc520pyfm

packages/ui/src/ProCard/index.tsx

@@ -3,8 +3,10 @@ import { ProCard as AntProCard } from '@ant-design/pro-components';
 import type { ProCardProps } from '@ant-design/pro-components';
 import { ConfigProvider } from '@oceanbase/design';
 import { isHorizontalPaddingZero } from '@oceanbase/design/es/_util';
+import { theme } from '@oceanbase/design';
 import classNames from 'classnames';
 import useStyle from './style';
+import { CaretRightFilled } from '@oceanbase/icons';
 
 export { ProCardProps };
 
@@ -19,10 +21,11 @@ const ProCard: typeof AntProCard = ({
   className,
   ...restProps
 }) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
 
   const prefixCls = getPrefixCls('pro-card', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);
+  const { token } = theme.useToken();
 
   // ProCard body no horizontal padding
   const noBodyHorizontalPadding = isHorizontalPaddingZero(bodyStyle?.padding) || ghost;
@@ -53,6 +56,18 @@ const ProCard: typeof AntProCard = ({
       headerBordered={headerBordered}
       bodyStyle={bodyStyle}
       className={proCardCls}
+      collapsibleIconRender={({ collapsed }) => {
+        return (
+          <CaretRightFilled
+            className={`${iconPrefixCls} ${iconPrefixCls}-right ${prefixCls}-collapsible-icon`}
+            style={{
+              transition: 'transform 0.2s',
+              transform: collapsed ? undefined : 'rotate(90deg)',
+              color: token.colorTextSecondary,
+            }}
+          />
+        );
+      }}
       {...restProps}
     />
   );