@antscorp/antsomi-ui 1.3.5-beta.39 → 1.3.5-beta.40

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

@@ -65,5 +65,6 @@ export interface TemplateSaveAsProps {
     };
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>) => void;
+    onEvent?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;

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

@@ -20,7 +20,7 @@ import { TemplateSaveAsStyled } from './styled';
 import { ImageSlider } from './components';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, descriptionOptions, value, onChange,
+    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, descriptionOptions, value, onChange, onEvent,
     // onNamePopupScroll,
      } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
@@ -32,6 +32,9 @@ export const TemplateSaveAs = props => {
     const [templateName, setTemplateName] = useState(defaultNewTemplateName || `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 (onEvent) {
+            onEvent(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

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

@@ -1,18 +1,19 @@
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
-import { TCategoryItem, TCheckedCategories, TTemplateItem } from '../../../template';
+import { TCategoryItem } from '../../../template';
 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 { TemplateValueOptions } from '../TemplateSaveAs';
 interface TemplateListingOptions {
     service: PayloadInfo;
     config: TTemplateListingConfig & {
         filter?: any;
     };
-    checkedCategoriesDefault?: TCheckedCategories;
     queriesOptions?: {
         categoryList?: TGetTemplateCategoryList['options'];
         templateList?: TGetObjectTEmplateList['options'];
     };
+    value?: Partial<TemplateValueOptions>;
 }
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -21,33 +22,25 @@ interface TemplateListingOptions {
  * @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 {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} 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;
+    templateItems: {
+        id: string | number;
+        label: string;
+        thumbnail?: string | undefined;
+    }[];
+    value: Partial<TemplateValueOptions>;
     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;
+    onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };
 export {};

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

@@ -2,9 +2,7 @@
 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';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -12,33 +10,17 @@ import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants';
  * @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 {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} 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, queriesOptions } = options;
+    const { service, config, queriesOptions, value: valueArg } = options;
     const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, filter, } = config;
     const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
-    // const { message } = App.useApp();
-    // State
-    const [state, setState] = useState({
-        checkedCategories: {},
-        openCategoryKeys: [],
-    });
-    const { checkedCategories, openCategoryKeys } = state;
+    const [value, setValue] = useState(valueArg || {});
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
             auth: service,
@@ -62,17 +44,10 @@ export const useTemplateSave = (options) => {
     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),
-            };
+        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]);
@@ -81,55 +56,32 @@ export const useTemplateSave = (options) => {
             const { pages } = infiniteObjectTemplate;
             return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
                 id,
-                name,
+                label: 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]);
+    const onChange = (newValue) => {
+        setValue(newValue);
+    };
     return {
         // MapKeys
         categoryItems,
         templateItems,
-        openCategoryKeys,
+        value,
         // Values
-        checkedCategories,
         isLoadingCategoryList,
         isLoadingTemplateList,
         // Functions
         refetchCategoryList,
         refetchTemplateList,
-        onChangeCheckedCategories,
-        onChangeOpenCategoryKeys,
         onLoadMore,
+        onChange,
     };
 };

package/package.json

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