Skip to content

Commit

Permalink
v0.0.12 proper
Browse files Browse the repository at this point in the history
  • Loading branch information
@psimyn
psimyn committed May 8, 2016
1 parent c14797a commit 8426c27
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 67 deletions.
44 changes: 18 additions & 26 deletions dist-modules/Accordion/index.js
View file
Expand Up @@ -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);

Expand All @@ -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;
}

Expand All @@ -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',
Expand Down Expand Up @@ -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
});
});
}
Expand Down
42 changes: 37 additions & 5 deletions dist-modules/Accordion/test.js
View file
Expand Up @@ -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');
});

Expand Down Expand Up @@ -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,
Expand Down
17 changes: 12 additions & 5 deletions dist-modules/AccordionItem/index.js
View file
Expand Up @@ -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',
Expand All @@ -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({
Expand All @@ -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);
Expand All @@ -119,15 +126,15 @@ var AccordionItem = function (_Component) {
}, {
key: 'preloadImages',
value: function preloadImages(node, images) {
var _this3 = this;
var _this4 = this;

var imagesLoaded = 0;

var imgLoaded = function imgLoaded() {
imagesLoaded++;

if (imagesLoaded === images.length) {
_this3.updateState(node);
_this4.updateState(node);
}
};

Expand Down
61 changes: 30 additions & 31 deletions dist/react-sanfona.js
View file
Expand Up @@ -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);

Expand All @@ -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;
}

Expand All @@ -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',
Expand Down Expand Up @@ -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
});
});
}
Expand Down Expand Up @@ -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',
Expand All @@ -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({
Expand All @@ -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);
Expand All @@ -19790,15 +19789,15 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'preloadImages',
value: function preloadImages(node, images) {
var _this3 = this;
var _this4 = this;

var imagesLoaded = 0;

var imgLoaded = function imgLoaded() {
imagesLoaded++;

if (imagesLoaded === images.length) {
_this3.updateState(node);
_this4.updateState(node);
}
};

Expand Down

0 comments on commit 8426c27

Please sign in to comment.