@antscorp/antsomi-ui 1.3.5-beta.101 → 1.3.5-beta.103

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

@@ -44,6 +44,7 @@ export interface TemplateSaveAsProps {
         readonly saveNewValue?: string;
         readonly saveExistValue?: string;
     };
+    isLoadingCategories?: boolean;
     categories?: Array<{
         label: string | React.ReactNode;
         key: string | number;
@@ -66,6 +67,7 @@ export interface TemplateSaveAsProps {
         defaultNewTemplateName?: string;
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
     };
     descriptionOptions?: {
         label?: string;

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

@@ -22,15 +22,15 @@ import { TemplateSaveAsStyled } from './styled';
 import { ImageSlider } from './components';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
-    // onNamePopupScroll,
-     } = 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 { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
+    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 || {};
-    const { saveOption = saveNewValue, templateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
+    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 [searchValue, setSearchValue] = useState('');
     const searchValueDebounce = useDebounce(searchValue, 1000);
     useEffect(() => {
@@ -101,7 +101,16 @@ export const TemplateSaveAs = props => {
                             React.createElement(Input, { className: "field-input", value: templateNameNew, debounce: 100, onAfterChange: value => {
                                     handleChangeValue({ templateName: { id: undefined, label: value } });
                                     setTemplateNameNew(value);
-                                }, "aria-valuetext": templateNameNew, 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,
+                                }, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", 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',
@@ -139,43 +148,55 @@ 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 })), categories === null || categories === void 0 ? void 0 :
-                    categories.map(parentCategory => {
-                        var _a;
-                        const selectedChildren = categoriesValue[parentCategory.key];
-                        const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
-                        // NOTE: filter to remove device and template categories
-                        if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) && omitCategories.includes(parentCategory.key.toString()))
-                            return null;
-                        return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
-                            React.createElement(Text, { className: "field-title" }, parentCategory.label),
-                            React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
-                            /* selectedCategory */
-                            selectedChildren === null || selectedChildren === void 0 ? void 0 :
-                                selectedChildren.map(selectedKey => {
-                                    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(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
-                                        ' ',
-                                        React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
-                                                parent: parentCategory.key,
-                                                item: selectedKey,
-                                            }) }, "\u00D7")));
-                                }),
-                                React.createElement(Dropdown, { menu: {
-                                        items: remainChildren,
-                                        onClick: ({ key }) => {
-                                            handleAddCategory({
-                                                parentKey: parentCategory.key,
-                                                item: key,
-                                            });
-                                        },
-                                    }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
-                                    "+ Add ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
-                                    _a.toLowerCase())) : (parentCategory.label)))));
-                    })),
+                        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 })),
+                    isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title" }, "Categories"),
+                        React.createElement(Space, { style: {
+                                padding: '4px 0',
+                                width: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            } },
+                            React.createElement(Spin, { size: "small" })))) : null,
+                    !isLoadingCategories && categories
+                        ? categories.map(parentCategory => {
+                            var _a;
+                            const selectedChildren = categoriesValue[parentCategory.key];
+                            const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
+                            // NOTE: filter to remove device and template categories
+                            if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) &&
+                                omitCategories.includes(parentCategory.key.toString()))
+                                return null;
+                            return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
+                                React.createElement(Text, { className: "field-title" }, parentCategory.label),
+                                React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
+                                /* selectedCategory */
+                                selectedChildren === null || selectedChildren === void 0 ? void 0 :
+                                    selectedChildren.map(selectedKey => {
+                                        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(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
+                                            ' ',
+                                            React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
+                                                    parent: parentCategory.key,
+                                                    item: selectedKey,
+                                                }) }, "\u00D7")));
+                                    }),
+                                    React.createElement(Dropdown, { menu: {
+                                            items: remainChildren,
+                                            onClick: ({ key }) => {
+                                                handleAddCategory({
+                                                    parentKey: parentCategory.key,
+                                                    item: key,
+                                                });
+                                            },
+                                        }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
+                                        "+ Add ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
+                                        _a.toLowerCase())) : (parentCategory.label)))));
+                        })
+                        : null),
                 isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
                     React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
 };

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

@@ -45,6 +45,6 @@ export const TemplateSaveAsModal = props => {
             onCancel(event);
         }
     };
-    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } } }, restProps),
         React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
 };

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

@@ -36,6 +36,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         }>;
     }[];
     templateItems: {
+        [key: string]: any;
         id: string | number;
         label: string;
         thumbnail?: string | undefined;
@@ -55,6 +56,11 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     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;
+    };
     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

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
 import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
@@ -68,11 +79,10 @@ export const useTemplateSave = (options) => {
     const templateItems = useMemo(() => {
         if (infiniteObjectTemplate) {
             const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
-                id,
-                label: name,
-                thumbnail,
-            })));
+            return pages.flatMap(({ entities }) => entities.flatMap((_a) => {
+                var { model } = _a, restOfEntity = __rest(_a, ["model"]);
+                return restOfEntity;
+            }));
         }
         return [];
     }, [infiniteObjectTemplate]);
@@ -106,6 +116,13 @@ export const useTemplateSave = (options) => {
         // 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,
+        },
         // Form handler
         form,
         errors,

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

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const TemplateSaveAsStyled = styled(Flex) `
-  padding: 10px;
   /* max-width: 1177px; */
 
   .save-options-container {
@@ -16,14 +15,20 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   .template-container {
     width: 698px;
+    flex-grow: 1;
     /* max-height: 567px; */
-    max-height: 50vh;
+    max-height: 60vh;
     padding-right: 28px;
     overflow-y: auto;
   }
+
   .share-access-container {
-    flex: 1;
+    /* flex: 1; */
+    width: 270px;
+    flex-shrink: 0;
     padding: 0 28px;
+    max-height: 60vh;
+    overflow-y: auto;
     border-left: 1px solid #e5e5e5;
   }
 
@@ -34,7 +39,6 @@ export const TemplateSaveAsStyled = styled(Flex) `
   .field-title {
     font-size: 12px;
     width: 150px;
-    /* background-color: violet; */
     span {
       color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
     }

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -17,14 +17,14 @@ export interface BannerProps {
     showSkeleton?: boolean;
     children?: React.ReactNode;
 }
-export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {
+export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {
     thumbnails?: TThumbnail[];
     onClickThumbnail?: (value: TThumbnail) => void;
 };
 export interface SimilarTemplateProps {
     show?: boolean;
     similarTemplates?: TTemplateItem[];
-    similarCardProps?: Omit<ThumbnailCardProps, keyof TTemplateItem>;
+    similarCardProps?: Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail'>;
 }
 export interface InformationProps {
     deviceType: string;

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
 import { App } from 'antd';
@@ -150,11 +161,10 @@ export const useTemplateListing = (options) => {
     const templateItems = useMemo(() => {
         if (infiniteObjectTemplate) {
             const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
-                id,
-                name,
-                thumbnail,
-            })));
+            return pages.flatMap(({ entities }) => entities.flatMap((_a) => {
+                var { model } = _a, restOfEntity = __rest(_a, ["model"]);
+                return restOfEntity;
+            }));
         }
         return [];
     }, [infiniteObjectTemplate]);

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -22,5 +22,6 @@ export interface TTemplateItem {
     id: TThumbnailCardId;
     name?: ThumbnailCardProps['name'];
     thumbnail?: ThumbnailCardProps['thumbnail'];
+    [key: string]: any;
 }
 export type TSelectTemplateAction = 'edit' | 'preview' | 'use';

package/package.json

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