pietile-carousel - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

CHANGELOG.md

 # Changelog
 
+## 2.2.0
+
+- Reduce renders amount
+
 ## 2.1.1
@@ -4,0 +8,0 @@

dist/index.js

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

dist/PietileCarousel.js

@@ -6,3 +6,2 @@ "use strict";
 var React = tslib_1.__importStar(require("react"));
-var react_spring_1 = require("react-spring");
 var Slider_1 = require("./Slider");
@@ -12,3 +11,2 @@ var useAnimation_1 = require("./useAnimation");
 var useDrag_1 = require("./useDrag");
-var AnimatedSlider = react_spring_1.animated(Slider_1.Slider);
 exports.PietileCarousel = React.forwardRef(function (_a, ref) {
@@ -32,2 +30,3 @@ 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"]);
         onEnd: function (event) {
+            var _a;
             if (!dragging.current) {
@@ -41,3 +40,3 @@ return;
             }
-            event.target.addEventListener('click', function (e) {
+            (_a = event.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', function (e) {
                 e.preventDefault();
@@ -61,3 +60,3 @@ }, { once: true });
     }); }, [autoplay, index, set]);
-    return (React.createElement(AnimatedSlider, tslib_1.__assign({ innerRef: sliderRef, index: index, count: count, margin: margin }, props), children));
+    return (React.createElement(Slider_1.Slider, tslib_1.__assign({ ref: sliderRef, index: index, count: count, margin: margin }, props), children));
 });

dist/Slider/Slider.d.ts

 import * as React from 'react';
+import { OpaqueInterpolation } from 'react-spring';
 declare type Props = {
     children?: React.ReactNode;
     count: number;
-    index: number;
+    index: OpaqueInterpolation<number>;
     margin: number;
     style?: React.CSSProperties;
-    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 declare const Slider: React.ForwardRefExoticComponent<Pick<Props, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "margin" | "prefix" | "children" | "key" | "index" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "count"> & React.RefAttributes<HTMLDivElement>>;
 export {};

dist/Slider/Slider.js

@@ -6,32 +6,37 @@ "use strict";
 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 = tslib_1.__rest(_a, ["children", "style", "margin", "count", "index", "innerRef"]);
-    var containerStyle = tslib_1.__assign(tslib_1.__assign({}, style), { overflow: 'hidden' });
+var react_spring_1 = require("react-spring");
+var ItemWrapper_1 = require("./ItemWrapper");
+exports.Slider = React.forwardRef(function Slider(_a, ref) {
+    var children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, margin = _a.margin, count = _a.count, index = _a.index, props = tslib_1.__rest(_a, ["children", "style", "margin", "count", "index"]);
     var childrenCount = React.Children.count(children);
     var tail = childrenCount - count;
-    var frameWidth = 100 / React.Children.count(children);
-    var startIndex;
-    var translate;
-    if (!tail) {
-        startIndex = 0;
-        translate = 0;
-    }
-    else if (index >= 0) {
-        startIndex = (Math.floor(index / tail) * tail) % childrenCount;
-        translate = frameWidth * (index % tail);
-    }
-    else {
-        startIndex =
-            (childrenCount + ((Math.ceil(index / tail) * tail - tail) % childrenCount)) % childrenCount;
-        translate = frameWidth * (tail + (index % tail));
-    }
+    var frameWidth = 100 / childrenCount;
+    var startIndex = index.interpolate(function (value) {
+        if (!tail) {
+            return 0;
+        }
+        if (value >= 0) {
+            return (Math.floor(value / tail) * tail) % childrenCount;
+        }
+        return ((childrenCount + ((Math.ceil(value / tail) * tail - tail) % childrenCount)) % childrenCount);
+    });
+    var translate = index.interpolate(function (value) {
+        if (!tail) {
+            return 0;
+        }
+        if (value >= 0) {
+            return frameWidth * (value % tail);
+        }
+        return frameWidth * (tail + (value % tail));
+    });
+    var containerStyle = tslib_1.__assign(tslib_1.__assign({}, style), { overflow: 'hidden' });
     var sliderStyle = {
         height: '100%',
-        transform: "translateX(" + -translate + "%)",
+        transform: translate.interpolate(function (value) { return "translateX(" + -value + "%)"; }),
         willChange: 'transform',
+        display: 'flex',
+        width: "calc(((100% - " + (count - 1) * margin + "px) / " + count + " + " + margin + "px)*" + childrenCount + ")",
     };
-    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;
+    return (React.createElement("div", tslib_1.__assign({ ref: ref, style: containerStyle }, props),
+        React.createElement(react_spring_1.animated.div, { style: sliderStyle }, React.Children.map(children, function (child, i) { return (React.createElement(ItemWrapper_1.ItemWrapper, { childrenCount: childrenCount, index: i, margin: margin, startIndex: startIndex }, child)); }))));
+});

dist/useDrag.d.ts

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

package.json

 {
   "name": "pietile-carousel",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "React Carousel",
@@ -21,3 +21,3 @@ "keywords": [
     "react-spring": "~8.0.0",
-    "react-use-gesture": "~7.0.0",
+    "react-use-gesture": "~8.0.0",
     "tslib": "~2.0.0"
@@ -30,13 +30,13 @@ },
   "devDependencies": {
-    "@types/react": "~16.9.0",
-    "@types/react-dom": "~16.9.0",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
-    "eslint": "~7.5.0",
+    "@types/react": "~17.0.0",
+    "@types/react-dom": "~17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "@typescript-eslint/parser": "^4.0.0",
+    "eslint": "~7.17.0",
     "eslint-config-airbnb": "~18.2.0",
-    "eslint-config-prettier": "~6.11.0",
+    "eslint-config-prettier": "~7.1.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "~4.0.0",
+    "eslint-plugin-react-hooks": "~4.2.0",
     "import-sort": "~6.0.0",
@@ -47,3 +47,3 @@ "import-sort-cli": "~6.0.0",
     "rimraf": "~3.0.0",
-    "typescript": "~3.9.0"
+    "typescript": "~4.1.0"
   },
@@ -50,0 +50,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

23700

increased by26.07%

Lines of code

356

increased by5.64%

Dependency changes

• + Addedreact-use-gesture@8.0.1(transitive)

• - Removedreact-use-gesture@7.0.16(transitive)

• Updatedreact-use-gesture@~8.0.0