@antscorp/antsomi-ui 1.3.5-beta.4 → 1.3.5-beta.41

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -34,7 +34,7 @@ const defaultProps = {
     selectColor: '#2f79bf80',
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -106,7 +106,7 @@ export const ResizeGrid = props => {
     useEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [grid]);
+    }, [grid, reCalculateFlag]);
     useDeepCompareEffect(() => {
         // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
         // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
@@ -560,11 +560,15 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
+        if (isPreview)
+            return;
         !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
     const unMerge = (cell, idx) => {
+        if (isPreview)
+            return;
         const { colStart, colEnd, rowStart, rowEnd } = cell;
         if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
             return;
@@ -604,6 +608,8 @@ export const ResizeGrid = props => {
         });
     }
     const upSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         // console.log('up select', idx, cell);
         if (selectRef.current &&
             selectEndRef.current &&
@@ -634,6 +640,8 @@ export const ResizeGrid = props => {
         selectEndRef.current = null;
     };
     const hoverSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         if (selectRef.current && gridRef.current) {
             // console.log('hover select', idx, cell);
             const { cell: cellStart, idx: idxStart } = selectRef.current;

package/es/components/molecules/ResizeGrid/types.d.ts

@@ -136,6 +136,7 @@ export interface IResizeGridProps {
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
     delayUpdate?: number;
+    reCalculateFlag?: number | boolean;
 }
 export type TCordinate = {
     x: number;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.d.ts

@@ -9,5 +9,6 @@ export interface RichMenuBlockProps {
     cellActiveIdx?: number;
     onClickCell?: (cellIdx: number) => void;
     onChange?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuBlock: React.FC<RichMenuBlockProps>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -8,7 +8,7 @@ import { RichMenuCell } from './RichMenuCell';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuBlock/index.tsx';
 export const RichMenuBlock = props => {
-    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, } = props;
+    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, reCalculateFlag, } = props;
     const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
     const { imageUrl, imageStyles } = image || {};
     const grid = {
@@ -45,7 +45,7 @@ export const RichMenuBlock = props => {
         }
     }, PATH);
     const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, Object.assign({}, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
         imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.d.ts

@@ -4,6 +4,7 @@ export interface RichMenuChatBarProps extends React.HtmlHTMLAttributes<HTMLDivEl
     showRichMenu?: boolean;
     showTypingChat?: boolean;
     disabled?: boolean;
+    size?: 'large' | 'medium';
     onToggleRichMenu?: (toggle: boolean) => void;
     onToggleTypingChat?: (toggle: boolean) => void;
 }

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -19,11 +19,12 @@ import { TypingChat } from './TypingChat';
 const defaultProps = {
     label: 'Menu',
     showRichMenu: true,
+    size: 'large',
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
+    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
+    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
         React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
         React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
             React.createElement(Typography.Text, { className: "ants-text-sm" }, label),

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.d.ts

@@ -3,6 +3,7 @@ interface ChatBarWrapperProps {
     $showRichMenu?: boolean;
     $showTypingChat?: boolean;
     $disabled?: boolean;
+    $size?: 'large' | 'medium';
 }
 export declare const ChatBarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ChatBarWrapperProps, never>;
 export declare const ChatBarMenuBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ChatBarWrapper = styled(Flex) `
   position: relative;
-  height: 84px;
+  height: ${props => (props.$size === 'medium' ? 65 : 84)}px;
   padding: 10px 20px;
   background-color: #fff;
   z-index: 10;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -3,8 +3,15 @@ import { RichMenu } from '@antscorp/antsomi-ui/es/types';
 interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     richMenu: RichMenu;
     isPreview?: boolean;
+    messagePreview?: {
+        show?: boolean;
+        text?: string;
+    };
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;
 export {};

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -13,14 +13,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useState } from 'react';
 // Assets
 import IphoneTopBar from '@antscorp/antsomi-ui/es/assets/images/iphone-top-bar.png';
+import TailMessage from '@antscorp/antsomi-ui/es/assets/images/tail.png';
+import ProfileMessage from '@antscorp/antsomi-ui/es/assets/images/profile.png';
 // Components
 import { MobileFrame } from '@antscorp/antsomi-ui/es/components/atoms';
 import { RichMenuChatBar } from '../RichMenuChatBar';
 import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
-import { MobileContent, RichMenuWrapper, TopBar } from './styled';
+import { Image, Message, MessageBox, MessageWrapper, Profile, MobileContent, RichMenuWrapper, TopBar, } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, backgroundColor, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "backgroundColor", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -29,9 +31,26 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
-        isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+    return (React.createElement(MobileFrame, Object.assign({ size: size, backgroundColor: backgroundColor, className: `ants-mx-auto ${className}` }, restOfProps),
+        isPreview && (React.createElement(React.Fragment, null,
+            React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+            (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.show) && (React.createElement(MessageBox, null,
+                React.createElement(Profile, null,
+                    React.createElement(Image, { src: ProfileMessage, alt: "profile user" })),
+                React.createElement(MessageWrapper, null,
+                    React.createElement("div", { style: {
+                            position: 'absolute',
+                            top: '-5px',
+                            left: '-10px',
+                            width: 20,
+                            height: 20,
+                        } },
+                        React.createElement(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } })),
+                    React.createElement(Message, null, (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.text) ||
+                        `Antsomi CDP 365 helps businesses decode their customer data, understand the
+nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
+year.`)))))),
         React.createElement(MobileContent, null,
-            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell }))),
-            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
+            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
+            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
 };

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.d.ts

@@ -4,3 +4,8 @@ export declare const RichMenuWrapper: import("styled-components").StyledComponen
     $isPreview: boolean;
 }, never>;
 export declare const TopBar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const MessageBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Profile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Message: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.js

@@ -1,5 +1,8 @@
+var _a;
 // Libraries
 import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const MobileContent = styled.div `
   position: absolute;
   bottom: 0;
@@ -18,3 +21,31 @@ export const RichMenuWrapper = styled.div `
   `}
 `;
 export const TopBar = styled.img ``;
+export const MessageBox = styled.div `
+  display: flex;
+  gap: 10px;
+  margin: 15px 9px 0px 8px;
+`;
+export const Profile = styled.div `
+  width: 24px;
+  height: 24px;
+`;
+export const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+export const Message = styled.div `
+  color: rgba(37, 37, 37, 1);
+  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  line-height: 16px;
+`;
+export const MessageWrapper = styled.div `
+  position: relative;
+  flex: 1;
+  padding: 10px;
+  background-color: rgba(229, 229, 234, 1);
+  border-radius: 15px;
+  color: rgba(229, 229, 234, 1);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;

package/es/components/molecules/ShareAccess/components/LayoutContent/LayoutContent.js

@@ -6,13 +6,13 @@ import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, allowChangeOnwership = true } = props;
+    const { getUserInfo, allowChangeOnwership = true, allowAddUser = true } = props;
     const { state } = useShareAccess();
     const { allowEdit, allowView } = state;
     if (!allowEdit && !allowView)
         return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
         React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
         React.createElement(GeneralAccess, null),
         React.createElement(ModalTransferOwnership, null)));

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

package/es/components/molecules/ShareAccess/types.d.ts

@@ -8,6 +8,7 @@ export type UserInfo = {
     user_type: number;
     ctime: Date;
     utime: Date;
+    [key: string]: any;
 };
 export type UserAccessInfo = {
     userId: number;
@@ -33,6 +34,7 @@ export type ShareAccessProps = {
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    allowAddUser?: boolean;
     allowChangeOnwership?: boolean;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     onChange?: (accessInfo: ObjectAccessInfo) => void;

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -1,4 +1,4 @@
-import { ObjectAccessInfo } from './types';
+import { ObjectAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -36,3 +36,4 @@ export declare const getActionsByUser: (args: {
     readonly label: "Remove Access";
     readonly key: "remove_acess";
 })[];
+export declare const initAccessInfoDefault: (userInfo: UserInfo) => ObjectAccessInfo;

package/es/components/molecules/ShareAccess/utils.js

@@ -1,5 +1,6 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
+import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
         [`${MENU_PERMISSION.NONE}_false`]: false,
@@ -55,3 +56,11 @@ export const getActionsByUser = (args) => {
     }
     return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
 };
+export const initAccessInfoDefault = (userInfo) => ({
+    ownerId: userInfo.user_id,
+    listAccess: [
+        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
+    ],
+    publicRole: PUBLIC_ROLE.ONLY_VIEWER,
+    isPublic: 0,
+});

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { FormInstance, SelectProps } from 'antd';
+import { ShareAccessProps } from '../ShareAccess/types';
+export type categoriesProps = Array<{
+    label: string | React.ReactNode;
+    key: string | number;
+    children: Array<{
+        label: string | React.ReactNode;
+        key: string | number;
+    }>;
+}>;
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id?: string | number;
+        label?: string;
+    };
+    description?: string;
+    defaultThumbnail?: number;
+    categories?: categoriesProps;
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+export interface ImagePreviewOptions {
+    thumbnails: (string | undefined)[];
+    isLoading?: boolean;
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+    hideThumbnailsList?: boolean;
+    hideDefaultButton?: boolean;
+    label?: string;
+}
+export interface TemplateSaveAsProps {
+    className?: string;
+    shareAccess: Omit<{
+        show: boolean;
+    } & ShareAccessProps, 'accessInfo' | 'onChange'>;
+    imageReview: ImagePreviewOptions;
+    saveOptions?: {
+        saveNewText?: string;
+        saveExistText?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
+    };
+    categories?: categoriesProps;
+    /**
+     * Hide categories with following key
+     */
+    omitCategories?: string[];
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+    }>;
+    templateNamesOptions?: {
+        label?: string;
+        isLoading?: boolean;
+        searchValue?: string;
+        defaultNewTemplateName?: string;
+        onSearch?: SelectProps['onSearch'];
+        onNamePopupScroll?: SelectProps['onPopupScroll'];
+    };
+    descriptionOptions?: {
+        label?: string;
+        placeholder?: string;
+    };
+    form?: FormInstance<any>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onEvent?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;

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

@@ -0,0 +1,172 @@
+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 React, { 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';
+// Styles
+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, form, value, onChange, onEvent,
+    // onNamePopupScroll,
+     } = 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 { 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 [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) => {
+        var _a, _b;
+        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
+                defaultThumbnail: newValue.defaultThumbnail || defaultThumbnail, saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
+                    ? saveOption
+                    : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption), templateName: !defaultTemplateName && !newValue.templateName
+                    ? saveOption === saveNewValue
+                        ? { id: undefined, label: templateName }
+                        : templateNameExist
+                    : newValue.templateName || defaultTemplateName }), (_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 handleAddCategory = ({ parent, parentKey, item, }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (currCategory) {
+            currCategory.children.push(item);
+            const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
+            const newCategory = [...newCategoryList, currCategory];
+            handleChangeValue({ categories: newCategory });
+        }
+        else {
+            const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
+            handleChangeValue({ categories: newCategory });
+        }
+    };
+    const handleRemoveCategory = ({ parent, item, }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (!currCategory)
+            return;
+        const newChildren = currCategory.children.filter(child => child.label !== item.label);
+        const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
+        handleChangeValue({
+            categories: [...newCategoryList, Object.assign(Object.assign({}, currCategory), { children: newChildren })],
+        });
+    };
+    return (React.createElement(Form, { form: form, initialValues: {
+            'template-name': defaultNewTemplateName ||
+                `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
+        } },
+        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: templateName }
+                            : templateNameExist,
+                    }) },
+                    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--middle" },
+                            templateLabel || 'Template name',
+                            " ",
+                            React.createElement("span", null, " *")),
+                        saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true }] },
+                            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,
+                                isLoading && templateNames.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: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
+                                ? templateNames.map(item => ({ value: item.id, label: item.label }))
+                                : [], onChange: value => {
+                                var _a, _b;
+                                handleChangeValue({
+                                    templateName: {
+                                        id: value,
+                                        label: ((_a = templateNames.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                    },
+                                });
+                                setTemplateNameExist({
+                                    id: value,
+                                    label: ((_b = templateNames.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
+                                });
+                            } }))),
+                    React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
+                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
+                    React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title" },
+                            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 })), categories === null || categories === void 0 ? void 0 :
+                    categories.map(parentCategory => {
+                        var _a, _b, _c;
+                        const selectedChildren = (_a = categoriesValue
+                            .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
+                        const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
+                        const formatData = remainChildren.map((item, idx) => ({
+                            label: item.label,
+                            key: idx,
+                        }));
+                        // 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 */
+                            (_b = categoriesValue
+                                .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
+                                _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.key, className: "selected-category", justify: "space-between", align: "center" },
+                                    React.createElement(Tooltip, { title: selectedItem.label },
+                                        React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedItem.label)),
+                                    ' ',
+                                    React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
+                                            parent: parentCategory.label,
+                                            item: selectedItem,
+                                        }) }, "\u00D7")))),
+                                React.createElement(Dropdown, { menu: {
+                                        items: formatData,
+                                        onClick: ({ key }) => {
+                                            handleAddCategory({
+                                                parent: parentCategory.label,
+                                                parentKey: parentCategory.key,
+                                                item: remainChildren[key],
+                                            });
+                                        },
+                                    }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
+                                    "+ Add ", (_c = parentCategory.label) === null || _c === void 0 ? void 0 :
+                                    _c.toLowerCase())) : (parentCategory.label)))));
+                    })),
+                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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalV2Props } from '../ModalV2';
+import { TemplateSaveAsProps, TemplateValueOptions } from './TemplateSaveAs';
+interface TemplateSaveAsModalProps extends ModalV2Props {
+    templateProps: TemplateSaveAsProps;
+    defaultValue?: TemplateValueOptions;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>, value?: TemplateValueOptions) => void;
+}
+export declare const TemplateSaveAsModal: React.FC<TemplateSaveAsModalProps>;
+export {};