feat: add icon to collapsible (#232)

* feat: add icon to collapsible

* refactor: test icon can be trigger

Co-authored-by: yangchen7 <yangchen7@360.cn>

Author: MattinaYang

README.md

@@ -196,7 +196,7 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
       </tr>
       <tr>
           <td>collapsible</td>
-          <td>'header' | 'disabled'</td>
+          <td>'header' | 'icon' | 'disabled'</td>
           <th>-</th>
           <td>specify whether the panel be collapsible or the area of collapsible.</td>
       </tr>

assets/index.less

@@ -64,6 +64,15 @@
       .@{prefixCls}-header-text {
         cursor: pointer;
       }
+      .@{prefixCls}-expand-icon {
+        cursor: pointer;
+      }
+    }
+    .@{prefixCls}-icon-collapsible-only {
+      cursor: default;
+      .@{prefixCls}-expand-icon {
+        cursor: pointer;
+      }
     }
   }
 

docs/examples/simple.tsx

@@ -94,7 +94,7 @@ class Test extends React.Component {
   };
 
   handleCollapsibleChange = (e: any) => {
-    const values = [undefined, 'header', 'disabled'];
+    const values = [undefined, 'header', 'icon', 'disabled'];
     this.setState({
       collapsible: values[e.target.value],
     });
@@ -116,7 +116,8 @@ class Test extends React.Component {
           <select onChange={this.handleCollapsibleChange}>
             <option value={0}>default</option>
             <option value={1}>header</option>
-            <option value={2}>disabled</option>
+            <option value={2}>icon</option>
+            <option value={3}>disabled</option>
           </select>
         </p>
         <br />

src/Collapse.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
-import * as React from 'react';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal';
 import toArray from 'rc-util/lib/Children/toArray';
-import CollapsePanel from './Panel';
+import * as React from 'react';
+import shallowEqual from 'shallowequal';
 import type { CollapseProps, CollapsibleType } from './interface';
+import CollapsePanel from './Panel';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
   let currentActiveKey = activeKey;

src/Panel.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
-import * as React from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 import shallowEqual from 'shallowequal';
-import PanelContent from './PanelContent';
 import type { CollapsePanelProps } from './interface';
+import PanelContent from './PanelContent';
 
 class CollapsePanel extends React.Component<CollapsePanelProps, any> {
   static defaultProps = {
@@ -46,7 +46,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       iconNode && (
         <div
           className={`${prefixCls}-expand-icon`}
-          onClick={collapsible === 'header' ? this.onItemClick : null}
+          onClick={collapsible === 'header' || collapsible === 'icon' ? this.onItemClick : null}
         >
           {iconNode}
         </div>
@@ -87,6 +87,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
 
     const disabled = collapsible === 'disabled';
     const collapsibleHeader = collapsible === 'header';
+    const collapsibleIcon = collapsible === 'icon';
 
     const itemCls = classNames(
       {
@@ -100,6 +101,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
       [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
+      [`${prefixCls}-icon-collapsible-only`]: collapsibleIcon,
     });
 
     /** header 节点属性 */
@@ -110,7 +112,7 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       onKeyPress: this.handleKeyPress,
     };
 
-    if (!collapsibleHeader) {
+    if (!collapsibleHeader && !collapsibleIcon) {
       headerProps.onClick = this.onItemClick;
       headerProps.role = accordion ? 'tab' : 'button';
       headerProps.tabIndex = disabled ? -1 : 0;

src/interface.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
 import type { CSSMotionProps } from 'rc-motion';
+import type * as React from 'react';
 
-export type CollapsibleType = 'header' | 'disabled';
+export type CollapsibleType = 'header' | 'disabled' | 'icon';
 
 export interface CollapseProps {
   prefixCls?: string;

tests/index.spec.tsx

@@ -1,9 +1,7 @@
-import React, { Fragment } from 'react';
 import type { ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
-
 import KeyCode from 'rc-util/lib/KeyCode';
-
+import React, { Fragment } from 'react';
 import Collapse, { Panel } from '../src/index';
 
 describe('collapse', () => {
@@ -540,6 +538,20 @@ describe('collapse', () => {
       collapse.find('.rc-collapse-header-text').simulate('click');
       expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
+    it('should work when value is icon', () => {
+      const collapse = mount(
+        <Collapse collapsible="icon">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
+      );
+      expect(collapse.find('.rc-collapse-expand-icon').exists()).toBeTruthy();
+      collapse.find('.rc-collapse-header').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(0);
+      collapse.find('.rc-collapse-expand-icon').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
+    });
 
     it('should disabled when value is disabled', () => {
       const collapse = mount(
@@ -585,6 +597,19 @@ describe('collapse', () => {
       collapse.find('.rc-collapse-header .arrow').simulate('click');
       expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
+
+    it('header not trigger when collapsible equal icon', () => {
+      const collapse = mount(
+        <Collapse collapsible="icon">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
+      );
+
+      collapse.find('.rc-collapse-header-text').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(0);
+    });
   });
 
   it('!showArrow', () => {