Reactstrap: update types for innerRefs.

Refer to React's Ref<T> class instead. This way the types of the innerRef reflect
whatever the installed typings for React say a ref can be.
This commit is contained in:
Sean Kelley 2018-05-21 13:45:15 -07:00
parent 4563f43f69
commit ee05115ac7
6 changed files with 16 additions and 7 deletions

View File

@ -8,7 +8,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
color?: string;
disabled?: boolean;
tag?: React.ReactType;
innerRef?: string | ((instance: HTMLButtonElement) => any);
innerRef?: React.Ref<HTMLButtonElement>;
onClick?: React.MouseEventHandler<any>;
size?: any;

View File

@ -2,7 +2,7 @@ import { CSSModule } from '../index';
export interface CardLinkProps extends React.HTMLAttributes<HTMLElement> {
tag?: React.ReactType;
innerRef?: string | ((instance: HTMLButtonElement) => any);
innerRef?: React.Ref<HTMLAnchorElement>;
className?: string;
cssModule?: CSSModule;
href?: string;

View File

@ -4,7 +4,7 @@ import { CSSModule } from '../index';
export interface FormProps extends React.HTMLProps<HTMLFormElement> {
inline?: boolean;
tag?: React.ReactType;
innerRef?: string | ((instance: HTMLButtonElement) => any);
innerRef?: React.Ref<HTMLFormElement>;
className?: string;
cssModule?: CSSModule;
}

View File

@ -35,7 +35,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
valid?: boolean;
invalid?: boolean;
tag?: React.ReactType;
innerRef?: string | ((instance: HTMLInputElement) => any);
innerRef?: React.Ref<HTMLInputElement>;
plaintext?: boolean;
addon?: boolean;
className?: string;

View File

@ -3,7 +3,7 @@ import { CSSModule } from '../index';
export interface NavLinkProps extends React.HTMLProps<HTMLAnchorElement> {
tag?: React.ReactType;
innerRef?: string | ((instance: HTMLButtonElement) => any);
innerRef?: React.Ref<HTMLAnchorElement>;
disabled?: boolean;
active?: boolean;
className?: string;

View File

@ -3336,7 +3336,7 @@ const CSSModuleExample = (props: any) => {
};
class Example107 extends React.Component {
private input: HTMLInputElement;
private input: HTMLInputElement | null;
render() {
return <Input type="file" innerRef={(input) => { this.input = input; }} />;
@ -3694,7 +3694,6 @@ const Example116 = (props: any) => {
function Example117() {
const ref = (e: any) => {};
<Input ref={ref}/>;
<Button ref={ref}/>;
<Carousel ref={ref} next={null as any} previous={null as any}/>;
<CarouselItem ref={ref}/>;
@ -3713,3 +3712,13 @@ function Example117() {
<UncontrolledDropdown ref={ref}/>;
<UncontrolledTooltip ref={ref} target={null as any}/>;
}
function Example118() {
const ref: string | ((e: any) => void) | React.RefObject<any> = null as any;
<Button innerRef={ref}/>;
<CardLink innerRef={ref}/>;
<Form innerRef={ref}/>;
<Input innerRef={ref}/>;
<NavLink innerRef={ref}/>;
}