diff --git a/dist-modules/Accordion/index.js b/dist-modules/Accordion/index.js index f4ea1c2..c66d251 100644 --- a/dist-modules/Accordion/index.js +++ b/dist-modules/Accordion/index.js @@ -26,6 +26,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var arrayify = function arrayify(obj) { + return [].concat(obj); +}; + var Accordion = function (_Component) { _inherits(Accordion, _Component); @@ -34,9 +38,14 @@ var Accordion = function (_Component) { var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Accordion).call(this, props)); - var activeItems = !Array.isArray(props.activeItems) ? [props.activeItems] : props.activeItems; + var activeItems = arrayify(props.activeItems); + + // can't have multiple active items, just use the first one + if (!props.allowMultiple) activeItems = [activeItems[0]]; - _this.state = { activeItems: activeItems }; + _this.state = { + activeItems: activeItems + }; return _this; } @@ -50,14 +59,6 @@ var Accordion = function (_Component) { _this2.refs['item-' + index].allowOverflow(); } }); - - // allow overflow for absolute positioned elements inside - // the item body, but only after animation is complete - _reactDom2.default.findDOMNode(this).addEventListener('transitionend', function () { - _this2.state.activeItems.forEach(function (index) { - _this2.refs['item-' + index].allowOverflow(); - }); - }); } }, { key: 'handleClick', @@ -92,25 +93,16 @@ var Accordion = function (_Component) { return null; } - if (!Array.isArray(this.props.children)) { - var expanded = !this.props.disabled && this.state.activeItems.indexOf(0) !== -1; - - return _react2.default.cloneElement(this.props.children, { - expanded: expanded, - key: 0, - onClick: this.handleClick.bind(this, 0, this.props.children.props.onClick), - ref: 'item-' + 0 - }); - } - - return this.props.children.map(function (item, index) { - var expanded = _this3.state.activeItems.indexOf(index) !== -1; + var children = arrayify(this.props.children); + return children.map(function (item, index) { + var key = item.props.slug || index; + var expanded = _this3.state.activeItems.indexOf(key) !== -1; return _react2.default.cloneElement(item, { expanded: expanded, - key: index, - onClick: _this3.handleClick.bind(_this3, index), - ref: 'item-' + index + key: key, + onClick: _this3.handleClick.bind(_this3, key), + ref: 'item-' + key }); }); } diff --git a/dist-modules/Accordion/test.js b/dist-modules/Accordion/test.js index 4290e9e..6d9dca6 100644 --- a/dist-modules/Accordion/test.js +++ b/dist-modules/Accordion/test.js @@ -75,19 +75,19 @@ describe('Accordion Test Case', function () { (0, _unexpected2.default)(items[1].props.expanded, 'to be true'); }); - it('should accept multiple selected indexes', function () { + it('should accept a string as active item prop', function () { var tree = _skinDeep2.default.shallowRender(_react2.default.createElement( _index2.default, - { activeItems: [0, 1] }, - _react2.default.createElement(_AccordionItem2.default, { title: 'First' }), - _react2.default.createElement(_AccordionItem2.default, { title: 'Second' }) + { activeItems: 'second' }, + _react2.default.createElement(_AccordionItem2.default, { title: 'First', slug: 'first' }), + _react2.default.createElement(_AccordionItem2.default, { title: 'Second', slug: 'second' }) )); vdom = tree.getRenderOutput(); items = tree.props.children; - (0, _unexpected2.default)(items[0].props.expanded, 'to be true'); + (0, _unexpected2.default)(items[0].props.expanded, 'to be false'); (0, _unexpected2.default)(items[1].props.expanded, 'to be true'); }); @@ -135,6 +135,38 @@ describe('Accordion Test Case', function () { (0, _unexpected2.default)(items[1].props.expanded, 'to be true'); }); + it('should default to first active item if allowMultiple is false', function () { + var tree = _skinDeep2.default.shallowRender(_react2.default.createElement( + _index2.default, + { activeItems: [0, 1] }, + _react2.default.createElement(_AccordionItem2.default, { title: 'First' }), + _react2.default.createElement(_AccordionItem2.default, { title: 'Second' }) + )); + + vdom = tree.getRenderOutput(); + + items = tree.props.children; + + (0, _unexpected2.default)(items[0].props.expanded, 'to be true'); + (0, _unexpected2.default)(items[1].props.expanded, 'to be false'); + }); + + it('should allow multiple selected indexes of different types', function () { + var tree = _skinDeep2.default.shallowRender(_react2.default.createElement( + _index2.default, + { activeItems: [0, 'second'], allowMultiple: true }, + _react2.default.createElement(_AccordionItem2.default, { title: 'First' }), + _react2.default.createElement(_AccordionItem2.default, { title: 'Second', slug: 'second' }) + )); + + vdom = tree.getRenderOutput(); + + items = tree.props.children; + + (0, _unexpected2.default)(items[0].props.expanded, 'to be true'); + (0, _unexpected2.default)(items[1].props.expanded, 'to be true'); + }); + it('should save activeItems on state when allowMultiple is true', function () { var tree = _skinDeep2.default.shallowRender(_react2.default.createElement( _index2.default, diff --git a/dist-modules/AccordionItem/index.js b/dist-modules/AccordionItem/index.js index c9b0066..c24d3aa 100644 --- a/dist-modules/AccordionItem/index.js +++ b/dist-modules/AccordionItem/index.js @@ -65,7 +65,14 @@ var AccordionItem = function (_Component) { }, { key: 'componentDidMount', value: function componentDidMount() { + var _this2 = this; + this.setMaxHeight(); + // allow overflow for absolute positioned elements inside + // the item body, but only after animation is complete + _reactDom2.default.findDOMNode(this).addEventListener('transitionend', function () { + if (_this2.props.expanded) _this2.allowOverflow(); + }); } }, { key: 'componentDidUpdate', @@ -85,7 +92,7 @@ var AccordionItem = function (_Component) { }, { key: 'updateState', value: function updateState(node) { - var _this2 = this; + var _this3 = this; if (!this.props.expanded) { this.setState({ @@ -94,8 +101,8 @@ var AccordionItem = function (_Component) { } setTimeout(function () { - return _this2.setState({ - maxHeight: _this2.props.expanded ? node.scrollHeight + 'px' : 0, + return _this3.setState({ + maxHeight: _this3.props.expanded ? node.scrollHeight + 'px' : 0, overflow: 'hidden' }); }, 0); @@ -119,7 +126,7 @@ var AccordionItem = function (_Component) { }, { key: 'preloadImages', value: function preloadImages(node, images) { - var _this3 = this; + var _this4 = this; var imagesLoaded = 0; @@ -127,7 +134,7 @@ var AccordionItem = function (_Component) { imagesLoaded++; if (imagesLoaded === images.length) { - _this3.updateState(node); + _this4.updateState(node); } }; diff --git a/dist/react-sanfona.js b/dist/react-sanfona.js index a6a6482..33be68d 100644 --- a/dist/react-sanfona.js +++ b/dist/react-sanfona.js @@ -106,6 +106,10 @@ return /******/ (function(modules) { // webpackBootstrap function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + var arrayify = function arrayify(obj) { + return [].concat(obj); + }; + var Accordion = function (_Component) { _inherits(Accordion, _Component); @@ -114,9 +118,14 @@ return /******/ (function(modules) { // webpackBootstrap var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Accordion).call(this, props)); - var activeItems = !Array.isArray(props.activeItems) ? [props.activeItems] : props.activeItems; + var activeItems = arrayify(props.activeItems); - _this.state = { activeItems: activeItems }; + // can't have multiple active items, just use the first one + if (!props.allowMultiple) activeItems = [activeItems[0]]; + + _this.state = { + activeItems: activeItems + }; return _this; } @@ -130,14 +139,6 @@ return /******/ (function(modules) { // webpackBootstrap _this2.refs['item-' + index].allowOverflow(); } }); - - // allow overflow for absolute positioned elements inside - // the item body, but only after animation is complete - _reactDom2.default.findDOMNode(this).addEventListener('transitionend', function () { - _this2.state.activeItems.forEach(function (index) { - _this2.refs['item-' + index].allowOverflow(); - }); - }); } }, { key: 'handleClick', @@ -172,25 +173,16 @@ return /******/ (function(modules) { // webpackBootstrap return null; } - if (!Array.isArray(this.props.children)) { - var expanded = !this.props.disabled && this.state.activeItems.indexOf(0) !== -1; - - return _react2.default.cloneElement(this.props.children, { - expanded: expanded, - key: 0, - onClick: this.handleClick.bind(this, 0, this.props.children.props.onClick), - ref: 'item-' + 0 - }); - } - - return this.props.children.map(function (item, index) { - var expanded = _this3.state.activeItems.indexOf(index) !== -1; + var children = arrayify(this.props.children); + return children.map(function (item, index) { + var key = item.props.slug || index; + var expanded = _this3.state.activeItems.indexOf(key) !== -1; return _react2.default.cloneElement(item, { expanded: expanded, - key: index, - onClick: _this3.handleClick.bind(_this3, index), - ref: 'item-' + index + key: key, + onClick: _this3.handleClick.bind(_this3, key), + ref: 'item-' + key }); }); } @@ -19736,7 +19728,14 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'componentDidMount', value: function componentDidMount() { + var _this2 = this; + this.setMaxHeight(); + // allow overflow for absolute positioned elements inside + // the item body, but only after animation is complete + _reactDom2.default.findDOMNode(this).addEventListener('transitionend', function () { + if (_this2.props.expanded) _this2.allowOverflow(); + }); } }, { key: 'componentDidUpdate', @@ -19756,7 +19755,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'updateState', value: function updateState(node) { - var _this2 = this; + var _this3 = this; if (!this.props.expanded) { this.setState({ @@ -19765,8 +19764,8 @@ return /******/ (function(modules) { // webpackBootstrap } setTimeout(function () { - return _this2.setState({ - maxHeight: _this2.props.expanded ? node.scrollHeight + 'px' : 0, + return _this3.setState({ + maxHeight: _this3.props.expanded ? node.scrollHeight + 'px' : 0, overflow: 'hidden' }); }, 0); @@ -19790,7 +19789,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'preloadImages', value: function preloadImages(node, images) { - var _this3 = this; + var _this4 = this; var imagesLoaded = 0; @@ -19798,7 +19797,7 @@ return /******/ (function(modules) { // webpackBootstrap imagesLoaded++; if (imagesLoaded === images.length) { - _this3.updateState(node); + _this4.updateState(node); } };