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

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

@@ -1,68 +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 } 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, className, skeleton, previewNavigation, slidesPerView = 3, defaultThumbnail, onSelectDefault, } = props;
-    console.log('🚀 ~ ImageSlider ~ thumbnails:', thumbnails);
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, 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);
-    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" }))));
+    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, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, 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(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
+            React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
+        hideThumbnailsList || isLoading || thumbnails.length <= 2 ? null : (React.createElement(React.Fragment, null,
+            (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
+            (!infinity && selectedThumbnail !== thumbnails.length - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
 };

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,16 @@
+import React, { useMemo } from 'react';
+import { Image } from 'antd';
+export const SmallImage = React.memo(props => {
+    const { url, isSelected, index, onClick } = props;
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = url
+        ? url.includes('nocache') || url.startsWith('data:image')
+            ? url
+            : `${url}?nocache=${timeGenerated}`
+        : undefined;
+    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={imageUrl}
+        // src={url}
+        src: urlNoCache })) : 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,5 +1,9 @@
 /// <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>;
+interface ImageSliderStyledProps {
+    $skeleton?: boolean;
+    $smallImageWidth: number;
+    $imageWidth?: number;
+    $imageHeight?: number;
+}
+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, ImageSliderStyledProps, never>;
+export {};

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

@@ -25,6 +25,7 @@ const centerBlock = css `
 export const ImageSliderStyled = styled(Flex) `
   /* NOTE: Style for prev and next button in thumbnail slider */
   position: relative;
+  margin-top: 6px;
 
   .change-preview-button {
     ${centerBlock}
@@ -68,8 +69,31 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .slider-button {
+    display: none;
+  }
+
+  .thumbnail-preview-container:has(.antsomi-spin),
+  .thumbnail-slider-container:has(.antsomi-spin) {
+    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
+  }
+
+  .thumbnail-preview-container .antsomi-spin,
+  .thumbnail-slider-container .antsomi-spin {
+    width: 100%;
+    ${centerBlock}
+    background-color: #fcfcfc;
+  }
+
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
   .thumbnail-preview-container {
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -79,13 +103,39 @@ export const ImageSliderStyled = styled(Flex) `
     & > div {
       overflow: hidden;
     }
+
+    .antsomi-spin {
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+    }
   }
 
   .thumbnail-slider-container {
     position: relative;
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
+
+    .antsomi-spin {
+      height: 72px;
+    }
+  }
+
+  &:has(> .thumbnail-preview-container + .thumbnail-slider-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 1;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
   }
 
   .image-container {
@@ -104,28 +154,18 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--big {
-      ${setWidthHeight({ w: '100%', h: '230px' })}
-      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
       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)`};
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
       height: 72px;
       flex-shrink: 0;
 
@@ -145,31 +185,12 @@ export const ImageSliderStyled = styled(Flex) `
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
   }
-
-  /* .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 {
+  .image-container--big:hover {
+    .set-default-button {
       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

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

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

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

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

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+import { FormValue, TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { RuleObject } from 'antd/es/form';
+interface TemplateListingOptions {
+    service: PayloadInfo;
+    config: TTemplateListingConfig;
+    queriesOptions?: {
+        categoryList?: TGetTemplateCategoryList['options'];
+        templateList?: TGetObjectTEmplateList['options'];
+    };
+    defaultValue?: Partial<TemplateValueOptions>;
+}
+/**
+ * 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.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {Array<{ id: string | number; label: string; thumbnail?: string }>} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export declare const useTemplateSave: (options: TemplateListingOptions) => {
+    categoryItems: {
+        label: string | React.ReactNode;
+        key: string | number;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }[];
+    templateItems: {
+        [key: string]: any;
+        id: string | number;
+        label: string;
+        thumbnail?: string | undefined;
+    }[];
+    value: Partial<TemplateValueOptions>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<Partial<TemplateValueOptions>>>;
+    reset: () => void;
+    formattedCategoriesValue: {
+        camelCase: Record<string, any>;
+        snakeCase: Record<string, any>;
+    };
+    handleFormatCategories: (categories: categoriesProps | undefined) => {
+        camelCase: Record<string, any>;
+        snakeCase: Record<string, any>;
+    };
+    isLoadingCategoryList: boolean;
+    isLoadingTemplateList: boolean;
+    searchName: string;
+    onSearchName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    searchNameProps: {
+        onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+        onScrollToBottom: () => void;
+        isLoading: boolean;
+        validateName: (rule: RuleObject, value: any) => Promise<void>;
+    };
+    form: import("antd").FormInstance<FormValue>;
+    errors: any[] | undefined;
+    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("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    onLoadMore: () => void;
+    onChange: (newValue: Partial<TemplateValueOptions>) => void;
+};
+export {};

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

@@ -0,0 +1,173 @@
+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());
+    });
+};
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useValidateTemplateName, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Hooks
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { Form } from 'antd';
+import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
+/**
+ * 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.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {Array<{ id: string | number; label: string; thumbnail?: string }>} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export const useTemplateSave = (options) => {
+    const { service, config, queriesOptions, defaultValue: valueArg } = options;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, channel, } = config;
+    const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
+    const [searchName, setSearchName] = useState('');
+    const [value, setValue] = useState(valueArg || {});
+    const [errors, setErrors] = useState();
+    const handleFormatCategories = (categories) => {
+        const snakeCase = camelCaseToSnakeCase(categories || {});
+        const camelCase = snakeCaseToCamelCase(categories || {});
+        return { camelCase, snakeCase };
+    };
+    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value.categories]);
+    // const form = Form.useFormInstance<FormValue>();
+    const [form] = Form.useForm();
+    // console.log('form instance in hook:: ', form.getFieldsValue());
+    const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
+        args: {
+            auth: service,
+            params: {
+                objectTypes: [objectType],
+                categoryCodes,
+                channel,
+                publicLevel,
+                getListType,
+            },
+        },
+        options: categoryListOptions,
+    });
+    // Memo
+    const templateListFilter = useDeepCompareMemo(() => {
+        const filter = [];
+        if (searchName) {
+            filter.push({
+                TEMPLATE_NAME: { contain: searchName },
+            });
+        }
+        if (channel) {
+            filter.push({
+                CHANNEL: {
+                    matches_any: [channel],
+                },
+            });
+        }
+        return filter;
+    }, [searchName, channel]);
+    // Queries
+    const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
+        args: {
+            auth: service,
+            params: {
+                get_list_type: getListType,
+                object_type: objectType,
+                public_level: publicLevel,
+                limit: limitListPerPage,
+                filter: JSON.stringify(templateListFilter),
+            },
+        },
+        options: templateListOptions,
+    });
+    const { mutateAsync: validateTemplateName } = useValidateTemplateName({});
+    // Variables
+    const isLoadingTemplateList = isFetching || isFetchingNextPage;
+    // Memo
+    const categoryItems = useDeepCompareMemo(() => {
+        const recursiveCategory = (categories = []) => categories.map(category => {
+            const { categoryCode, categoryId, categoryName, children } = category;
+            const key = Array.isArray(children) && children.length ? categoryCode : categoryId;
+            return Object.assign({ key, label: categoryName }, ((children === null || children === void 0 ? void 0 : children.length) > 0 ? { children: recursiveCategory(children) } : {}));
+        });
+        return recursiveCategory(categoryList || []);
+    }, [categoryList]);
+    const templateItems = useMemo(() => {
+        if (infiniteObjectTemplate) {
+            const { pages } = infiniteObjectTemplate;
+            return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
+        }
+        return [];
+    }, [infiniteObjectTemplate]);
+    const onLoadMore = useCallback(() => {
+        if (!isFetchingNextPage && hasNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    const onChange = (newValue) => {
+        var _a, _b;
+        setErrors((_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
+        setValue(newValue);
+    };
+    const reset = () => {
+        setValue(valueArg || {});
+    };
+    /* Validate Template Name */
+    const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!value)
+            return;
+        const response = yield validateTemplateName({
+            auth: service,
+            params: {
+                object_type: objectType,
+                public_level: publicLevel,
+                template_name: value.trim(),
+            },
+        });
+        if (response.existed) {
+            return Promise.reject(new Error('This name has already existed'));
+        }
+        return Promise.resolve();
+    }), [objectType, publicLevel, service, validateTemplateName]);
+    return {
+        // MapKeys
+        categoryItems,
+        templateItems,
+        // State value
+        value,
+        setValue,
+        reset,
+        // formattedValue
+        formattedCategoriesValue,
+        handleFormatCategories,
+        // Values
+        isLoadingCategoryList,
+        isLoadingTemplateList,
+        // Handle Search template name
+        searchName,
+        onSearchName: setSearchName,
+        // implement props for search name on scroll to bottom
+        // usage: templateNamesOptions={{...searchNameProps}}
+        searchNameProps: {
+            onSearch: setSearchName,
+            onScrollToBottom: onLoadMore,
+            isLoading: isLoadingTemplateList,
+            validateName,
+        },
+        // Form handler
+        form,
+        errors,
+        // Functions
+        refetchCategoryList,
+        refetchTemplateList,
+        onLoadMore,
+        onChange,
+    };
+};

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

@@ -1,3 +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

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