diff --git a/CHANGES.md b/CHANGES.md index 0838ed0..34ab0c2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,3 +1,9 @@ +0.0.2 / 2015-08-18 +================== + +* Fix React import on dist file + + 0.0.1 / 2015-06-13 ================== diff --git a/dist-modules/Accordion/index.js b/dist-modules/Accordion/index.js index 6d90840..0c4dc0f 100644 --- a/dist-modules/Accordion/index.js +++ b/dist-modules/Accordion/index.js @@ -18,11 +18,11 @@ var Accordion = (function (_Component) { _Component.call(this, props); - var selectedItem = props.selectedItem || 0; - var state = { selectedItem: selectedItem }; + var selectedIndex = props.selectedIndex || 0; + var state = { selectedIndex: selectedIndex }; if (props.allowMultiple) { - state.activeItems = [selectedItem]; + state.activeItems = [selectedIndex]; } this.state = state; @@ -33,21 +33,21 @@ var Accordion = (function (_Component) { Accordion.prototype.componentDidMount = function componentDidMount() { var _this = this; - if (this.refs['item-' + this.state.selectedItem]) { - this.refs['item-' + this.state.selectedItem].allowOverflow(); + if (this.refs['item-' + this.state.selectedIndex]) { + this.refs['item-' + this.state.selectedIndex].allowOverflow(); } // allow overflow for absolute positioned elements inside // the item body, but only after animation is complete _react2['default'].findDOMNode(this).addEventListener('transitionend', function () { - if (_this.state.selectedItem !== -1) { - _this.refs['item-' + _this.state.selectedItem].allowOverflow(); + if (_this.state.selectedIndex !== -1) { + _this.refs['item-' + _this.state.selectedIndex].allowOverflow(); } }); }; Accordion.prototype.handleClick = function handleClick(index) { - var newState = { selectedItem: index }; + var newState = { selectedIndex: index }; if (this.props.allowMultiple) { // clone active items state array @@ -57,12 +57,12 @@ var Accordion = (function (_Component) { if (position !== -1) { newState.activeItems.splice(position, 1); - newState.selectedItem = -1; + newState.selectedIndex = -1; } else { newState.activeItems.push(index); } - } else if (index === this.state.selectedItem) { - newState.selectedItem = -1; + } else if (index === this.state.selectedIndex) { + newState.selectedIndex = -1; } this.setState(newState); @@ -76,7 +76,7 @@ var Accordion = (function (_Component) { } return this.props.children.map(function (item, index) { - var expanded = _this2.state.selectedItem === index || _this2.props.allowMultiple && _this2.state.activeItems.indexOf(index) !== -1; + var expanded = _this2.state.selectedIndex === index || _this2.props.allowMultiple && _this2.state.activeItems.indexOf(index) !== -1; return _react2['default'].cloneElement(item, { expanded: expanded, @@ -100,8 +100,12 @@ var Accordion = (function (_Component) { exports['default'] = Accordion; +Accordion.defaultProps = { + allowMultiple: false +}; + Accordion.propTypes = { allowMultiple: _react.PropTypes.bool, - selectedItem: _react.PropTypes.number + selectedIndex: _react.PropTypes.number }; module.exports = exports['default']; \ No newline at end of file diff --git a/dist-modules/Accordion/test.js b/dist-modules/Accordion/test.js index ba4a31c..613b0dd 100644 --- a/dist-modules/Accordion/test.js +++ b/dist-modules/Accordion/test.js @@ -18,6 +18,14 @@ var _index = require('./index'); var _index2 = _interopRequireDefault(_index); +var _AccordionItem = require('../AccordionItem'); + +var _AccordionItem2 = _interopRequireDefault(_AccordionItem); + +var _AccordionItemTitle = require('../AccordionItemTitle'); + +var _AccordionItemTitle2 = _interopRequireDefault(_AccordionItemTitle); + var TestUtils = _reactAddons2['default'].addons.TestUtils; describe('Accordion Test Case', function () { @@ -28,4 +36,89 @@ describe('Accordion Test Case', function () { var instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement(_index2['default'], null)); (0, _unexpected2['default'])(instance, 'to be defined'); }); + + describe('selectedIndex', function () { + + it('should select the first item as default', function () { + var instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement( + _index2['default'], + null, + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'First' }), + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'Second' }) + )); + + var items = TestUtils.scryRenderedComponentsWithType(instance, _AccordionItem2['default']); + + (0, _unexpected2['default'])(items[0].props.expanded, 'to be true'); + (0, _unexpected2['default'])(items[1].props.expanded, 'to be false'); + }); + + it('should accept a selectedIndex prop', function () { + var instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement( + _index2['default'], + { selectedIndex: 1 }, + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'First' }), + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'Second' }) + )); + + var items = TestUtils.scryRenderedComponentsWithType(instance, _AccordionItem2['default']); + + (0, _unexpected2['default'])(items[0].props.expanded, 'to be false'); + (0, _unexpected2['default'])(items[1].props.expanded, 'to be true'); + }); + }); + + describe('allowMultiple', function () { + + it('should allow multiple expanded items', function () { + var instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement( + _index2['default'], + { selectedIndex: 1, allowMultiple: true }, + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'First' }), + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'Second' }) + )); + + var items = TestUtils.scryRenderedComponentsWithType(instance, _AccordionItem2['default']); + + var title = TestUtils.findRenderedComponentWithType(items[0], _AccordionItemTitle2['default']); + + (0, _unexpected2['default'])(items[0].props.expanded, 'to be false'); + (0, _unexpected2['default'])(items[1].props.expanded, 'to be true'); + + TestUtils.Simulate.click(_reactAddons2['default'].findDOMNode(title)); + + (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 instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement( + _index2['default'], + { selectedIndex: 1, allowMultiple: true }, + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'First' }), + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'Second' }) + )); + + (0, _unexpected2['default'])(instance.state.activeItems, 'to equal', [1]); + }); + + it('should update activeItems state when clicking on an item', function () { + var instance = TestUtils.renderIntoDocument(_reactAddons2['default'].createElement( + _index2['default'], + { selectedIndex: 1, allowMultiple: true }, + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'First' }), + _reactAddons2['default'].createElement(_AccordionItem2['default'], { title: 'Second' }) + )); + + var items = TestUtils.scryRenderedComponentsWithType(instance, _AccordionItem2['default']); + + var title = TestUtils.findRenderedComponentWithType(items[0], _AccordionItemTitle2['default']); + + (0, _unexpected2['default'])(instance.state.activeItems, 'to equal', [1]); + + TestUtils.Simulate.click(_reactAddons2['default'].findDOMNode(title)); + + (0, _unexpected2['default'])(instance.state.activeItems, 'to equal', [1, 0]); + }); + }); }); \ No newline at end of file diff --git a/dist/react-sanfona.js b/dist/react-sanfona.js index ec6d528..a796520 100644 --- a/dist/react-sanfona.js +++ b/dist/react-sanfona.js @@ -1,12 +1,12 @@ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("react")); + module.exports = factory(require("React")); else if(typeof define === 'function' && define.amd) - define(["react"], factory); + define(["React"], factory); else if(typeof exports === 'object') - exports["ReactSanfona"] = factory(require("react")); + exports["ReactSanfona"] = factory(require("React")); else - root["ReactSanfona"] = factory(root["react"]); + root["ReactSanfona"] = factory(root["React"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache @@ -95,11 +95,11 @@ return /******/ (function(modules) { // webpackBootstrap _Component.call(this, props); - var selectedItem = props.selectedItem || 0; - var state = { selectedItem: selectedItem }; + var selectedIndex = props.selectedIndex || 0; + var state = { selectedIndex: selectedIndex }; if (props.allowMultiple) { - state.activeItems = [selectedItem]; + state.activeItems = [selectedIndex]; } this.state = state; @@ -110,21 +110,21 @@ return /******/ (function(modules) { // webpackBootstrap Accordion.prototype.componentDidMount = function componentDidMount() { var _this = this; - if (this.refs['item-' + this.state.selectedItem]) { - this.refs['item-' + this.state.selectedItem].allowOverflow(); + if (this.refs['item-' + this.state.selectedIndex]) { + this.refs['item-' + this.state.selectedIndex].allowOverflow(); } // allow overflow for absolute positioned elements inside // the item body, but only after animation is complete _react2['default'].findDOMNode(this).addEventListener('transitionend', function () { - if (_this.state.selectedItem !== -1) { - _this.refs['item-' + _this.state.selectedItem].allowOverflow(); + if (_this.state.selectedIndex !== -1) { + _this.refs['item-' + _this.state.selectedIndex].allowOverflow(); } }); }; Accordion.prototype.handleClick = function handleClick(index) { - var newState = { selectedItem: index }; + var newState = { selectedIndex: index }; if (this.props.allowMultiple) { // clone active items state array @@ -134,12 +134,12 @@ return /******/ (function(modules) { // webpackBootstrap if (position !== -1) { newState.activeItems.splice(position, 1); - newState.selectedItem = -1; + newState.selectedIndex = -1; } else { newState.activeItems.push(index); } - } else if (index === this.state.selectedItem) { - newState.selectedItem = -1; + } else if (index === this.state.selectedIndex) { + newState.selectedIndex = -1; } this.setState(newState); @@ -153,7 +153,7 @@ return /******/ (function(modules) { // webpackBootstrap } return this.props.children.map(function (item, index) { - var expanded = _this2.state.selectedItem === index || _this2.props.allowMultiple && _this2.state.activeItems.indexOf(index) !== -1; + var expanded = _this2.state.selectedIndex === index || _this2.props.allowMultiple && _this2.state.activeItems.indexOf(index) !== -1; return _react2['default'].cloneElement(item, { expanded: expanded, @@ -177,9 +177,13 @@ return /******/ (function(modules) { // webpackBootstrap exports['default'] = Accordion; + Accordion.defaultProps = { + allowMultiple: false + }; + Accordion.propTypes = { allowMultiple: _react.PropTypes.bool, - selectedItem: _react.PropTypes.number + selectedIndex: _react.PropTypes.number }; module.exports = exports['default']; diff --git a/package.json b/package.json index 1b22cc3..081cad8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-sanfona", - "version": "0.0.1", + "version": "0.0.2", "description": "React accessible accordion component", "main": "./dist-modules/index.js", "scripts": {