diff --git a/README.md b/README.md index 82615976..b82bfa79 100644 --- a/README.md +++ b/README.md @@ -162,6 +162,12 @@ If `accordion` is true, only one panel can be open. Opening another panel will custom style + + disabled + boolean + false + whether the panel is collapsible + diff --git a/assets/index.less b/assets/index.less index a9b1a640..b9789a11 100644 --- a/assets/index.less +++ b/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 @@ } } } - diff --git a/examples/simple.js b/examples/simple.js index 88e8820c..a16c83d6 100644 --- a/examples/simple.js +++ b/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( - +

{text.repeat(this.state.time)}

); diff --git a/package.json b/package.json index f4d8ef08..3f355ec5 100644 --- a/package.json +++ b/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": [ diff --git a/src/Collapse.jsx b/src/Collapse.jsx index 4d1abe84..808cac40 100644 --- a/src/Collapse.jsx +++ b/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)); diff --git a/src/Panel.jsx b/src/Panel.jsx index 841c49d9..ad4a34e7 100644 --- a/src/Panel.jsx +++ b/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,6 +22,7 @@ class CollapsePanel extends Component { isActive, showArrow, destroyInactivePanel, + disabled, } = this.props; const headerCls = classNames(`${prefixCls}-header`, { [headerClass]: headerClass, @@ -27,6 +30,7 @@ class CollapsePanel extends Component { const itemCls = classNames({ [`${prefixCls}-item`]: true, [`${prefixCls}-item-active`]: isActive, + [`${prefixCls}-item-disabled`]: disabled, }, className); return (
@@ -77,6 +81,7 @@ CollapsePanel.propTypes = { onItemClick: PropTypes.func, style: PropTypes.object, destroyInactivePanel: PropTypes.bool, + disabled: PropTypes.bool, }; CollapsePanel.defaultProps = { diff --git a/tests/index.js b/tests/index.js index 7fc9bb39..25dfa84b 100644 --- a/tests/index.js +++ b/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( - first + first second third , 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', () => {