@antscorp/antsomi-ui 1.3.5-beta.3 → 1.3.5-beta.30

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -0,0 +1,62 @@
+// Libraries
+import React, { useState, useRef } from 'react';
+import { Image } from 'antd';
+import Icon from '@antscorp/icons';
+// Components
+import { Button, Flex } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { ImageSliderStyled } from './styled';
+import clsx from 'clsx';
+export const ImageSlider = props => {
+    var _a, _b;
+    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, defaultThumbnail, onSelectDefault, } = props;
+    const sliderContainerRef = useRef(null);
+    const thumbnailSelectedRef = useRef(null);
+    const [selectedThumbnail, setSelectedThumbnail] = useState(0);
+    const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        left: selectedThumbnail * 330,
+        behavior: 'smooth',
+    });
+    (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+        left: selectedThumbnail * (330 / slidesPerView),
+        behavior: 'smooth',
+    });
+    const handleNextThumbnail = () => {
+        setSelectedThumbnail(prev => (prev === thumbnails.length - 1 ? 0 : prev + 1));
+    };
+    const handlePrevThumbnail = () => {
+        setSelectedThumbnail(prev => (prev === 0 ? thumbnails.length - 1 : prev - 1));
+    };
+    // useEffect(() => {
+    //   handleScrollToImage();
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [selectedThumbnail]);
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, vertical: true, gap: 10 },
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
+                'image-container--default': defaultThumbnailInternal === index,
+                // 'image-container--default': isSelectedDefault,
+            }) },
+            url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
+            React.createElement(Button, { className: "set-default-button", onClick: () => {
+                    setDefaultThumbnailInternal(selectedThumbnail);
+                    if (onSelectDefault) {
+                        onSelectDefault(selectedThumbnail);
+                    }
+                } },
+                defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
+                defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
+        hideThumbnailsList ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
+                'image-container--selected': index === selectedThumbnail,
+            }), onClick: () => setSelectedThumbnail(index) }, url ? React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }) : null))))),
+        previewNavigation ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-left" })),
+            React.createElement("div", { className: "change-preview-button change-preview-button--right", onClick: handleNextThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-right" })))) : null,
+        hideThumbnailsList ? null : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-left" })),
+            React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-right" }))))));
+};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.d.ts

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.js

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $skeleton?: boolean | undefined;
+    $slidesPerView?: number | undefined;
+}, never>;

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -0,0 +1,175 @@
+// Libraries
+import styled, { css } from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+// Assets
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+const backgroundImage = css `
+  ${props => props.$skeleton
+    ? css `
+          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
+          background-size: contain;
+        `
+    : css `
+          background: #e5e5e5;
+        `}
+`;
+const setWidthHeight = ({ w, h }) => `
+  width: ${w};
+  height: ${h};
+`;
+const centerBlock = css `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ImageSliderStyled = styled(Flex) `
+  /* NOTE: Style for prev and next button in thumbnail slider */
+  position: relative;
+
+  .change-preview-button {
+    ${centerBlock}
+    position: absolute;
+    top: 115px;
+    transform: translateY(-50%);
+    font-size: 24px;
+    color: #fafafa;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 6px;
+    }
+    &--right {
+      right: 6px;
+    }
+  }
+
+  .slider-button {
+    ${centerBlock}
+    position: absolute;
+    bottom: 36px;
+    transform: translateY(50%);
+
+    font-size: 12px;
+
+    ${setWidthHeight({ w: '24px', h: '24px' })}
+    border-radius: 999px;
+    background-color: #fff;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 2px;
+    }
+    &--right {
+      right: 2px;
+    }
+  }
+
+  .thumbnail-preview-container {
+    width: 330px;
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
+    border-radius: 5px;
+
+    & > div {
+      overflow: hidden;
+    }
+  }
+
+  .thumbnail-slider-container {
+    position: relative;
+    width: 330px;
+    overflow-x: scroll;
+    scrollbar-width: none;
+  }
+
+  .image-container {
+    &--big,
+    &--small {
+      ${centerBlock}
+      ${backgroundImage}
+      img {
+        object-fit: contain;
+      }
+
+      div:has(> img) {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &--big {
+      ${setWidthHeight({ w: '100%', h: '230px' })}
+      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      flex-shrink: 0;
+
+      position: relative;
+      /* border-radius: 5px; */
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1;
+      }
+    }
+
+    &--small {
+      width: ${props => `calc(100% / ${props.$slidesPerView || 3} - 10px)`};
+      height: 72px;
+      flex-shrink: 0;
+
+      border: 2px solid #e5e5e5;
+      border-radius: 2px;
+      user-select: none;
+      cursor: pointer;
+    }
+    &--selected {
+      border: 2px solid var(--primary-color);
+    }
+  }
+
+  .set-default-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+  }
+
+  /* .swiper-button-prev,
+  .swiper-button-next {
+    background: #fff;
+    width: 24px;
+    height: 24px;
+    border-radius: 999px;
+    &:after {
+      font-size: 14px;
+      font-weight: bold;
+      color: #000;
+    }
+    &.swiper-button-disabled {
+      opacity: 1;
+      cursor: pointer;
+    }
+  } */
+
+  /* .swiper-button-prev.swiper-button-disabled {
+    opacity: 1;
+    cursor: pointer;
+  } */
+
+  /* .swiper-button-lock {
+    display: flex;
+  } */
+`;

package/es/components/molecules/TemplateSaveAs/components/index.d.ts

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/index.js

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -0,0 +1,48 @@
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TCategoryItem, TCheckedCategories, TTemplateItem } from '../../../template';
+import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+interface TemplateListingOptions {
+    service: PayloadInfo;
+    config: TTemplateListingConfig & {
+        filter?: any;
+    };
+    checkedCategoriesDefault?: TCheckedCategories;
+}
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export declare const useTemplateSave: (options: TemplateListingOptions) => {
+    categoryItems: TCategoryItem[];
+    templateItems: TTemplateItem[];
+    openCategoryKeys: string[];
+    checkedCategories: TCheckedCategories;
+    isLoadingCategoryList: boolean;
+    isLoadingTemplateList: boolean;
+    refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
+    onChangeOpenCategoryKeys: (openKeys: string[]) => void;
+    onLoadMore: () => void;
+};
+export {};

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js

@@ -0,0 +1,132 @@
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Constants
+import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants';
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export const useTemplateSave = (options) => {
+    const { service, config } = options;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, filter } = config;
+    // const { message } = App.useApp();
+    // State
+    const [state, setState] = useState({
+        checkedCategories: {},
+        openCategoryKeys: [],
+    });
+    const { checkedCategories, openCategoryKeys } = state;
+    const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
+        args: {
+            auth: service,
+            params: {
+                objectTypes: [objectType],
+                categoryCodes,
+                publicLevel,
+            },
+        },
+    });
+    // Queries
+    const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
+        args: {
+            auth: service,
+            params: Object.assign({ object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (filter ? { filter } : {})),
+        },
+    });
+    // Variables
+    const isLoadingTemplateList = isFetching || isFetchingNextPage;
+    // Memo
+    const categoryItems = useDeepCompareMemo(() => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+            const { categoryCode, categoryId, categoryName, children, total } = category;
+            const key = Array.isArray(children) && children.length
+                ? categoryCode
+                : [parentCategoryCode, categoryId].join(CATEGORY_SPLIT_KEY);
+            return {
+                key,
+                label: categoryName,
+                total,
+                children: recursiveCategory(children || [], categoryCode),
+            };
+        });
+        return recursiveCategory(categoryList || []);
+    }, [categoryList]);
+    const templateItems = useMemo(() => {
+        if (infiniteObjectTemplate) {
+            const { pages } = infiniteObjectTemplate;
+            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
+                id,
+                name,
+                thumbnail,
+            })));
+        }
+        return [];
+    }, [infiniteObjectTemplate]);
+    // Effects
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
+    }, [categoryList]);
+    // useDeepCompareEffect(() => {
+    //   if (!isEmpty(checkedCategoriesDefault)) {
+    //     setState(prev => ({
+    //       ...prev,
+    //       checkedCategories:
+    //         Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
+    //           const [key, value] = curr;
+    //           acc[key] = value.map(item => [key, item].join(CATEGORY_SPLIT_KEY));
+    //           return acc;
+    //         }, {}) || {},
+    //     }));
+    //   }
+    // }, [checkedCategoriesDefault]);
+    // Handles
+    const onChangeCheckedCategories = (checkedCategories) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
+    };
+    const onChangeOpenCategoryKeys = useCallback((openKeys) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: openKeys })));
+    }, []);
+    const onLoadMore = useCallback(() => {
+        if (!isFetchingNextPage && hasNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    return {
+        // MapKeys
+        categoryItems,
+        templateItems,
+        openCategoryKeys,
+        // Values
+        checkedCategories,
+        isLoadingCategoryList,
+        isLoadingTemplateList,
+        // Functions
+        refetchCategoryList,
+        refetchTemplateList,
+        onChangeCheckedCategories,
+        onChangeOpenCategoryKeys,
+        onLoadMore,
+    };
+};

package/es/components/molecules/TemplateSaveAs/index.d.ts

@@ -0,0 +1,4 @@
+export { TemplateSaveAs } from './TemplateSaveAs';
+export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export { useTemplateSave } from './hooks/useTemplateSave';
+export type { TemplateValueOptions } from './TemplateSaveAs';

package/es/components/molecules/TemplateSaveAs/index.js

@@ -0,0 +1,3 @@
+export { TemplateSaveAs } from './TemplateSaveAs';
+export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export { useTemplateSave } from './hooks/useTemplateSave';

package/es/components/molecules/TemplateSaveAs/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TemplateSaveAsStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $skeleton?: boolean | undefined;
+}, never>;

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -0,0 +1,73 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TemplateSaveAsStyled = styled(Flex) `
+  padding: 10px;
+  /* max-width: 1177px; */
+
+  .save-options-container {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed #e5e5e5;
+  }
+
+  .template-container {
+    width: 698px;
+    /* max-height: 567px; */
+    max-height: 50vh;
+    padding-right: 28px;
+    overflow-y: auto;
+  }
+  .share-access-container {
+    flex: 1;
+    padding: 0 28px;
+    border-left: 1px solid #e5e5e5;
+  }
+
+  .field-container {
+    gap: 10px;
+  }
+
+  .field-title {
+    font-size: 12px;
+    width: 150px;
+    /* background-color: violet; */
+    span {
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+    }
+
+    &--middle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  div:has(> .field-input) {
+    width: 330px;
+  }
+
+  .category-container {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .selected-category {
+    /* width: 240px; */
+    overflow: hidden;
+    height: 30px;
+    border: 1px solid #b8cfe6;
+    padding: 0 5px;
+    border-radius: 3px;
+
+    & > span.remove-btn {
+      font-size: 20px;
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+`;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ThumbnailCardProps } from './types';
+export declare const ThumbnailCard: React.FC<ThumbnailCardProps>;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -0,0 +1,72 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+};
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+import { Modal } from 'antd';
+// Styled
+import { ThumbnailCardWrapper } from './styled';
+// Components
+import { Button, Flex, Typography } from '../../atoms';
+// Constants
+import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+export const ThumbnailCard = memo(props => {
+    const [modal, contextHolder] = Modal.useModal();
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
+    const _b = editBtnProps || {}, { text: editText = 'Edit thumbnail', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
+    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
+    // Handlers
+    const handleRemoveThumbnail = e => {
+        e.stopPropagation();
+        modal.confirm(Object.assign(Object.assign({ title: 'Remove Template', centered: true, icon: React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px' } }), content: (React.createElement("div", null,
+                React.createElement("p", null, "Are you sure you want to remove the template?"),
+                React.createElement("p", null, "This action cant not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (onOk)
+                    onOk(id);
+            }) }));
+    };
+    const handleWrapperClick = e => {
+        e.stopPropagation();
+        onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
+    };
+    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
+        React.createElement(ThumbnailCardWrapper, { style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
+            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
+            actionAvailable && (React.createElement(React.Fragment, null,
+                React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
+                    React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
+                            e.stopPropagation();
+                            onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
+                        } }),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText)),
+                    React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
+                            e.stopPropagation();
+                            onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+                        } }, restOfPreviewBtnProps),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
+                removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
+                    React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),
+                React.createElement("div", { className: "backdrop" }),
+                React.createElement("div", null, contextHolder)))),
+        !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
+});
+ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";

package/es/components/molecules/ThumbnailCard/constants.js

@@ -0,0 +1,3 @@
+export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';

package/es/components/molecules/ThumbnailCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/index.js

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/styled.d.ts

@@ -0,0 +1 @@
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;