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

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-content.d.ts

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

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

@@ -0,0 +1,103 @@
+"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 utils_1 = require("../utils");
+const media_view_1 = require("./media-view");
+const page_scroll_lock_1 = require("@sima-land/ui-nucleons/_internal/page-scroll-lock");
+const media_content_module_scss_1 = __importDefault(require("./media-content.module.scss"));
+/**
+ * Отображает медиа-контент в контексте модального окна.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaContent(props) {
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    return (react_1.default.createElement("div", { className: media_content_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, loading }) {
+    const ref = (0, react_1.useRef)(null);
+    const area = (0, utils_1.useClientRect)(ref);
+    return (react_1.default.createElement("div", { ref: ref, className: media_content_module_scss_1.default.carousel }, area.ready && (react_1.default.createElement(carousel_1.Carousel, { infinite: false, targetIndex: targetIndex, onChangeTargetIndex: onChangeTargetIndex, draggable: true, containerProps: {
+            className: media_content_module_scss_1.default.carousel,
+            // в случае если будет работать некорректно - дать возможность задавать пропсы для Carousel
+            [page_scroll_lock_1.BSL_IGNORE_ATTR]: true,
+        }, withControls: false, items: items, renderItem: data => (react_1.default.createElement("div", { className: media_content_module_scss_1.default['carousel-item'] },
+            react_1.default.createElement(FitSquare, Object.assign({}, area),
+                react_1.default.createElement(media_view_1.MediaView, { media: data, loading: loading })))) }))));
+}
+/**
+ * Отображает медиа-контент в виде слайдера.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaSlider({ items, targetIndex, onChangeTargetIndex, loading }) {
+    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_content_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(media_view_1.MediaView, { media: items[position], loading: loading })),
+        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);
+            } }))))));
+}
+/**
+ * Вписывает квадрат в заданную прямоугольную область.
+ * @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_content_module_scss_1.default.square, style: { '--square-size': `${size}px` } }, children));
+}

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

@@ -0,0 +1,42 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-item {
+  overflow: hidden;
+  width: var(--media-width);
+  height: var(--media-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 {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--square-size);
+  height: var(--square-size);
+  --media-width: var(--square-size);
+  --media-height: var(--square-size);
+}

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

@@ -0,0 +1,13 @@
+import { VideoHTMLAttributes } from 'react';
+import { MediaData } from '../types';
+export interface MediaViewProps {
+    media?: MediaData;
+    loading?: boolean;
+    videoProps?: VideoHTMLAttributes<HTMLVideoElement>;
+}
+/**
+ * Отображает медиа-контент - 360, видео или изображение.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaView({ media, loading, videoProps }: MediaViewProps): JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaView = void 0;
+const react_1 = __importDefault(require("react"));
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const all_round_view_1 = require("./all-round-view");
+/**
+ * Отображает медиа-контент - 360, видео или изображение.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaView({ media, loading, videoProps }) {
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    if (loading) {
+        return react_1.default.createElement("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root, media_view_module_scss_1.default.loading) });
+    }
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root) },
+        (media === null || media === void 0 ? void 0 : media.type) === 'image' && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: media_view_module_scss_1.default.image },
+            react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '' }))),
+        (media === null || media === void 0 ? void 0 : media.type) === 'video' && (react_1.default.createElement("video", Object.assign({ autoPlay: false, controls: true, controlsList: 'nodownload' }, videoProps),
+            react_1.default.createElement("source", { src: media.data.src }))),
+        (media === null || media === void 0 ? void 0 : media.type) === '360' && react_1.default.createElement(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })));
+}
+exports.MediaView = MediaView;

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

@@ -0,0 +1,30 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  width: var(--media-width, 320px);
+  height: var(--media-height, 240px);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.loading {
+    background: colors.$basic-gray4;
+  }
+  --all-round-view-size: min(var(--media-width), var(--media-height));
+  video,
+  .image {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  video {
+    background: colors.$basic-gray87;
+  }
+  .image img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

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

@@ -0,0 +1,21 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.header-layout {
+  min-height: 40px; // ВАЖНО: чтобы при отсутствии табов не уменьшалась высота
+  @include breakpoints.up('xs') {
+    flex-wrap: wrap;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+}
+
+.header-button {
+  margin-top: 16px !important;
+  @include breakpoints.down('xs') {
+    &:first-child {
+      margin-left: auto;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface ProductBriefProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 's' | 'l';
+    title?: string;
+    price?: string | number;
+    currency?: string;
+    footer?: ReactNode;
+    href?: string;
+    onLinkClick?: MouseEventHandler<HTMLAnchorElement>;
+    imageSrc?: string;
+    loading?: boolean;
+}
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductBrief({ size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading, ...restProps }: ProductBriefProps): JSX.Element;

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

@@ -0,0 +1,57 @@
+"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.ProductBrief = void 0;
+const react_1 = __importDefault(require("react"));
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const price_1 = require("@sima-land/ui-nucleons/price");
+const bind_1 = __importDefault(require("classnames/bind"));
+const product_brief_module_scss_1 = __importDefault(require("./product-brief.module.scss"));
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const cx = bind_1.default.bind(product_brief_module_scss_1.default);
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductBrief(_a) {
+    var { size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading } = _a, restProps = __rest(_a, ["size", "imageSrc", "title", "price", "currency", "footer", "className", "href", "onLinkClick", "loading"]);
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
+    if (loading) {
+        return react_1.default.createElement(ProductBriefSkeleton, { size: size });
+    }
+    return (react_1.default.createElement("div", Object.assign({ className: cx('root', `size-${size}`, className) }, restProps),
+        react_1.default.createElement("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick },
+            react_1.default.createElement(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay },
+                react_1.default.createElement("img", { src: imageSrc }))),
+        react_1.default.createElement("div", { className: product_brief_module_scss_1.default.info },
+            react_1.default.createElement("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick }, title),
+            price && react_1.default.createElement(price_1.Price, { className: product_brief_module_scss_1.default.price, value: price, currencyGrapheme: currency })),
+        footer && react_1.default.createElement("div", { className: product_brief_module_scss_1.default.footer }, footer)));
+}
+exports.ProductBrief = ProductBrief;
+/**
+ * Заглушка блока товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductBriefSkeleton({ size }) {
+    return (react_1.default.createElement("div", { className: cx('skeleton', size) },
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null)));
+}

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

@@ -0,0 +1,147 @@
+@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;
+    }
+  }
+}
+
+.info {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.title {
+  display: block;
+  text-decoration: none;
+  color: colors.$basic-gray87;
+}
+
+.price {
+  font-weight: 600;
+}
+
+.footer {
+  display: flex;
+  > * {
+    width: 128px;
+    --stepper-width: 128px;
+  }
+  > *:last-child {
+    margin-left: 8px;
+  }
+}
+
+.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: 16px;
+  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): JSX.Element;

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

@@ -0,0 +1,44 @@
+"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 react_1 = __importDefault(require("react"));
+const rating_1 = require("@sima-land/ui-nucleons/rating");
+const bind_1 = __importDefault(require("classnames/bind"));
+const review_module_scss_1 = __importDefault(require("./review.module.scss"));
+const cx = bind_1.default.bind(review_module_scss_1.default);
+/**
+ * Отзыв.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Review({ rating, ratingPlaceholder, author, children, loading, button, }) {
+    if (loading) {
+        return react_1.default.createElement(ReviewSkeleton, { button: button });
+    }
+    return (react_1.default.createElement("div", { className: cx('root') },
+        react_1.default.createElement("div", { className: cx('header') },
+            (rating || ratingPlaceholder || author) && (react_1.default.createElement("div", { className: cx('col', 'meta') },
+                (typeof rating === 'number' || ratingPlaceholder) && (react_1.default.createElement("div", { className: cx('col', 'rating') }, rating ? react_1.default.createElement(rating_1.Rating, { size: 's', value: rating }) : ratingPlaceholder)),
+                author && react_1.default.createElement("div", { className: cx('col', 'author') }, author))),
+            button && react_1.default.createElement("div", { className: cx('col', 'button') }, button)),
+        Boolean(children) && react_1.default.createElement("div", { className: review_module_scss_1.default.content }, children)));
+}
+exports.Review = Review;
+/**
+ * Заглушка отзыва.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ReviewSkeleton({ button }) {
+    return (react_1.default.createElement("div", { className: cx('root') },
+        react_1.default.createElement("div", { className: cx('header') },
+            react_1.default.createElement("div", { className: cx('col', 'meta') },
+                react_1.default.createElement("div", { className: cx('skeleton', 'skeleton-meta') })),
+            button && react_1.default.createElement("div", { className: cx('col', 'button') }, button)),
+        react_1.default.createElement("div", { className: cx('content') },
+            react_1.default.createElement("div", { className: cx('skeleton') }),
+            react_1.default.createElement("div", { className: cx('skeleton') }))));
+}