Socket
Socket
Sign inDemoInstall

react-touch-carousel

Package Overview
Dependencies
10
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.9.4 to 0.10.0

35

lib/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,7 +6,3 @@ Object.defineProperty(exports, "__esModule", {

});
exports.modCursor = exports.omit = exports.getTouchId = exports.getTouchPosition = exports.precision = exports.clamp = exports.range = undefined;
var _utils = require('./utils');
Object.defineProperty(exports, 'range', {
Object.defineProperty(exports, "range", {
enumerable: true,

@@ -17,3 +13,3 @@ get: function get() {

});
Object.defineProperty(exports, 'clamp', {
Object.defineProperty(exports, "clamp", {
enumerable: true,

@@ -24,15 +20,9 @@ get: function get() {

});
Object.defineProperty(exports, 'precision', {
Object.defineProperty(exports, "getTouchPosition", {
enumerable: true,
get: function get() {
return _utils.precision;
}
});
Object.defineProperty(exports, 'getTouchPosition', {
enumerable: true,
get: function get() {
return _utils.getTouchPosition;
}
});
Object.defineProperty(exports, 'getTouchId', {
Object.defineProperty(exports, "getTouchId", {
enumerable: true,

@@ -43,3 +33,3 @@ get: function get() {

});
Object.defineProperty(exports, 'omit', {
Object.defineProperty(exports, "omit", {
enumerable: true,

@@ -50,3 +40,3 @@ get: function get() {

});
Object.defineProperty(exports, 'modCursor', {
Object.defineProperty(exports, "modCursor", {
enumerable: true,

@@ -57,10 +47,11 @@ get: function get() {

});
exports["default"] = void 0;
var _TouchCarousel = require('./TouchCarousel');
var _TouchCarousel = _interopRequireDefault(require("./TouchCarousel"));
var _TouchCarousel2 = _interopRequireDefault(_TouchCarousel);
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports.default = _TouchCarousel2.default;
var _default = _TouchCarousel["default"];
exports["default"] = _default;

330

lib/TouchCarousel.js

@@ -1,29 +0,46 @@

'use strict';
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
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; };
var _react = _interopRequireDefault(require("react"));
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _web = require("@react-spring/web");
var _react = require('react');
var _utils = require("./utils");
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _renderprops = require('react-spring/renderprops');
function _extends() { _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; }; return _extends.apply(this, arguments); }
var _utils = require('./utils');
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
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; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function TouchMoveRecord(e) {

@@ -41,3 +58,3 @@ var _getTouchPosition = (0, _utils.getTouchPosition)(e),

component: 'div',
cardSize: global.innerWidth || 320,
cardSize: 320,
cardCount: 1,

@@ -50,3 +67,2 @@ cardPadCount: 2,

renderCard: function renderCard() {},
precision: 0.001,

@@ -60,3 +76,2 @@ tension: 200,

onDragCancel: function onDragCancel() {},
maxOverflow: 0.5,

@@ -66,18 +81,26 @@ clickTolerance: 2,

};
var propsKeys = Object.keys(defaultProps);
var TouchCarousel = function (_React$PureComponent) {
var TouchCarousel = /*#__PURE__*/function (_React$PureComponent) {
_inherits(TouchCarousel, _React$PureComponent);
var _super = _createSuper(TouchCarousel);
function TouchCarousel(props) {
var _this;
_classCallCheck(this, TouchCarousel);
var _this = _possibleConstructorReturn(this, (TouchCarousel.__proto__ || Object.getPrototypeOf(TouchCarousel)).call(this, props));
_this = _super.call(this, props);
_this.onTouchStart = function (e) {
_defineProperty(_assertThisInitialized(_this), "onTouchStart", function (e) {
var oldTouchCount = _this.touchCount;
_this.touchCount += e.changedTouches.length;
_this.setState({ active: true });
_this.setState({
active: true
});
_this.stopAutoplay();
_this.tracingTouchId = (0, _utils.getTouchId)(e);

@@ -88,8 +111,7 @@ _this.touchMoves = [new TouchMoveRecord(e)];

cardSize = _this$props.cardSize,
clickTolerance = _this$props.clickTolerance;
// User click a card before it's in place but near, allow the clicking.
clickTolerance = _this$props.clickTolerance; // User click a card before it's in place but near, allow the clicking.
// Otherwise it's only a grab.
_this.grabbing = cardSize * Math.abs(_this.usedCursor - _this.state.cursor) > clickTolerance;
// When user clicks or grabs the scroll, cancel the spring effect.
_this.grabbing = cardSize * Math.abs(_this.usedCursor - _this.state.cursor) > clickTolerance; // When user clicks or grabs the scroll, cancel the spring effect.
if (!oldTouchCount) {

@@ -100,14 +122,16 @@ _this.setCursor(_this.usedCursor).then(_this.modCursor);

}
};
});
_this.onTouchMove = function (e) {
_defineProperty(_assertThisInitialized(_this), "onTouchMove", function (e) {
_this.grabbing = false;
var touchMove = new TouchMoveRecord(e);
var touchId = (0, _utils.getTouchId)(e);
if (touchId !== _this.tracingTouchId || !_this.touchMoves.length) {
_this.touchMoves = [touchMove];
}
_this.tracingTouchId = touchId;
var shouldIgnore = e.defaultPrevented;
var shouldIgnore = e.defaultPrevented;
if (!shouldIgnore && _this.state.active) {

@@ -118,7 +142,8 @@ if (_this.isMovingCross == null) {

ignoreCrossMove = _this$props2.ignoreCrossMove;
var factor = ignoreCrossMove;
var factor = ignoreCrossMove;
if (typeof factor !== 'number') {
factor = factor ? 1 : 0;
}
var mainAxis = _vertical ? 'y' : 'x';

@@ -130,2 +155,3 @@ var crossAxis = _vertical ? 'x' : 'y';

}
shouldIgnore = _this.isMovingCross;

@@ -136,9 +162,8 @@ }

return;
}
// Prevent the default action i.e. page scroll.
} // Prevent the default action i.e. page scroll.
// NOTE: in Chrome 56+ touchmove event listeners are passive by default,
// please use CSS `touch-action` for it.
e.preventDefault();
var _this$props3 = _this.props,

@@ -149,25 +174,29 @@ cardSize = _this$props3.cardSize,

onDragStart = _this$props3.onDragStart;
var lastMove = _this.touchMoves[_this.touchMoves.length - 1];
var xy = vertical ? 'y' : 'x';
var distance = touchMove[xy] - lastMove[xy];
_this.setState({ dragging: true }, _this.state.dragging ? undefined : onDragStart);
_this.setState({
dragging: true
}, _this.state.dragging ? undefined : onDragStart);
_this.setCursor(_this.state.cursor + distance / cardSize * moveScale);
_this.touchMoves.push(touchMove);
if (_this.touchMoves.length > 250) {
_this.touchMoves.splice(0, 50);
}
};
});
_this.onTouchEndOrCancel = function (e) {
_defineProperty(_assertThisInitialized(_this), "onTouchEndOrCancel", function (e) {
var type = e.type;
_this.touchCount -= e.changedTouches.length;
_this.touchCount -= e.changedTouches.length;
if (_this.touchCount > 0) {
_this.touchMoves = [];
return;
}
} // prevent click event for grab actions
// prevent click event for grab actions
if (_this.grabbing) {

@@ -179,5 +208,5 @@ e.preventDefault();

var wasDragging = _this.state.dragging;
var targetCursor = null;
// Due to multi-touch, records can be empty even if .dragging is true.
var targetCursor = null; // Due to multi-touch, records can be empty even if .dragging is true.
// So check both.
if (wasDragging && _this.touchMoves.length) {

@@ -188,11 +217,14 @@ var _this$props4 = _this.props,

vertical = _this$props4.vertical;
var friction = _this.props.friction / 1e6;
var touchMoves = _this.touchMoves;
var _assertThisInitialize = _assertThisInitialized(_this),
touchMoves = _assertThisInitialize.touchMoves;
var i = touchMoves.length;
var duration = 0;
while (--i >= 0 && duration < 100) {
duration = Date.now() - touchMoves[i].time;
}
i++;

@@ -203,3 +235,2 @@ var xy = vertical ? 'y' : 'x';

var cursor = _this.state.cursor;
var cursorDelta = (0, _utils.clamp)(momentumDistance / cardSize * moveScale, Math.floor(cursor) - cursor, Math.ceil(cursor) - cursor);

@@ -213,4 +244,9 @@ targetCursor = Math.round(cursor + cursorDelta);

}
_this.setState({ active: false, dragging: false }, function () {
_this.setState({
active: false,
dragging: false
}, function () {
_this.setCursor(targetCursor);
if (wasDragging) {

@@ -220,25 +256,33 @@ _this.props[type === 'touchend' ? 'onDragEnd' : 'onDragCancel']();

});
_this.tracingTouchId = null;
_this.autoplayIfEnabled();
};
});
_this.onSpringRest = function () {
_defineProperty(_assertThisInitialized(_this), "onSpringRest", function () {
if (!_this.shouldEnableSpring()) return;
_this.setState({ springing: false });
_this.setState({
springing: false
});
var cursor = Math.round(_this.usedCursor);
var index = -cursor;
var modIndex = index % _this.props.cardCount;
while (modIndex < 0) {
modIndex += _this.props.cardCount;
}
_this.props.onRest(index, modIndex, cursor, _this.state);
};
});
_this.autoplayIfEnabled = function () {
_defineProperty(_assertThisInitialized(_this), "autoplayIfEnabled", function () {
if (_this.props.autoplay) {
_this.autoplayTimer = setInterval(_this.next, _this.props.autoplay);
}
};
});
_this.stopAutoplay = function () {
_defineProperty(_assertThisInitialized(_this), "stopAutoplay", function () {
if (_this.autoplayTimer) {

@@ -248,5 +292,5 @@ clearInterval(_this.autoplayTimer);

}
};
});
_this.go = function (n) {
_defineProperty(_assertThisInitialized(_this), "go", function (n) {
return _this.modCursor().then(function () {

@@ -257,32 +301,41 @@ // n must be in range here.

});
};
});
_this.next = function () {
_defineProperty(_assertThisInitialized(_this), "next", function () {
return _this.modCursor().then(function () {
_this.setCursor(_this.state.cursor - 1);
});
};
});
_this.prev = function () {
_defineProperty(_assertThisInitialized(_this), "prev", function () {
return _this.modCursor().then(function () {
_this.setCursor(_this.state.cursor + 1);
});
};
});
_this.setCursor = function (cursor) {
_defineProperty(_assertThisInitialized(_this), "setCursor", function (cursor) {
var springing = _this.shouldEnableSpring() && cursor !== _this.state.cursor;
return new Promise(function (resolve) {
_this.setState({ cursor: cursor, springing: springing }, resolve);
_this.setState({
cursor: cursor,
springing: springing
}, resolve);
});
};
});
_this.modAs = function (cursor) {
_defineProperty(_assertThisInitialized(_this), "modAs", function (cursor) {
return new Promise(function (resolve) {
_this.setState({ moding: true, cursor: cursor }, function () {
_this.setState({ moding: false }, resolve);
_this.setState({
moding: true,
cursor: cursor
}, function () {
_this.setState({
moding: false
}, resolve);
});
});
};
});
_this.modCursor = function () {
_defineProperty(_assertThisInitialized(_this), "modCursor", function () {
return new Promise(function (resolve) {

@@ -296,5 +349,6 @@ var _this$props5 = _this.props,

}
var cursor = _this.state.cursor;
var newCursor = (0, _utils.modCursor)(cursor, cardCount);
var newCursor = (0, _utils.modCursor)(cursor, cardCount);
if (newCursor !== cursor) {

@@ -306,12 +360,12 @@ _this.modAs(newCursor).then(resolve);

});
};
});
_this.shouldEnableSpring = function () {
_defineProperty(_assertThisInitialized(_this), "shouldEnableSpring", function () {
var _this$state = _this.state,
active = _this$state.active,
moding = _this$state.moding;
return !active && !moding;
};
});
_this.Component = (0, _web.animated)(props.component);
_this.state = {

@@ -335,3 +389,3 @@ cursor: props.defaultCursor,

_createClass(TouchCarousel, [{
key: 'componentDidMount',
key: "componentDidMount",
value: function componentDidMount() {

@@ -341,3 +395,3 @@ this.autoplayIfEnabled();

}, {
key: 'componentDidUpdate',
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {

@@ -348,5 +402,9 @@ if (prevProps.autoplay !== this.props.autoplay) {

}
if (prevProps.component !== this.props.component) {
this.Component = (0, _web.animated)(this.props.component);
}
}
}, {
key: 'componentWillUnmount',
key: "componentWillUnmount",
value: function componentWillUnmount() {

@@ -356,3 +414,3 @@ this.stopAutoplay();

}, {
key: 'getCursor',
key: "getCursor",
value: function getCursor() {

@@ -362,15 +420,16 @@ return this.state.cursor;

}, {
key: 'getComputedCursor',
key: "getComputedCursor",
value: function getComputedCursor() {
var _props = this.props,
cardCount = _props.cardCount,
loop = _props.loop,
maxOverflow = _props.maxOverflow;
var _state = this.state,
cursor = _state.cursor,
dragging = _state.dragging;
var _this$props6 = this.props,
cardCount = _this$props6.cardCount,
loop = _this$props6.loop,
maxOverflow = _this$props6.maxOverflow;
var _this$state2 = this.state,
cursor = _this$state2.cursor,
dragging = _this$state2.dragging;
var computedCursor = cursor;
var computedCursor = cursor;
if (!loop) {
computedCursor = (0, _utils.clamp)(computedCursor, 1 - cardCount, 0);
if (dragging && cursor > 0) {

@@ -382,6 +441,7 @@ computedCursor = maxOverflow - maxOverflow / (cursor + 1);

}
return computedCursor;
}
}, {
key: 'getUsedCursor',
key: "getUsedCursor",
value: function getUsedCursor() {

@@ -391,55 +451,56 @@ return this.usedCursor;

}, {
key: 'render',
key: "render",
value: function render() {
var _this2 = this;
var _props2 = this.props,
Component = _props2.component,
cardSize = _props2.cardSize,
cardCount = _props2.cardCount,
cardPadCount = _props2.cardPadCount,
renderCard = _props2.renderCard,
tension = _props2.tension,
friction = _props2.friction,
precision = _props2.precision,
loop = _props2.loop,
rest = _objectWithoutProperties(_props2, ['component', 'cardSize', 'cardCount', 'cardPadCount', 'renderCard', 'tension', 'friction', 'precision', 'loop']);
var Component = this.Component;
var _this$props7 = this.props,
cardSize = _this$props7.cardSize,
cardCount = _this$props7.cardCount,
cardPadCount = _this$props7.cardPadCount,
renderCard = _this$props7.renderCard,
tension = _this$props7.tension,
friction = _this$props7.friction,
precision = _this$props7.precision,
loop = _this$props7.loop,
rest = _objectWithoutProperties(_this$props7, ["cardSize", "cardCount", "cardPadCount", "renderCard", "tension", "friction", "precision", "loop"]);
var padCount = loop ? cardPadCount : 0;
var springConfig = { tension: tension, friction: friction, precision: precision };
var springConfig = {
tension: tension,
friction: friction,
precision: precision
};
var computedCursor = this.getComputedCursor();
return _react2.default.createElement(
_renderprops.Spring,
{
config: springConfig,
from: { cursor: computedCursor },
immediate: !this.shouldEnableSpring(),
to: { cursor: computedCursor },
onRest: this.onSpringRest
return /*#__PURE__*/_react["default"].createElement(_web.Spring, {
config: springConfig,
from: {
cursor: computedCursor
},
function (_ref) {
var cursor = _ref.cursor;
immediate: !this.shouldEnableSpring(),
to: {
cursor: computedCursor
},
onRest: this.onSpringRest
}, function (_ref) {
var cursor = _ref.cursor;
_this2.usedCursor = cursor.get();
return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, (0, _utils.omit)(rest, propsKeys), {
cursor: cursor,
carouselState: _this2.state,
onTouchStart: _this2.onTouchStart,
onTouchMove: _this2.onTouchMove,
onTouchEnd: _this2.onTouchEndOrCancel,
onTouchCancel: _this2.onTouchEndOrCancel
}), (0, _utils.range)(0 - padCount, cardCount - 1 + padCount).map(function (index) {
var modIndex = index % cardCount;
_this2.usedCursor = cursor;
return _react2.default.createElement(
Component,
_extends({}, (0, _utils.omit)(rest, propsKeys), {
cursor: cursor,
carouselState: _this2.state,
onTouchStart: _this2.onTouchStart,
onTouchMove: _this2.onTouchMove,
onTouchEnd: _this2.onTouchEndOrCancel,
onTouchCancel: _this2.onTouchEndOrCancel
}),
(0, _utils.range)(0 - padCount, cardCount - 1 + padCount).map(function (index) {
var modIndex = index % cardCount;
while (modIndex < 0) {
modIndex += cardCount;
}
return renderCard(index, modIndex, cursor, _this2.state);
})
);
}
);
while (modIndex < 0) {
modIndex += cardCount;
}
return renderCard(index, modIndex, cursor, _this2.state);
}));
});
}

@@ -449,7 +510,6 @@ }]);

return TouchCarousel;
}(_react2.default.PureComponent);
}(_react["default"].PureComponent);
TouchCarousel.defaultProps = defaultProps;
exports.default = TouchCarousel;
var _default = TouchCarousel;
exports["default"] = _default;

119

lib/touchWithMouseHOC.js

@@ -1,31 +0,42 @@

'use strict';
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = touchWithMouseHOC;
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; };
var _react = _interopRequireDefault(require("react"));
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports.default = touchWithMouseHOC;
function _extends() { _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; }; return _extends.apply(this, arguments); }
var _react = require('react');
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
var _react2 = _interopRequireDefault(_react);
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
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; } /**
* Mouse support. See #4.
* Maybe worth a separate package like "react-touch-with-mouse"
*/
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var mockEventTypes = {

@@ -44,17 +55,24 @@ mousedown: 'touchstart',

var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var clickTolerance = options.clickTolerance || 5;
var TouchWithMouse = function (_React$Component) {
var TouchWithMouse = /*#__PURE__*/function (_React$Component) {
_inherits(TouchWithMouse, _React$Component);
var _super = _createSuper(TouchWithMouse);
function TouchWithMouse(props) {
var _this;
_classCallCheck(this, TouchWithMouse);
var _this = _possibleConstructorReturn(this, (TouchWithMouse.__proto__ || Object.getPrototypeOf(TouchWithMouse)).call(this, props));
_this = _super.call(this, props);
_this.mockTouchEvent = function (e) {
_defineProperty(_assertThisInitialized(_this), "mockTouchEvent", function (e) {
var overwrites = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return {
changedTouches: overwrites.changedTouches || [{ identifier: _this.mouseTouchId, pageX: e.pageX, pageY: e.pageY }],
changedTouches: overwrites.changedTouches || [{
identifier: _this.mouseTouchId,
pageX: e.pageX,
pageY: e.pageY
}],
type: mockEventTypes[e.type] || e.type,

@@ -64,6 +82,7 @@ preventDefault: e.preventDefault.bind(e),

};
};
});
_this.onMouseDown = function (e) {
_defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
_this.props.onMouseDown(e);
_this.isMouseDown = true;

@@ -73,20 +92,26 @@ _this.mouseDownId++;

_this.clickStartY = e.pageY;
_this.props.onTouchStart(_this.mockTouchEvent(e));
};
});
_this.onDocumentMouseMove = function (e) {
_defineProperty(_assertThisInitialized(_this), "onDocumentMouseMove", function (e) {
if (!_this.isMouseDown) {
return;
}
_this.lastMoveEvent = _this.mockTouchEvent(e);
_this.props.onTouchMove(_this.lastMoveEvent);
};
});
_this.onDocumentMouseUp = function (e) {
_defineProperty(_assertThisInitialized(_this), "onDocumentMouseUp", function (e) {
if (!_this.isMouseDown) {
return;
}
_this.isMouseDown = false;
_this.props.onTouchEnd(_this.mockTouchEvent(e));
// This waits for the click event, so we know to prevent it
_this.props.onTouchEnd(_this.mockTouchEvent(e)); // This waits for the click event, so we know to prevent it
setTimeout(function () {

@@ -96,18 +121,21 @@ _this.clickStartX = null;

}, 0);
};
});
_this.onWindowBlur = function (e) {
_defineProperty(_assertThisInitialized(_this), "onWindowBlur", function (e) {
if (!_this.isMouseDown) {
return;
}
_this.isMouseDown = false;
_this.clickStartX = null;
_this.clickStartY = null;
var mockTouchCancelEvent = _this.mockTouchEvent(e, {
changedTouches: _this.lastMoveEvent.changedTouches
});
_this.props.onTouchCancel(mockTouchCancelEvent);
};
});
_this.onDocumentClick = function (e) {
_defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (e) {
if (_this.clickStartX !== null && _this.clickStartY !== null && distance(_this.clickStartX, _this.clickStartY, e.pageX, e.pageY) > clickTolerance) {

@@ -119,3 +147,3 @@ _this.clickStartX = null;

}
};
});

@@ -131,7 +159,7 @@ _this.isMouseDown = false;

_createClass(TouchWithMouse, [{
key: 'componentDidMount',
key: "componentDidMount",
value: function componentDidMount() {
document.addEventListener('mousemove', this.onDocumentMouseMove);
document.addEventListener('mouseup', this.onDocumentMouseUp);
// Listen in the capture phase, so we can prevent the clicks
document.addEventListener('mouseup', this.onDocumentMouseUp); // Listen in the capture phase, so we can prevent the clicks
document.addEventListener('click', this.onDocumentClick, true);

@@ -141,3 +169,3 @@ window.addEventListener('blur', this.onWindowBlur);

}, {
key: 'componentWillUnmount',
key: "componentWillUnmount",
value: function componentWillUnmount() {

@@ -150,9 +178,9 @@ document.removeEventListener('mousemove', this.onDocumentMouseMove);

}, {
key: 'render',
key: "render",
value: function render() {
var _props = this.props,
onMouseDown = _props.onMouseDown,
rest = _objectWithoutProperties(_props, ['onMouseDown']);
var _this$props = this.props,
onMouseDown = _this$props.onMouseDown,
rest = _objectWithoutProperties(_this$props, ["onMouseDown"]);
return _react2.default.createElement(Component, _extends({}, rest, {
return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, rest, {
onMouseDown: this.onMouseDown

@@ -164,3 +192,3 @@ }));

return TouchWithMouse;
}(_react2.default.Component);
}(_react["default"].Component);

@@ -174,7 +202,4 @@ TouchWithMouse.defaultProps = {

};
TouchWithMouse.displayName = 'TouchWithMouse(' + (Component.displayName || Component.name) + ')';
TouchWithMouse.displayName = "TouchWithMouse(".concat(Component.displayName || Component.name, ")");
return TouchWithMouse;
}
}

11

lib/utils.js

@@ -12,7 +12,10 @@ "use strict";

exports.modCursor = modCursor;
function range(start, end) {
var ret = [];
for (var i = start; i <= end; i++) {
ret.push(i);
}
return ret;

@@ -25,5 +28,7 @@ }

}
if (n > max) {
return max;
}
return n;

@@ -54,10 +59,12 @@ }

var newCursor = cursor;
while (newCursor > 0) {
newCursor -= cardCount;
}
while (newCursor < 0.5 - cardCount) {
newCursor += cardCount;
}
return newCursor;
}
}

15

lib/utils.test.js

@@ -1,12 +0,10 @@

'use strict';
"use strict";
var _ava = require('ava');
var _ava = _interopRequireDefault(require("ava"));
var _ava2 = _interopRequireDefault(_ava);
var _utils = require("./utils");
var _utils = require('./utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _ava2.default)('modCursor', function (t) {
(0, _ava["default"])('modCursor', function (t) {
t.is((0, _utils.modCursor)(0.9, 7), -6.1);

@@ -17,3 +15,2 @@ t.is((0, _utils.modCursor)(0, 7), 0);

t.is((0, _utils.modCursor)(-7, 7), 0);
});
});

61

package.json
{
"name": "react-touch-carousel",
"version": "0.9.4",
"version": "0.10.0",
"description": "Micro carousel framework for React.JS",

@@ -14,7 +14,7 @@ "main": "lib/index.js",

"spec": "ava",
"prebuild": "mkdir -p lib",
"build": "for js in src/*.js; do babel $js > \"lib/$(basename $js)\"; done",
"list-demo": "cd examples; find . -name index.html | xargs -n1 dirname | xargs -n1 basename",
"docs": "rm -r docs; PAGES=$(npm run -s list-demo) webpack -p",
"dev": "PAGES=$(npm run -s list-demo) webpack-dev-server --hot --inline",
"prebuild": "rm -rf lib; mkdir -p lib",
"build": "babel src --out-dir lib",
"dev": "npm run dev:docs",
"build:docs": "snowpack build",
"dev:docs": "snowpack dev",
"prepare": "npm run build"

@@ -37,29 +37,19 @@ },

"devDependencies": {
"ava": "0.25",
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.3",
"babel-loader": "7.1.4",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"babel-preset-es2015": "6.24.1",
"classnames": "2.2.5",
"css-loader": "0.28.11",
"html-webpack-plugin": "2.30.1",
"@ava/babel": "^1.0.1",
"@babel/cli": "^7.14.3",
"@babel/eslint-parser": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@babel/register": "^7.13.16",
"ava": "^3.15",
"classnames": "^2.3.1",
"husky": "^1.2.0",
"lint-staged": "^8.1.0",
"raw-loader": "0.5.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"standard": "11.0.1",
"standard-loader": "^6.0.1",
"style-loader": "0.21.0",
"uglify-js": "3.4.0",
"watchify": "^3.11.1",
"webpack": "3.6.0",
"webpack-dev-server": "2.9.1"
"lint-staged": "^11",
"react": "^17",
"react-dom": "^17",
"snowpack": "^3.8.3",
"standard": "^16.0.3"
},
"dependencies": {
"react-spring": "^8.0.27"
"@react-spring/web": "^9.2.4"
},

@@ -71,14 +61,13 @@ "standard": {

],
"parser": "babel-eslint"
"parser": "@babel/eslint-parser"
},
"ava": {
"require": [
"babel-register"
"@babel/register"
],
"babel": "inherit"
"babel": true
},
"lint-staged": {
"*.js": [
"npm run lint:fix",
"git add"
"*.{js,jsx}": [
"npm run lint:fix"
]

@@ -85,0 +74,0 @@ },

2

README.md

@@ -1,2 +0,2 @@

[![Build Status](https://travis-ci.org/xiaody/react-touch-carousel.svg?branch=master)](https://travis-ci.org/xiaody/react-touch-carousel)
[![Node.js CI](https://github.com/xiaody/react-touch-carousel/actions/workflows/node.js.yml/badge.svg)](https://github.com/xiaody/react-touch-carousel/actions/workflows/node.js.yml)
[![npm version](https://badge.fury.io/js/react-touch-carousel.svg)](https://www.npmjs.com/package/react-touch-carousel)

@@ -3,0 +3,0 @@ [![dependencies Status](https://david-dm.org/xiaody/react-touch-carousel/status.svg)](https://david-dm.org/xiaody/react-touch-carousel)

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc