refactor: Wrap all part with element holder (#233)

* chore: tmp * test: coverage
react-component · May 27, 2022 · 71c56e1 · 71c56e1 · vercel · May 27, 2022
1 parent a280779
commit 71c56e1
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 34 deletions.
diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -19,7 +19,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     return !shallowEqual(this.props, nextProps);
   }
 
-  handleItemClick = () => {
+  onItemClick = () => {
     const { onItemClick, panelKey } = this.props;
 
     if (typeof onItemClick === 'function') {
@@ -29,37 +29,64 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
 
   handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-      this.handleItemClick();
+      this.onItemClick();
     }
   };
 
+  renderIcon = () => {
+    const { showArrow, expandIcon, prefixCls, collapsible } = this.props;
+    if (!showArrow) {
+      return null;
+    }
+
+    const iconNode =
+      typeof expandIcon === 'function' ? expandIcon(this.props) : <i className="arrow" />;
+
+    return (
+      iconNode && (
+        <div
+          className={`${prefixCls}-expand-icon`}
+          onClick={collapsible === 'header' ? this.onItemClick : null}
+        >
+          {iconNode}
+        </div>
+      )
+    );
+  };
+
+  renderTitle = () => {
+    const { header, prefixCls, collapsible } = this.props;
+
+    return (
+      <span
+        className={`${prefixCls}-header-text`}
+        onClick={collapsible === 'header' ? this.onItemClick : null}
+      >
+        {header}
+      </span>
+    );
+  };
+
   render() {
     const {
       className,
       id,
       style,
       prefixCls,
-      header,
       headerClass,
       children,
       isActive,
-      showArrow,
       destroyInactivePanel,
       accordion,
       forceRender,
       openMotion,
-      expandIcon,
       extra,
       collapsible,
     } = this.props;
 
     const disabled = collapsible === 'disabled';
     const collapsibleHeader = collapsible === 'header';
 
-    const headerCls = classNames(`${prefixCls}-header`, {
-      [headerClass]: headerClass,
-      [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
-    });
     const itemCls = classNames(
       {
         [`${prefixCls}-item`]: true,
@@ -69,7 +96,10 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       className,
     );
 
-    let icon: any = <i className="arrow" />;
+    const headerCls = classNames(`${prefixCls}-header`, {
+      [headerClass]: headerClass,
+      [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
+    });
 
     /** header 节点属性 */
     const headerProps: React.HTMLAttributes<HTMLDivElement> = {
@@ -78,17 +108,8 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       onKeyPress: this.handleKeyPress,
     };
 
-    if (showArrow && typeof expandIcon === 'function') {
-      icon = expandIcon(this.props);
-    }
-    if (collapsibleHeader) {
-      icon = (
-        <span style={{ cursor: 'pointer' }} onClick={() => this.handleItemClick()}>
-          {icon}
-        </span>
-      );
-    } else {
-      headerProps.onClick = this.handleItemClick;
+    if (!collapsibleHeader) {
+      headerProps.onClick = this.onItemClick;
       headerProps.role = accordion ? 'tab' : 'button';
       headerProps.tabIndex = disabled ? -1 : 0;
     }
@@ -98,14 +119,8 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     return (
       <div className={itemCls} style={style} id={id}>
         <div {...headerProps}>
-          {showArrow && icon}
-          {collapsibleHeader ? (
-            <span onClick={this.handleItemClick} className={`${prefixCls}-header-text`}>
-              {header}
-            </span>
-          ) : (
-            header
-          )}
+          {this.renderIcon()}
+          {this.renderTitle()}
           {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
         </div>
         <CSSMotion

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -139,8 +139,7 @@ describe('collapse', () => {
           activeKey: ['2'],
         };
 
-        constructor(props: any) {
-          super(props);
+        componentDidMount(): void {
           this.setState({
             activeKey: ['2'],
           });
@@ -495,7 +494,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+      expect(collapse.find('.rc-collapse-header-text').exists()).toBeTruthy();
       collapse.find('.rc-collapse-header').simulate('click');
       expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
@@ -522,7 +521,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+      expect(collapse.find('.rc-collapse-header-text').exists()).toBeTruthy();
 
       expect(collapse.find('.rc-collapse-item-disabled').length).toBe(1);
 
@@ -538,7 +537,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+      expect(collapse.find('.rc-collapse-header-text').exists()).toBeTruthy();
 
       expect(collapse.find('.rc-collapse-item-disabled').length).toBe(1);
 
@@ -559,4 +558,16 @@ describe('collapse', () => {
       expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
   });
+
+  it('!showArrow', () => {
+    const wrapper = mount(
+      <Collapse>
+        <Panel header="collapse 1" key="1" showArrow={false}>
+          first
+        </Panel>
+      </Collapse>,
+    );
+
+    expect(wrapper.exists('.rc-collapse-expand-icon')).toBeFalsy();
+  });
 });