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

package/common/components/media-modal/parts/product-brief.m.scss

@@ -0,0 +1,149 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: grid;
+}
+
+.image {
+  display: block;
+  .overlay {
+    width: 100%;
+    height: 100%;
+    > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .stub {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.info {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.title {
+  display: block;
+  text-decoration: none;
+  color: colors.$basic-gray87;
+}
+
+.price {
+  font-weight: 600;
+}
+
+.title + .price {
+  margin-top: 4px;
+}
+
+.footer {
+  display: flex;
+}
+
+.size-s {
+  column-gap: 8px;
+  row-gap: 16px;
+  grid-template-columns: 88px 1fr;
+  .image {
+    width: 88px;
+    height: 88px;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+  .info {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+  .title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .title + .price {
+    margin-top: 4px;
+  }
+  .footer {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+}
+
+.size-l {
+  column-gap: 16px;
+  row-gap: 12px;
+  grid-template-columns: 112px 1fr;
+  .image {
+    width: 112px;
+    height: 112px;
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+  }
+  .info {
+    min-width: 0; // ВАЖНО: чтобы title не вызывал переполнение
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    .title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .footer {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+}
+
+.skeleton {
+  display: grid;
+  > * {
+    border-radius: 4px;
+    background: colors.$basic-gray4;
+  }
+  &.s {
+    grid-template-columns: 88px 1fr;
+    row-gap: 16px;
+    column-gap: 16px;
+    :first-child {
+      width: 88px;
+      height: 88px;
+    }
+    :nth-child(2) {
+      width: auto;
+      height: 88px;
+    }
+    :last-child {
+      width: 128px;
+      height: 40px;
+    }
+  }
+  &.l {
+    grid-template-columns: 112px 1fr;
+    row-gap: 12px;
+    column-gap: 16px;
+    :first-child {
+      grid-row: 1/3;
+      width: 112px;
+      height: 112px;
+    }
+    :nth-child(2) {
+      grid-row: 1;
+      grid-column: 2;
+      width: auto;
+      height: 60px;
+    }
+    :last-child {
+      grid-row: 2;
+      grid-column: 2;
+      width: 128px;
+      height: 40px;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ReviewProps {
+    rating?: number;
+    ratingPlaceholder?: ReactNode;
+    author?: ReactNode;
+    button?: ReactNode;
+    children?: ReactNode;
+    loading?: boolean;
+}
+/**
+ * Отзыв.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Review({ rating, ratingPlaceholder, author, children, loading, button, }: ReviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Review = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const rating_1 = require("@sima-land/ui-nucleons/rating");
+const bind_1 = __importDefault(require("classnames/bind"));
+const review_m_scss_1 = __importDefault(require("./review.m.scss"));
+const cx = bind_1.default.bind(review_m_scss_1.default);
+/**
+ * Отзыв.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Review({ rating, ratingPlaceholder, author, children, loading, button, }) {
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(ReviewSkeleton, { button: button });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root'), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('header'), children: [(rating || ratingPlaceholder || author) && ((0, jsx_runtime_1.jsxs)("div", { className: cx('col', 'meta'), children: [(typeof rating === 'number' || ratingPlaceholder) && ((0, jsx_runtime_1.jsx)("div", { className: cx('col', 'rating'), children: rating ? (0, jsx_runtime_1.jsx)(rating_1.Rating, { size: 's', value: rating }) : ratingPlaceholder })), author && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'author'), children: author })] })), button && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'button'), children: button })] }), Boolean(children) && (0, jsx_runtime_1.jsx)("div", { className: review_m_scss_1.default.content, children: children })] }));
+}
+exports.Review = Review;
+/**
+ * Заглушка отзыва.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ReviewSkeleton({ button }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root'), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('header'), children: [(0, jsx_runtime_1.jsx)("div", { className: cx('col', 'meta'), children: (0, jsx_runtime_1.jsx)("div", { className: cx('skeleton', 'skeleton-meta') }) }), button && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'button'), children: button })] }), (0, jsx_runtime_1.jsxs)("div", { className: cx('content'), children: [(0, jsx_runtime_1.jsx)("div", { className: cx('skeleton') }), (0, jsx_runtime_1.jsx)("div", { className: cx('skeleton') })] })] }));
+}
+//# sourceMappingURL=review.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"review.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/review.tsx"],"names":[],"mappings":";;;;;;;AACA,0DAAuD;AACvD,2DAAyC;AACzC,oEAAqC;AAWrC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,uBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,MAAM,CAAC,EACrB,MAAM,EACN,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,GACM;IACZ,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,uBAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC;IAC5C,CAAC;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aACxB,iCAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aACzB,CAAC,MAAM,IAAI,iBAAiB,IAAI,MAAM,CAAC,IAAI,CAC1C,iCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,aAC9B,CAAC,OAAO,MAAM,KAAK,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CACpD,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAChC,MAAM,CAAC,CAAC,CAAC,uBAAC,eAAM,IAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,iBAAiB,GAC5D,CACP,EAEA,MAAM,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAG,MAAM,GAAO,IAC1D,CACP,EAEA,MAAM,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAG,MAAM,GAAO,IAC1D,EAEL,OAAO,CAAC,QAAQ,CAAC,IAAI,gCAAK,SAAS,EAAE,uBAAM,CAAC,OAAO,YAAG,QAAQ,GAAO,IAClE,CACP,CAAC;AACJ,CAAC;AAjCD,wBAiCC;AAED;;;;GAIG;AACH,SAAS,cAAc,CAAC,EAAE,MAAM,EAA0B;IACxD,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aACxB,iCAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aAC1B,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,YAC/B,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,GAAI,GAC/C,EACL,MAAM,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAG,MAAM,GAAO,IAC1D,EAEN,iCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,aAC3B,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,GAAI,EAClC,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,GAAI,IAC9B,IACF,CACP,CAAC;AACJ,CAAC"}

package/common/components/media-modal/parts/review.m.scss

@@ -0,0 +1,86 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.header {
+  display: flex;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.meta {
+  flex-grow: 1;
+  display: flex;
+  max-width: 100%;
+}
+
+.rating {
+  font-weight: 600;
+  color: colors.$basic-gray38;
+}
+
+.author {
+  width: 0;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: colors.$basic-gray24;
+}
+
+@include breakpoints.down('xs') {
+  .header {
+    flex-wrap: wrap;
+  }
+  .meta {
+    width: 100%;
+  }
+  .rating + .author {
+    margin-left: 12px;
+  }
+  .meta + .button {
+    width: 100%;
+    margin-top: 12px;
+  }
+}
+
+@include breakpoints.up('xs') {
+  .col + .col {
+    margin-left: 16px;
+  }
+  .button:first-child {
+    margin-left: auto;
+  }
+}
+
+.rating {
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.header + .content {
+  margin-top: 12px;
+}
+
+.skeleton {
+  flex-grow: 1;
+  height: 16px;
+  background: colors.$basic-gray4;
+  border-radius: 4px;
+  margin: 2px 0;
+}
+
+.skeleton-meta {
+  width: 216px;
+  max-width: 216px;
+}
+
+.skeleton + .skeleton {
+  margin-top: 4px;
+}

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

@@ -0,0 +1,11 @@
+import { ReactNode, Ref } from 'react';
+/**
+ * Секция с прокруткой по горизонтали по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ScrollSection({ children, scrollRef, contentRef, }: {
+    children?: ReactNode;
+    scrollRef?: Ref<HTMLDivElement>;
+    contentRef?: Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const page_scroll_lock_1 = require("@sima-land/ui-nucleons/_internal/page-scroll-lock");
+const scroll_section_m_scss_1 = __importDefault(require("./scroll-section.m.scss"));
+/**
+ * Секция с прокруткой по горизонтали по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ScrollSection({ children, scrollRef, contentRef, }) {
+    return ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: ['mxs', 'ms'], children: (0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: scroll_section_m_scss_1.default.inner, [page_scroll_lock_1.BSL_IGNORE_ATTR]: true, children: [(0, jsx_runtime_1.jsx)("div", { className: scroll_section_m_scss_1.default.gutter }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: scroll_section_m_scss_1.default.content, children: children }), (0, jsx_runtime_1.jsx)("div", { className: scroll_section_m_scss_1.default.gutter })] }) }));
+}
+exports.ScrollSection = ScrollSection;
+//# sourceMappingURL=scroll-section.js.map

package/common/components/media-modal/parts/scroll-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-section.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/scroll-section.tsx"],"names":[],"mappings":";;;;;;;AAAA,0DAAuD;AAEvD,wFAAoF;AACpF,oFAA6C;AAE7C;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,UAAU,GAKX;IACC,OAAO,CACL,uBAAC,eAAM,IAAC,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAC/B,iCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,+BAAM,CAAC,KAAK,EAAQ,CAAC,kCAAe,CAAC,EAAE,IAAI,aACzE,gCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,GAAI,EACjC,gCAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,+BAAM,CAAC,OAAO,YAC5C,QAAQ,GACL,EACN,gCAAK,SAAS,EAAE,+BAAM,CAAC,MAAM,GAAI,IAC7B,GACC,CACV,CAAC;AACJ,CAAC;AApBD,sCAoBC"}

package/common/components/media-modal/parts/scroll-section.m.scss

@@ -0,0 +1,32 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.inner {
+  display: flex;
+  overflow-x: scroll;
+  @include utils.hidden-scrollbars;
+}
+
+.content {
+  flex-shrink: 0;
+  display: flex;
+  > * {
+    flex-shrink: 0;
+  }
+  > *:not(:last-child) {
+    margin-right: 8px;
+  }
+}
+
+.gutter {
+  flex-shrink: 0;
+  display: none;
+  &:first-child {
+    margin: 0;
+  }
+  @include breakpoints.down('mm') {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { MouseEventHandler } from 'react';
+export type ThumbnailSize = 's' | 'l';
+export interface ThumbnailProps {
+    size?: ThumbnailSize;
+    type: 'icon-360' | 'icon-video' | 'preview-image' | 'preview-video';
+    src?: string;
+    alt?: string;
+    checked?: boolean;
+    onClick?: MouseEventHandler;
+    className?: string;
+    loading?: boolean;
+    title?: string;
+    price?: number;
+    currency?: string;
+}
+export declare const ThumbnailContext: import("react").Context<Pick<ThumbnailProps, "size">>;
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, title, price, currency, }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnail = exports.ThumbnailContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const Play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Play"));
+const Viewing360Perspective_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Filled/Viewing360Perspective"));
+const price_1 = require("@sima-land/ui-nucleons/price");
+const hooks_1 = require("../../../hooks");
+const bind_1 = __importDefault(require("classnames/bind"));
+const thumbnail_m_scss_1 = __importDefault(require("./thumbnail.m.scss"));
+const img_stub_1 = require("../../img-stub");
+exports.ThumbnailContext = (0, react_1.createContext)({});
+const cx = bind_1.default.bind(thumbnail_m_scss_1.default);
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, title, price, currency, }) {
+    var _a;
+    const { size: sizeFromContext } = (0, react_1.useContext)(exports.ThumbnailContext);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src);
+    const size = (_a = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _a !== void 0 ? _a : 'l';
+    const rootClassName = cx('root', `size-${size}`, (type === null || type === void 0 ? void 0 : type.startsWith('icon-')) && 'iconic', checked && 'checked', loading && 'loading', className);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail', children: [(0, jsx_runtime_1.jsx)("span", { className: cx('content') }), type === 'preview-video' && (0, jsx_runtime_1.jsx)("span", { className: cx('info') })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail', children: [(0, jsx_runtime_1.jsxs)("span", { className: cx('content'), children: [(type === null || type === void 0 ? void 0 : type.startsWith('preview-')) && ((0, jsx_runtime_1.jsxs)(image_overlay_1.ImageOverlay, { className: cx('image'), children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: cx('stub') }), !failed && (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, onError: handleError })] })), !failed && type === 'preview-video' && (0, jsx_runtime_1.jsx)("span", { className: cx('play') }), type === 'icon-360' && (0, jsx_runtime_1.jsx)(Viewing360Perspective_1.default, { fill: 'currentColor' }), type === 'icon-video' && (0, jsx_runtime_1.jsx)(Play_1.default, { width: 32, height: 32, fill: 'currentColor' })] }), (title || price) && ((0, jsx_runtime_1.jsxs)("span", { className: cx('info'), children: [title && (0, jsx_runtime_1.jsx)("span", { className: cx('title'), children: title }), price && (0, jsx_runtime_1.jsx)(price_1.Price, { className: cx('price'), value: price, currencyGrapheme: currency })] }))] }));
+}
+exports.Thumbnail = Thumbnail;
+//# sourceMappingURL=thumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/thumbnail.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAqE;AACrE,yGAAqG;AACrG,wFAAmE;AACnE,0HAAwF;AACxF,wDAAqD;AACrD,0CAA8C;AAC9C,2DAAyC;AACzC,0EAAwC;AACxC,6CAAyC;AAkB5B,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAA+B,EAAE,CAAC,CAAC;AAEhF,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,0BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,IAAI,EAAE,aAAa,EACnB,IAAI,EACJ,GAAG,EACH,GAAG,EACH,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,GACO;;IACf,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAgB,CAAC,CAAC;IAC/D,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAElD,MAAM,IAAI,GAAG,MAAA,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,eAAe,mCAAI,GAAG,CAAC;IAErD,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,EAAE,EACd,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAC,OAAO,CAAC,KAAI,QAAQ,EACrC,OAAO,IAAI,SAAS,EACpB,OAAO,IAAI,SAAS,EACpB,SAAS,CACV,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,oCAAQ,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,iBAAc,WAAW,aACzE,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,GAAI,EACjC,IAAI,KAAK,eAAe,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,IACrD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oCAAQ,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,iBAAc,WAAW,aACzE,kCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,aAC3B,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAC,UAAU,CAAC,KAAI,CAC/B,wBAAC,4BAAY,IAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aACjC,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,EAC5C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,GAAI,IAChD,CAChB,EAEA,CAAC,MAAM,IAAI,IAAI,KAAK,eAAe,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAS,EAE3E,IAAI,KAAK,UAAU,IAAI,uBAAC,+BAAW,IAAC,IAAI,EAAC,cAAc,GAAG,EAE1D,IAAI,KAAK,YAAY,IAAI,uBAAC,cAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,IAC3E,EAEN,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CACnB,kCAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aACxB,KAAK,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAG,KAAK,GAAQ,EAErD,KAAK,IAAI,uBAAC,aAAK,IAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,GAAI,IAChF,CACR,IACM,CACV,CAAC;AACJ,CAAC;AA9DD,8BA8DC"}

package/common/components/media-modal/parts/thumbnail.m.scss

@@ -0,0 +1,156 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+
+.root {
+  display: block;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  outline: 0;
+  --thumbnail-color: #{colors.$basic-gray12};
+  --thumbnail-border-size: 1px;
+  &.size-s {
+    display: flex;
+    max-width: 132px;
+    --thumbnail-content-size: 48px;
+    .content + .info {
+      margin-left: 4px;
+    }
+    .info {
+      width: 80px;
+    }
+    &.loading {
+      --thumbnail-color: #{colors.$basic-gray4};
+      --thumbnail-border-size: 0;
+      .content {
+        background: colors.$basic-gray4;
+      }
+      .info {
+        width: 80px;
+        height: var(--thumbnail-content-size);
+        background: colors.$basic-gray4;
+        border-radius: 4px;
+        @include breakpoints.gte('xs') {
+          height: 34px;
+        }
+      }
+    }
+  }
+  &.size-l {
+    max-width: 80px;
+    --thumbnail-content-size: 80px;
+    .content + .info {
+      margin-top: 2px;
+    }
+    &.loading {
+      --thumbnail-color: #{colors.$basic-gray4};
+      --thumbnail-border-size: 0;
+      .content {
+        background: colors.$basic-gray4;
+      }
+      .info {
+        width: 80px;
+        height: 34px;
+        background: colors.$basic-gray4;
+        border-radius: 4px;
+      }
+    }
+  }
+  &.iconic {
+    --thumbnail-border-size: 2px;
+  }
+  &.checked {
+    --thumbnail-color: #{colors.$basic-blue};
+    --thumbnail-border-size: 2px;
+  }
+  &:not(.checked):not(.loading):hover {
+    cursor: pointer;
+    --thumbnail-color: #{colors.$basic-gray38};
+  }
+}
+
+.content {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--thumbnail-color);
+  width: var(--thumbnail-content-size);
+  height: var(--thumbnail-content-size);
+  .play {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 2;
+    pointer-events: none;
+    &::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 4px 0 4px 7px;
+      border-color: transparent transparent transparent #fff;
+      transform: translateX(1px);
+    }
+  }
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    overflow: hidden;
+    > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .stub {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--thumbnail-border-size) var(--thumbnail-color);
+  }
+}
+
+.info {
+  display: block;
+  text-align: left;
+  font-size: 12px;
+  line-height: 16px;
+  color: colors.$basic-gray87;
+  .title {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .title + .price {
+    margin-top: 2px;
+  }
+  .price {
+    display: block;
+    font-weight: 700;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ThumbnailSize } from './thumbnail';
+export interface ThumbnailsProps {
+    size?: ThumbnailSize;
+    children?: ReactNode;
+    targetIndex?: number;
+}
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Thumbnails({ children, targetIndex, ...rest }: ThumbnailsProps): import("react/jsx-runtime").JSX.Element | null;

package/common/components/media-modal/parts/thumbnails.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.Thumbnails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const utils_1 = require("../utils");
+const hooks_2 = require("../../../../common/hooks");
+const scroll_section_1 = require("./scroll-section");
+const thumbnail_1 = require("./thumbnail");
+const bind_1 = __importDefault(require("classnames/bind"));
+const thumbnails_m_scss_1 = __importDefault(require("./thumbnails.m.scss"));
+const cx = bind_1.default.bind(thumbnails_m_scss_1.default);
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Thumbnails({ children, targetIndex, ...rest }) {
+    const mounted = (0, hooks_2.useMounted)();
+    const desktop = (0, hooks_1.useBreakpoint)('xs+');
+    const scrollRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const parent = scrollRef.current;
+        if (!(mounted && parent && typeof targetIndex === 'number')) {
+            return;
+        }
+        const target = desktop
+            ? scrollRef.current.children[targetIndex]
+            : (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.children[targetIndex];
+        if (!target) {
+            return;
+        }
+        if (desktop) {
+            parent.scrollTop += utils_1.Range.getShiftDistance(utils_1.Range.fromRectVertical(parent), utils_1.Range.fromRectVertical(target));
+        }
+        else {
+            const parentRange = utils_1.Range.fromRectHorizontal(parent);
+            parent.scrollLeft += utils_1.Range.getShiftDistance({
+                // ВАЖНО: учитываем отступы от края экрана по layout'у
+                start: parentRange.start + 16,
+                finish: parentRange.finish - 16,
+            }, utils_1.Range.fromRectHorizontal(target));
+        }
+    }, [mounted, targetIndex, desktop]);
+    if (!mounted) {
+        return null;
+    }
+    if (!desktop) {
+        return ((0, jsx_runtime_1.jsx)(thumbnail_1.ThumbnailContext.Provider, { value: { size: 's', ...rest }, children: (0, jsx_runtime_1.jsx)(scroll_section_1.ScrollSection, { scrollRef: scrollRef, contentRef: contentRef, children: children }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(thumbnail_1.ThumbnailContext.Provider, { value: { size: 'l', ...rest }, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: cx('list-desktop'), children: children }) }));
+}
+exports.Thumbnails = Thumbnails;
+//# sourceMappingURL=thumbnails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnails.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/thumbnails.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAqD;AACrD,wDAA6D;AAC7D,oCAAiC;AACjC,oDAAsD;AACtD,qDAAiD;AACjD,2CAA8D;AAC9D,2DAAyC;AACzC,4EAAyC;AAQzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAAmB;IAC5E,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,CAAC,OAAO,IAAI,MAAM,IAAI,OAAO,WAAW,KAAK,QAAQ,CAAC,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,OAAO;YACpB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;YACzC,CAAC,CAAC,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE9C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,CAAC,SAAS,IAAI,aAAK,CAAC,gBAAgB,CACxC,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAC9B,aAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAC/B,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,MAAM,WAAW,GAAG,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAErD,MAAM,CAAC,UAAU,IAAI,aAAK,CAAC,gBAAgB,CACzC;gBACE,sDAAsD;gBACtD,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,EAAE;gBAC7B,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,EAAE;aAChC,EACD,aAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CACjC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,uBAAC,8BAAa,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,YACxD,QAAQ,GACK,GACU,CAC7B,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,4BAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,YACtD,gCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,YAC/C,QAAQ,GACL,GACoB,CAC7B,CAAC;AACJ,CAAC;AA7DD,gCA6DC"}

package/common/components/media-modal/parts/thumbnails.m.scss

@@ -0,0 +1,16 @@
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.list-desktop {
+  display: flex;
+  height: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  @include utils.semi-stylized-scrollbars;
+  > * {
+    flex-shrink: 0;
+  }
+  > *:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}