react-responsive-carousel
Advanced tools
Comparing version 3.0.13 to 3.0.14
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
@@ -29,3 +31,3 @@ | ||
getDefaultProps() { | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
@@ -40,4 +42,3 @@ showIndicators: true, | ||
}, | ||
getInitialState() { | ||
getInitialState: function getInitialState() { | ||
return { | ||
@@ -49,4 +50,3 @@ // index of the image to be shown. | ||
}, | ||
componentWillReceiveProps(props, state) { | ||
componentWillReceiveProps: function componentWillReceiveProps(props, state) { | ||
if (props.selectedItem !== this.state.selectedItem) { | ||
@@ -59,4 +59,3 @@ this.updateSizes(); | ||
}, | ||
componentWillMount() { | ||
componentWillMount: function componentWillMount() { | ||
// as the widths are calculated, we need to resize | ||
@@ -68,4 +67,3 @@ // the carousel when the window is resized | ||
}, | ||
componentWillUnmount() { | ||
componentWillUnmount: function componentWillUnmount() { | ||
// removing listeners | ||
@@ -75,4 +73,3 @@ window.removeEventListener("resize", this.updateSizes); | ||
}, | ||
componentDidMount(nextProps) { | ||
componentDidMount: function componentDidMount(nextProps) { | ||
// when the component is rendered we need to calculate | ||
@@ -87,4 +84,3 @@ // the container size to adjust the responsive behaviour | ||
}, | ||
updateSizes() { | ||
updateSizes: function updateSizes() { | ||
var firstItem = ReactDOM.findDOMNode(this.item0); | ||
@@ -94,4 +90,3 @@ this.itemSize = this.isHorizontal ? firstItem.clientWidth : firstItem.clientHeight; | ||
}, | ||
setMountState() { | ||
setMountState: function setMountState() { | ||
this.setState({ hasMount: true }); | ||
@@ -101,4 +96,3 @@ this.updateSizes(); | ||
}, | ||
handleClickItem(index, item) { | ||
handleClickItem: function handleClickItem(index, item) { | ||
var handler = this.props.onClickItem; | ||
@@ -116,4 +110,3 @@ | ||
}, | ||
handleOnChange(index, item) { | ||
handleOnChange: function handleOnChange(index, item) { | ||
var handler = this.props.onChange; | ||
@@ -125,4 +118,3 @@ | ||
}, | ||
handleClickThumb(index, item) { | ||
handleClickThumb: function handleClickThumb(index, item) { | ||
var handler = this.props.onClickThumb; | ||
@@ -138,4 +130,3 @@ | ||
}, | ||
onSwipeStart() { | ||
onSwipeStart: function onSwipeStart() { | ||
this.setState({ | ||
@@ -145,4 +136,3 @@ swiping: true | ||
}, | ||
onSwipeEnd() { | ||
onSwipeEnd: function onSwipeEnd() { | ||
this.setState({ | ||
@@ -152,4 +142,5 @@ swiping: false | ||
}, | ||
onSwipeMove: function onSwipeMove(delta) { | ||
var _this = this; | ||
onSwipeMove(delta) { | ||
var list = ReactDOM.findDOMNode(this.itemList); | ||
@@ -177,16 +168,13 @@ var isHorizontal = this.props.axis === 'horizontal'; | ||
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(prop => { | ||
list.style[prop] = CSSTranslate(position, this.props.axis); | ||
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) { | ||
list.style[prop] = CSSTranslate(position, _this.props.axis); | ||
}); | ||
}, | ||
decrement(positions) { | ||
decrement: function decrement(positions) { | ||
this.moveTo(this.state.selectedItem - (typeof positions === 'Number' ? positions : 1)); | ||
}, | ||
increment(positions) { | ||
increment: function increment(positions) { | ||
this.moveTo(this.state.selectedItem + (typeof positions === 'Number' ? positions : 1)); | ||
}, | ||
moveTo(position) { | ||
moveTo: function moveTo(position) { | ||
// position can't be lower than 0 | ||
@@ -202,4 +190,3 @@ position = position < 0 ? 0 : position; | ||
}, | ||
changeItem(e) { | ||
changeItem: function changeItem(e) { | ||
var newIndex = e.target.value; | ||
@@ -211,17 +198,19 @@ | ||
}, | ||
selectItem(state) { | ||
selectItem: function selectItem(state) { | ||
this.setState(state); | ||
this.handleOnChange(state.selectedItem, this.props.children[state.selectedItem]); | ||
}, | ||
renderItems: function renderItems() { | ||
var _this2 = this; | ||
renderItems() { | ||
return React.Children.map(this.props.children, (item, index) => { | ||
var hasMount = this.state.hasMount; | ||
var itemClass = klass.ITEM(true, index === this.state.selectedItem); | ||
return React.Children.map(this.props.children, function (item, index) { | ||
var hasMount = _this2.state.hasMount; | ||
var itemClass = klass.ITEM(true, index === _this2.state.selectedItem); | ||
return React.createElement( | ||
'li', | ||
{ ref: node => this["item" + index] = node, key: "itemKey" + index, className: itemClass, | ||
onClick: this.handleClickItem.bind(this, index, item) }, | ||
{ ref: function ref(node) { | ||
return _this2["item" + index] = node; | ||
}, key: "itemKey" + index, className: itemClass, | ||
onClick: _this2.handleClickItem.bind(_this2, index, item) }, | ||
item | ||
@@ -231,4 +220,5 @@ ); | ||
}, | ||
renderControls: function renderControls() { | ||
var _this3 = this; | ||
renderControls() { | ||
if (!this.props.showIndicators) { | ||
@@ -241,9 +231,8 @@ return null; | ||
{ className: 'control-dots' }, | ||
React.Children.map(this.props.children, (item, index) => { | ||
return React.createElement('li', { className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index, key: index }); | ||
React.Children.map(this.props.children, function (item, index) { | ||
return React.createElement('li', { className: klass.DOT(index === _this3.state.selectedItem), onClick: _this3.changeItem, value: index, key: index }); | ||
}) | ||
); | ||
}, | ||
renderStatus() { | ||
renderStatus: function renderStatus() { | ||
if (!this.props.showStatus) { | ||
@@ -261,4 +250,3 @@ return null; | ||
}, | ||
renderThumbs() { | ||
renderThumbs: function renderThumbs() { | ||
if (!this.props.showThumbs) { | ||
@@ -274,4 +262,5 @@ return null; | ||
}, | ||
render: function render() { | ||
var _this4 = this; | ||
render() { | ||
var itemsLength = this.props.children.length; | ||
@@ -313,3 +302,5 @@ | ||
style: itemListStyles, | ||
ref: node => this.itemList = node | ||
ref: function ref(node) { | ||
return _this4.itemList = node; | ||
} | ||
}; | ||
@@ -343,3 +334,5 @@ | ||
'div', | ||
{ className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: node => this.itemsWrapper = node }, | ||
{ className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: function ref(node) { | ||
return _this4.itemsWrapper = node; | ||
} }, | ||
React.createElement( | ||
@@ -346,0 +339,0 @@ Swipe, |
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
var React = require('react'); | ||
@@ -21,3 +23,3 @@ var ReactDOM = require('react-dom'); | ||
getDefaultProps() { | ||
getDefaultProps: function getDefaultProps() { | ||
return { | ||
@@ -28,4 +30,3 @@ selectedItem: 0, | ||
}, | ||
getInitialState() { | ||
getInitialState: function getInitialState() { | ||
return { | ||
@@ -37,4 +38,3 @@ selectedItem: this.props.selectedItem, | ||
}, | ||
componentWillReceiveProps(props, state) { | ||
componentWillReceiveProps: function componentWillReceiveProps(props, state) { | ||
if (props.selectedItem !== this.state.selectedItem) { | ||
@@ -47,4 +47,3 @@ this.setState({ | ||
}, | ||
componentWillMount() { | ||
componentWillMount: function componentWillMount() { | ||
// as the widths are calculated, we need to resize | ||
@@ -56,4 +55,3 @@ // the carousel when the window is resized | ||
}, | ||
componentWillUnmount() { | ||
componentWillUnmount: function componentWillUnmount() { | ||
// removing listeners | ||
@@ -63,4 +61,3 @@ window.removeEventListener("resize", this.updateStatics); | ||
}, | ||
componentDidMount(nextProps) { | ||
componentDidMount: function componentDidMount(nextProps) { | ||
// when the component is rendered we need to calculate | ||
@@ -73,4 +70,3 @@ // the container size to adjust the responsive behaviour | ||
}, | ||
updateStatics() { | ||
updateStatics: function updateStatics() { | ||
var total = this.props.children.length; | ||
@@ -83,8 +79,6 @@ this.wrapperSize = this.itemsWrapper.clientWidth; | ||
}, | ||
setMountState() { | ||
setMountState: function setMountState() { | ||
this.setState({ hasMount: true }); | ||
}, | ||
handleClickItem(index, item) { | ||
handleClickItem: function handleClickItem(index, item) { | ||
var handler = this.props.onSelectItem; | ||
@@ -96,4 +90,3 @@ | ||
}, | ||
onSwipeStart() { | ||
onSwipeStart: function onSwipeStart() { | ||
this.setState({ | ||
@@ -103,4 +96,3 @@ swiping: true | ||
}, | ||
onSwipeEnd() { | ||
onSwipeEnd: function onSwipeEnd() { | ||
this.setState({ | ||
@@ -110,4 +102,5 @@ swiping: false | ||
}, | ||
onSwipeMove: function onSwipeMove(deltaX) { | ||
var _this = this; | ||
onSwipeMove(deltaX) { | ||
var leftBoundry = 0; | ||
@@ -134,16 +127,13 @@ var list = ReactDOM.findDOMNode(this.itemList); | ||
// if 3d isn't available we will use left to move | ||
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(prop => { | ||
list.style[prop] = CSSTranslate(position, this.props.axis); | ||
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) { | ||
list.style[prop] = CSSTranslate(position, _this.props.axis); | ||
}); | ||
}, | ||
slideRight(positions) { | ||
slideRight: function slideRight(positions) { | ||
this.moveTo(this.state.firstItem - (typeof positions === 'Number' ? positions : 1)); | ||
}, | ||
slideLeft(positions) { | ||
slideLeft: function slideLeft(positions) { | ||
this.moveTo(this.state.firstItem + (typeof positions === 'Number' ? positions : 1)); | ||
}, | ||
moveTo(position) { | ||
moveTo: function moveTo(position) { | ||
// position can't be lower than 0 | ||
@@ -160,4 +150,3 @@ position = position < 0 ? 0 : position; | ||
}, | ||
getFirstItem(selectedItem) { | ||
getFirstItem: function getFirstItem(selectedItem) { | ||
if (!this.showArrows) { | ||
@@ -183,6 +172,7 @@ return 0; | ||
}, | ||
renderItems: function renderItems() { | ||
var _this2 = this; | ||
renderItems() { | ||
return React.Children.map(this.props.children, (item, index) => { | ||
var itemClass = klass.ITEM(false, index === this.state.selectedItem && this.state.hasMount); | ||
return React.Children.map(this.props.children, function (item, index) { | ||
var itemClass = klass.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount); | ||
@@ -192,3 +182,5 @@ var img = item; | ||
if (item.type !== "img") { | ||
img = item.props.children.filter(children => children.type === "img")[0]; | ||
img = item.props.children.filter(function (children) { | ||
return children.type === "img"; | ||
})[0]; | ||
} | ||
@@ -202,4 +194,6 @@ | ||
'li', | ||
{ key: index, ref: node => this["thumb" + index] = node, className: itemClass, | ||
onClick: this.handleClickItem.bind(this, index, item) }, | ||
{ key: index, ref: function ref(node) { | ||
return _this2["thumb" + index] = node; | ||
}, className: itemClass, | ||
onClick: _this2.handleClickItem.bind(_this2, index, item) }, | ||
img | ||
@@ -209,4 +203,5 @@ ); | ||
}, | ||
render: function render() { | ||
var _this3 = this; | ||
render() { | ||
if (this.props.children.length === 0) { | ||
@@ -241,3 +236,5 @@ return null; | ||
'div', | ||
{ className: klass.WRAPPER(false), ref: node => this.itemsWrapper = node }, | ||
{ className: klass.WRAPPER(false), ref: function ref(node) { | ||
return _this3.itemsWrapper = node; | ||
} }, | ||
React.createElement('button', { type: 'button', className: klass.ARROW_PREV(!hasPrev), onClick: this.slideRight }), | ||
@@ -255,3 +252,5 @@ React.createElement( | ||
style: itemListStyles, | ||
ref: node => this.itemList = node }, | ||
ref: function ref(node) { | ||
return _this3.itemList = node; | ||
} }, | ||
this.renderItems() | ||
@@ -258,0 +257,0 @@ ), |
@@ -0,5 +1,7 @@ | ||
"use strict"; | ||
var classNames = require('classnames'); | ||
module.exports = { | ||
CAROUSEL(isSlider) { | ||
CAROUSEL: function CAROUSEL(isSlider) { | ||
return classNames({ | ||
@@ -10,4 +12,3 @@ "carousel": true, | ||
}, | ||
WRAPPER(isSlider, axis) { | ||
WRAPPER: function WRAPPER(isSlider, axis) { | ||
return classNames({ | ||
@@ -20,4 +21,3 @@ "thumbs-wrapper": !isSlider, | ||
}, | ||
SLIDER(isSlider, isSwiping) { | ||
SLIDER: function SLIDER(isSlider, isSwiping) { | ||
return classNames({ | ||
@@ -29,4 +29,3 @@ "thumbs": !isSlider, | ||
}, | ||
ITEM(isSlider, selected) { | ||
ITEM: function ITEM(isSlider, selected) { | ||
return classNames({ | ||
@@ -38,4 +37,3 @@ "thumb": !isSlider, | ||
}, | ||
ARROW_PREV(disabled) { | ||
ARROW_PREV: function ARROW_PREV(disabled) { | ||
return classNames({ | ||
@@ -46,4 +44,3 @@ "control-arrow control-prev": true, | ||
}, | ||
ARROW_NEXT(disabled) { | ||
ARROW_NEXT: function ARROW_NEXT(disabled) { | ||
return classNames({ | ||
@@ -54,4 +51,3 @@ "control-arrow control-next": true, | ||
}, | ||
DOT(selected) { | ||
DOT: function DOT(selected) { | ||
return classNames({ | ||
@@ -58,0 +54,0 @@ "dot": true, |
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
var has3d = require('./has3d'); | ||
@@ -2,0 +4,0 @@ |
@@ -0,3 +1,5 @@ | ||
"use strict"; | ||
module.exports = { | ||
outerWidth: el => { | ||
outerWidth: function outerWidth(el) { | ||
var width = el.offsetWidth; | ||
@@ -4,0 +6,0 @@ var style = getComputedStyle(el); |
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
module.exports = function has3d() { | ||
@@ -2,0 +4,0 @@ if (typeof window === 'undefined' || !window.getComputedStyle) { |
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
module.exports = { | ||
@@ -2,0 +4,0 @@ Carousel: require('./components/Carousel'), |
@@ -0,1 +1,3 @@ | ||
'use strict'; | ||
module.exports = function (target) { | ||
@@ -2,0 +4,0 @@ if (target === undefined || target === null) { |
{ | ||
"name": "react-responsive-carousel", | ||
"version": "3.0.13", | ||
"version": "3.0.14", | ||
"description": "React Responsive Carousel", | ||
@@ -48,2 +48,3 @@ "author": { | ||
"babel-jest": "^14.1.0", | ||
"babel-preset-es2015": "^6.14.0", | ||
"babel-preset-react": "^6.11.1", | ||
@@ -56,13 +57,11 @@ "browserify": "^12.0.1", | ||
"gulp-concat": "^2.3.4", | ||
"gulp-connect": "~2.2.0", | ||
"gulp-connect": "^5.0.0", | ||
"gulp-copy": "0.0.2", | ||
"gulp-cssmin": "^0.1.6", | ||
"gulp-if": "^1.2.4", | ||
"gulp-livereload": "^2.1.1", | ||
"gulp-notify": "^1.4.2", | ||
"gulp-if": "^2.0.1", | ||
"gulp-notify": "^2.2.0", | ||
"gulp-rename": "^1.2.0", | ||
"gulp-sass": "^2.2.0", | ||
"gulp-shell": "^0.2.10", | ||
"gulp-streamify": "0.0.5", | ||
"gulp-uglify": "^0.3.1", | ||
"gulp-streamify": "1.0.2", | ||
"gulp-uglify": "^2.0.0", | ||
"gulp-util": "^3.0.0", | ||
@@ -69,0 +68,0 @@ "jest-cli": "^14.1.0", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
49452
28
19
1031
0