Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove componentWillReceiveProps #394

Merged
merged 6 commits into from
Apr 5, 2020
Merged

remove componentWillReceiveProps #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b98f3d1
convert componentWillReceiveProps to getDerivedStateFromProps
Jan 29, 2020
aad1724
move conditional state updates to componentDidUpdate
zackseuberling Feb 9, 2020
15b5eec
move all state logic to componentDidUpdate
zackseuberling Feb 9, 2020
f05daab
update external control story to showcase autoplay togglging
zackseuberling Feb 9, 2020
9ed0470
format code
zackseuberling Feb 9, 2020
e89b10e
chore: build project
Feb 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 81 additions & 55 deletions lib/components/Carousel.js
View file
Open in desktop
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
Open in desktop
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