feat: 添加headerRender

examples/custom-collapse-header.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import Collapse, { Panel } from '../src';
+import motion from './_util/motionUtil';
+import '../assets/index.less';
+
+const text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+function random() {
+  return parseInt((Math.random() * 10).toString(), 10) + 1;
+}
+
+function customHeaderRender({ header, isActive, extra }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <div>
+        {header}
+        <span style={{ marginLeft: 10 }}>{isActive ? '收起' : '展开'}</span>
+      </div>
+      <div style={{ marginLeft: 20 }}>{extra}</div>
+    </div>
+  );
+}
+
+class Test extends React.Component {
+  state = {
+    time: random(),
+    accordion: false,
+    activeKey: ['4'],
+    collapsible: undefined,
+  };
+
+  onChange = (activeKey: string) => {
+    this.setState({
+      activeKey,
+    });
+  };
+
+  getItems() {
+    const items = [];
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0, len = 3; i < len; i++) {
+      const key = i + 1;
+      items.push(
+        <Panel
+          header={`This is panel header ${key}`}
+          key={key}
+          collapsible={i === 0 ? 'disabled' : undefined}
+        >
+          <p>{text.repeat(this.state.time)}</p>
+        </Panel>,
+      );
+    }
+    items.push(
+      <Panel header="This is panel header 4" key="4">
+        <Collapse defaultActiveKey="1">
+          <Panel header="This is panel nest panel" key="41" id="header-test">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+      </Panel>,
+    );
+
+    items.push(
+      <Panel header="This is panel header 5" key="5">
+        <Collapse defaultActiveKey="1">
+          <Panel header="This is panel nest panel" key="51" id="another-test">
+            <form>
+              <label htmlFor="test">Name:&nbsp;</label>
+              <input type="text" id="test" />
+            </form>
+          </Panel>
+        </Collapse>
+      </Panel>,
+    );
+
+    items.push(
+      <Panel header="This is panel header 6" key="6" extra={<span>Extra Node</span>}>
+        <p>Panel with extra</p>
+      </Panel>,
+    );
+
+    return items;
+  }
+
+  setActivityKey = () => {
+    this.setState({
+      activeKey: ['2'],
+    });
+  };
+
+  reRender = () => {
+    this.setState({
+      time: random(),
+    });
+  };
+
+  toggle = () => {
+    const { accordion } = this.state;
+    this.setState({
+      accordion: !accordion,
+    });
+  };
+
+  handleCollapsibleChange = (e: any) => {
+    const values = [undefined, 'header', 'disabled'];
+    this.setState({
+      collapsible: values[e.target.value],
+    });
+  };
+
+  render() {
+    const { accordion, activeKey, collapsible } = this.state;
+    const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
+    return (
+      <div style={{ margin: 20, width: 400 }}>
+        <button type="button" onClick={this.reRender}>
+          reRender
+        </button>
+        <button type="button" onClick={this.toggle}>
+          {btn}
+        </button>
+        <p>
+          collapsible:
+          <select onChange={this.handleCollapsibleChange}>
+            <option value={0}>default</option>
+            <option value={1}>header</option>
+            <option value={2}>disabled</option>
+          </select>
+        </p>
+        <br />
+        <br />
+        <button type="button" onClick={this.setActivityKey}>
+          active header 2
+        </button>
+        <br />
+        <br />
+        <Collapse
+          collapsible={collapsible}
+          accordion={accordion}
+          onChange={this.onChange}
+          activeKey={activeKey}
+          openMotion={motion}
+          // 获取panel props来自定义渲染header
+          // 比panel header上的其他配置项优先级高
+          headerRender={customHeaderRender}
+        >
+          {this.getItems()}
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default Test;

src/Collapse.tsx

@@ -84,6 +84,7 @@ class Collapse extends React.Component<CollapseProps, CollapseState> {
       accordion,
       destroyInactivePanel: rootDestroyInactivePanel,
       expandIcon,
+      headerRender,
       collapsible,
     } = this.props;
     // If there is no key provide, use the panel order as default key
@@ -116,6 +117,7 @@ class Collapse extends React.Component<CollapseProps, CollapseState> {
       children: child.props.children,
       onItemClick: mergeCollapsible === 'disabled' ? null : this.onClickItem,
       expandIcon,
+      headerRender,
       collapsible: mergeCollapsible,
     };
 

src/Panel.tsx

@@ -80,6 +80,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       accordion,
       forceRender,
       openMotion,
+      headerRender,
       extra,
       collapsible,
       ...rest
@@ -121,9 +122,15 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     return (
       <div {...rest} className={itemCls} style={style} id={id}>
         <div {...headerProps}>
-          {this.renderIcon()}
-          {this.renderTitle()}
-          {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
+          {headerRender && typeof headerRender === 'function' ? (
+            headerRender(this.props)
+          ) : (
+            <>
+              {this.renderIcon()}
+              {this.renderTitle()}
+              {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
+            </>
+          )}
         </div>
         <CSSMotion
           visible={isActive}

src/interface.ts

@@ -16,6 +16,7 @@ export interface CollapseProps {
   expandIcon?: (props: object) => React.ReactNode;
   collapsible?: CollapsibleType;
   children?: React.ReactNode;
+  headerRender?: (props: object) => React.ReactNode;
 }
 
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
@@ -34,6 +35,7 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement>
   extra?: string | React.ReactNode;
   onItemClick?: (panelKey: string | number) => void;
   expandIcon?: (props: object) => React.ReactNode;
+  headerRender?: (props: object) => React.ReactNode;
   panelKey?: string | number;
   role?: string;
   collapsible?: CollapsibleType;

tests/index.spec.tsx

@@ -612,4 +612,49 @@ describe('collapse', () => {
     wrapper.find('.target').simulate('click');
     expect(clickHandler).toHaveBeenCalled();
   });
+
+  describe('customHeader', () => {
+    const customHeaderRender = ({ header, isActive, extra }) => {
+      return (
+        <div style={{ display: 'flex' }}>
+          <div>
+            {header}
+            <span style={{ marginLeft: 10 }}>{isActive ? '收起' : '展开'}</span>
+          </div>
+          <div style={{ marginLeft: 20 }}>{extra}</div>
+        </div>
+      );
+    };
+
+    let collapse: ReactWrapper;
+    beforeEach(() => {
+      collapse = mount(
+        <Collapse onChange={onChange} headerRender={customHeaderRender}>
+          <Panel header="collapse 1" key="1" collapsible="disabled">
+            first
+          </Panel>
+          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+            second
+          </Panel>
+          <Panel header="collapse 3" key="3" className="important">
+            third
+          </Panel>
+        </Collapse>,
+      );
+    });
+
+    it('should toggle show on panel', () => {
+      let header = collapse.find('.rc-collapse-header').at(1);
+      header.simulate('click');
+      jest.runAllTimers();
+      collapse.update();
+      expect(collapse.find('.rc-collapse-content-active').length).toBe(1);
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
+      header = collapse.find('.rc-collapse-header').at(1);
+      header.simulate('click');
+      jest.runAllTimers();
+      collapse.update();
+      expect(collapse.find('.rc-collapse-content-active').exists()).toBeFalsy();
+      expect(collapse.find('.rc-collapse-item-active').exists()).toBeFalsy();
+    });
 });