@sima-land/moleculas 13.0.0 → 13.1.0

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

@@ -37,9 +37,13 @@ exports.reduceHoverInfo = exports.reduceBaseInfo = exports.ProductCard = exports
 const react_1 = __importStar(require("react"));
 const product_info_1 = require("../../../common/components/product-info");
 const plate_1 = require("@sima-land/ui-nucleons/plate");
+const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const classnames_1 = __importDefault(require("classnames"));
 const product_card_module_scss_1 = __importDefault(require("./product-card.module.scss"));
-exports.HoverCard = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' }))));
+exports.HoverCard = (0, react_1.forwardRef)((props, ref) => {
+    const layer = (0, layer_1.useLayer)() + 1;
+    return (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { zIndex: layer }), ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' })));
+});
 const ProductCard = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [hovered, toggle] = (0, react_1.useState)(false);

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}`,
@@ -45,6 +46,7 @@ const getSizeClasses = (size = {}) => [
  * @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)');
@@ -73,7 +75,7 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
             controlProps: {
                 size: needBigArrows ? 'l' : 's',
                 style: {
-                    zIndex: 1,
+                    zIndex: layer + 2,
                     top: `${itemWidth / 2}px`,
                 },
             },

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/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,10 +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 Вернет имя опции.
@@ -20,4 +25,8 @@ export interface SelectScreenProps {
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, onClose, }: SelectScreenProps) => JSX.Element;
+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;

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

@@ -1,10 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+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.SelectScreen = void 0;
-const react_1 = __importDefault(require("react"));
+exports.SelectScreenOption = exports.SelectScreenLayout = exports.SelectScreen = void 0;
+const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
 const prop_1 = __importDefault(require("lodash/fp/prop"));
 const screen_1 = require("@sima-land/ui-nucleons/screen");
@@ -12,9 +42,11 @@ const text_1 = require("@sima-land/ui-nucleons/text");
 const colors_1 = require("@sima-land/ui-nucleons/colors");
 const layout_1 = require("@sima-land/ui-nucleons/layout");
 const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
+const classnames_1 = __importDefault(require("classnames"));
 const select_screen_module_scss_1 = __importDefault(require("./select-screen.module.scss"));
 /**
  * Экран выбора опции.
+ * @deprecated Вместо SelectScreen используйте SelectScreenLayout и SelectScreenOption вместе с Screen.
  * @param props Свойства. Поддерживаются свойства Screen.
  * @param props.items Список опций.
  * @param props.getItemName Вернет имя опции.
@@ -23,19 +55,32 @@ const select_screen_module_scss_1 = __importDefault(require("./select-screen.mod
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-const SelectScreen = ({ items, getItemName = (0, prop_1.default)('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick, onClose, }) => (react_1.default.createElement(screen_1.Screen, null,
-    onClose && react_1.default.createElement(screen_1.Screen.Header, { onClose: onClose }),
+const SelectScreen = ({ items, getItemName = (0, prop_1.default)('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick, title, subtitle, onBack, onClose, }) => (react_1.default.createElement(screen_1.Screen, null,
+    react_1.default.createElement(screen_1.Screen.Header, { title: title, subtitle: subtitle, onBack: onBack, onClose: onClose }),
     react_1.default.createElement(screen_1.Screen.Body, null,
-        react_1.default.createElement(layout_1.MobileLayout, { disabledOn: ['mxs', 'ms'] },
-            react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, (0, lodash_1.map)(items, (item, index) => {
-                const isSelected = Boolean(isItemSelected(item));
-                return (react_1.default.createElement("button", { key: index, className: select_screen_module_scss_1.default.item, onClick: () => onItemClick && onItemClick(item) },
-                    displayItem(item, { getItemName, isSelected }),
-                    isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
-            }))))));
+        react_1.default.createElement(exports.SelectScreenLayout, { style: { padding: '16px 0' } }, (0, lodash_1.map)(items, (item, index) => {
+            const isSelected = Boolean(isItemSelected(item));
+            return (react_1.default.createElement(exports.SelectScreenOption, { key: index, onClick: () => onItemClick && onItemClick(item) },
+                displayItem(item, { getItemName, isSelected }),
+                isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+        })))));
 exports.SelectScreen = SelectScreen;
+const SelectScreenLayout = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(layout_1.MobileLayout, Object.assign({}, props, { disabledOn: ['mxs', 'ms'] }),
+        react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === exports.SelectScreenOption))));
+};
+exports.SelectScreenLayout = SelectScreenLayout;
+const SelectScreenOption = (_a) => {
+    var { children, className, selected } = _a, props = __rest(_a, ["children", "className", "selected"]);
+    return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className), "data-testid": 'select-screen:option' }),
+        children,
+        selected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+};
+exports.SelectScreenOption = SelectScreenOption;
 /**
  * Выводит опцию в текстовом виде.
+ * @deprecated
  * @param item Элемент списка.
  * @param options Опции вывода.
  * @param options.getItemName Вернет имя опции.

package/mobile/components/select-screen/select-screen.module.scss

@@ -3,7 +3,6 @@
 
 .container {
   --gutter: 24px;
-  padding: 16px 0;
   margin: 0 auto;
   max-width: calc((var(--gutter) * 5) + ((var(--layoutWidth) - (var(--gutter) * 7)) * 6 / 8));
 
@@ -22,6 +21,9 @@
   justify-content: space-between;
   width: 100%;
   padding: 16px;
+  font-size: 16px;
+  line-height: 24px;
+  height: 48px;
   margin: 0;
   border: 0;
   outline: 0;

package/package.json

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