@via-profit/ui-kit 0.2.1-alpha.3 → 0.2.2

package/Swiper/SwiperSlidesRenderer.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SwiperSlidesRenderer = props => {
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex } = props;
+    // Мемоизируем вычисления видимости
+    const visibilityMap = React.useMemo(() => {
+        const map = new Map();
+        if (realSlidesCount <= slidesPerView) {
+            slides.forEach((_, i) => {
+                map.set(i, { isVisible: true, isNearby: false });
+            });
+        }
+        else {
+            const visibleIndices = [];
+            for (let j = 0; j < slidesPerView; j++) {
+                visibleIndices.push((realIndex + j) % realSlidesCount);
+            }
+            const prevIndex = (realIndex - 1 + realSlidesCount) % realSlidesCount;
+            const nextIndex = (realIndex + slidesPerView) % realSlidesCount;
+            slides.forEach((_, i) => {
+                const slideRealIndex = getSlideRealIndex(i);
+                const isVisible = visibleIndices.includes(slideRealIndex);
+                const isNearby = !isVisible && (slideRealIndex === prevIndex || slideRealIndex === nextIndex);
+                map.set(i, { isVisible, isNearby });
+            });
+        }
+        return map;
+    }, [slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex]);
+    return (React.createElement(React.Fragment, null, slides.map((slide, i) => {
+        const { isVisible, isNearby } = visibilityMap.get(i) || {
+            isVisible: false,
+            isNearby: false,
+        };
+        const slideRealIndex = getSlideRealIndex(i);
+        // Не клонируем заново, если пропсы не изменились
+        if (slide.props.slidesPerView === slidesPerView &&
+            slide.props.isVisible === isVisible &&
+            slide.props.isNearby === isNearby) {
+            return slide;
+        }
+        return React.cloneElement(slide, {
+            slidesPerView,
+            isVisible,
+            isNearby,
+            'data-index': i,
+            'data-real-index': slideRealIndex,
+        });
+    })));
+};
+exports.default = React.memo(SwiperSlidesRenderer);

package/Swiper/SwiperTrack.d.ts

@@ -4,11 +4,15 @@ export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly index: number;
     readonly offset: number;
     readonly dragging: boolean;
+    readonly disableAnimation?: boolean;
+    readonly slidesPerView: number;
 };
 export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode;
     readonly index: number;
     readonly offset: number;
     readonly dragging: boolean;
+    readonly disableAnimation?: boolean | undefined;
+    readonly slidesPerView: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperTrack;

package/Swiper/SwiperTrack.js

@@ -43,16 +43,13 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTrack = styled_1.default.div `
   display: flex;
   height: 100%;
-  transition: ${p => (p.$dragging ? 'none' : 'transform 0.3s ease')};
+  transition: ${({ $dragging, $disableAnimation }) => $dragging || $disableAnimation ? 'none' : 'transform 0.3s ease'};
   will-change: transform;
-  transform: ${({ $index, $offset }) => {
-    const trackX = `translateX(calc(${-($index * 100)}% + ${$offset}px))`;
-    return trackX;
-}};
+  transform: ${({ $index, $offset, $slidesPerView }) => `translateX(calc(${-(($index * 100) / $slidesPerView)}% + ${$offset}px))`};
 `;
 exports.SwiperTrack = React.forwardRef((props, ref) => {
-    const { children, index, offset, dragging } = props, restProps = __rest(props, ["children", "index", "offset", "dragging"]);
-    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset }, restProps, { ref: ref }), children));
+    const { children, index, offset, dragging, disableAnimation, slidesPerView } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "slidesPerView"]);
+    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$slidesPerView": slidesPerView }, restProps, { ref: ref }), children));
 });
 exports.SwiperTrack.displayName = 'SwiperTrack';
 exports.default = exports.SwiperTrack;

package/Swiper/SwiperWrapper.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export type SwiperWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly draggable: boolean;
+    readonly slidesPerView: number;
 };
 export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -10,5 +11,6 @@ export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const SwiperWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly draggable: boolean;
+    readonly slidesPerView: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.2.1-alpha.3",
+  "version": "0.2.2",
   "description": "UI Kit",
   "repository": {
     "type": "git",