@antscorp/antsomi-ui 1.3.5-beta.23 → 1.3.5-beta.24

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
+        React.createElement(MobileInner, { size: restOfProps.size },
             children,
             React.createElement(MobileBottomLine, null))));
 };

package/es/components/atoms/MobileFrame/styled.d.ts

@@ -1,3 +1,4 @@
+import type { MobileFrameProps } from './MobileFrame';
 export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, MobileFrameProps, never>;
 export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrame/styled.js

@@ -12,11 +12,11 @@ export const MobileWrapper = styled.div `
 export const MobileInner = styled.div `
   position: relative;
   width: 100%;
-  max-width: 336px;
-  height: 695px;
-  margin: 61px 23px 20px 24px;
-  border-bottom-left-radius: 50px;
-  border-bottom-right-radius: 50px;
+  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
+  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
+  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
+  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   overflow: hidden;
 `;
 export const MobileBottomLine = styled.div `

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' ? 45 : 84)}px;
   padding: 10px 20px;
   background-color: #fff;
   z-index: 10;

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

@@ -5,6 +5,7 @@ interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     isPreview?: boolean;
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
+    size?: 'large' | 'medium';
     reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;

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

@@ -20,7 +20,7 @@ import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
 import { MobileContent, RichMenuWrapper, TopBar } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -29,9 +29,9 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
+    return (React.createElement(MobileFrame, Object.assign({ size: size, className: `ants-mx-auto ${className}` }, restOfProps),
         isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
         React.createElement(MobileContent, null,
             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, 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(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/package.json

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