💄 style: Add collapseOffset

Author: canisminor1990

src/react/ChatInput/demos/ActionToolbar.tsx

@@ -27,6 +27,7 @@ const ActionToolbar = memo<ActionToolbarProps>(
       <ChatInputActionBar
         left={
           <ChatInputActions
+            collapseOffset={48}
             items={[
               {
                 icon: showTypobar ? RemoveFormattingIcon : TypeIcon,

src/react/ChatInputActions/ChatInputActions.tsx

@@ -11,7 +11,7 @@ import { useStyles } from './style';
 import type { ActionItem, ChatInputActionsProps, CollapseItem, DividerItem } from './type';
 
 const ChatInputActions = memo<ChatInputActionsProps>(
-  ({ gap = 2, disabled, items = [], onActionClick, className, ...rest }) => {
+  ({ gap = 2, disabled, items = [], onActionClick, className, collapseOffset = 0, ...rest }) => {
     const { cx, styles } = useStyles();
     const [maxCount, setMaxCount] = useState(items.length);
     const [collapsed, setCollapsed] = useState(false);
@@ -34,14 +34,14 @@ const ChatInputActions = memo<ChatInputActionsProps>(
     useEffect(() => {
       if (!size?.width) return;
       const length = flatItems.length + 1;
-      const calcMaxCount = Math.floor(size.width / 48);
+      const calcMaxCount = Math.floor((size.width - collapseOffset) / 38);
       setMaxCount(calcMaxCount);
       if (calcMaxCount < length) {
         setCollapsed(true);
       } else {
         setCollapsed(false);
       }
-    }, [size, flatItems.length]);
+    }, [size, flatItems.length, collapseOffset]);
 
     const calcItem = useMemo(() => {
       if (!collapsed) return items;

src/react/ChatInputActions/type.ts

@@ -31,6 +31,7 @@ export type DropdownItem = Omit<ActionItem, 'children' | 'type'> & {
 export type ChatInputActionItem = ActionItem | DividerItem | CollapseItem | DropdownItem;
 
 export interface ChatInputActionsProps extends Omit<FlexboxProps, 'children'> {
+  collapseOffset?: number;
   disabled?: boolean;
   items?: ChatInputActionItem[];
   onActionClick?: (action: ChatInputActionEvent) => void;

src/react/SendButton/SendButton.tsx

@@ -22,6 +22,7 @@ const SendButton = memo<SendButtonProps>(
     shape,
     onSend,
     onStop,
+    disabled,
     onClick,
     ...rest
   }) => {
@@ -67,7 +68,8 @@ const SendButton = memo<SendButtonProps>(
     if (!menu)
       return (
         <Button
-          className={cx(styles.button, className)}
+          className={cx(styles.button, disabled && styles.disabled, className)}
+          disabled={disabled}
           icon={<SendIcon />}
           onClick={(e) => {
             e.stopPropagation();
@@ -86,9 +88,11 @@ const SendButton = memo<SendButtonProps>(
       <Dropdown.Button
         className={cx(
           styles.dropdownButton,
+          disabled && styles.disabled,
           shape === 'round' && styles.dropdownButtonRound,
           className,
         )}
+        disabled={disabled}
         icon={<Icon icon={ChevronDownIcon} />}
         menu={menu}
         onClick={(e) => {

src/react/SendButton/style.ts

@@ -10,6 +10,25 @@ export const useStyles = createStyles(({ css, token, prefixCls }, size: number)
       padding-inline: 0 !important;
     }
   `,
+  disabled: css`
+    &.${prefixCls}-btn {
+      cursor: default;
+      border-color: ${token.colorBorderSecondary};
+      background: transparent;
+    }
+
+    .${prefixCls}-btn-compact-first-item {
+      cursor: default;
+      border-color: ${token.colorBorderSecondary};
+      background: transparent;
+    }
+    .${prefixCls}-dropdown-trigger {
+      cursor: default;
+      border-color: ${token.colorBorderSecondary};
+      border-inline-start-color: transparent;
+      background: transparent;
+    }
+  `,
   dropdownButton: css`
     flex: none;
     width: fit-content;