@antscorp/antsomi-ui 1.3.5-beta.154 → 1.3.5-beta.156

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

@@ -22,6 +22,10 @@ export interface TemplateValueOptions {
     };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
+export interface FormValue extends Required<Omit<TemplateValueOptions, 'templateName' | 'accessInfo'>> {
+    templateName: string;
+    templateNameSelect: number | string | undefined;
+}
 export interface TemplateSaveAsProps {
     className?: string;
     shareAccess: Omit<{
@@ -68,7 +72,7 @@ export interface TemplateSaveAsProps {
         label?: string;
         placeholder?: string;
     };
-    form?: FormInstance<any>;
+    form?: FormInstance<FormValue>;
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;

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

@@ -20,9 +20,15 @@ import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Styles
 import { TemplateSaveAsStyled } from './styled';
 import { Category, ImageSlider } from './components';
+import { cloneDeep } from 'lodash';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
+    var _a;
+    const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, 
+    // form,
+    form: formProps, value, onChange, onEvent, } = props;
+    const [internalForm] = Form.useForm();
+    const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
     const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
@@ -31,72 +37,81 @@ export const TemplateSaveAs = props => {
     const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
         ? { id: undefined, label: defaultNewTemplateName }
         : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
+    const initFormValue = {
+        saveOption,
+        templateName: defaultNewTemplateName,
+        templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
+        description: defaultTemplateDesc || '',
+        categories: categoriesValue,
+        defaultThumbnail,
+    };
     const [searchValue, setSearchValue] = useState('');
     const searchValueDebounce = useDebounce(searchValue, 1000);
     useEffect(() => {
         if (searchValueDebounce && onSearch)
             onSearch(searchValueDebounce);
     }, [searchValueDebounce, onSearch]);
-    const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
-    const [templateNameExist, setTemplateNameExist] = useState((templateName === null || templateName === void 0 ? void 0 : templateName.id) ? templateName : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]);
+    // const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
+    // const [templateNameExist, setTemplateNameExist] = useState(
+    //   templateName?.id ? templateName : templateNameList?.[0],
+    // );
     // NOTE: HOTFIX templateNameExist not update when value outside changed
-    useEffect(() => {
-        if (templateName === null || templateName === void 0 ? void 0 : templateName.id) {
-            setTemplateNameExist(templateName);
-        }
-    }, [templateName]);
+    // useEffect(() => {
+    //   if (templateName?.id) {
+    //     setTemplateNameExist(templateName);
+    //   }
+    // }, [templateName]);
     const handleChangeValue = (newValue) => {
-        var _a, _b;
+        var _a;
         if (onEvent) {
             onEvent(newValue);
         }
         if (onChange) {
-            onChange(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, value), (!(value === null || value === void 0 ? void 0 : value.saveOption) && { saveOption: saveNewValue })), (!(value === null || value === void 0 ? void 0 : value.templateName) && { templateName: { id: undefined, label: templateNameNew } })), (!(value === null || value === void 0 ? void 0 : value.defaultThumbnail) && { defaultThumbnail })), newValue), (_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);
+            const formValue = cloneDeep(form.getFieldsValue(true));
+            formValue.templateName =
+                formValue.saveOption === saveNewValue
+                    ? { id: undefined, label: formValue.templateName }
+                    : {
+                        id: formValue.templateNameSelect,
+                        label: ((_a = templateNameList.find(item => item.id === formValue.templateNameSelect)) === null || _a === void 0 ? void 0 : _a.label) ||
+                            formValue.templateName ||
+                            '',
+                    };
+            delete formValue.templateNameSelect;
+            onChange(Object.assign(Object.assign(Object.assign({}, value), formValue), newValue), form.getFieldsError().flatMap(item => item.errors));
         }
     };
     const handleAddCategory = ({ parentKey, childKey }) => {
-        const currCategory = (categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey]) || [];
-        const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +childKey] });
+        var _a;
+        const currCategory = ((_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey]) || [];
+        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: [...currCategory, +childKey] });
+        form.setFieldValue('categories', newCategory);
         handleChangeValue({ categories: newCategory });
     };
     const handleRemoveCategory = ({ parentKey, childKey }) => {
-        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
+        var _a;
+        const currCategory = (_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey];
         if (!currCategory)
             return;
         const newChildren = currCategory.filter(child => child !== childKey);
-        handleChangeValue({
-            categories: Object.assign(Object.assign({}, categoriesValue), { [parentKey]: newChildren }),
-        });
+        const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: newChildren });
+        form.setFieldValue('categories', newCategory);
+        handleChangeValue({ categories: newCategory });
     };
-    return (React.createElement(Form, { form: form, initialValues: {
-            'template-name': defaultNewTemplateName ||
-                `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
-        } },
+    return (React.createElement(Form, { form: form, initialValues: initFormValue },
         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: templateNameNew }
-                                : templateNameExist,
-                        });
-                    } },
-                    React.createElement(Radio, { value: saveNewValue }, saveNewText),
-                    React.createElement(Radio, { value: saveExistValue }, saveExistText))),
+                React.createElement(Form.Item, { name: "saveOption", noStyle: true },
+                    React.createElement(RadioGroup, { onChange: e => handleChangeValue({ saveOption: e.target.value }) },
+                        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--start" },
                             templateLabel || 'Template name',
                             React.createElement("span", null, "\u2009*")),
-                        saveOption === saveNewValue ? (React.createElement(Form.Item
-                        // label="Template name"
-                        , { 
-                            // label="Template name"
-                            name: "template-name", validateTrigger: "onChange", 
-                            // noStyle
-                            rules: [
+                        React.createElement(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.saveOption !== currentValues.saveOption }, ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (React.createElement(Form.Item, { name: "templateName", validateDebounce: 1000, validateTrigger: "onChange", hasFeedback: isFieldValidating('templateName'), validateStatus: "validating", rules: [
                                 {
                                     required: true,
                                     message: "This field can't be empty",
@@ -105,60 +120,66 @@ export const TemplateSaveAs = props => {
                                     validator: validateName,
                                 },
                             ] },
-                            React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
-                                    handleChangeValue({ templateName: { id: undefined, label: value } });
-                                    setTemplateNameNew(value);
-                                }, "aria-valuetext": templateNameNew }))) : (React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
-                                if (onNamePopupScroll)
-                                    onNamePopupScroll(e);
-                                if (onScrollToBottom) {
-                                    const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
-                                    if (scrollHeight === clientHeight + scrollTop) {
-                                        onScrollToBottom();
+                            React.createElement(Input, { className: "field-input", placeholder: placeholder, maxLength: 255, onBlur: e => handleChangeValue({
+                                    templateName: { id: undefined, label: e.target.value },
+                                }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect", noStyle: true },
+                            React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
+                                    if (onNamePopupScroll)
+                                        onNamePopupScroll(e);
+                                    if (onScrollToBottom) {
+                                        const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
+                                        if (scrollHeight === clientHeight + scrollTop) {
+                                            onScrollToBottom();
+                                        }
                                     }
-                                }
-                            }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
-                                isLoading && templateNameList.length === 0 ? null : menu,
-                                isLoading ? (React.createElement(Space, { style: {
-                                        padding: '4px 0',
-                                        width: '100%',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                    } },
-                                    React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: 
-                            // If template exist is not in templateNames list => add to begin of options array
-                            (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
-                                ? [
-                                    ...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
-                                        ? []
-                                        : [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
-                                    ...templateNameList.map(item => ({
-                                        value: item.id,
-                                        label: item.label,
-                                    })),
-                                ]
-                                : [], onChange: value => {
-                                var _a, _b;
-                                handleChangeValue({
-                                    templateName: {
-                                        id: value,
-                                        label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
-                                    },
-                                });
-                                setTemplateNameExist({
-                                    id: value,
-                                    label: ((_b = templateNameList.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
-                                });
-                            } }))),
+                                }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
+                                    isLoading && templateNameList.length === 0 ? null : menu,
+                                    isLoading ? (React.createElement(Space, { style: {
+                                            padding: '4px 0',
+                                            width: '100%',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        } },
+                                        React.createElement(Spin, { size: "small" }))) : null)), options: 
+                                // If template exist is not in templateNames list => add to begin of options array
+                                (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
+                                    ? [
+                                        ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
+                                            ? []
+                                            : [
+                                                {
+                                                    value: getFieldValue('templateNameSelect'),
+                                                    label: getFieldValue('templateName'),
+                                                },
+                                            ]),
+                                        ...templateNameList.map(item => ({
+                                            value: item.id,
+                                            label: item.label,
+                                        })),
+                                    ]
+                                    : [], onChange: value => {
+                                    var _a;
+                                    return handleChangeValue({
+                                        templateName: {
+                                            id: value,
+                                            label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                        },
+                                    });
+                                } }))))),
                     React.createElement(Flex, { className: "field-container", style: { marginTop: '-20px' } },
                         React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
-                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
+                        React.createElement(Form.Item, { name: "description" },
+                            React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) }))),
                     React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title" },
                             imageReviewLabel || 'Thumbnail template',
                             " ",
                             React.createElement("span", null, "*")),
-                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) }, restImageReviewProps))),
+                        React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, noStyle: true },
+                            React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
+                                    form.setFieldValue('defaultThumbnail', value);
+                                    handleChangeValue({ defaultThumbnail: value });
+                                } }, restImageReviewProps)))),
                     isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title" }, "Categories"),
                         React.createElement(Space, { style: {
@@ -168,17 +189,23 @@ export const TemplateSaveAs = props => {
                                 alignItems: 'center',
                             } },
                             React.createElement(Spin, { size: "small" })))) : null,
-                    !isLoadingCategories && categories
+                    React.createElement(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.categories !== currentValues.categories }, ({ getFieldValue }) => !isLoadingCategories && categories
                         ? categories.map(parentCategory => {
-                            const selectedChildren = categoriesValue[parentCategory.key];
+                            var _a;
+                            const selectedChildren = (_a = getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentCategory.key];
+                            // const selectedChildren = categoriesValue[parentCategory.key];
                             // NOTE: filter to remove device and template categories
                             if (omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.includes(parentCategory.key.toString()))
                                 return null;
                             return (React.createElement(Category, { key: parentCategory.key, categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }));
                         })
-                        : null),
+                        : null)),
                 isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
-                    React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
+                    React.createElement(ShareAccess
+                    // accessInfo={form.getFieldValue('accessInfo')}
+                    , Object.assign({ 
+                        // accessInfo={form.getFieldValue('accessInfo')}
+                        accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
                             publicOnlyWith: true,
                         }, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
 };

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

@@ -3,7 +3,7 @@ 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 { TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { FormValue, TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
 import { RuleObject } from 'antd/es/form';
 interface TemplateListingOptions {
     service: PayloadInfo;
@@ -61,9 +61,9 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
         onScrollToBottom: () => void;
         isLoading: boolean;
-        validateName: (rule: RuleObject, value: any, callback?: any) => Promise<void>;
+        validateName: (rule: RuleObject, value: any) => Promise<void>;
     };
-    form: import("antd").FormInstance<any>;
+    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>>;

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

@@ -39,8 +39,10 @@ export const useTemplateSave = (options) => {
         const camelCase = snakeCaseToCamelCase(categories || {});
         return { camelCase, snakeCase };
     };
-    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
+    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,
@@ -96,7 +98,7 @@ export const useTemplateSave = (options) => {
         setValue(valueArg || {});
     };
     /* Validate Template Name */
-    const validateName = (rule, value, callback) => __awaiter(void 0, void 0, void 0, function* () {
+    const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
         if (!value)
             return;
         const response = yield validateTemplateName({
@@ -104,7 +106,7 @@ export const useTemplateSave = (options) => {
             params: {
                 object_type: objectType,
                 public_level: publicLevel,
-                template_name: value,
+                template_name: value.trim(),
             },
         });
         if (response.existed) {

package/es/constants/theme.js

@@ -181,4 +181,7 @@ THEME.components = {
     Tooltip: {
         colorBgSpotlight: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw8,
     },
+    Dropdown: {
+        controlItemBgHover: '#F2F9FF',
+    },
 };

package/es/test.js

@@ -71,7 +71,7 @@ const getUserInfos = (email) => __awaiter(void 0, void 0, void 0, function* () {
     return data;
 });
 export const App = () => {
-    const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, } = useTemplateSave({
+    const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, errors, } = useTemplateSave({
         service: {
             url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
             token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
@@ -118,12 +118,10 @@ export const App = () => {
     // />
     React.createElement(React.Fragment, null,
         React.createElement(Button, { onClick: () => setIsOpenSaveTemplate(true) }, "Open Modal"),
-        React.createElement(TemplateSaveAsModal, { open: isOpenSaveTemplate, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false }, 
-            // onCancel={() => {
-            //   !loadingPersistTemplate && handleCancel();
-            // }}
-            onOk: (e, value) => {
-                console.log('e');
+        React.createElement(TemplateSaveAsModal, { open: isOpenSaveTemplate, destroyOnClose: true, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false }, onCancel: () => setIsOpenSaveTemplate(false), onOk: (e, value) => {
+                console.log('submit:: errors - ', errors, ' - value - ', value);
+                if (!(errors === null || errors === void 0 ? void 0 : errors.length))
+                    setIsOpenSaveTemplate(false);
             }, templateProps: {
                 form,
                 value: templateValue,
@@ -133,7 +131,7 @@ export const App = () => {
                 //     setSelectedTemplate(event.templateName.id.toString());
                 // },
                 imageReview: {
-                    thumbnails: [],
+                    thumbnails,
                     skeleton: true,
                 },
                 templateNames: templateItems,
@@ -153,7 +151,7 @@ export const App = () => {
                     },
                     allowAddUser: true,
                 },
-                templateNamesOptions: Object.assign({}, searchNameProps),
+                templateNamesOptions: searchNameProps,
             } })));
 };
 const container = document.getElementById('root');

package/package.json

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