@sima-land/moleculas 16.0.0-alpha.0 → 16.0.0-alpha.1

package/desktop/components/modifiers/group/modifiers-group.module.scss

@@ -23,6 +23,8 @@
   }
   &.invisible {
     opacity: 0;
+    cursor: default;
+    pointer-events: none;
   }
 }
 

package/desktop/components/product-carousel/index.d.ts

@@ -27,5 +27,5 @@ export interface ProductCarouselProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductCarousel: ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps) => JSX.Element;
+export declare function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
 export {};

package/desktop/components/product-carousel/index.js

@@ -51,7 +51,7 @@ const getSizeClasses = (size = {}) => [
  * @param props Свойства.
  * @return Элемент.
  */
-const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
+function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) {
     const layer = (0, layer_1.useLayer)();
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
     const cardShow = (0, utils_1.useAllowFlag)();
@@ -66,7 +66,8 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
         items = children ? [children] : [];
     }
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
+    const firstItemRef = (0, react_1.useRef)(null);
+    const itemWidth = (0, utils_1.useClientWidth)(firstItemRef, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
     const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
     (0, intersection_1.useIntersection)(rootRef, entry => {
@@ -88,34 +89,12 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
                     top: `${itemWidth / 2}px`,
                 },
             },
-        }), { renderItem: ([item, index]) => (react_1.default.createElement("div", { "data-testid": 'product-carousel:item', className: cx('item', getSizeClasses(itemSize)), onMouseEnter: e => {
+        }), { renderItem: ([item, index], realIndex) => (react_1.default.createElement(ProductCarouselItem, { rootRef: realIndex === 0 ? firstItemRef : undefined, withHoverCard: withHoverCard, className: cx(getSizeClasses(itemSize)), onMouseEnter: e => {
                     if (cardShow.allowed()) {
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
                     }
-                } }, (0, react_1.cloneElement)(item, {
-                children: react_1.Children.toArray(item.props.children).reduce((list, child) => {
-                    if ((0, react_1.isValidElement)(child)) {
-                        switch (child.type) {
-                            case product_info_1.Parts.Image: {
-                                // иконки у картинки скрываем если есть HoverCard
-                                list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
-                                break;
-                            }
-                            case product_info_1.Parts.Footer:
-                                // футер не выводим если есть HoverCard
-                                !withHoverCard && list.push(child);
-                                break;
-                            default: {
-                                // остальное выводим как есть
-                                list.push(child);
-                                break;
-                            }
-                        }
-                    }
-                    return list;
-                }, []),
-            }))), 
+                } }, item)), 
             // длительность прокрутки в Carousel - 320, делаем слегка с запасом
             // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
             onChangeTargetIndex: () => cardShow.disallowFor(360) }))),
@@ -123,5 +102,35 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
             activeItemIndex !== null &&
             items[activeItemIndex] &&
             [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, Object.assign({ key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null) }, item.props))))));
-};
+}
 exports.ProductCarousel = ProductCarousel;
+/**
+ * Элемент карусели. Выведет базовый контент.
+ * Полное содержимое будет выведено во всплывающей карточке.
+ * @inheritdoc
+ */
+function ProductCarouselItem({ rootRef, className, onMouseEnter, withHoverCard, children, }) {
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-carousel:item', className: cx('item', className), onMouseEnter: onMouseEnter }, (0, react_1.cloneElement)(children, {
+        children: react_1.Children.toArray(children.props.children).reduce((list, child) => {
+            if ((0, react_1.isValidElement)(child)) {
+                switch (child.type) {
+                    case product_info_1.Parts.Image: {
+                        // иконки у картинки скрываем если есть HoverCard
+                        list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
+                        break;
+                    }
+                    case product_info_1.Parts.Footer:
+                        // футер не выводим если есть HoverCard
+                        !withHoverCard && list.push(child);
+                        break;
+                    default: {
+                        // остальное выводим как есть
+                        list.push(child);
+                        break;
+                    }
+                }
+            }
+            return list;
+        }, []),
+    })));
+}

package/desktop/components/product-carousel/utils.d.ts

@@ -9,9 +9,8 @@ export declare const useAllowFlag: () => {
 };
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-export declare const useChildWidth: (ref: React.RefObject<HTMLElement | null>, selector: string, deps?: React.DependencyList) => number | null;
+export declare const useClientWidth: (ref: React.RefObject<HTMLElement | null>, deps?: React.DependencyList) => number | null;

package/desktop/components/product-carousel/utils.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChildWidth = exports.useAllowFlag = void 0;
+exports.useClientWidth = exports.useAllowFlag = void 0;
 const react_1 = require("react");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 /**
  * Возвращает объект работы с флагом, который автоматически возвращается в true через заданный промежуток времени.
  * @return Объект работы с флагом.
@@ -25,23 +21,24 @@ const useAllowFlag = () => {
 exports.useAllowFlag = useAllowFlag;
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-const useChildWidth = (ref, selector, deps) => {
-    const [itemWidth, setItemWidth] = (0, react_1.useState)(null);
-    const update = (0, react_1.useCallback)(() => {
-        if (ref.current) {
-            const child = ref.current.querySelector(selector);
-            child && setItemWidth(child.clientWidth);
-        }
-    }, [ref]);
+const useClientWidth = (ref, deps = []) => {
+    const [width, setWidth] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        ref.current && update();
-        return (0, on_1.default)(window, 'resize', update);
-    }, deps);
-    return itemWidth;
+        if (!ref.current) {
+            return;
+        }
+        const element = ref.current;
+        const observer = new ResizeObserver(() => {
+            setWidth(element.clientWidth);
+        });
+        observer.observe(ref.current);
+        setWidth(element.clientWidth);
+        return observer.disconnect();
+    }, [ref, ...deps]);
+    return width;
 };
-exports.useChildWidth = useChildWidth;
+exports.useClientWidth = useClientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "16.0.0-alpha.0",
+  "version": "16.0.0-alpha.1",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",