[reactstrap] Update Tooltip and Popover to add RefObject as a target (#41552)

* [reactstrap] Update Popover to add RefObject as a target

* [reactstrap] Add to the test the usages of React.RefObject

* [reactstrap] Update Tooltip, Popover, and Collapse to add RefObject as a target

* [reactstrap] Remove RefObject from Collapse definition
This commit is contained in:
Nathan Brown 2020-01-21 10:50:16 -07:00 committed by Ben Lichtman
parent be840b6e1d
commit d247933faa
3 changed files with 21 additions and 4 deletions

View File

@ -6,8 +6,8 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLElement> {
[key: string]: any;
isOpen?: boolean;
toggle?: React.MouseEventHandler<any> | (() => void);
target: string | HTMLElement;
container?: string | HTMLElement;
target: string | HTMLElement | React.RefObject<HTMLElement>;
container?: string | HTMLElement | React.RefObject<HTMLElement>;
boundariesElement?: Popper.Boundary | Element;
className?: string;
placement?: Popper.Placement;

View File

@ -4,8 +4,8 @@ import { CSSModule } from '../index';
export interface UncontrolledTooltipProps extends React.HTMLAttributes<HTMLElement> {
[key: string]: any;
target: string | HTMLElement;
container?: string | HTMLElement;
target: string | HTMLElement | React.RefObject<HTMLElement>;
container?: string | HTMLElement | React.RefObject<HTMLElement>;
delay?: number | {show: number, hide: number};
className?: string;
popperClassName?: string;

View File

@ -4776,3 +4776,20 @@ class Example130 extends React.Component {
);
}
}
const CustomInputTestInnerRef = () => {
const ref = React.createRef<HTMLButtonElement>();
return (<CustomInput type="checkbox" innerRef={ref} />);
};
const PopoverTestInnerRef = () => {
const target = React.createRef<HTMLButtonElement>();
const container = React.createRef<HTMLDivElement>();
return (<Popover target={target} container={container}>Yo!</Popover>);
};
const UncontrolledTooltipTestInnerRef = () => {
const target = React.createRef<HTMLButtonElement>();
const container = React.createRef<HTMLDivElement>();
return (<UncontrolledTooltip target={target} container={container}>Yo!</UncontrolledTooltip>);
};