@sima-land/moleculas 12.3.3 → 13.1.2

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

@@ -31,6 +31,7 @@ const media_1 = require("@sima-land/ui-nucleons/hooks/media");
 const product_info_1 = require("../../../common/components/product-info");
 const bind_1 = __importDefault(require("classnames/bind"));
 const product_carousel_module_scss_1 = __importDefault(require("./product-carousel.module.scss"));
+const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const cx = bind_1.default.bind(product_carousel_module_scss_1.default);
 const getSizeClasses = (size = {}) => [
     `size-xs-${size.xs || 4}`,
@@ -39,45 +40,42 @@ const getSizeClasses = (size = {}) => [
     `size-l-${size.l || 2}`,
     `size-xl-${size.xl || 2}`,
 ];
-/**
- * Компонент для проброса данных элемента карусели в компонент карусели.
- * Экспериментальный вариант.
- * @return Null.
- */
-const Item = () => null;
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
 const 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)();
     const needBigArrows = (0, media_1.useMedia)('(min-width: 1600px)');
-    const sectionRef = (0, react_1.useRef)(null);
-    const stubRef = (0, react_1.useRef)(null);
+    const rootRef = (0, react_1.useRef)(null);
     const targetItemRef = (0, react_1.useRef)(null);
-    const items = react_1.Children.toArray(children).reduce((acc, item) => {
-        (0, react_1.isValidElement)(item) && item.type === Item && acc.push(item.props);
-        return acc;
-    }, []);
+    let items;
+    if (Array.isArray(children)) {
+        items = children;
+    }
+    else {
+        items = children ? [children] : [];
+    }
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = (0, utils_1.useChildWidth)(sectionRef, `.${cx('item')}`, [items.length]);
+    const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    (0, utils_1.useViewport)(stubRef, onNeedRequest, {
+    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // отправляем статистку, когда компонент попадает в зону видимости
-    (0, utils_1.useViewport)(sectionRef, onInViewport);
-    return Array.isArray(items) && items.length > 0 ? (react_1.default.createElement("div", { ref: sectionRef, className: cx('root', className) },
-        react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
+    (0, utils_1.useViewport)(rootRef, onInViewport);
+    return (react_1.default.createElement("div", { ref: rootRef, className: cx('root', className) },
+        items.length > 0 && (react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
             // докидываем индекс чтобы позже брать актуальные данные из списка по нему
             items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {
             withControls: true,
             controlProps: {
                 size: needBigArrows ? 'l' : 's',
                 style: {
-                    zIndex: 1,
+                    zIndex: layer + 2,
                     top: `${itemWidth / 2}px`,
                 },
             },
@@ -86,16 +84,21 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
                     }
-                } },
-                react_1.default.createElement(product_info_1.ProductInfo, { data: item.data, onLinkClick: item.onLinkClick }))), 
+                } }, (0, react_1.cloneElement)(item, {
+                children: react_1.Children.toArray(item.props.children).reduce((list, child) => {
+                    if ((0, react_1.isValidElement)(child)) {
+                        child.type === product_info_1.Parts.Image &&
+                            list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
+                        child.type !== product_info_1.Parts.Footer && list.push(child);
+                    }
+                    return list;
+                }, []),
+            }))), 
             // длительность прокрутки в Carousel - 320, делаем слегка с запасом
             // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
-            onChangeTargetIndex: () => cardShow.disallowFor(360) })),
+            onChangeTargetIndex: () => cardShow.disallowFor(360) }))),
         withHoverCard &&
             activeItemIndex !== null &&
-            [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, { key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null), 
-                // данные элемента карусели
-                data: item.data, onLinkClick: item.onLinkClick, onQuickViewClick: item.onQuickViewClick, renderCartControl: item.renderCartControl }))))) : (react_1.default.createElement("div", { ref: stubRef }));
+            [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;
-exports.ProductCarousel.Item = Item;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChildWidth = exports.useAllowFlag = exports.useViewport = void 0;
 const react_1 = require("react");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+const identity_1 = require("@sima-land/ui-nucleons/hooks/identity");
 /**
  * Вызывает callback когда заданный в ref элемент попал во viewport.
  * @param ref Ref отслеживаемого элемента.
@@ -13,12 +14,14 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
  * @param options Опции IntersectionObserver.
  */
 const useViewport = (ref, callback, options) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
     (0, react_1.useEffect)(() => {
         const element = ref.current;
         if (element) {
             const observer = new IntersectionObserver(entries => {
+                const fn = callbackRef.current;
                 for (const entry of entries) {
-                    entry.target === element && entry.isIntersecting && callback && callback();
+                    entry.target === element && entry.isIntersecting && fn && fn();
                     break;
                 }
             }, options);

package/mobile/components/garland-calculator-button/garland-calculator-button.module.scss

@@ -1,4 +1,33 @@
-.wrapper {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
-  border-radius: 8px;
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.main {
+  margin-right: 20px;
+}
+
+.text {
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 12px;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(colors.$additional-amber, 0.5);
+  border-radius: 50%;
+}
+
+.svg {
+  display: block;
+  fill: #fff;
 }

package/mobile/components/garland-calculator-button/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface GarlandCalculatorButtonProps {
-    /** Обработчик нажатия на кнопку рассчитать. */
-    onClick?: React.MouseEventHandler;
+    /** Обработчик клика. */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     /** CSS-класс. */
     className?: string;
 }
@@ -11,4 +11,3 @@ export interface GarlandCalculatorButtonProps {
  * @return Элемент.
  */
 export declare const GarlandCalculatorButton: ({ className, onClick }: GarlandCalculatorButtonProps) => JSX.Element;
-export default GarlandCalculatorButton;

package/mobile/components/garland-calculator-button/index.js

@@ -5,25 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GarlandCalculatorButton = void 0;
 const react_1 = __importDefault(require("react"));
-const box_1 = require("@sima-land/ui-nucleons/box");
-const text_1 = require("@sima-land/ui-nucleons/text");
 const link_1 = require("@sima-land/ui-nucleons/link");
-const tree_in_circle_svg_1 = __importDefault(require("./tree-in-circle.svg"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const plate_1 = require("@sima-land/ui-nucleons/plate");
+const spruce_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/spruce"));
+const classnames_1 = __importDefault(require("classnames"));
 const garland_calculator_button_module_scss_1 = __importDefault(require("./garland-calculator-button.module.scss"));
-const cx = bind_1.default.bind(garland_calculator_button_module_scss_1.default);
 /**
  * Компонент плашки с кнопкой открытия гирлянды.
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const GarlandCalculatorButton = ({ className, onClick }) => (react_1.default.createElement("div", { className: cx('wrapper', className) },
-    react_1.default.createElement(box_1.Box, { padding: 6, display: 'flex', justifyContent: 'between' },
-        react_1.default.createElement(box_1.Box, { paddingRight: 5 },
-            react_1.default.createElement(text_1.Text, { size: 14, lineHeight: 20, weight: 400 }, "\u0421\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0435\u0442\u0440\u043E\u0432 \u0433\u0438\u0440\u043B\u044F\u043D\u0434\u044B \u043F\u043E\u043A\u0443\u043F\u0430\u0442\u044C? \u041F\u043E\u043C\u043E\u0436\u0435\u043C \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043E\u043F\u0442\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0434\u043B\u0438\u043D\u0443"),
-            react_1.default.createElement(box_1.Box, { marginTop: 3 },
-                react_1.default.createElement(link_1.Link, { onClick: onClick }, "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C"))),
-        react_1.default.createElement(box_1.Box, { flex: 'none' },
-            react_1.default.createElement(tree_in_circle_svg_1.default, { width: 48, height: 48 })))));
+const GarlandCalculatorButton = ({ className, onClick }) => (react_1.default.createElement(plate_1.Plate, { rounds: 'm', shadow: 'z3', className: (0, classnames_1.default)(garland_calculator_button_module_scss_1.default.root, className) },
+    react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.main },
+        react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.text }, "\u0421\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0435\u0442\u0440\u043E\u0432 \u0433\u0438\u0440\u043B\u044F\u043D\u0434\u044B \u043F\u043E\u043A\u0443\u043F\u0430\u0442\u044C? \u041F\u043E\u043C\u043E\u0436\u0435\u043C \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043E\u043F\u0442\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0434\u043B\u0438\u043D\u0443"),
+        react_1.default.createElement(link_1.Link, { pseudo: true, onClick: onClick }, "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C")),
+    react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.icon },
+        react_1.default.createElement(spruce_1.default, { className: garland_calculator_button_module_scss_1.default.svg }))));
 exports.GarlandCalculatorButton = GarlandCalculatorButton;
-exports.default = exports.GarlandCalculatorButton;

package/mobile/components/item-image/index.d.ts

@@ -10,12 +10,12 @@ export interface ItemImageProps {
         onClick?: React.MouseEventHandler;
     };
     className?: string;
-    onClick: React.MouseEventHandler;
-    badges: BadgeProps[];
+    onClick?: React.MouseEventHandler;
+    badges?: BadgeProps[];
     withBlur?: boolean;
     itemUrl?: string;
     isFetchingWishItems?: boolean;
-    onLoadImage: (duration: number) => void;
+    onLoadImage?: (duration: number) => void;
 }
 /**
  * Компонент изображения товара с избранным.
@@ -29,7 +29,7 @@ export interface ItemImageProps {
  * @param props.withBlur Добавление блюра.
  * @param props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
  */
-export default class ItemImage extends Component<ItemImageProps> {
+export declare class ItemImage extends Component<ItemImageProps> {
     bootStartTime: number;
     image: any;
     /**

package/mobile/components/item-image/index.js

@@ -22,14 +22,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemImage = void 0;
 const react_1 = __importStar(require("react"));
 const link_1 = require("@sima-land/ui-nucleons/link");
-const lodash_1 = require("lodash");
-const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const badge_list_1 = require("../../../common/components/badge-list");
-const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
+const badge_1 = require("../../../common/components/badge");
 const wish_button_1 = require("../../../common/components/wish-button");
+const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
 const cx = bind_1.default.bind(item_image_module_scss_1.default);
 /**
  * Компонент изображения товара с избранным.
@@ -67,9 +68,7 @@ class ItemImage extends react_1.Component {
     componentDidMount() {
         const img = this.image.current;
         const { onLoadImage } = this.props;
-        if (img && img.complete && (0, lodash_1.isFunction)(onLoadImage)) {
-            onLoadImage(Date.now() - this.bootStartTime);
-        }
+        img && img.complete && (onLoadImage === null || onLoadImage === void 0 ? void 0 : onLoadImage(Date.now() - this.bootStartTime));
     }
     /**
      * @inheritdoc
@@ -78,12 +77,12 @@ class ItemImage extends react_1.Component {
         const { src, alt, hasWishButton, wishProps, className, onClick, badges, withBlur, itemUrl, isFetchingWishItems, } = this.props;
         return (react_1.default.createElement("div", { className: cx('wrapper', className) },
             withBlur && (react_1.default.createElement("div", { className: cx('with-blur') },
-                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124 }))),
+                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124, opacity: '0.3' }))),
             react_1.default.createElement("div", { className: cx('image-wrapper') },
                 react_1.default.createElement(link_1.Link, { href: itemUrl }, withBlur ? (react_1.default.createElement("div", { className: cx('with-filter-blur'), children: this.getImage({ src, alt }, onClick) })) : (this.getImage({ src, alt }, onClick)))),
             Array.isArray(badges) && Boolean(badges.length) && !withBlur && (react_1.default.createElement("div", { className: cx('badges') },
-                react_1.default.createElement(badge_list_1.BadgeList, { items: badges }))),
+                react_1.default.createElement(badge_list_1.BadgeList, null, badges.map((badge, index) => (react_1.default.createElement(badge_1.Badge, Object.assign({ key: index }, badge))))))),
             hasWishButton && (react_1.default.createElement(wish_button_1.WishButton, { checked: wishProps === null || wishProps === void 0 ? void 0 : wishProps.isWished, className: wishProps === null || wishProps === void 0 ? void 0 : wishProps.className, onClick: wishProps === null || wishProps === void 0 ? void 0 : wishProps.onClick, disabled: isFetchingWishItems }))));
     }
 }
-exports.default = ItemImage;
+exports.ItemImage = ItemImage;

package/mobile/components/person-screen/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ScreenProps } from '@sima-land/ui-nucleons/screen';
-export interface PersonScreenProps extends ScreenProps {
+export interface PersonScreenProps {
     name?: string;
     appointment?: string;
     photoUrl?: string;
@@ -11,6 +10,7 @@ export interface PersonScreenProps extends ScreenProps {
     secondPhoneHref?: string;
     secondPhoneText?: string;
     arbitraryLinkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    onClose?: () => void;
 }
 /**
  * Компонент экрана персональных данных.
@@ -27,7 +27,7 @@ export interface PersonScreenProps extends ScreenProps {
  * @param props.arbitraryLinkProps Свойства произвольной ссылки.
  * @return Элемент.
  */
-export declare const PersonScreen: ({ name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, ...screenProps }: PersonScreenProps) => JSX.Element;
+export declare const PersonScreen: ({ name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose, ...screenProps }: PersonScreenProps) => JSX.Element;
 /**
  * Компонент блока-ссылки для связи.
  * @param props Свойства.

package/mobile/components/person-screen/index.js

@@ -44,20 +44,22 @@ const cx = bind_1.default.bind(person_screen_module_scss_1.default);
  * @return Элемент.
  */
 const PersonScreen = (_a) => {
-    var { name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps } = _a, screenProps = __rest(_a, ["name", "appointment", "photoUrl", "email", "skype", "phoneHref", "phoneText", "secondPhoneHref", "secondPhoneText", "arbitraryLinkProps"]);
-    return (react_1.default.createElement(screen_1.Screen, Object.assign({}, screenProps, { withDivideHeader: false }),
-        react_1.default.createElement("div", { className: cx('avatar', 'small') },
-            react_1.default.createElement(user_1.UserAvatar, { size: 64, title: name, imageUrl: photoUrl })),
-        react_1.default.createElement("div", { className: cx('avatar', 'big') },
-            react_1.default.createElement(user_1.UserAvatar, { size: 104, title: name, imageUrl: photoUrl })),
-        react_1.default.createElement("span", { className: cx('name') }, name),
-        Boolean(appointment) && react_1.default.createElement("span", { className: cx('appointment') }, appointment),
-        arbitraryLinkProps && (react_1.default.createElement("div", { className: cx('profile-url'), children: react_1.default.createElement("a", Object.assign({ className: cx('link') }, arbitraryLinkProps)) })),
-        react_1.default.createElement("div", { className: cx('items', borders_1.InnerBorder.bottom) },
-            Boolean(email) && (react_1.default.createElement(exports.CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(mail_1.default, null) })),
-            Boolean(skype) && (react_1.default.createElement(exports.CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(skype_1.default, null) })),
-            Boolean(phoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: phoneHref || undefined, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(phone_1.default, null) })),
-            Boolean(secondPhoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: secondPhoneHref || undefined, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(mobile_1.default, null) })))));
+    var { name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose } = _a, screenProps = __rest(_a, ["name", "appointment", "photoUrl", "email", "skype", "phoneHref", "phoneText", "secondPhoneHref", "secondPhoneText", "arbitraryLinkProps", "onClose"]);
+    return (react_1.default.createElement(screen_1.Screen, Object.assign({}, screenProps),
+        react_1.default.createElement(screen_1.Screen.Header, { onClose: onClose }),
+        react_1.default.createElement(screen_1.Screen.Body, null,
+            react_1.default.createElement("div", { className: cx('avatar', 'small') },
+                react_1.default.createElement(user_1.UserAvatar, { size: 64, title: name, imageUrl: photoUrl })),
+            react_1.default.createElement("div", { className: cx('avatar', 'big') },
+                react_1.default.createElement(user_1.UserAvatar, { size: 104, title: name, imageUrl: photoUrl })),
+            react_1.default.createElement("span", { className: cx('name') }, name),
+            Boolean(appointment) && react_1.default.createElement("span", { className: cx('appointment') }, appointment),
+            arbitraryLinkProps && (react_1.default.createElement("div", { className: cx('profile-url'), children: react_1.default.createElement("a", Object.assign({ className: cx('link') }, arbitraryLinkProps)) })),
+            react_1.default.createElement("div", { className: cx('items', borders_1.InnerBorder.bottom) },
+                Boolean(email) && (react_1.default.createElement(exports.CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(mail_1.default, null) })),
+                Boolean(skype) && (react_1.default.createElement(exports.CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(skype_1.default, null) })),
+                Boolean(phoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: phoneHref || undefined, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(phone_1.default, null) })),
+                Boolean(secondPhoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: secondPhoneHref || undefined, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(mobile_1.default, null) }))))));
 };
 exports.PersonScreen = PersonScreen;
 /**

package/mobile/components/product-actions-alert/index.d.ts

@@ -11,11 +11,8 @@ export interface ProductActionsAlertProps {
     onClose?: React.MouseEventHandler;
 }
 /**
- * Компонент действий.
- * @param props Свойства компонента.
- * @param props.buttons Конфигурация кнопок.
- * @param props.alertProps Свойства компонента Alert.
- * @param props.onClose Обработчик закрытия.
+ * Alert действий с товаром.
+ * @param props Свойства.
  * @return Элемент.
  */
 export declare const ProductActionsAlert: ({ buttons, alertProps, onClose }: ProductActionsAlertProps) => JSX.Element;

package/mobile/components/product-actions-alert/index.js

@@ -12,11 +12,8 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const product_actions_alert_module_scss_1 = __importDefault(require("./product-actions-alert.module.scss"));
 const cx = bind_1.default.bind(product_actions_alert_module_scss_1.default);
 /**
- * Компонент действий.
- * @param props Свойства компонента.
- * @param props.buttons Конфигурация кнопок.
- * @param props.alertProps Свойства компонента Alert.
- * @param props.onClose Обработчик закрытия.
+ * Alert действий с товаром.
+ * @param props Свойства.
  * @return Элемент.
  */
 const ProductActionsAlert = ({ buttons, alertProps, onClose }) => (react_1.default.createElement(alert_1.Alert, Object.assign({}, alertProps, { footer: react_1.default.createElement(clean_buttons_1.Clean.Group, null,

package/mobile/components/product-slider/index.d.ts

@@ -1,20 +1,17 @@
 import React from 'react';
-import { ProductSliderItem } from './item';
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
+export declare type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductSliderProps {
     /** Товары. */
-    children?: React.ReactNode;
+    children?: ItemElement | ItemElement[];
     /** Функция, вызываемая при попадании компонента в поле видимости. */
     onInViewport?: () => void;
     /** Функция, инициализирующая загрузку рекомендаций. */
     onNeedRequest?: () => void;
 }
-export interface ProductSliderComponent {
-    (props: ProductSliderProps): JSX.Element;
-    Item: typeof ProductSliderItem;
-}
 /**
- * Компонент мобильного слайдера рекомендованных товаров.
- * @param props Свойства компонента.
+ * Слайдер товаров.
+ * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductSlider: ProductSliderComponent;
+export declare const ProductSlider: ({ children, onInViewport, onNeedRequest }: ProductSliderProps) => JSX.Element;

package/mobile/components/product-slider/index.js

@@ -18,32 +18,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductSlider = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../../../desktop/components/product-carousel/utils");
-const item_1 = require("./item");
 const touch_slider_1 = require("@sima-land/ui-nucleons/touch-slider");
-const utils_2 = require("./utils");
+const product_info_1 = require("../../../common/components/product-info");
+const product_slider_module_scss_1 = __importDefault(require("./product-slider.module.scss"));
 /**
- * Компонент мобильного слайдера рекомендованных товаров.
- * @param props Свойства компонента.
+ * Слайдер товаров.
+ * @param props Свойства.
  * @return Элемент.
  */
-const ProductSlider = ({ children, onInViewport, onNeedRequest, }) => {
+const ProductSlider = ({ children, onInViewport, onNeedRequest }) => {
     const rootRef = (0, react_1.useRef)(null);
-    const [mounted, setMounted] = (0, react_1.useState)(false);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
     (0, utils_1.useViewport)(rootRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // сообщаем, когда компонент попадет в зону видимости
     (0, utils_1.useViewport)(rootRef, onInViewport);
-    // разрешаем загружать картинки только после монтирования
-    (0, react_1.useEffect)(() => setMounted(true), []);
     return (react_1.default.createElement("div", { ref: rootRef },
-        react_1.default.createElement(touch_slider_1.TouchSlider, null,
-            react_1.default.createElement(utils_2.SliderContext.Provider, { value: { needLoadImages: mounted } }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === item_1.ProductSliderItem)))));
+        react_1.default.createElement(touch_slider_1.TouchSlider, null, react_1.Children.toArray(children).reduce((list, item) => {
+            (0, react_1.isValidElement)(item) &&
+                item.type === product_info_1.ProductInfo &&
+                list.push(react_1.default.createElement("div", { key: item.key, className: product_slider_module_scss_1.default.item }, item));
+            return list;
+        }, []))));
 };
 exports.ProductSlider = ProductSlider;
-exports.ProductSlider.Item = item_1.ProductSliderItem;

package/mobile/components/product-slider/{item.module.scss → product-slider.module.scss}

@@ -1,7 +1,6 @@
-@use 'sass:math';
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
 
-.root {
+.item {
   position: relative;
   flex-shrink: 0;
   width: 160px;
@@ -12,13 +11,3 @@
     margin-right: 16px;
   }
 }
-
-.favorite-button {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-}
-
-.footer {
-  margin-top: 12px;
-}

package/mobile/components/pseudo-input/index.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-export interface Props {
+export interface PseudoInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Текст, введенный в поле. */
     text?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 /**
- * Компонент псевдо-инпута поиска.
- * @param props Пропсы.
- * @param props.text Текст подсказки.
- * @param props.onClick Обработчик клика.
+ * Псевдо-поле поиска.
+ * @param props Свойства.
  * @return Элемент.
  */
-declare const PseudoInput: ({ text, onClick }: Props) => JSX.Element;
-export default PseudoInput;
+export declare const PseudoInput: ({ text, className, ...rest }: PseudoInputProps) => JSX.Element;

package/mobile/components/pseudo-input/index.js

@@ -1,23 +1,34 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PseudoInput = void 0;
 const react_1 = __importDefault(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
 const pseudo_input_module_scss_1 = __importDefault(require("./pseudo-input.module.scss"));
-const colors_1 = require("@sima-land/ui-nucleons/colors");
 const cx = bind_1.default.bind(pseudo_input_module_scss_1.default);
 /**
- * Компонент псевдо-инпута поиска.
- * @param props Пропсы.
- * @param props.text Текст подсказки.
- * @param props.onClick Обработчик клика.
+ * Псевдо-поле поиска.
+ * @param props Свойства.
  * @return Элемент.
  */
-const PseudoInput = ({ text, onClick }) => (react_1.default.createElement("div", { onClick: onClick, className: cx('input'), role: 'button' },
-    react_1.default.createElement("span", { className: cx('icon') },
-        react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": 'true' })),
-    react_1.default.createElement("span", { className: cx('text') }, text)));
-exports.default = PseudoInput;
+const PseudoInput = (_a) => {
+    var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { role: 'button', className: cx('input', className) }),
+        react_1.default.createElement(search_1.default, { className: cx('icon'), "aria-hidden": 'true' }),
+        react_1.default.createElement("span", { className: cx('text') }, text)));
+};
+exports.PseudoInput = PseudoInput;

package/mobile/components/pseudo-input/pseudo-input.module.scss

@@ -1,21 +1,18 @@
-@import 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .input {
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  width: 100%;
   height: 40px;
-  margin-top: 24px;
   padding: 0 16px 0 12px;
   border-radius: 8px;
-  background-color: $gray4;
+  background-color: colors.$gray4;
 }
 
 .icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  display: block;
+  flex-shrink: 0;
+  fill: colors.$gray38;
 }
 
 .text {
@@ -23,5 +20,5 @@
   margin-left: 12px;
   font-size: 16px;
   line-height: 24px;
-  color: $gray38;
+  color: colors.$gray38;
 }

package/mobile/components/select-screen/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LayoutProps } from '@sima-land/ui-nucleons/layout';
 export interface SelectScreenProps {
     items?: any[];
     getItemName?: (item: any) => string;
@@ -8,9 +9,14 @@ export interface SelectScreenProps {
     }) => React.ReactNode;
     isItemSelected?: (item: any) => boolean | void;
     onItemClick?: (item: any) => void;
+    title?: string;
+    subtitle?: string;
+    onBack?: () => void;
+    onClose?: () => void;
 }
 /**
  * Экран выбора опции.
+ * @deprecated Вместо SelectScreen используйте SelectScreenLayout и SelectScreenOption вместе с Screen.
  * @param props Свойства. Поддерживаются свойства Screen.
  * @param props.items Список опций.
  * @param props.getItemName Вернет имя опции.
@@ -19,5 +25,8 @@ export interface SelectScreenProps {
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, ...screenProps }: SelectScreenProps) => JSX.Element;
-export default SelectScreen;
+export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, title, subtitle, onBack, onClose, }: SelectScreenProps) => JSX.Element;
+export declare const SelectScreenLayout: ({ children, ...props }: LayoutProps) => JSX.Element;
+export declare const SelectScreenOption: ({ children, className, selected, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    selected?: boolean | undefined;
+}) => JSX.Element;