Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-responsive-carousel

Package Overview
Dependencies
Maintainers
1
Versions
121
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-responsive-carousel - npm Package Compare versions

Comparing version 3.0.13 to 3.0.14

.editorconfig

101

lib/components/Carousel.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc