chore: support collapsable、 remove disabled of panel and headerCollap…

…sableOnly (#173) * chore: 💥 remove disabled of panel and headerCollapsableOnly; feat: ✨ support collapsable prop; * chore: update readme * chore: rename collapsable to collapsible * chore: optimize code style
react-component · Nov 16, 2020 · be1a8a3 · be1a8a3 · vercel · Nov 16, 2020
1 parent 6b3502b
commit be1a8a3
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -117,6 +117,12 @@ ReactDOM.render(collapse, container);
           <th></th>
           <td>specific the custom expand icon.</td>
       </tr>
+      <tr>
+          <td>collapsible</td>
+          <td>Boolean | 'header'</td>
+          <th>true</th>
+          <td>specify whether the panel of children is collapsible or the area of collapsible.</td>
+      </tr>
     </tbody>
 </table>
 
@@ -194,9 +200,17 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
           <th></th>
           <td>Content to render in the right of the panel header</td>
       </tr>
+      <tr>
+          <td>collapsible</td>
+          <td>Boolean | 'header'</td>
+          <th>true</th>
+          <td>specify whether the panel be collapsible or the area of collapsible.</td>
+      </tr>
     </tbody>
 </table>
 
+> `disabled` is removed since 3.0.0, please use `collapsible=false` replace it.
+
 #### key
 
 If `key` is not provided, the panel's index will be used instead.

diff --git a/assets/index.less b/assets/index.less
@@ -59,7 +59,7 @@
         margin: 0 16px 0 auto;
       }
     }
-    .@{prefixCls}-header-collapsable-only {
+    .@{prefixCls}-header-collapsible-only {
       cursor: default;
       .@{prefixCls}-header-text {
         cursor: pointer;

diff --git a/examples/simple.tsx b/examples/simple.tsx
@@ -18,7 +18,7 @@ class Test extends React.Component {
     time: random(),
     accordion: false,
     activeKey: ['4'],
-    headerCollapsableOnly: false,
+    collapsible: true,
   };
 
   onChange = (activeKey: string) => {
@@ -33,7 +33,11 @@ class Test extends React.Component {
     for (let i = 0, len = 3; i < len; i++) {
       const key = i + 1;
       items.push(
-        <Panel header={`This is panel header ${key}`} key={key} disabled={i === 0}>
+        <Panel
+          header={`This is panel header ${key}`}
+          key={key}
+          collapsible={i === 0 ? false : undefined}
+        >
           <p>{text.repeat(this.state.time)}</p>
         </Panel>,
       );
@@ -89,19 +93,16 @@ class Test extends React.Component {
     });
   };
 
-  toggleHeaderCollapsableOnly = () => {
-    const { headerCollapsableOnly } = this.state;
+  handleCollapsibleChange = (e: any) => {
+    const values = [true, 'header', false];
     this.setState({
-      headerCollapsableOnly: !headerCollapsableOnly,
+      collapsible: values[e.target.value],
     });
   };
 
   render() {
-    const { accordion, activeKey, headerCollapsableOnly } = this.state;
+    const { accordion, activeKey, collapsible } = this.state;
     const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
-    const headerCollapsableOnlyBtn = headerCollapsableOnly
-      ? 'headerCollapsableOnly: true'
-      : 'headerCollapsableOnly: false';
     return (
       <div style={{ margin: 20, width: 400 }}>
         <button type="button" onClick={this.reRender}>
@@ -110,9 +111,14 @@ class Test extends React.Component {
         <button type="button" onClick={this.toggle}>
           {btn}
         </button>
-        <button type="button" onClick={this.toggleHeaderCollapsableOnly}>
-          {headerCollapsableOnlyBtn}
-        </button>
+        <p>
+          collapsible:
+          <select onChange={this.handleCollapsibleChange}>
+            <option value={0}>true</option>
+            <option value={1}>header</option>
+            <option value={2}>false</option>
+          </select>
+        </p>
         <br />
         <br />
         <button type="button" onClick={this.setActivityKey}>
@@ -121,7 +127,7 @@ class Test extends React.Component {
         <br />
         <br />
         <Collapse
-          headerCollapsableOnly={headerCollapsableOnly}
+          collapsible={collapsible}
           accordion={accordion}
           onChange={this.onChange}
           activeKey={activeKey}

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
@@ -24,7 +24,6 @@ class Collapse extends React.Component<CollapseProps, CollapseState> {
     onChange() {},
     accordion: false,
     destroyInactivePanel: false,
-    headerCollapsableOnly: false,
   };
 
   static Panel = CollapsePanel;
@@ -77,24 +76,19 @@ class Collapse extends React.Component<CollapseProps, CollapseState> {
     if (!child) return null;
 
     const { activeKey } = this.state;
-    const {
-      prefixCls,
-      openMotion,
-      accordion,
-      destroyInactivePanel: rootDestroyInactivePanel,
-      expandIcon,
-      headerCollapsableOnly,
-    } = this.props;
+    const { prefixCls, openMotion, accordion, destroyInactivePanel: rootDestroyInactivePanel, expandIcon, collapsible } = this.props;
     // If there is no key provide, use the panel order as default key
     const key = child.key || String(index);
-    const { header, headerClass, disabled, destroyInactivePanel } = child.props;
+    const { header, headerClass, destroyInactivePanel, collapsible: childCollapsible } = child.props;
     let isActive = false;
     if (accordion) {
       isActive = activeKey[0] === key;
     } else {
       isActive = activeKey.indexOf(key) > -1;
     }
 
+    const mergeCollapsible = childCollapsible ?? collapsible;
+
     const props = {
       key,
       panelKey: key,
@@ -106,9 +100,9 @@ class Collapse extends React.Component<CollapseProps, CollapseState> {
       openMotion,
       accordion,
       children: child.props.children,
-      onItemClick: disabled ? null : this.onClickItem,
+      onItemClick: mergeCollapsible === false ? null : this.onClickItem,
       expandIcon,
-      headerCollapsableOnly,
+      collapsible: mergeCollapsible,
     };
 
     // https://github.com/ant-design/ant-design/issues/20479

diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -45,17 +45,19 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       isActive,
       showArrow,
       destroyInactivePanel,
-      disabled,
       accordion,
       forceRender,
       openMotion,
       expandIcon,
       extra,
-      headerCollapsableOnly,
+      collapsible,
     } = this.props;
+
+    const disabled = collapsible === false;
+
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
-      [`${prefixCls}-header-collapsable-only`]: headerCollapsableOnly,
+      [`${prefixCls}-header-collapsible-only`]: collapsible === 'header',
     });
     const itemCls = classNames(
       {
@@ -75,14 +77,14 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
       <div className={itemCls} style={style} id={id}>
         <div
           className={headerCls}
-          onClick={() => !headerCollapsableOnly && this.handleItemClick()}
+          onClick={() => collapsible !== 'header' && this.handleItemClick()}
           role={accordion ? 'tab' : 'button'}
           tabIndex={disabled ? -1 : 0}
           aria-expanded={isActive}
           onKeyPress={this.handleKeyPress}
         >
           {showArrow && icon}
-          {headerCollapsableOnly ? (
+          {collapsible === 'header' ? (
             <span onClick={this.handleItemClick} className={`${prefixCls}-header-text`}>
               {header}
             </span>

diff --git a/src/interface.ts b/src/interface.ts
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { CSSMotionProps } from 'rc-motion';
 
+type CollapsibleType = boolean | 'header';
+
 export interface CollapseProps {
   prefixCls?: string;
   activeKey?: React.Key | React.Key[];
@@ -12,7 +14,7 @@ export interface CollapseProps {
   style?: object;
   destroyInactivePanel?: boolean;
   expandIcon?: (props: object) => React.ReactNode;
-  headerCollapsableOnly?: boolean;
+  collapsible?: CollapsibleType;
 }
 
 export interface CollapsePanelProps {
@@ -25,7 +27,6 @@ export interface CollapsePanelProps {
   style?: object;
   isActive?: boolean;
   openMotion?: CSSMotionProps;
-  disabled?: boolean;
   destroyInactivePanel?: boolean;
   accordion?: boolean;
   forceRender?: boolean;
@@ -34,5 +35,5 @@ export interface CollapsePanelProps {
   expandIcon?: (props: object) => React.ReactNode;
   panelKey?: string | number;
   role?: string;
-  headerCollapsableOnly?: boolean;
+  collapsible?: CollapsibleType;
 }
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -127,7 +127,7 @@ describe('collapse', () => {
 
     const element = (
       <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key="1" disabled>
+        <Panel header="collapse 1" key="1" collapsible={false}>
           first
         </Panel>
         <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
@@ -197,7 +197,7 @@ describe('collapse', () => {
     const expandIcon = () => <span>test{'>'}</span>;
     const element = (
       <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key={1} disabled>
+        <Panel header="collapse 1" key={1} collapsible={false}>
           first
         </Panel>
         <Panel header="collapse 2" key={2} extra={<span>ExtraSpan</span>}>
@@ -320,7 +320,7 @@ describe('collapse', () => {
     it('when forceRender is not supplied it should lazy render the panel content', () => {
       renderCollapse(
         <Collapse>
-          <Panel header="collapse 1" key="1" disabled>
+          <Panel header="collapse 1" key="1" collapsible={false}>
             first
           </Panel>
           <Panel header="collapse 2" key="2">
@@ -334,7 +334,7 @@ describe('collapse', () => {
     it('when forceRender is FALSE it should lazy render the panel content', () => {
       renderCollapse(
         <Collapse>
-          <Panel header="collapse 1" key="1" forceRender={false} disabled>
+          <Panel header="collapse 1" key="1" forceRender={false} collapsible={false}>
             first
           </Panel>
           <Panel header="collapse 2" key="2">
@@ -348,7 +348,7 @@ describe('collapse', () => {
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
       renderCollapse(
         <Collapse>
-          <Panel header="collapse 1" key="1" forceRender disabled>
+          <Panel header="collapse 1" key="1" forceRender collapsible={false}>
             first
           </Panel>
           <Panel header="collapse 2" key="2">
@@ -377,7 +377,7 @@ describe('collapse', () => {
           <Panel header="collapse 2" key="2">
             second
           </Panel>
-          <Panel header="collapse 3" key="3" disabled>
+          <Panel header="collapse 3" key="3" collapsible={false}>
             second
           </Panel>
         </Collapse>,
@@ -429,7 +429,7 @@ describe('collapse', () => {
     const element = (
       <Collapse onChange={onChange} expandIcon={expandIcon}>
         <Fragment>
-          <Panel header="collapse 1" key="1" disabled>
+          <Panel header="collapse 1" key="1" collapsible={false}>
             first
           </Panel>
           <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
@@ -475,7 +475,7 @@ describe('collapse', () => {
     expect(collapse.find('.custom-child').getDOMNode().innerHTML).toBe('custom-child');
   });
 
-  describe('headerCollapsableOnly', () => {
+  describe('collapsible', () => {
     it('default', () => {
       const collapse = mount(
         <Collapse>
@@ -485,10 +485,12 @@ describe('collapse', () => {
         </Collapse>,
       );
       expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+      collapse.find('.rc-collapse-header').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
-    it('should work', () => {
+    it('should work when value is header', () => {
       const collapse = mount(
-        <Collapse headerCollapsableOnly>
+        <Collapse collapsible="header">
           <Panel header="collapse 1" key="1">
             first
           </Panel>
@@ -500,5 +502,37 @@ describe('collapse', () => {
       collapse.find('.rc-collapse-header-text').simulate('click');
       expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
     });
+
+    it('should disabled when value is false', () => {
+      const collapse = mount(
+        <Collapse collapsible={false}>
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
+      );
+      expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+
+      expect(collapse.find('.rc-collapse-item-disabled').length).toBe(1);
+
+      collapse.find('.rc-collapse-header').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(0);
+    });
+
+    it('the value of panel should be read first', () => {
+      const collapse = mount(
+        <Collapse collapsible="header">
+          <Panel collapsible={false} header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
+      );
+      expect(collapse.find('.rc-collapse-header-text').exists()).toBeFalsy();
+
+      expect(collapse.find('.rc-collapse-item-disabled').length).toBe(1);
+
+      collapse.find('.rc-collapse-header').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(0);
+    });
   });
 });