pietile-carousel - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

 # Changelog
 
+## 2.0.2
+
+- Use `tslib`
+- Mark the package as sideEffects free
+
+## 2.0.1
+
+- Type for ImperativeHandle
+
 ## 2.0.0
@@ -4,0 +13,0 @@

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var PietileCarousel_1 = require("./PietileCarousel");
-exports.default = PietileCarousel_1.PietileCarousel;
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return PietileCarousel_1.PietileCarousel; } });

dist/PietileCarousel.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.PietileCarousel = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 var react_spring_1 = require("react-spring");
@@ -40,3 +13,3 @@ var Slider_1 = require("./Slider");
 exports.PietileCarousel = React.forwardRef(function (_a, ref) {
-    var _b = _a.autoplayInterval, autoplayInterval = _b === void 0 ? 0 : _b, _c = _a.count, count = _c === void 0 ? 1 : _c, children = _a.children, _d = _a.draggable, draggable = _d === void 0 ? true : _d, _e = _a.margin, margin = _e === void 0 ? 0 : _e, onChange = _a.onChange, props = __rest(_a, ["autoplayInterval", "count", "children", "draggable", "margin", "onChange"]);
+    var _b = _a.autoplayInterval, autoplayInterval = _b === void 0 ? 0 : _b, _c = _a.count, count = _c === void 0 ? 1 : _c, children = _a.children, _d = _a.draggable, draggable = _d === void 0 ? true : _d, _e = _a.margin, margin = _e === void 0 ? 0 : _e, onChange = _a.onChange, props = tslib_1.__rest(_a, ["autoplayInterval", "count", "children", "draggable", "margin", "onChange"]);
     var sliderRef = React.useRef(null);
@@ -85,3 +58,3 @@ var _f = useAnimation_1.useAnimation(React.Children.count(children), onChange), index = _f.index, set = _f.set;
     }); }, [autoplay, index, set]);
-    return (React.createElement(AnimatedSlider, __assign({ innerRef: sliderRef, index: index, count: count, margin: margin }, props), children));
+    return (React.createElement(AnimatedSlider, tslib_1.__assign({ innerRef: sliderRef, index: index, count: count, margin: margin }, props), children));
 });

dist/Slider/FrameContainer.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.FrameContainer = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 function FrameContainer(_a) {
     var children = _a.children, startIndex = _a.startIndex, margin = _a.margin, count = _a.count, style = _a.style;
     var childrenCount = React.Children.count(children);
-    var containerStyle = __assign(__assign({}, style), { display: 'flex', width: "calc(((100% - " + (count - 1) * margin + "px) / " + count + " + " + margin + "px)*" + childrenCount + ")" });
+    var containerStyle = tslib_1.__assign(tslib_1.__assign({}, style), { display: 'flex', width: "calc(((100% - " + (count - 1) * margin + "px) / " + count + " + " + margin + "px)*" + childrenCount + ")" });
     return (React.createElement("div", { style: containerStyle }, React.Children.map(children, function (child, index) {
@@ -27,0 +11,0 @@ var pos = startIndex <= index ? -startIndex : childrenCount - startIndex;

dist/Slider/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./Slider"));
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Slider"), exports);

dist/Slider/Slider.d.ts

@@ -8,5 +8,5 @@ import * as React from 'react';
     style?: React.CSSProperties;
-    innerRef: any;
+    innerRef: React.Ref<HTMLDivElement>;
 } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export declare function Slider({ children, style, margin, count, index, innerRef, ...props }: Props): JSX.Element;
 export {};

dist/Slider/Slider.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.Slider = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 var FrameContainer_1 = require("./FrameContainer");
 function Slider(_a) {
-    var children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, margin = _a.margin, count = _a.count, index = _a.index, innerRef = _a.innerRef, props = __rest(_a, ["children", "style", "margin", "count", "index", "innerRef"]);
-    var containerStyle = __assign(__assign({}, style), { overflow: 'hidden' });
+    var children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, margin = _a.margin, count = _a.count, index = _a.index, innerRef = _a.innerRef, props = tslib_1.__rest(_a, ["children", "style", "margin", "count", "index", "innerRef"]);
+    var containerStyle = tslib_1.__assign(tslib_1.__assign({}, style), { overflow: 'hidden' });
     var childrenCount = React.Children.count(children);
@@ -60,5 +33,5 @@ var tail = childrenCount - count;
     };
-    return (React.createElement("div", __assign({ ref: innerRef, style: containerStyle }, props),
+    return (React.createElement("div", tslib_1.__assign({ ref: innerRef, style: containerStyle }, props),
         React.createElement(FrameContainer_1.FrameContainer, { style: sliderStyle, startIndex: startIndex, margin: margin, count: count }, children)));
 }
 exports.Slider = Slider;

dist/useAnimation.js

 "use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.useAnimation = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 var react_spring_1 = require("react-spring");
@@ -12,0 +7,0 @@ function useAnimation(childrenCount, onChange) {

dist/useAutoplay.js

 "use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.useAutoplay = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 function useAutoplay(_a) {
@@ -12,0 +7,0 @@ var index = _a.index, set = _a.set, interval = _a.interval;

dist/useDrag.d.ts

@@ -12,5 +12,5 @@ import { RefObject } from 'react';
     onStart: () => void;
-    onEnd: (event: React.SyntheticEvent) => void;
+    onEnd: (event?: React.SyntheticEvent) => void;
 }
 export declare function useDrag({ count, enabled, index, margin, ref, set, onStart, onEnd }: Config): void;
 export {};

dist/useDrag.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrag = void 0;
 var react_1 = require("react");
@@ -20,3 +21,9 @@ var react_use_gesture_1 = require("react-use-gesture");
             var down = _a.down, memo = _a.memo, mx = _a.movement[0], vx = _a.vxvy[0];
-            var itemWidth = memo || calcItemWidth(ref, count, margin);
+            var itemWidth;
+            if (memo && typeof memo === 'number') {
+                itemWidth = memo;
+            }
+            else {
+                itemWidth = calcItemWidth(ref, count, margin);
+            }
             var newIndex = -mx / itemWidth;
@@ -23,0 +30,0 @@ if (!down) {

package.json

 {
   "name": "pietile-carousel",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React Carousel",
@@ -15,2 +15,3 @@ "keywords": [
   ],
+  "sideEffects": false,
   "scripts": {
@@ -21,3 +22,4 @@ "build": "rimraf dist && tsc"
     "react-spring": "~8.0.0",
-    "react-use-gesture": "~7.0.0"
+    "react-use-gesture": "~7.0.0",
+    "tslib": "~2.0.0"
   },
@@ -31,11 +33,11 @@ "peerDependencies": {
     "@types/react-dom": "~16.9.0",
-    "@typescript-eslint/eslint-plugin": "^2.0.0",
-    "@typescript-eslint/parser": "^2.0.0",
-    "eslint": "~6.8.0",
-    "eslint-config-airbnb": "~18.0.0",
-    "eslint-config-prettier": "~6.10.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
+    "eslint": "~7.5.0",
+    "eslint-config-airbnb": "~18.2.0",
+    "eslint-config-prettier": "~6.11.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "~2.4.0",
+    "eslint-plugin-react-hooks": "~4.0.0",
     "import-sort": "~6.0.0",
@@ -46,3 +48,3 @@ "import-sort-cli": "~6.0.0",
     "rimraf": "~3.0.0",
-    "typescript": "~3.8.0"
+    "typescript": "~3.9.0"
   },
@@ -49,0 +51,0 @@ "repository": {

README.md

@@ -6,6 +6,4 @@ # Pietile Carousel
 
-React carousel based on [react-spring](https://github.com/react-spring/react-spring) and [react-use-gesture](https://github.com/react-spring/react-use-gesture) which tries to minimize amount of repaints and be simple in use.
+React carousel based on [react-spring](https://github.com/react-spring/react-spring) and [react-use-gesture](https://github.com/react-spring/react-use-gesture) without repaints and simple in use.
 
-<img src="https://media.giphy.com/media/1gRsY9qTHyJrYTxGYS/giphy.gif" />
-
 ## Features
@@ -15,3 +13,3 @@
 - Relies on translates for movements (zero paints)
-- Arbitary number of visible items
+- Arbitrary number of visible items
 - Сyclicality
@@ -82,10 +80,14 @@
 
-| name            | description     |
-| :-------------- | :-------------- |
-| moveLeft()      | Scroll left     |
-| moveRight()     | Scroll right    |
-| scrollTo(index) | Scroll to index |
+| name          | description     |
+| :------------ | :-------------- |
+| moveLeft()    | Scroll left     |
+| moveRight()   | Scroll right    |
+| moveTo(index) | Scroll to index |
 
+## Note
+
+Carousel protects nested links (a-tag's) from undesirable behavior(link click is being processes when user starts dragging and release mouse outside of carousel) by calling `preventDefault` for correspondent `click` event. If you are handling clicks manually you can check [defaultPrevented](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented) when processing your event.
+
 ## License
 
 Pietile Carousel is MIT License.

No alert changes

Improved metrics

Number of lines in readme file

91

increased by2.25%

Worsened metrics

Total package byte prevSize

18778

decreased by-11.54%

Dependency count

5

increased by25%

Lines of code

337

decreased by-18.2%

Dependency changes

• + Addedtslib@~2.0.0

• + Addedtslib@2.0.3(transitive)