Skip to content

Commit

Permalink
Merge pull request #394 from zackseuberling/convert-component-will-re…
Browse files Browse the repository at this point in the history 
…ceive-props

remove componentWillReceiveProps
  • Loading branch information
@leandrowd
leandrowd authored Apr 5, 2020
2 parents d3efc75 + e89b10e commit 1fe4e96
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 126 deletions.
136 changes: 81 additions & 55 deletions lib/components/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,38 +427,32 @@ var Carousel = function (_Component) {

this.setupCarousel();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var _this2 = this;

if (nextProps.selectedItem !== this.state.selectedItem) {
this.updateSizes();
this.moveTo(nextProps.selectedItem);
}

if (nextProps.autoPlay !== this.state.autoPlay) {
this.setState({
autoPlay: nextProps.autoPlay
}, function () {
if (_this2.state.autoPlay) {
_this2.setupAutoPlay();
} else {
_this2.destroyAutoPlay();
}
});
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
if (!prevProps.children && this.props.children && !this.state.initialized) {
this.setupCarousel();
}

if (prevState.swiping && !this.state.swiping) {
// We stopped swiping, ensure we are heading to the new/current slide and not stuck
this.resetPosition();
}

if (prevProps.selectedItem !== this.props.selectedItem) {
this.updateSizes();
this.moveTo(this.props.selectedItem);
}

if (prevProps.autoPlay !== this.props.autoPlay) {
if (this.props.autoPlay) {
this.setupAutoPlay();
} else {
this.destroyAutoPlay();
}

this.setState({ autoPlay: this.props.autoPlay });
}
}
}, {
key: 'componentWillUnmount',
Expand Down Expand Up @@ -521,28 +515,28 @@ var Carousel = function (_Component) {
value: function bindEvents() {
// as the widths are calculated, we need to resize
// the carousel when the window is resized
window.addEventListener("resize", this.updateSizes);
window.addEventListener('resize', this.updateSizes);
// issue #2 - image loading smaller
window.addEventListener("DOMContentLoaded", this.updateSizes);
window.addEventListener('DOMContentLoaded', this.updateSizes);

if (this.props.useKeyboardArrows) {
document.addEventListener("keydown", this.navigateWithKeyboard);
document.addEventListener('keydown', this.navigateWithKeyboard);
}
}
}, {
key: 'unbindEvents',
value: function unbindEvents() {
// removing listeners
window.removeEventListener("resize", this.updateSizes);
window.removeEventListener("DOMContentLoaded", this.updateSizes);
window.removeEventListener('resize', this.updateSizes);
window.removeEventListener('DOMContentLoaded', this.updateSizes);

var initialImage = this.getInitialImage();
if (initialImage) {
initialImage.removeEventListener("load", this.setMountState);
initialImage.removeEventListener('load', this.setMountState);
}

if (this.props.useKeyboardArrows) {
document.removeEventListener("keydown", this.navigateWithKeyboard);
document.removeEventListener('keydown', this.navigateWithKeyboard);
}
}
}, {
Expand Down Expand Up @@ -571,21 +565,21 @@ var Carousel = function (_Component) {
}, {
key: 'renderItems',
value: function renderItems(isClone) {
var _this3 = this;
var _this2 = this;

return _react.Children.map(this.props.children, function (item, index) {
var slideProps = {
ref: function ref(e) {
return _this3.setItemsRef(e, index);
return _this2.setItemsRef(e, index);
},
key: 'itemKey' + index + (isClone ? 'clone' : ''),
className: _cssClasses2.default.ITEM(true, index === _this3.state.selectedItem),
onClick: _this3.handleClickItem.bind(_this3, index, item)
className: _cssClasses2.default.ITEM(true, index === _this2.state.selectedItem),
onClick: _this2.handleClickItem.bind(_this2, index, item)
};

if (_this3.props.centerMode && _this3.props.axis === 'horizontal') {
if (_this2.props.centerMode && _this2.props.axis === 'horizontal') {
slideProps.style = {
minWidth: _this3.props.centerSlidePercentage + '%'
minWidth: _this2.props.centerSlidePercentage + '%'
};
}

Expand All @@ -599,7 +593,7 @@ var Carousel = function (_Component) {
}, {
key: 'renderControls',
value: function renderControls() {
var _this4 = this;
var _this3 = this;

if (!this.props.showIndicators) {
return null;
Expand All @@ -609,7 +603,16 @@ var Carousel = function (_Component) {
'ul',
{ className: 'control-dots' },
_react.Children.map(this.props.children, function (item, index) {
return _react2.default.createElement('li', { className: _cssClasses2.default.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, onKeyDown: _this4.changeItem, value: index, key: index, role: 'button', tabIndex: 0, 'aria-label': _this4.props.labels.item + ' ' + (index + 1) });
return _react2.default.createElement('li', {
className: _cssClasses2.default.DOT(index === _this3.state.selectedItem),
onClick: _this3.changeItem,
onKeyDown: _this3.changeItem,
value: index,
key: index,
role: 'button',
tabIndex: 0,
'aria-label': _this3.props.labels.item + ' ' + (index + 1)
});
})
);
}
Expand All @@ -635,7 +638,14 @@ var Carousel = function (_Component) {

return _react2.default.createElement(
_Thumbs2.default,
{ ref: this.setThumbsRef, onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth, labels: this.props.labels },
{
ref: this.setThumbsRef,
onSelectItem: this.handleClickThumb,
selectedItem: this.state.selectedItem,
transitionTime: this.props.transitionTime,
thumbWidth: this.props.thumbWidth,
labels: this.props.labels
},
this.props.children
);
}
Expand Down Expand Up @@ -665,22 +675,22 @@ var Carousel = function (_Component) {
var transitionTime = this.props.transitionTime + 'ms';

itemListStyles = {
'WebkitTransform': transformProp,
'MozTransform': transformProp,
'MsTransform': transformProp,
'OTransform': transformProp,
'transform': transformProp,
'msTransform': transformProp
WebkitTransform: transformProp,
MozTransform: transformProp,
MsTransform: transformProp,
OTransform: transformProp,
transform: transformProp,
msTransform: transformProp
};

if (!this.state.swiping) {
itemListStyles = _extends({}, itemListStyles, {
'WebkitTransitionDuration': transitionTime,
'MozTransitionDuration': transitionTime,
'MsTransitionDuration': transitionTime,
'OTransitionDuration': transitionTime,
'transitionDuration': transitionTime,
'msTransitionDuration': transitionTime
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
MsTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime
});
}

Expand Down Expand Up @@ -721,17 +731,27 @@ var Carousel = function (_Component) {
_react2.default.createElement(
'div',
{ className: _cssClasses2.default.CAROUSEL(true), style: { width: this.props.width } },
_react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.leftArrow, className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.onClickPrev }),
_react2.default.createElement('button', {
type: 'button',
'aria-label': this.props.labels.leftArrow,
className: _cssClasses2.default.ARROW_PREV(!hasPrev),
onClick: this.onClickPrev
}),
_react2.default.createElement(
'div',
{ className: _cssClasses2.default.WRAPPER(true, this.props.axis), style: containerStyles, ref: this.setItemsWrapperRef },
{
className: _cssClasses2.default.WRAPPER(true, this.props.axis),
style: containerStyles,
ref: this.setItemsWrapperRef
},
this.props.swipeable ? _react2.default.createElement(
_reactEasySwipe2.default,
_extends({
tagName: 'ul',
ref: this.setListRef
}, swiperProps, {
allowMouseEvents: this.props.emulateTouch }),
allowMouseEvents: this.props.emulateTouch
}),
this.props.infiniteLoop && lastClone,
this.renderItems(),
this.props.infiniteLoop && firstClone
Expand All @@ -740,13 +760,19 @@ var Carousel = function (_Component) {
{
className: _cssClasses2.default.SLIDER(true, this.state.swiping),
ref: this.setListRef,
style: itemListStyles },
style: itemListStyles
},
this.props.infiniteLoop && lastClone,
this.renderItems(),
this.props.infiniteLoop && firstClone
)
),
_react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.rightArrow, className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.onClickNext }),
_react2.default.createElement('button', {
type: 'button',
'aria-label': this.props.labels.rightArrow,
className: _cssClasses2.default.ARROW_NEXT(!hasNext),
onClick: this.onClickNext
}),
this.renderControls(),
this.renderStatus()
),
Expand Down
56 changes: 34 additions & 22 deletions lib/components/Thumbs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,9 @@ var Thumbs = function (_Component) {
value: function setupThumbs() {
// as the widths are calculated, we need to resize
// the carousel when the window is resized
window.addEventListener("resize", this.updateSizes);
window.addEventListener('resize', this.updateSizes);
// issue #2 - image loading smaller
window.addEventListener("DOMContentLoaded", this.updateSizes);
window.addEventListener('DOMContentLoaded', this.updateSizes);

// when the component is rendered we need to calculate
// the container size to adjust the responsive behaviour
Expand All @@ -114,8 +114,8 @@ var Thumbs = function (_Component) {
key: 'destroyThumbs',
value: function destroyThumbs() {
// removing listeners
window.removeEventListener("resize", this.updateSizes);
window.removeEventListener("DOMContentLoaded", this.updateSizes);
window.removeEventListener('resize', this.updateSizes);
window.removeEventListener('DOMContentLoaded', this.updateSizes);
}
}, {
key: 'getImages',
Expand All @@ -124,9 +124,9 @@ var Thumbs = function (_Component) {
var img = item;

// if the item is not an image, try to find the first image in the item's children.
if (item.type !== "img") {
if (item.type !== 'img') {
img = _react.Children.toArray(item.props.children).filter(function (children) {
return children.type === "img";
return children.type === 'img';
})[0];
}

Expand Down Expand Up @@ -219,18 +219,18 @@ var Thumbs = function (_Component) {
var transitionTime = this.props.transitionTime + 'ms';

itemListStyles = {
'WebkitTransform': transformProp,
'MozTransform': transformProp,
'MsTransform': transformProp,
'OTransform': transformProp,
'transform': transformProp,
'msTransform': transformProp,
'WebkitTransitionDuration': transitionTime,
'MozTransitionDuration': transitionTime,
'MsTransitionDuration': transitionTime,
'OTransitionDuration': transitionTime,
'transitionDuration': transitionTime,
'msTransitionDuration': transitionTime
WebkitTransform: transformProp,
MozTransform: transformProp,
MsTransform: transformProp,
OTransform: transformProp,
transform: transformProp,
msTransform: transformProp,
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
MsTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime
};

return _react2.default.createElement(
Expand All @@ -239,10 +239,16 @@ var Thumbs = function (_Component) {
_react2.default.createElement(
'div',
{ className: _cssClasses2.default.WRAPPER(false), ref: this.setItemsWrapperRef },
_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight, 'aria-label': this.props.labels.leftArrow }),
_react2.default.createElement('button', {
type: 'button',
className: _cssClasses2.default.ARROW_PREV(!hasPrev),
onClick: this.slideRight,
'aria-label': this.props.labels.leftArrow
}),
_react2.default.createElement(
_reactEasySwipe2.default,
{ tagName: 'ul',
{
tagName: 'ul',
selectedItem: this.state.selectedItem,
className: _cssClasses2.default.SLIDER(false, this.state.swiping),
onSwipeLeft: this.slideLeft,
Expand All @@ -251,10 +257,16 @@ var Thumbs = function (_Component) {
onSwipeStart: this.onSwipeStart,
onSwipeEnd: this.onSwipeEnd,
style: itemListStyles,
ref: this.setItemsListRef },
ref: this.setItemsListRef
},
this.renderItems()
),
_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.slideLeft, 'aria-label': this.props.labels.rightArrow })
_react2.default.createElement('button', {
type: 'button',
className: _cssClasses2.default.ARROW_NEXT(!hasNext),
onClick: this.slideLeft,
'aria-label': this.props.labels.rightArrow
})
)
);
}
Expand Down
Loading

0 comments on commit 1fe4e96

Please sign in to comment.