@antscorp/antsomi-ui 1.3.5-beta.44 → 1.3.5-beta.46

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

@@ -54,9 +54,8 @@ export interface TemplateSaveAsProps {
     templateNamesOptions?: {
         label?: string;
         isLoading?: boolean;
-        searchValue?: string;
         defaultNewTemplateName?: string;
-        onSearch?: SelectProps['onSearch'];
+        onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
     };
     descriptionOptions?: {

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

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Dropdown, Form } from 'antd';
 import dayjs from 'dayjs';
 // Components
 import { Tooltip, Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Styles
 import { TemplateSaveAsStyled } from './styled';
 import { ImageSlider } from './components';
@@ -25,10 +27,16 @@ export const TemplateSaveAs = props => {
      } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, label: imageReviewLabel, } = imageReview;
-    const { isLoading, searchValue, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
+    const { isLoading, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = 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 || {};
     const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
+    const [searchValue, setSearchValue] = useState('');
+    const searchValueDebounce = useDebounce(searchValue, 1000);
+    useEffect(() => {
+        if (searchValueDebounce && onSearch)
+            onSearch(searchValueDebounce);
+    }, [searchValueDebounce, onSearch]);
     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) => {
@@ -96,7 +104,7 @@ export const TemplateSaveAs = props => {
                             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", showSearch: true, searchValue: searchValue, onSearch: onSearch, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
+                                }, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
                                 isLoading && templateNames.length === 0 ? null : menu,
                                 isLoading ? (React.createElement(Space, { style: {
                                         padding: '4px 0',

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

@@ -1,19 +1,22 @@
+/// <reference types="react" />
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 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';
+import { TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
 interface TemplateListingOptions {
     service: PayloadInfo;
-    config: TTemplateListingConfig & {
-        filter?: any;
-    };
+    config: TTemplateListingConfig;
     queriesOptions?: {
         categoryList?: TGetTemplateCategoryList['options'];
         templateList?: TGetObjectTEmplateList['options'];
     };
-    defaultValue?: Partial<TemplateValueOptions>;
+    defaultValue?: Partial<TemplateValueOptions> & {
+        categoriesWithId?: {
+            [key: string]: (number | string)[] | undefined;
+        };
+    };
 }
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -40,8 +43,14 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         camelCase: Record<string, any>;
         snakeCase: {};
     };
+    handleFormatCategories: (categories: categoriesProps | undefined) => {
+        camelCase: Record<string, any>;
+        snakeCase: {};
+    };
     isLoadingCategoryList: boolean;
     isLoadingTemplateList: boolean;
+    searchName: string;
+    onSearchName: import("react").Dispatch<import("react").SetStateAction<string>>;
     form: import("antd").FormInstance<any>;
     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>>;

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

@@ -2,9 +2,10 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 // Hooks
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { Form } from 'antd';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
+import { omit } from 'lodash';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -20,19 +21,20 @@ import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
  */
 export const useTemplateSave = (options) => {
     const { service, config, queriesOptions, defaultValue: valueArg } = options;
-    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, filter, } = config;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType } = config;
     const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
-    const [value, setValue] = useState(valueArg || {});
+    const [searchName, setSearchName] = useState('');
+    const [value, setValue] = useState(omit(valueArg, ['categoriesWithId']) || {});
     const [errors, setErrors] = useState();
-    const formattedCategoriesValue = useMemo(() => {
-        var _a;
+    const handleFormatCategories = (categories) => {
         const snakeCase = {};
-        (_a = value.categories) === null || _a === void 0 ? void 0 : _a.forEach(category => {
-            snakeCase[category.key] = category.children;
+        categories === null || categories === void 0 ? void 0 : categories.forEach(category => {
+            snakeCase[category.key] = category.children.map(item => item.key);
         });
         const camelCase = snakeCaseToCamelCase(snakeCase);
         return { camelCase, snakeCase };
-    }, [value]);
+    };
+    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
     const [form] = Form.useForm();
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
@@ -49,7 +51,9 @@ export const useTemplateSave = (options) => {
     const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
         args: {
             auth: service,
-            params: Object.assign({ get_list_type: getListType, object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (filter ? { filter } : {})),
+            params: Object.assign({ get_list_type: getListType, object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (searchName
+                ? { filter: JSON.stringify([{ TEMPLATE_NAME: { contain: searchName } }]) }
+                : {})),
         },
         options: templateListOptions,
     });
@@ -64,6 +68,25 @@ export const useTemplateSave = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
+    useDeepCompareEffect(() => {
+        setValue(prev => {
+            const result = categoryItems
+                .filter(category => Object.keys((valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId) || {}).includes(category.key))
+                .map(category => {
+                var _a;
+                return (Object.assign(Object.assign({}, category), { children: (_a = category.children) === null || _a === void 0 ? void 0 : _a.filter(child => {
+                        var _a;
+                        return (valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId)
+                            ? (_a = valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId[category.key]) === null || _a === void 0 ? void 0 : _a.includes(child.key)
+                            : false;
+                    }) }));
+            });
+            return Object.assign(Object.assign({}, prev), { categories: result });
+        });
+    }, [categoryItems, valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId]);
+    useDeepCompareEffect(() => {
+        setValue(omit(valueArg, ['categoriesWithId']));
+    }, [valueArg]);
     const templateItems = useMemo(() => {
         if (infiniteObjectTemplate) {
             const { pages } = infiniteObjectTemplate;
@@ -92,9 +115,13 @@ export const useTemplateSave = (options) => {
         value,
         // formattedValue
         formattedCategoriesValue,
+        handleFormatCategories,
         // Values
         isLoadingCategoryList,
         isLoadingTemplateList,
+        // Handle Search template name
+        searchName,
+        onSearchName: setSearchName,
         // Form handler
         form,
         errors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.44",
+  "version": "1.3.5-beta.46",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,7 +59,6 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
     "@antscorp/icons": "0.27.6",
     "@antscorp/image-editor": "1.0.2",
     "@emotion/react": "^11.11.1",