@sima-land/ui-nucleons 44.2.7 → 44.2.8

package/carousel/draggable.d.ts

@@ -6,6 +6,7 @@ export interface Control {
     isGrabbed: () => boolean;
     setOffset: typeof Draggable.prototype.setOffset;
     toggleTransition: typeof Draggable.prototype.toggleTransition;
+    isTransitionEnabled: () => boolean;
 }
 export declare type Delta2d = {
     dx: number;
@@ -92,6 +93,11 @@ export default class Draggable extends Component<DraggableProps> {
      * @param active Нужен ли плавный переход.
      */
     toggleTransition(active: boolean): void;
+    /**
+     * Возвращает true, если css свойство transition активно, false в противном случае.
+     * @return Активно ли css свойство transition.
+     */
+    isTransitionEnabled(): boolean;
     /**
      * Сохраняет данные позиции на экземпляре.
      * @param event Событие.

package/carousel/draggable.js

@@ -90,6 +90,7 @@ class Draggable extends react_1.Component {
                 isGrabbed: () => this.isGrabbed,
                 setOffset: this.setOffset.bind(this),
                 toggleTransition: this.toggleTransition.bind(this),
+                isTransitionEnabled: this.isTransitionEnabled.bind(this),
             });
     }
     /**
@@ -207,6 +208,13 @@ class Draggable extends react_1.Component {
             draggableEl.style.transition = active ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '';
         }
     }
+    /**
+     * Возвращает true, если css свойство transition активно, false в противном случае.
+     * @return Активно ли css свойство transition.
+     */
+    isTransitionEnabled() {
+        return this.hasTransition;
+    }
     /**
      * Сохраняет данные позиции на экземпляре.
      * @param event Событие.

package/carousel/index.d.ts

@@ -61,6 +61,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
     dragStartOffset: IPoint;
     currentIndex: number;
     containerRef: React.RefObject<HTMLDivElement>;
+    rootElementRef: React.RefObject<HTMLDivElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
     timerId?: number;
     canAutoMove?: boolean;
@@ -69,6 +70,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
     toggleDragTransition: Control['toggleTransition'];
     setDragOffset: Control['setOffset'];
     isGrabbed: Control['isGrabbed'];
+    isTransitionEnabled: Control['isTransitionEnabled'];
     /**
      * Конструктор.
      * @param props Свойства.
@@ -125,6 +127,15 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * Обновляет информацию о состоянии отображения элементов.
      */
     componentDidMount(): void;
+    /**
+     * Подписывается на изменение размера корневого элемента.
+     * @param Observer Класс ResizeObserver.
+     */
+    observeResize(Observer?: typeof ResizeObserver): void;
+    /**
+     * Корректирует смещение при изменении размеров.
+     */
+    handleResize(): void;
     /**
      * По необходимости обновляет индекс текущего элемента.
      * Обновляет информацию о состоянии отображения элементов.
@@ -286,9 +297,9 @@ export declare class Carousel extends Component<CarouselProps, State> {
     }): void;
     /**
      * Получает управление от Draggable.
-     * @param draggableControls Функции управления Draggable.
+     * @param control Функции управления Draggable.
      */
-    takeDragControl({ isGrabbed, setOffset, toggleTransition }: Control): void;
+    takeDragControl(control: Control): void;
     /** @inheritdoc */
     render(): JSX.Element;
     /**

package/carousel/index.js

@@ -37,7 +37,6 @@ const max_index_of_1 = __importDefault(require("../helpers/max-index-of"));
 const get_relative_pos_1 = __importDefault(require("../helpers/get-relative-pos"));
 const find_child_element_1 = __importDefault(require("../helpers/find-child-element"));
 const arrow_button_1 = require("../arrow-button");
-const on_1 = __importDefault(require("../helpers/on"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const carousel_module_scss_1 = __importDefault(require("./carousel.module.scss"));
 const is_browser_1 = __importDefault(require("../helpers/is-browser"));
@@ -66,6 +65,7 @@ class Carousel extends react_1.Component {
             isAllItemsVisible: false,
         };
         // refs
+        this.rootElementRef = (0, react_1.createRef)(); // для слежки за изменением размера
         this.containerRef = (0, react_1.createRef)(); // для определения размеров списка элементов
         this.wrapperRef = (0, react_1.createRef)(); // для определения viewport'а карусели
         // bound methods
@@ -80,6 +80,7 @@ class Carousel extends react_1.Component {
         this.toggleDragTransition = lodash_1.noop;
         this.setDragOffset = lodash_1.noop;
         this.isGrabbed = lodash_1.stubFalse;
+        this.isTransitionEnabled = lodash_1.stubFalse;
     }
     /**
      * Возвращает элемент списка.
@@ -154,12 +155,7 @@ class Carousel extends react_1.Component {
      */
     componentDidMount() {
         const { autoplay, onReady } = this.props;
-        this.offWindowResize = (0, on_1.default)(window, 'resize', () => {
-            this.toggleDragTransition(false);
-            this.scrollToItem({ needTransition: false });
-            this.updateItemsVisibility();
-            this.toggleDragTransition(true);
-        });
+        this.observeResize(window.ResizeObserver);
         this.toggleMounted(true);
         this.forceUpdate(() => {
             this.scrollToItem({ needTransition: false });
@@ -168,6 +164,27 @@ class Carousel extends react_1.Component {
         autoplay && this.enableAutoplay();
         onReady && onReady(this.currentIndex);
     }
+    /**
+     * Подписывается на изменение размера корневого элемента.
+     * @param Observer Класс ResizeObserver.
+     */
+    observeResize(Observer) {
+        if (Observer && this.rootElementRef.current) {
+            const observer = new Observer(() => this.handleResize());
+            observer.observe(this.rootElementRef.current);
+            this.offWindowResize = () => observer.disconnect();
+        }
+    }
+    /**
+     * Корректирует смещение при изменении размеров.
+     */
+    handleResize() {
+        const wasEnabled = this.isTransitionEnabled();
+        wasEnabled && this.toggleDragTransition(false);
+        this.scrollToItem({ needTransition: false });
+        this.updateItemsVisibility();
+        wasEnabled && this.toggleDragTransition(true);
+    }
     /**
      * По необходимости обновляет индекс текущего элемента.
      * Обновляет информацию о состоянии отображения элементов.
@@ -560,19 +577,20 @@ class Carousel extends react_1.Component {
     }
     /**
      * Получает управление от Draggable.
-     * @param draggableControls Функции управления Draggable.
+     * @param control Функции управления Draggable.
      */
-    takeDragControl({ isGrabbed, setOffset, toggleTransition }) {
-        this.toggleDragTransition = toggleTransition;
-        this.setDragOffset = setOffset;
-        this.isGrabbed = isGrabbed;
+    takeDragControl(control) {
+        this.toggleDragTransition = control.toggleTransition;
+        this.setDragOffset = control.setOffset;
+        this.isGrabbed = control.isGrabbed;
+        this.isTransitionEnabled = control.isTransitionEnabled;
     }
     /** @inheritdoc */
     render() {
         const { currentOffset, isAllItemsVisible } = this.state;
         const { autoplay, autoplayHoverPause, vertical, containerProps = {}, viewportElementProps = {}, withControls = 'auto', renderControl = Carousel.defaultRenderControl, controlProps, } = this.props;
         const needShowControls = (isAuto(withControls) && !isAllItemsVisible) || withControls === true;
-        return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('carousel-wrapper', containerProps.className), onMouseEnter: () => {
+        return (react_1.default.createElement("div", Object.assign({ ref: this.rootElementRef }, containerProps, { className: cx('carousel-wrapper', containerProps.className), onMouseEnter: () => {
                 autoplay && autoplayHoverPause && this.toggleAutoMove(false);
             }, onMouseLeave: () => {
                 autoplay && autoplayHoverPause && !this.isGrabbed() && this.toggleAutoMove(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.7",
+  "version": "44.2.8",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",