@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.3

package/common/components/media-modal/__mocks__/index.d.ts

@@ -0,0 +1,4 @@
+import { MediaData } from '../types';
+export declare const data: {
+    media: MediaData[];
+};

package/common/components/media-modal/__mocks__/index.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = {
+    media: [
+        {
+            type: '360',
+            data: {
+                photos: [
+                    'https://cdn2.static1-sima-land.com/3d/3243668/0/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/1/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/2/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/3/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/4/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/5/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/6/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/7/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/8/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/9/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/10/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/11/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/12/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/13/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/14/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/15/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/16/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/17/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/18/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/19/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/20/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/21/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/22/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/23/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/24/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/25/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/26/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/27/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/28/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/29/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/30/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/31/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/32/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/33/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/34/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/35/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/36/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/37/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/38/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/39/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/40/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/41/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/42/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/43/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/44/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/45/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/46/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/47/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/48/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/49/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/50/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/51/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/52/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/53/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/54/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/55/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/56/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/57/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/58/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/59/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/60/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/61/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/62/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/63/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/64/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/65/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/66/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/67/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/68/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/69/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/70/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/71/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/72/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/73/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/74/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/75/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/76/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/77/700.jpg',
+                    'https://cdn2.static1-sima-land.com/3d/3243668/78/700.jpg',
+                ],
+            },
+        },
+        {
+            type: 'video',
+            data: {
+                src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 1',
+                src: 'https://loremflickr.com/240/240?random=1',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Фото из отзыва, не квадратное',
+                src: 'https://loremflickr.com/240/240?random=2',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 2',
+                src: 'https://loremflickr.com/240/240?random=3',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 3',
+                src: 'https://loremflickr.com/240/240?random=4',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 4',
+                src: 'https://loremflickr.com/240/240?random=5',
+            },
+        },
+        {
+            type: 'image',
+            data: {
+                alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 5',
+                src: 'https://loremflickr.com/240/240?random=6',
+            },
+        },
+    ],
+};

package/common/components/media-modal/index.d.ts

@@ -0,0 +1,9 @@
+import { MediaLayout, MediaHeader, MediaMain, MediaAside, MediaFooter } from './layout';
+import { Preset, HeaderLayout } from './parts';
+import { ScrollSection } from './parts/scroll-section';
+import { ThumbnailsProps, Thumbnail, Thumbnails } from './parts/thumbnails';
+import { MediaContentProps, MediaContent } from './parts/media';
+import { ReviewProps, Review } from './parts/review';
+import { ProductBriefProps, ProductBrief } from './parts/product-brief';
+export type { MediaContentProps, ThumbnailsProps, ProductBriefProps, ReviewProps };
+export { MediaLayout, MediaHeader, MediaMain, MediaAside, MediaFooter, MediaContent, HeaderLayout, Thumbnails, Thumbnail, Review, ProductBrief, Preset, ScrollSection, };

package/common/components/media-modal/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSection = exports.Preset = exports.ProductBrief = exports.Review = exports.Thumbnail = exports.Thumbnails = exports.HeaderLayout = exports.MediaContent = exports.MediaFooter = exports.MediaAside = exports.MediaMain = exports.MediaHeader = exports.MediaLayout = void 0;
+const layout_1 = require("./layout");
+Object.defineProperty(exports, "MediaLayout", { enumerable: true, get: function () { return layout_1.MediaLayout; } });
+Object.defineProperty(exports, "MediaHeader", { enumerable: true, get: function () { return layout_1.MediaHeader; } });
+Object.defineProperty(exports, "MediaMain", { enumerable: true, get: function () { return layout_1.MediaMain; } });
+Object.defineProperty(exports, "MediaAside", { enumerable: true, get: function () { return layout_1.MediaAside; } });
+Object.defineProperty(exports, "MediaFooter", { enumerable: true, get: function () { return layout_1.MediaFooter; } });
+const parts_1 = require("./parts");
+Object.defineProperty(exports, "Preset", { enumerable: true, get: function () { return parts_1.Preset; } });
+Object.defineProperty(exports, "HeaderLayout", { enumerable: true, get: function () { return parts_1.HeaderLayout; } });
+const scroll_section_1 = require("./parts/scroll-section");
+Object.defineProperty(exports, "ScrollSection", { enumerable: true, get: function () { return scroll_section_1.ScrollSection; } });
+const thumbnails_1 = require("./parts/thumbnails");
+Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return thumbnails_1.Thumbnail; } });
+Object.defineProperty(exports, "Thumbnails", { enumerable: true, get: function () { return thumbnails_1.Thumbnails; } });
+const media_1 = require("./parts/media");
+Object.defineProperty(exports, "MediaContent", { enumerable: true, get: function () { return media_1.MediaContent; } });
+const review_1 = require("./parts/review");
+Object.defineProperty(exports, "Review", { enumerable: true, get: function () { return review_1.Review; } });
+const product_brief_1 = require("./parts/product-brief");
+Object.defineProperty(exports, "ProductBrief", { enumerable: true, get: function () { return product_brief_1.ProductBrief; } });

package/common/components/media-modal/layout.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+interface ContainerProps {
+    /** Содержимое. */
+    children?: ReactNode;
+}
+/**
+ * Формирует layout для модального окна медиа товара.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaLayout({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот шапки MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaHeader({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот основного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaMain({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот дополнительного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAside({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот футера MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaFooter({ children }: ContainerProps): JSX.Element;
+export {};

package/common/components/media-modal/layout.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFooter = exports.MediaAside = exports.MediaMain = exports.MediaHeader = exports.MediaLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const bind_1 = __importDefault(require("classnames/bind"));
+const layout_module_scss_1 = __importDefault(require("./layout.module.scss"));
+const cx = bind_1.default.bind(layout_module_scss_1.default);
+/**
+ * Формирует layout для модального окна медиа товара.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaLayout({ children }) {
+    const { header, main, aside, footer } = (0, define_slots_1.defineSlots)(children, {
+        header: MediaHeader,
+        main: MediaMain,
+        aside: MediaAside,
+        footer: MediaFooter,
+    });
+    const mobile = ['mxs', 'ms', 'mm', 'ml'];
+    return (react_1.default.createElement("div", { className: layout_module_scss_1.default.layout },
+        header && (react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.header }, header)),
+        react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.body },
+            aside && react_1.default.createElement("div", { className: layout_module_scss_1.default.aside }, aside),
+            react_1.default.createElement("div", { className: layout_module_scss_1.default.main }, main)),
+        footer && (react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.footer },
+            react_1.default.createElement("div", { className: cx('footer-inner', aside && 'with-aside') }, footer)))));
+}
+exports.MediaLayout = MediaLayout;
+/**
+ * Слот шапки MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaHeader({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaHeader = MediaHeader;
+/**
+ * Слот основного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaMain({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaMain = MediaMain;
+/**
+ * Слот дополнительного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAside({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaAside = MediaAside;
+/**
+ * Слот футера MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaFooter({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaFooter = MediaFooter;

package/common/components/media-modal/layout.module.scss

@@ -0,0 +1,81 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - var(--modal-header-height));
+}
+
+.body {
+  flex-grow: 1;
+  display: flex;
+}
+
+.main {
+  position: relative; // ВАЖНО: что иметь возможность заполнить доступную область содержимым
+  min-height: 50vh;
+}
+
+@include breakpoints.down('xs') {
+  .header + .body {
+    margin-top: 24px;
+  }
+  .body {
+    flex-direction: column-reverse;
+    &:first-child {
+      margin-top: 24px;
+    }
+    &:last-child {
+      margin-bottom: 24px;
+    }
+  }
+  .main {
+    min-height: max(50vh, 240px);
+    flex-grow: 1;
+  }
+  .aside + .main {
+    margin-bottom: 24px;
+  }
+  .body + .footer {
+    margin-top: 24px;
+  }
+  .footer {
+    margin-bottom: 24px;
+  }
+}
+
+@include breakpoints.up('xs') {
+  .header + .body {
+    margin-top: 40px;
+  }
+  .body {
+    &:first-child {
+      margin-top: 40px;
+    }
+    &:last-child {
+      margin-bottom: 40px;
+    }
+  }
+  .aside {
+    display: flex;
+    flex-direction: column;
+    width: 104px;
+    max-height: 100%;
+  }
+  .aside + .main {
+    margin-left: 16px;
+  }
+  .main {
+    flex-grow: 1;
+  }
+  .body + .footer {
+    margin-top: 32px;
+  }
+  .footer {
+    margin-bottom: 40px;
+  }
+  .footer-inner.with-aside {
+    margin-left: calc(104px + 16px);
+  }
+}

package/common/components/media-modal/parts/index.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TabsProps } from '@sima-land/ui-nucleons/tabs';
+import { TextButtonProps } from '@sima-land/ui-nucleons/text-button';
+export declare const Preset: {
+    readonly headerTabs: (userProps?: TabsProps) => TabsProps;
+    readonly headerButton: (userProps?: TextButtonProps) => TextButtonProps;
+};
+/**
+ * Формирует layout для шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function HeaderLayout({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export declare namespace HeaderLayout {
+    var Tabs: typeof HeaderLayoutTabs;
+    var Button: typeof HeaderLayoutButton;
+}
+/**
+ * Слот вкладок для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutTabs({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+/**
+ * Слот кнопки для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutButton({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};

package/common/components/media-modal/parts/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderLayout = exports.Preset = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const utils_1 = require("../utils");
+const scroll_section_1 = require("./scroll-section");
+const left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/left"));
+const parts_module_scss_1 = __importDefault(require("./parts.module.scss"));
+exports.Preset = {
+    headerTabs: (userProps) => (Object.assign({ view: 'clean-underline' }, userProps)),
+    headerButton: (userProps) => (Object.assign({ size: 's', startIcon: left_1.default, iconGutter: 4, className: parts_module_scss_1.default['header-button'], children: 'Вернуться к основному товару' }, userProps)),
+};
+/**
+ * Формирует layout для шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayout({ children }) {
+    const mounted = (0, utils_1.useMounted)();
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    const { tabs, button } = (0, define_slots_1.defineSlots)(children, {
+        tabs: HeaderLayoutTabs,
+        button: HeaderLayoutButton,
+    });
+    if (!mounted) {
+        return react_1.default.createElement("div", { className: parts_module_scss_1.default['header-layout'] });
+    }
+    return (react_1.default.createElement("div", { className: parts_module_scss_1.default['header-layout'] },
+        !desktop && (react_1.default.createElement(react_1.default.Fragment, null,
+            tabs && react_1.default.createElement(scroll_section_1.ScrollSection, null, tabs),
+            button && react_1.default.createElement(layout_1.Layout, null, button))),
+        desktop && (react_1.default.createElement(react_1.default.Fragment, null,
+            tabs,
+            button))));
+}
+exports.HeaderLayout = HeaderLayout;
+HeaderLayout.Tabs = HeaderLayoutTabs;
+HeaderLayout.Button = HeaderLayoutButton;
+/**
+ * Слот вкладок для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayoutTabs({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+/**
+ * Слот кнопки для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayoutButton({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}

package/common/components/media-modal/parts/media.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MediaData } from '../types';
+export interface MediaContentProps {
+    items: MediaData[];
+    targetIndex?: number;
+    onChangeTargetIndex?: (newIndex: number) => void;
+}
+/**
+ * Отображает медиа-контент в контексте модального окна.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaContent(props: MediaContentProps): JSX.Element;

package/common/components/media-modal/parts/media.js

@@ -0,0 +1,118 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaContent = void 0;
+const react_1 = __importStar(require("react"));
+const carousel_1 = require("@sima-land/ui-nucleons/carousel");
+const arrow_button_1 = require("@sima-land/ui-nucleons/arrow-button");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
+const utils_1 = require("../utils");
+const media_module_scss_1 = __importDefault(require("./media.module.scss"));
+/**
+ * Отображает медиа-контент в контексте модального окна.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaContent(props) {
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    return (react_1.default.createElement("div", { className: media_module_scss_1.default.root }, desktop ? react_1.default.createElement(MediaSlider, Object.assign({}, props)) : react_1.default.createElement(MediaCarousel, Object.assign({}, props))));
+}
+exports.MediaContent = MediaContent;
+/**
+ * Отображает медиа-контент в виде карусели.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaCarousel({ items, targetIndex, onChangeTargetIndex }) {
+    const ref = (0, react_1.useRef)(null);
+    const area = (0, utils_1.useClientRect)(ref);
+    return (react_1.default.createElement("div", { ref: ref, className: media_module_scss_1.default.carousel }, area.ready && (react_1.default.createElement(carousel_1.Carousel, { targetIndex: targetIndex, onChangeTargetIndex: onChangeTargetIndex, draggable: true, containerProps: {
+            className: media_module_scss_1.default.carousel,
+            style: {
+                '--item-width': `${area.width}px`,
+                '--item-height': `${area.height}px`,
+            },
+        }, withControls: false, items: items, renderItem: data => (react_1.default.createElement("div", { className: media_module_scss_1.default['carousel-item'] },
+            react_1.default.createElement(FitSquare, Object.assign({}, area),
+                react_1.default.createElement(MediaView, { media: data })))) }))));
+}
+/**
+ * Отображает медиа-контент в виде слайдера.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaSlider({ items, targetIndex, onChangeTargetIndex }) {
+    const [position, setPosition] = (0, react_1.useState)(0);
+    const ref = (0, react_1.useRef)(null);
+    const area = (0, utils_1.useClientRect)(ref);
+    const total = items.length;
+    const controls = total > 1;
+    const correction = controls ? 2 * (56 + 24) : 0;
+    (0, react_1.useEffect)(() => {
+        if (typeof targetIndex === 'number') {
+            setPosition(targetIndex);
+        }
+    }, [targetIndex]);
+    return (react_1.default.createElement("div", { ref: ref, className: media_module_scss_1.default.slider }, area.ready && (react_1.default.createElement(react_1.default.Fragment, null,
+        controls && (react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'left', onClick: () => {
+                const next = position - 1 >= 0 ? position - 1 : total - 1;
+                setPosition(next);
+                onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
+            } })),
+        react_1.default.createElement(FitSquare, { width: area.width + correction, height: area.height },
+            react_1.default.createElement(MediaView, { media: items[position] })),
+        controls && (react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', onClick: () => {
+                const next = (position + 1) % total;
+                setPosition(next);
+                onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
+            } }))))));
+}
+/**
+ * Отображает медиа-контент - 360, видео или изображение.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaView({ media }) {
+    return (react_1.default.createElement("div", { className: media_module_scss_1.default.media },
+        media.type === 'image' && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: media_module_scss_1.default['media-image-wrap'] },
+            react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '' }))),
+        media.type === 'video' && (react_1.default.createElement("video", { autoPlay: false, controls: true, controlsList: 'nodownload' },
+            react_1.default.createElement("source", { src: media.data.src }))),
+        media.type === '360' && react_1.default.createElement(all_round_view_1.AllRoundView, { photos: media.data.photos })));
+}
+/**
+ * Вписывает квадрат в заданную прямоугольную область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function FitSquare({ children, width, height }) {
+    const size = (0, react_1.useMemo)(() => Math.min(width, height), [width, height]);
+    return (react_1.default.createElement("div", { className: media_module_scss_1.default.square, style: { '--square-size': `${size}px` } }, children));
+}

package/common/components/media-modal/parts/media.module.scss

@@ -0,0 +1,62 @@
+.root {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-item {
+  overflow: hidden;
+  width: var(--item-width);
+  height: var(--item-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
+.square {
+  flex-shrink: 0;
+  width: var(--square-size);
+  height: var(--square-size);
+}
+
+.media {
+  --all-round-view-size: var(--square-size);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .media-image-wrap,
+  video {
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+  video {
+    background: #000;
+  }
+  .media-image-wrap img {
+    display: block;
+    height: 100%;
+    object-fit: contain;
+    width: 100%;
+  }
+}