chore(SplitButton): fix ts problems (alibaba-fusion#4690)

mario-gao · Jan 9, 2024 · a77c0b1 · a77c0b1
1 parent 04f231a
commit a77c0b1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 27 deletions.
diff --git a/components/split-button/index.tsx b/components/split-button/index.tsx
@@ -6,11 +6,10 @@ import classnames from 'classnames';
 import Icon from '../icon';
 import Button from '../button';
 import Overlay from '../overlay';
-import Menu from '../menu';
 import ConfigProvider from '../config-provider';
 import { dom, obj, func } from '../util';
 import type { SplitButtonProps } from './types';
-import type { Item as MenuItem } from '../menu';
+import Menu, { type Item as MenuItem, type MenuProps } from '../menu';
 
 const { Popup } = Overlay;
 
@@ -60,6 +59,10 @@ class SplitButton extends React.Component<SplitButtonProps> {
         leftButtonProps: {},
     };
 
+    static Item = Menu.Item;
+    static Divider = Menu.Divider;
+    static Group = Menu.Group;
+
     static getDerivedStateFromProps(nextProps: SplitButtonProps) {
         const st: {
             visible?: boolean;
@@ -77,26 +80,22 @@ class SplitButton extends React.Component<SplitButtonProps> {
         return st;
     }
 
-    static Item = Menu.Item;
-    static Divider = Menu.Divider;
-    static Group = Menu.Group;
-
     state = {
         selectedKeys: this.props.defaultSelectedKeys,
         visible: this.props.defaultVisible,
     };
 
-    private wrapper: any = null;
-    private menu: any = null;
-
     componentDidMount() {
         // 由于定位目标是 wrapper，如果弹层默认展开，wrapper 还未渲染，didMount 后强制再渲染一次，弹层重新定位
         if (this.state.visible) {
             this.forceUpdate();
         }
     }
 
-    selectMenuItem = (keys: string[], ...others: [MenuItem, Record<string, any>]) => {
+    private wrapper: HTMLDivElement | null = null;
+    private menu: HTMLUListElement | null = null;
+
+    selectMenuItem: MenuProps['onSelect'] = (keys, ...others) => {
         if (!('selectedKeys' in this.props)) {
             this.setState({
                 selectedKeys: keys,
@@ -127,17 +126,17 @@ class SplitButton extends React.Component<SplitButtonProps> {
         this.props.onVisibleChange && this.props.onVisibleChange(visible, reason);
     };
 
-    _menuRefHandler = (ref: Menu) => {
-        this.menu = findDOMNode(ref);
+    _menuRefHandler = (ref: React.ComponentRef<typeof Menu>) => {
+        this.menu = findDOMNode(ref) as HTMLUListElement;
 
-        const refFn = (this.props.menuProps as any)?.ref;
+        const refFn = this.props.menuProps?.ref;
         if (typeof refFn === 'function') {
             refFn(ref);
         }
     };
 
-    _wrapperRefHandler = (ref: any) => {
-        this.wrapper = findDOMNode(ref);
+    _wrapperRefHandler = (ref: React.ComponentRef<typeof Button.Group>) => {
+        this.wrapper = findDOMNode(ref) as HTMLDivElement;
     };
 
     render() {

diff --git a/components/split-button/types.ts b/components/split-button/types.ts
@@ -1,17 +1,13 @@
 import * as React from 'react';
 import { CommonProps } from '../util';
-import type { Item as MenuItem, MenuProps } from '../menu';
+import Menu, { type MenuProps } from '../menu';
 import type { ButtonProps } from '../button';
 import type { PopupProps } from '../overlay';
 
-interface HTMLAttributesWeak extends ButtonProps {
-    onSelect?: any;
-}
-
 /**
  * @api SplitButton
  */
-export interface SplitButtonProps extends HTMLAttributesWeak, CommonProps {
+export interface SplitButtonProps extends Omit<ButtonProps, 'onSelect'>, CommonProps {
     /**
      * 主按钮的文案
      * @en Text in button
@@ -75,13 +71,13 @@ export interface SplitButtonProps extends HTMLAttributesWeak, CommonProps {
      * 选择菜单项时的回调，参考 Menu
      * @en Callback when select the menu，see Menu
      */
-    onSelect?: (selectedKeys: string[], item: MenuItem, extra: Record<string, any>) => void;
+    onSelect?: MenuProps['onSelect'];
 
     /**
      * 点击菜单项时的回调，参考 Menu
      * @en Callback when click the menu，see Menu
      */
-    onItemClick?: (key: string, item: MenuItem, event: React.MouseEvent) => void;
+    onItemClick?: MenuProps['onItemClick'];
 
     /**
      * 触发按钮的属性（支持 Button 的所有属性透传）
@@ -111,8 +107,8 @@ export interface SplitButtonProps extends HTMLAttributesWeak, CommonProps {
     /**
      * 弹层显示状态变化时的回调函数
      * @en Callback when visible state change
-     * @param {Boolean} visible 弹层显示状态
-     * @param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
+     * @param visible - 弹层显示状态
+     * @param type - 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
      */
     onVisibleChange?: (visible: boolean, type: 'menuSelect' | 'fromTrigger' | 'docClick') => void;
 
@@ -152,7 +148,7 @@ export interface SplitButtonProps extends HTMLAttributesWeak, CommonProps {
      * 弹层容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点
      * @en The container of popup
      */
-    popupContainer?: () => Element | string | Element;
+    popupContainer?: PopupProps['container'];
 
     /**
      * 是否跟随滚动
@@ -164,7 +160,7 @@ export interface SplitButtonProps extends HTMLAttributesWeak, CommonProps {
      * 透传给 Menu 的属性
      * @en The props of menu
      */
-    menuProps?: MenuProps;
+    menuProps?: MenuProps & { ref?: (ins: React.ComponentRef<typeof Menu>) => void };
 
     /**
      * 透传给 左侧按钮 的属性