fix: Panel extra use 0 (#222)

src/Panel.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import shallowEqual from 'shallowequal';
 import PanelContent from './PanelContent';
-import { CollapsePanelProps } from './interface';
+import type { CollapsePanelProps } from './interface';
 
 class CollapsePanel extends React.Component<CollapsePanelProps, any> {
   static defaultProps = {
@@ -73,6 +73,8 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       icon = expandIcon(this.props);
     }
 
+    const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
+
     return (
       <div className={itemCls} style={style} id={id}>
         <div
@@ -91,7 +93,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
           ) : (
             header
           )}
-          {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
+          {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
         </div>
         <CSSMotion
           visible={isActive}

tests/index.spec.tsx

@@ -201,6 +201,21 @@ describe('collapse', () => {
 
     runNormalTest(element);
   });
+
+  describe('it shoule support extra whit number 0', () => {
+    const collapse = mount(
+      <Collapse onChange={onChange} activeKey={0}>
+        <Panel header="collapse 0" key={0} extra={0}>
+          zero
+        </Panel>
+      </Collapse>,
+    );
+
+    const extraNodes = collapse.find('.rc-collapse-extra');
+    expect(extraNodes.length).toBe(1);
+    expect(extraNodes.at(0).getDOMNode().innerHTML).toBe('0');
+  });
+
   describe('it should support activeKey number 0', () => {
     const collapse = mount(
       <Collapse onChange={onChange} activeKey={0}>

tsconfig.json

@@ -13,4 +13,4 @@
       "rc-collapse": ["src/index.tsx"]
     }
   }
-}
+}