fix: fix types for DropdownButton and SplitButton (#5589)

react-bootstrap · Jan 2, 2021 · df6024b · df6024b
1 parent acb7601
commit df6024b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git a/src/DropdownButton.tsx b/src/DropdownButton.tsx
@@ -4,19 +4,28 @@ import PropTypes from 'prop-types';
 import Dropdown, { DropdownProps } from './Dropdown';
 import DropdownToggle, { PropsFromToggle } from './DropdownToggle';
 import DropdownMenu, { alignPropType, AlignType } from './DropdownMenu';
+import {
+  BsPrefixPropsWithChildren,
+  BsPrefixRefForwardingComponent,
+} from './helpers';
 
 export interface DropdownButtonProps
   extends DropdownProps,
     Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'>,
-    React.PropsWithChildren<PropsFromToggle> {
+    PropsFromToggle,
+    BsPrefixPropsWithChildren {
   title: React.ReactNode;
   menuAlign?: AlignType;
   menuRole?: string;
   renderMenuOnMount?: boolean;
   rootCloseEvent?: 'click' | 'mousedown';
-  bsPrefix?: string;
 }
 
+type DropdownButton = BsPrefixRefForwardingComponent<
+  'div',
+  DropdownButtonProps
+>;
+
 const propTypes = {
   /**
    * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
@@ -69,13 +78,17 @@ const propTypes = {
 
 /**
  * A convenience component for simple or general use dropdowns. Renders a `Button` toggle and all `children`
- * are passed directly to the default `Dropdown.Menu`.
+ * are passed directly to the default `Dropdown.Menu`. This component accepts all of
+ * [`Dropdown`'s props](#dropdown-props).
  *
  * _All unknown props are passed through to the `Dropdown` component._ Only
  * the Button `variant`, `size` and `bsPrefix` props are passed to the toggle,
- * along with menu related props are passed to the `Dropdown.Menu`
+ * along with menu-related props are passed to the `Dropdown.Menu`
  */
-const DropdownButton = React.forwardRef<HTMLDivElement, DropdownButtonProps>(
+const DropdownButton: DropdownButton = React.forwardRef<
+  HTMLDivElement,
+  DropdownButtonProps
+>(
   (
     {
       title,
@@ -91,7 +104,7 @@ const DropdownButton = React.forwardRef<HTMLDivElement, DropdownButtonProps>(
       href,
       id,
       ...props
-    }: DropdownButtonProps,
+    },
     ref,
   ) => (
     <Dropdown ref={ref} {...props}>

diff --git a/src/SplitButton.tsx b/src/SplitButton.tsx
@@ -3,21 +3,19 @@ import PropTypes from 'prop-types';
 
 import Button, { ButtonType } from './Button';
 import ButtonGroup from './ButtonGroup';
-import Dropdown from './Dropdown';
+import Dropdown, { DropdownProps } from './Dropdown';
 import { alignPropType, AlignType } from './DropdownMenu';
 import { PropsFromToggle } from './DropdownToggle';
-import {
-  BsPrefixPropsWithChildren,
-  BsPrefixRefForwardingComponent,
-} from './helpers';
+import { BsPrefixPropsWithChildren } from './helpers';
 
 export interface SplitButtonProps
-  extends PropsFromToggle,
+  extends DropdownProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title' | 'id'>,
+    PropsFromToggle,
     BsPrefixPropsWithChildren {
   id: string | number;
   menuAlign?: AlignType;
   menuRole?: string;
-  onClick?: React.MouseEventHandler<this>;
   renderMenuOnMount?: boolean;
   rootCloseEvent?: 'click' | 'mousedown';
   target?: string;
@@ -26,8 +24,6 @@ export interface SplitButtonProps
   type?: ButtonType;
 }
 
-type SplitButton = BsPrefixRefForwardingComponent<'div', SplitButtonProps>;
-
 const propTypes = {
   /**
    * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
@@ -94,7 +90,17 @@ const defaultProps = {
   type: 'button',
 };
 
-const SplitButton: SplitButton = React.forwardRef(
+/**
+ * A convenience component for simple or general use split button dropdowns. Renders a
+ * `ButtonGroup` containing a `Button` and a `Button` toggle for the `Dropdown`. All `children`
+ * are passed directly to the default `Dropdown.Menu`. This component accepts all of [`Dropdown`'s
+ * props](#dropdown-props).
+ *
+ * _All unknown props are passed through to the `Dropdown` component._
+ * The Button `variant`, `size` and `bsPrefix` props are passed to the button and toggle,
+ * and menu-related props are passed to the `Dropdown.Menu`
+ */
+const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>(
   (
     {
       id,
@@ -113,7 +119,7 @@ const SplitButton: SplitButton = React.forwardRef(
       renderMenuOnMount,
       rootCloseEvent,
       ...props
-    }: SplitButtonProps,
+    },
     ref,
   ) => (
     <Dropdown ref={ref} {...props} as={ButtonGroup}>
@@ -152,7 +158,7 @@ const SplitButton: SplitButton = React.forwardRef(
   ),
 );
 
-SplitButton.propTypes = propTypes;
+SplitButton.propTypes = propTypes as any;
 SplitButton.defaultProps = defaultProps;
 SplitButton.displayName = 'SplitButton';
 

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -937,6 +937,13 @@ const MegaComponent = () => (
       bsPrefix="splitbutton"
       style={style}
       menuAlign={{ sm: 'left' }}
+      drop="up"
+      onSelect={noop}
+      flip
+      alignRight
+      onToggle={noop}
+      focusFirstItemOnShow="keyboard"
+      navbar
     />
     <Table
       id="id"