@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.21

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -34,7 +34,7 @@ const defaultProps = {
     selectColor: '#2f79bf80',
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -106,7 +106,7 @@ export const ResizeGrid = props => {
     useEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [grid]);
+    }, [grid, reCalculateFlag]);
     useDeepCompareEffect(() => {
         // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
         // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
@@ -560,11 +560,15 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
+        if (isPreview)
+            return;
         !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
     const unMerge = (cell, idx) => {
+        if (isPreview)
+            return;
         const { colStart, colEnd, rowStart, rowEnd } = cell;
         if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
             return;
@@ -604,6 +608,8 @@ export const ResizeGrid = props => {
         });
     }
     const upSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         // console.log('up select', idx, cell);
         if (selectRef.current &&
             selectEndRef.current &&
@@ -634,6 +640,8 @@ export const ResizeGrid = props => {
         selectEndRef.current = null;
     };
     const hoverSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         if (selectRef.current && gridRef.current) {
             // console.log('hover select', idx, cell);
             const { cell: cellStart, idx: idxStart } = selectRef.current;

package/es/components/molecules/ResizeGrid/types.d.ts

@@ -136,6 +136,7 @@ export interface IResizeGridProps {
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
     delayUpdate?: number;
+    reCalculateFlag?: number | boolean;
 }
 export type TCordinate = {
     x: number;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.d.ts

@@ -9,5 +9,6 @@ export interface RichMenuBlockProps {
     cellActiveIdx?: number;
     onClickCell?: (cellIdx: number) => void;
     onChange?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuBlock: React.FC<RichMenuBlockProps>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -8,7 +8,7 @@ import { RichMenuCell } from './RichMenuCell';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuBlock/index.tsx';
 export const RichMenuBlock = props => {
-    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, } = props;
+    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, reCalculateFlag, } = props;
     const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
     const { imageUrl, imageStyles } = image || {};
     const grid = {
@@ -45,7 +45,7 @@ export const RichMenuBlock = props => {
         }
     }, PATH);
     const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, Object.assign({}, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
         imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -5,6 +5,7 @@ interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     isPreview?: boolean;
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;
 export {};

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -20,7 +20,7 @@ import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
 import { MobileContent, RichMenuWrapper, TopBar } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -32,6 +32,6 @@ export const RichMenuMobileView = props => {
     return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
         isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
         React.createElement(MobileContent, null,
-            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell }))),
+            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
             React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
 };

package/es/components/molecules/ShareAccess/components/LayoutContent/LayoutContent.js

@@ -6,13 +6,13 @@ import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, allowChangeOnwership = true } = props;
+    const { getUserInfo, allowChangeOnwership = true, allowAddUser = true } = props;
     const { state } = useShareAccess();
     const { allowEdit, allowView } = state;
     if (!allowEdit && !allowView)
         return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
         React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
         React.createElement(GeneralAccess, null),
         React.createElement(ModalTransferOwnership, null)));

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

package/es/components/molecules/ShareAccess/types.d.ts

@@ -33,6 +33,7 @@ export type ShareAccessProps = {
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    allowAddUser?: boolean;
     allowChangeOnwership?: boolean;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     onChange?: (accessInfo: ObjectAccessInfo) => void;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ShareAccessProps } from '../ShareAccess/types';
+type categoriesProps = Array<{
+    label: string;
+    key: string | number;
+    children: Array<{
+        label: string;
+        key: string | number;
+    }>;
+}>;
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id?: string | number;
+        label?: string;
+    };
+    templateDesc?: string;
+    defaultThumbnail?: number;
+    categories?: categoriesProps;
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+export interface ImagePreviewOptions {
+    thumbnails: (string | undefined)[];
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+}
+export interface TemplateSaveAsProps {
+    className?: string;
+    shareAccess: Omit<{
+        show: boolean;
+    } & ShareAccessProps, 'accessInfo' | 'onChange'>;
+    imageReview: ImagePreviewOptions;
+    saveOptions?: {
+        saveNewText?: string;
+        saveExistText?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
+    };
+    /**
+     * Default thumbnail - order of default thumbnail in thumbnails array
+     */
+    categories?: categoriesProps;
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+    }>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;
+export {};

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

@@ -0,0 +1,144 @@
+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, { useState } from 'react';
+import { Dropdown } from 'antd';
+import dayjs from 'dayjs';
+// Components
+import { Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { TemplateSaveAsStyled } from './styled';
+import { ImageSlider } from './components';
+const { Text } = Typography;
+export const TemplateSaveAs = props => {
+    const { className, shareAccess, saveOptions, imageReview, categories, templateNames, value, onChange, } = props;
+    const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
+    const { thumbnails, skeleton, previewNavigation, slidesPerView } = imageReview;
+    const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
+    const { saveOption = saveNewValue, templateName: defaultTemplateName, templateDesc: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
+    const [templateName, setTemplateName] = useState(`Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
+    const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
+    const handleChangeValue = (newValue) => {
+        if (onChange) {
+            onChange(Object.assign(Object.assign(Object.assign({}, value), newValue), { 
+                // TODO: return saveOption and templateName generate default value if not pass as value props
+                saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
+                    ? saveOption
+                    : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption), templateName: !defaultTemplateName && !newValue.templateName
+                    ? saveOption === saveNewValue
+                        ? { id: undefined, label: templateName }
+                        : templateNameExist
+                    : newValue.templateName || defaultTemplateName }));
+        }
+    };
+    const handleAddCategory = ({ parent, parentKey, item, }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (currCategory) {
+            currCategory.children.push(item);
+            const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
+            const newCategory = [...newCategoryList, currCategory];
+            handleChangeValue({ categories: newCategory });
+        }
+        const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
+        handleChangeValue({ categories: newCategory });
+    };
+    const handleRemoveCategory = ({ parent, item }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (!currCategory)
+            return;
+        const newChildren = currCategory.children.filter(child => child.label !== item.label);
+        const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
+        handleChangeValue({
+            categories: [...newCategoryList, Object.assign(Object.assign({}, currCategory), { children: newChildren })],
+        });
+    };
+    return (React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
+        React.createElement(Flex, { className: "save-options-container" },
+            React.createElement(RadioGroup, { value: saveOption, onChange: e => handleChangeValue({
+                    saveOption: e.target.value,
+                    templateName: e.target.value === saveNewValue
+                        ? { id: undefined, label: templateName }
+                        : templateNameExist,
+                }) },
+                React.createElement(Radio, { value: saveNewValue }, saveNewText),
+                React.createElement(Radio, { value: saveExistValue }, saveExistText))),
+        React.createElement(Flex, null,
+            React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title field-title--middle" },
+                        "Template name ",
+                        React.createElement("span", null, " *")),
+                    saveOption === saveNewValue ? (React.createElement(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
+                            handleChangeValue({ templateName: { id: undefined, label: value } });
+                            setTemplateName(value);
+                        }, required: true })) : (React.createElement(Select, { className: "field-input", value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
+                            ? templateNames.map(item => ({ value: item.id, label: item.label }))
+                            : [], onChange: value => {
+                            var _a, _b;
+                            handleChangeValue({
+                                templateName: {
+                                    id: value,
+                                    label: ((_a = templateNames.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                },
+                            });
+                            setTemplateNameExist({
+                                id: value,
+                                label: ((_b = templateNames.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
+                            });
+                        } }))),
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title field-title--middle" }, "Description"),
+                    React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ templateDesc: value }) })),
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title" },
+                        "Thumbnail template ",
+                        React.createElement("span", null, "*")),
+                    React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) })), categories === null || categories === void 0 ? void 0 :
+                categories.map(parentCategory => {
+                    var _a, _b;
+                    const selectedChildren = (_a = categoriesValue
+                        .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
+                    const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
+                    const formatData = remainChildren.map((item, idx) => ({
+                        label: item.label,
+                        key: idx,
+                    }));
+                    return (React.createElement(Flex, { key: parentCategory.label, className: "field-container" },
+                        React.createElement(Text, { className: "field-title" }, parentCategory.label),
+                        React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
+                        /* selectedCategory */
+                        (_b = categoriesValue
+                            .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
+                            _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.label, className: "selected-category", justify: "space-between", align: "center" },
+                                React.createElement(Text, null, selectedItem.label),
+                                ' ',
+                                React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
+                                        parent: parentCategory.label,
+                                        item: selectedItem,
+                                    }) }, "\u00D7")))),
+                            React.createElement(Dropdown, { menu: {
+                                    items: formatData,
+                                    onClick: ({ key }) => {
+                                        handleAddCategory({
+                                            parent: parentCategory.label,
+                                            parentKey: parentCategory.key,
+                                            item: remainChildren[key],
+                                        });
+                                    },
+                                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] },
+                                React.createElement(Button, null,
+                                    "+ Add ",
+                                    parentCategory.label.toLowerCase())))));
+                })),
+            isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
+                React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null)));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalV2Props } from '../ModalV2';
+import { TemplateSaveAsProps, TemplateValueOptions } from './TemplateSaveAs';
+interface TemplateSaveAsModalProps extends ModalV2Props {
+    templateProps: TemplateSaveAsProps;
+    defaultValue?: TemplateValueOptions;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>, value?: TemplateValueOptions) => void;
+}
+export declare const TemplateSaveAsModal: React.FC<TemplateSaveAsModalProps>;
+export {};

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

@@ -0,0 +1,38 @@
+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;
+};
+import React, { useState } from 'react';
+import { ModalV2 } from '../ModalV2';
+import { TemplateSaveAs } from './TemplateSaveAs';
+// NOTE: helper link (read more about controlled and uncontrolled component)
+// Inspiration form input component https://react.dev/reference/react-dom/components/input
+export const TemplateSaveAsModal = props => {
+    const { open, onCancel, okText, onOk, title, templateProps, defaultValue } = props, restProps = __rest(props, ["open", "onCancel", "okText", "onOk", "title", "templateProps", "defaultValue"]);
+    const { onChange: templateOnChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
+    const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
+    const handleOnChange = (value) => {
+        if (templateOnChange) {
+            templateOnChange(value);
+        }
+        // NOTE: If there are no templateValue and templateOnChange => uncontrolled component => return templateValue
+        if (defaultValue && !templateValue && !templateOnChange) {
+            setInternalValue(value);
+        }
+    };
+    const handleOk = (event) => {
+        if (onOk) {
+            // NOTE: If there are templateValue and templateOnChange => controlled component => return templateValue
+            onOk(event, templateValue && templateOnChange ? templateValue : internalValue);
+        }
+    };
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: onCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
+        React.createElement(TemplateSaveAs, Object.assign({ onChange: handleOnChange, value: templateValue || internalValue }, restTemplateProps))));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ImageSliderProps {
+    thumbnails: (string | undefined)[];
+    className?: string;
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+    /**
+     * Default thumbnail - order of default thumbnail in thumbnails array
+     */
+    defaultThumbnail?: number;
+    onSelectDefault?: (imgIndex: number) => void;
+}
+export declare const ImageSlider: React.FC<ImageSliderProps>;
+export {};

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

@@ -0,0 +1,68 @@
+// 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, defaultThumbnail, onSelectDefault, } = props;
+    console.log('🚀 ~ ImageSlider ~ thumbnails:', thumbnails);
+    const sliderContainerRef = useRef(null);
+    const thumbnailSelectedRef = useRef(null);
+    const [selectedThumbnail, setSelectedThumbnail] = useState(0);
+    console.log('🚀 ~ selectedThumbnail:', selectedThumbnail);
+    const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    console.log('🚀 ~ defaultThumbnailInternal:', defaultThumbnailInternal);
+    (_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,
+            }) },
+            React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] }),
+            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'))))),
+        React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => {
+            console.log('🚀 ~ ImageSlider ~ render list ~ thumbnails:', { url, index });
+            return (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
+                    'image-container--selected': index === selectedThumbnail,
+                }), onClick: () => setSelectedThumbnail(index) },
+                React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url })));
+        })),
+        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,
+        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>;