@antscorp/antsomi-ui 1.3.5-beta.106 → 1.3.5-beta.108

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
 export type categoriesProps = {
     [key: string]: (string | number)[];
@@ -20,29 +21,19 @@ export interface TemplateValueOptions {
     };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
-export interface ImagePreviewOptions {
-    thumbnails: (string | undefined)[];
-    isLoading?: boolean;
-    skeleton?: boolean;
-    previewNavigation?: boolean;
-    slidesPerView?: number;
-    hideThumbnailsList?: boolean;
-    hideDefaultButton?: boolean;
-    label?: string;
-    imageWidth?: number;
-    imageHeight?: number;
-}
 export interface TemplateSaveAsProps {
     className?: string;
     shareAccess: Omit<{
         show: boolean;
     } & ShareAccessProps, 'accessInfo' | 'onChange'>;
-    imageReview: ImagePreviewOptions;
+    imageReview: {
+        label?: string;
+    } & Omit<ImageSliderProps, 'defaultThumbnail' | 'onSelectDefault'>;
     saveOptions?: {
         saveNewText?: string;
         saveExistText?: string;
-        readonly saveNewValue?: string;
-        readonly saveExistValue?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
     };
     isLoadingCategories?: boolean;
     categories?: Array<{

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

@@ -24,7 +24,7 @@ const { Text } = Typography;
 export const TemplateSaveAs = props => {
     const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
-    const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, imageHeight, imageWidth, label: imageReviewLabel, } = imageReview;
+    const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
     const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
     const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
@@ -148,7 +148,7 @@ export const TemplateSaveAs = props => {
                             imageReviewLabel || 'Thumbnail template',
                             " ",
                             React.createElement("span", null, "*")),
-                        React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton, imageHeight: imageHeight, imageWidth: imageWidth })),
+                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) }, restImageReviewProps))),
                     isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title" }, "Categories"),
                         React.createElement(Space, { style: {
@@ -176,7 +176,7 @@ export const TemplateSaveAs = props => {
                                         var _a;
                                         const selectedLabel = (_a = parentCategory.children.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
                                         return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
-                                            React.createElement(Tooltip, { title: selectedLabel },
+                                            React.createElement(Tooltip, { title: selectedLabel, zIndex: 3001 },
                                                 React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
                                             ' ',
                                             React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface BigImageProps {
+    url?: string;
+    isDefaultThumbnail?: boolean;
+    isHideDefaultButton?: boolean;
+    index: number;
+    onClickDefaultButton?: (index: number) => void;
+}
+export declare const BigImage: React.FC<BigImageProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Image } from 'antd';
+import { Button } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+export const BigImage = React.memo(props => {
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
+    return (React.createElement("div", { className: "image-container--big" },
+        url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null,
+        isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
+            isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
+            isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));
+});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ImageSliderProps {
+export interface ImageSliderProps {
     thumbnails: (string | undefined)[];
     isLoading?: boolean;
     className?: string;
@@ -17,4 +17,3 @@ interface ImageSliderProps {
     onSelectDefault?: (imgIndex: number) => void;
 }
 export declare const ImageSlider: React.FC<ImageSliderProps>;
-export {};

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

@@ -1,57 +1,66 @@
 // Libraries
-import React, { useState, useRef } from 'react';
-import { Image } from 'antd';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import Icon from '@antscorp/icons';
 // Components
-import { Button, Flex, Spin } from '@antscorp/antsomi-ui/es/components';
+import { Flex, Spin } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { ImageSliderStyled } from './styled';
-import clsx from 'clsx';
+import { SmallImage } from './SmallImage';
+import { BigImage } from './BigImage';
+const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
+        ? `slider-button slider-button--${direction}`
+        : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
+    React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
 export const ImageSlider = props => {
-    var _a, _b;
     const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, defaultThumbnail, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
+    const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
-    (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-        left: selectedThumbnail * imageWidth,
-        behavior: 'smooth',
-    });
-    (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-        left: selectedThumbnail * (imageWidth / 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));
-    };
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, "$imageWidth": imageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
-                'image-container--default': defaultThumbnailInternal === index,
-            }) },
-            url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
-            hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1 ? 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 || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (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)))))),
+    const handleScroll = useCallback((scrollIndex) => {
+        var _a, _b;
+        (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollIndex * imageWidth,
+            behavior: 'smooth',
+        });
+        (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+            left: scrollIndex * (smallImageWidth + 10),
+            behavior: 'smooth',
+        });
+    }, [imageWidth, smallImageWidth]);
+    const handleNextThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === thumbnails.length - 1 ? 0 : prev + 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [thumbnails, handleScroll]);
+    const handlePrevThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === 0 ? thumbnails.length - 1 : prev - 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [thumbnails, handleScroll]);
+    const handleSelectThumbnail = useCallback((index) => {
+        handleScroll(index);
+        setSelectedThumbnail(index);
+    }, [handleScroll]);
+    const handleClickDefault = useCallback((index) => {
+        // Because of only selectedThumbnail equal to current thumbnail index so can use index instead of  selectedThumbnail
+        setDefaultThumbnailInternal(index);
+        if (onSelectDefault) {
+            onSelectDefault(index);
+        }
+    }, [onSelectDefault]);
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
+        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
         previewNavigation && !isLoading ? (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(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
+            React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
         hideThumbnailsList || isLoading || thumbnails.length <= 1 ? 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" }))))));
+            React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail }),
+            React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })))));
 };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SmallImageProps {
+    url?: string;
+    isSelected?: boolean;
+    index: number;
+    onClick?: (index: number) => void;
+}
+export declare const SmallImage: React.FC<SmallImageProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Image } from 'antd';
+export const SmallImage = React.memo(props => {
+    const { url, isSelected, index, onClick } = props;
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null));
+});

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

@@ -1 +1,2 @@
 export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface ImageSliderStyledProps {
     $skeleton?: boolean;
-    $slidesPerView?: number;
+    $smallImageWidth: number;
     $imageWidth?: number;
     $imageHeight?: number;
 }

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

@@ -151,7 +151,9 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--small {
-      width: ${props => `calc(100% / ${props.$slidesPerView || 3} - 10px)`};
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
       height: 72px;
       flex-shrink: 0;
 

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

@@ -1 +1,2 @@
 export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';

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

@@ -14,19 +14,15 @@ export const TemplateSaveAsStyled = styled(Flex) `
   }
 
   .template-container {
-    width: 698px;
-    flex-grow: 1;
-    /* max-height: 567px; */
+    flex: 1 1 60%;
     max-height: 60vh;
     padding-right: 28px;
     overflow-y: auto;
   }
 
   .share-access-container {
-    /* flex: 1; */
-    width: 270px;
-    flex-shrink: 0;
-    padding: 0 28px;
+    flex: 1 1 40%;
+    padding-left: 28px;
     max-height: 60vh;
     overflow-y: auto;
     border-left: 1px solid #e5e5e5;
@@ -38,7 +34,7 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   .field-title {
     font-size: 12px;
-    width: 150px;
+    flex: 0 0 150px;
     span {
       color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
     }

package/es/models/ObjectTemplate.d.ts

@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import { TTemplateStatus } from '../types/templateListing';
 import { Model } from './model';
 import { TShareAccess } from '../types';
@@ -40,8 +39,8 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
     get settings(): Record<string, any>;
     get status(): "" | TTemplateStatus;
     get userId(): number | "";
-    get createdAt(): "-" | dayjs.Dayjs;
-    get updatedAt(): "-" | dayjs.Dayjs;
+    get createdAt(): string | undefined;
+    get updatedAt(): string | undefined;
     get objectiveTypes(): number[];
     get networkId(): number | undefined;
     get thumbnail(): string;
@@ -65,8 +64,8 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
         settings: Record<string, any>;
         status: string | TTemplateStatus;
         userId: string | number;
-        createdAt: string | dayjs.Dayjs;
-        updatedAt: string | dayjs.Dayjs;
+        createdAt: string | undefined;
+        updatedAt: string | undefined;
         objectiveTypes: number[];
         networkId: number | undefined;
         thumbnail: string;

package/es/models/ObjectTemplate.js

@@ -1,9 +1,7 @@
-// Libraries
-import dayjs from 'dayjs';
 // Models
 import { Model } from './model';
 // Constants
-import { DATE_TIME_FORMAT, LAYOUT_TEMPLATE } from '../constants';
+import { LAYOUT_TEMPLATE } from '../constants';
 export class ObjectTemplate extends Model {
     get id() {
         return this.model.template_id || '';
@@ -34,14 +32,10 @@ export class ObjectTemplate extends Model {
         return this.model.c_user_id || '';
     }
     get createdAt() {
-        return dayjs(this.model.ctime).isValid()
-            ? dayjs(this.model.ctime, DATE_TIME_FORMAT.DATE_TIME)
-            : '-';
+        return this.model.ctime;
     }
     get updatedAt() {
-        return dayjs(this.model.utime).isValid()
-            ? dayjs(this.model.utime, DATE_TIME_FORMAT.DATE_TIME)
-            : '-';
+        return this.model.utime;
     }
     get objectiveTypes() {
         return this.model.goal || [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.106",
+  "version": "1.3.5-beta.108",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",