Feature disabled

README.md

@@ -162,6 +162,12 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
         <th></th>
         <td>custom style</td>
       </tr>
+      <tr>
+        <td>disabled</td>
+        <td>boolean</td>
+        <th>false</th>
+        <td>whether the panel is collapsible</td>
+      </tr>
     </tbody>
 </table>
 

assets/index.less

@@ -23,7 +23,7 @@
 }
 
 .@{prefixCls} {
-  background-color: #f4f4f4;
+  background-color: #f7f7f7;
   border-radius: 3px;
   border: @borderStyle;
 
@@ -54,6 +54,12 @@
     }
   }
 
+  & > &-item-disabled > .@{prefixCls}-header {
+    cursor: not-allowed;
+    color: #999;
+    background-color: #f3f3f3;
+  }
+
   &-content {
     overflow: hidden;
     color: @text-color;
@@ -86,4 +92,3 @@
     }
   }
 }
-

examples/simple.js

@@ -40,7 +40,7 @@ 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}>
+        <Panel header={`This is panel header ${key}`} key={key} disabled>
           <p>{text.repeat(this.state.time)}</p>
         </Panel>
       );

package.json

@@ -47,7 +47,6 @@
     "rc-tools": "5.x",
     "react": "15.x",
     "react-dom": "15.x",
-    "react-addons-test-utils": "15.x",
     "string.prototype.repeat": "^0.2.0"
   },
   "pre-commit": [

src/Collapse.jsx

@@ -42,23 +42,21 @@ class Collapse extends Component {
   }
 
   onClickItem(key) {
-    return () => {
-      let activeKey = this.state.activeKey;
-      if (this.props.accordion) {
-        activeKey = activeKey[0] === key ? [] : [key];
+    let activeKey = this.state.activeKey;
+    if (this.props.accordion) {
+      activeKey = activeKey[0] === key ? [] : [key];
+    } else {
+      activeKey = [...activeKey];
+      const index = activeKey.indexOf(key);
+      const isActive = index > -1;
+      if (isActive) {
+        // remove active state
+        activeKey.splice(index, 1);
       } else {
-        activeKey = [...activeKey];
-        const index = activeKey.indexOf(key);
-        const isActive = index > -1;
-        if (isActive) {
-          // remove active state
-          activeKey.splice(index, 1);
-        } else {
-          activeKey.push(key);
-        }
+        activeKey.push(key);
       }
-      this.setActiveKey(activeKey);
-    };
+    }
+    this.setActiveKey(activeKey);
   }
 
   getItems() {
@@ -70,8 +68,7 @@ class Collapse extends Component {
       if (!child) return;
       // If there is no key provide, use the panel order as default key
       const key = child.key || String(index);
-      const header = child.props.header;
-      const headerClass = child.props.headerClass;
+      const { header, headerClass, disabled } = child.props;
       let isActive = false;
       if (accordion) {
         isActive = activeKey[0] === key;
@@ -88,7 +85,7 @@ class Collapse extends Component {
         destroyInactivePanel,
         openAnimation: this.state.openAnimation,
         children: child.props.children,
-        onItemClick: this.onClickItem(key).bind(this),
+        onItemClick: disabled ? null : () => this.onClickItem(key),
       };
 
       newChildren.push(React.cloneElement(child, props));

src/Panel.jsx

@@ -6,7 +6,9 @@ import Animate from 'rc-animate';
 
 class CollapsePanel extends Component {
   handleItemClick() {
-    this.props.onItemClick();
+    if (this.props.onItemClick) {
+      this.props.onItemClick();
+    }
   }
 
   render() {
@@ -20,13 +22,15 @@ class CollapsePanel extends Component {
       isActive,
       showArrow,
       destroyInactivePanel,
+      disabled,
     } = this.props;
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
     });
     const itemCls = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-active`]: isActive,
+      [`${prefixCls}-item-disabled`]: disabled,
     }, className);
     return (
       <div className={itemCls} style={style}>
@@ -77,6 +81,7 @@ CollapsePanel.propTypes = {
   onItemClick: PropTypes.func,
   style: PropTypes.object,
   destroyInactivePanel: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 CollapsePanel.defaultProps = {

tests/index.js

@@ -6,7 +6,7 @@ const Collapse = require('../index');
 const Panel = Collapse.Panel;
 const React = require('react');
 const ReactDOM = require('react-dom');
-const TestUtils = require('react-addons-test-utils');
+const TestUtils = require('react-dom/test-utils');
 const Simulate = TestUtils.Simulate;
 const findDOMNode = TestUtils.scryRenderedDOMComponentsWithClass;
 
@@ -29,7 +29,7 @@ describe('collapse', () => {
 
       ReactDOM.render(
         <Collapse onChange={onChange}>
-          <Panel header="collapse 1" key="1">first</Panel>
+          <Panel header="collapse 1" key="1" disabled>first</Panel>
           <Panel header="collapse 2" key="2">second</Panel>
           <Panel header="collapse 3" key="3" className="important">third</Panel>
         </Collapse>, node, function init() {
@@ -83,6 +83,15 @@ describe('collapse', () => {
         }, 500);
       }, 500);
     });
+
+    it('click should not toggle disabled panel state', (done) => {
+      const header = findDOMNode(collapse, 'rc-collapse-header')[0];
+      Simulate.click(header);
+      setTimeout(() => {
+        expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
+        done();
+      }, 500);
+    });
   });
 
   describe('destroyInactivePanel', () => {