fix(types): type clean up for eventKey and removal of some unneeded type helpers

Author: jquense

.eslintignore

@@ -4,4 +4,5 @@ coverage/
 **/node_modules/**
 www/.cache
 www/public
-www/plugins
+www/plugins
+**/*.d.ts

types/components/Accordion.d.ts

@@ -4,13 +4,13 @@ import { BsPrefixComponent } from './helpers';
 import AccordionToggle from './AccordionToggle';
 import AccordionCollapse from './AccordionCollapse';
 
-export interface AccordionProps extends React.HTMLProps<Accordion> {
+export interface AccordionProps {
   activeKey?: string;
-  defaultActiveKey?: string
+  defaultActiveKey?: string;
 }
 
 declare class Accordion<
-As extends React.ElementType = 'div'
+  As extends React.ElementType = 'div'
 > extends BsPrefixComponent<As, AccordionProps> {
   static Toggle: typeof AccordionToggle;
   static Collapse: typeof AccordionCollapse;

types/components/AccordionCollapse.d.ts

@@ -7,8 +7,8 @@ import { BsPrefixComponent } from './helpers';
 export interface AccordionCollapseProps
   extends CollapseProps,
     React.HTMLAttributes<HTMLDivElement> {
-        eventKey: string;
-    }
+  eventKey: string;
+}
 
 declare class AccordionCollapse extends BsPrefixComponent<
   typeof Collapse,

types/components/DropdownButton.d.ts

@@ -3,10 +3,13 @@ import * as React from 'react';
 import DropdownToggle from './DropdownToggle';
 import Dropdown from './Dropdown';
 
-import { ReplaceProps, PropsOf } from './helpers';
+import { ReplaceProps } from './helpers';
 
 type PropsFromToggle = Partial<
-  Pick<PropsOf<typeof DropdownToggle>, 'href' | 'size' | 'variant' | 'disabled'>
+  Pick<
+    React.ComponentPropsWithRef<typeof DropdownToggle>,
+    'href' | 'size' | 'variant' | 'disabled'
+  >
 >;
 
 export interface DropdownButtonProps extends PropsFromToggle {

types/components/DropdownItem.d.ts

@@ -2,20 +2,19 @@ import * as React from 'react';
 
 import SafeAnchor from './SafeAnchor';
 
-import { BsPrefixComponent } from './helpers';
+import { BsPrefixComponent, SelectCallback } from './helpers';
 
-export interface DropdownItemProps<T> {
+export interface DropdownItemProps {
   active?: boolean;
   disabled?: boolean;
-  eventKey?: T;
+  eventKey?: string;
   href?: string;
   onClick?: React.MouseEventHandler<this>;
-  onSelect?: (eventKey: T, e: React.SyntheticEvent<this>) => void;
+  onSelect?: SelectCallback;
 }
 
 declare class DropdownItem<
-  EventKey,
   As extends React.ReactType = typeof SafeAnchor
-> extends BsPrefixComponent<As, DropdownItemProps<EventKey>> {}
+> extends BsPrefixComponent<As, DropdownItemProps> {}
 
 export default DropdownItem;

types/components/DropdownToggle.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 
 import Button from './Button';
 
-import { BsPrefixComponent, PropsOf } from './helpers';
+import { BsPrefixComponent } from './helpers';
 
-export interface DropdownToggleProps extends PropsOf<typeof Button> {
+export interface DropdownToggleProps
+  extends React.ComponentPropsWithRef<typeof Button> {
   id: string;
   split?: boolean;
   childBsPrefix?: string;

types/components/NavDropdown.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import Dropdown from './Dropdown';
 
-import { ReplaceProps, PropsOf } from './helpers';
+import { ReplaceProps } from './helpers';
 
 export interface NavDropdownProps {
   id: string;

types/components/OverlayTrigger.d.ts

@@ -2,11 +2,10 @@ import * as React from 'react';
 
 import Overlay from './Overlay';
 
-import { PropsOf } from './helpers';
-
 type TriggerType = 'hover' | 'click' | 'focus';
 
-export interface OverlayTriggerProps extends PropsOf<typeof Overlay> {
+export interface OverlayTriggerProps
+  extends React.ComponentPropsWithRef<typeof Overlay> {
   children: React.ReactNode;
   trigger?: TriggerType | TriggerType[];
   delay?: number | { show: number; hide: number };

types/components/SplitButton.d.ts

@@ -3,10 +3,13 @@ import * as React from 'react';
 import DropdownToggle from './DropdownToggle';
 import Dropdown from './Dropdown';
 
-import { ReplaceProps, PropsOf } from './helpers';
+import { ReplaceProps } from './helpers';
 
 type PropsFromToggle = Partial<
-  Pick<PropsOf<typeof DropdownToggle>, 'size' | 'variant' | 'disabled'>
+  Pick<
+    React.ComponentPropsWithRef<typeof DropdownToggle>,
+    'size' | 'variant' | 'disabled'
+  >
 >;
 
 export interface SplitButtonProps extends PropsFromToggle {

types/components/Tab.d.ts

@@ -4,9 +4,9 @@ import TabContainer from './TabContainer';
 import TabContent from './TabContent';
 import TabPane from './TabPane';
 
-import { BsPrefixComponent, PropsOf } from './helpers';
+import { BsPrefixComponent } from './helpers';
 
-export interface TabProps extends PropsOf<typeof TabPane> {
+export interface TabProps extends React.ComponentPropsWithRef<typeof TabPane> {
   eventKey?: unknown;
   title: React.ReactNode;
   disabled?: boolean;

types/components/helpers.d.ts

@@ -2,20 +2,8 @@ import * as React from 'react';
 
 export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
 
-export type PropsOf<
-  Tag extends React.ReactType
-> = Tag extends keyof JSX.IntrinsicElements
-  ? JSX.IntrinsicElements[Tag]
-  : Tag extends React.SFC<infer Props>
-  ? Props & React.Attributes
-  : Tag extends React.ComponentClass<infer Props2>
-  ? (Tag extends new (...args: any[]) => infer Instance
-      ? Props2 & React.ClassAttributes<Instance>
-      : never)
-  : never;
-
 export type ReplaceProps<Inner extends React.ReactType, P> = Omit<
-  PropsOf<Inner>,
+  React.ComponentPropsWithRef<Inner>,
   P
 > &
   P;
@@ -31,8 +19,8 @@ export class BsPrefixComponent<
 > extends React.Component<ReplaceProps<As, BsPrefixProps<As> & P>> {}
 
 export type SelectCallback = (
-  eventKey: any,
-  e: React.SyntheticEvent<{}>,
+  eventKey: string,
+  e: React.SyntheticEvent<unknown>,
 ) => void;
 
 export interface TransitionCallbacks {

types/simple.test.tsx

@@ -35,24 +35,26 @@ import {
   ToggleButton,
 } from 'react-bootstrap';
 
-<Alert dismissible>Woop woop</Alert>;
+<Alert ref={React.createRef<HTMLDivElement>()} dismissible>
+  Woop woop
+</Alert>;
 <Alert.Link as="a" href="blah" />;
 <Alert.Heading as="h3" />;
 
 <Accordion defaultActiveKey="0">
   <Card>
     <Card.Header>
-      <Accordion.Toggle eventKey="0">
-        Click me!
-      </Accordion.Toggle>
+      <Accordion.Toggle eventKey="0">Click me!</Accordion.Toggle>
     </Card.Header>
     <Accordion.Collapse eventKey="0">
       <Card.Body>Hello! I'm the body</Card.Body>
     </Accordion.Collapse>
   </Card>
 </Accordion>;
 
-<Badge pill={false}>42</Badge>;
+<Badge pill={false} ref={React.createRef<HTMLSpanElement>()}>
+  42
+</Badge>;
 
 <Breadcrumb listProps={{ type: 'I' }}>
   <Breadcrumb.Item />
@@ -147,7 +149,7 @@ import {
   </Dropdown.Toggle>
 
   <Dropdown.Menu>
-    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+    <Dropdown.Item eventKey="key">Action</Dropdown.Item>
     <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
     <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
   </Dropdown.Menu>