Prepare for switching AccessibleButton and derivatives to forwardRef (#12072)
* Improve AccessibleButton props & docs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve AccessibleTooltipButton props docs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Simplify roving tab index hook usage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ditch RefObject type casts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Convert AccessibleTooltipButton to a Functional Component Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
committed by
GitHub
GitHub
parent
2212fbadd0
commit
bf61d93bf4
@@ -14,7 +14,7 @@
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
|
||||
import React, { HTMLAttributes, InputHTMLAttributes } from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
|
||||
@@ -22,7 +22,10 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
|
||||
|
||||
export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element> | React.FormEvent<Element>;
|
||||
|
||||
type AccessibleButtonKind =
|
||||
/**
|
||||
* The kind of button, similar to how Bootstrap works.
|
||||
*/
|
||||
export type AccessibleButtonKind =
|
||||
| "primary"
|
||||
| "primary_outline"
|
||||
| "primary_sm"
|
||||
@@ -58,25 +61,31 @@ type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<
|
||||
Omit<InputHTMLAttributes<Element>, "onClick">;
|
||||
|
||||
/**
|
||||
* children: React's magic prop. Represents all children given to the element.
|
||||
* element: (optional) The base element type. "div" by default.
|
||||
* onClick: (required) Event handler for button activation. Should be
|
||||
* implemented exactly like a normal onClick handler.
|
||||
* Type of props accepted by {@link AccessibleButton}.
|
||||
*
|
||||
* Extends props accepted by the underlying element specified using the `element` prop.
|
||||
*/
|
||||
type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
|
||||
type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
|
||||
inputRef?: React.Ref<Element>;
|
||||
/**
|
||||
* The base element type. "div" by default.
|
||||
*/
|
||||
element?: T;
|
||||
children?: ReactNode;
|
||||
// The kind of button, similar to how Bootstrap works.
|
||||
// See available classes for AccessibleButton for options.
|
||||
kind?: AccessibleButtonKind | string;
|
||||
// The ARIA role
|
||||
role?: string;
|
||||
// The tabIndex
|
||||
tabIndex?: number;
|
||||
/**
|
||||
* The kind of button, similar to how Bootstrap works.
|
||||
*/
|
||||
kind?: AccessibleButtonKind;
|
||||
/**
|
||||
* Whether the button should be disabled.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
/**
|
||||
* Whether the button should trigger on mousedown event instead of on click event. Defaults to false (click event).
|
||||
*/
|
||||
triggerOnMouseDown?: boolean;
|
||||
/**
|
||||
* Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
|
||||
*/
|
||||
onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
|
||||
};
|
||||
|
||||
@@ -104,7 +113,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
|
||||
onKeyUp,
|
||||
triggerOnMouseDown,
|
||||
...restProps
|
||||
}: IProps<T>): JSX.Element {
|
||||
}: Props<T>): JSX.Element {
|
||||
const newProps: IAccessibleButtonProps = restProps;
|
||||
if (disabled) {
|
||||
newProps["aria-disabled"] = true;
|
||||
|
||||
@@ -15,85 +15,105 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { SyntheticEvent, FocusEvent } from "react";
|
||||
import React, { SyntheticEvent, FocusEvent, useEffect, useState } from "react";
|
||||
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
import Tooltip, { Alignment } from "./Tooltip";
|
||||
|
||||
interface IProps extends React.ComponentProps<typeof AccessibleButton> {
|
||||
/**
|
||||
* Type of props accepted by {@link AccessibleTooltipButton}.
|
||||
*
|
||||
* Extends that of {@link AccessibleButton}.
|
||||
*/
|
||||
interface Props extends React.ComponentProps<typeof AccessibleButton> {
|
||||
/**
|
||||
* Title to show in the tooltip and use as aria-label
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* Tooltip node to show in the tooltip, takes precedence over `title`
|
||||
*/
|
||||
tooltip?: React.ReactNode;
|
||||
/**
|
||||
* Trigger label to render
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Classname to apply to the tooltip
|
||||
*/
|
||||
tooltipClassName?: string;
|
||||
/**
|
||||
* Force the tooltip to be hidden
|
||||
*/
|
||||
forceHide?: boolean;
|
||||
/**
|
||||
* Alignment to render the tooltip with
|
||||
*/
|
||||
alignment?: Alignment;
|
||||
/**
|
||||
* Function to call when the children are hovered over
|
||||
*/
|
||||
onHover?: (hovering: boolean) => void;
|
||||
/**
|
||||
* Function to call when the tooltip goes from shown to hidden.
|
||||
*/
|
||||
onHideTooltip?(ev: SyntheticEvent): void;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
hover: boolean;
|
||||
}
|
||||
function AccessibleTooltipButton({
|
||||
title,
|
||||
tooltip,
|
||||
children,
|
||||
forceHide,
|
||||
alignment,
|
||||
onHideTooltip,
|
||||
tooltipClassName,
|
||||
...props
|
||||
}: Props): JSX.Element {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
export default class AccessibleTooltipButton extends React.PureComponent<IProps, IState> {
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hover: false,
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: Readonly<IProps>): void {
|
||||
if (!prevProps.forceHide && this.props.forceHide && this.state.hover) {
|
||||
this.setState({
|
||||
hover: false,
|
||||
});
|
||||
useEffect(() => {
|
||||
// If forceHide is set then force hover to off to hide the tooltip
|
||||
if (forceHide && hover) {
|
||||
setHover(false);
|
||||
}
|
||||
}
|
||||
}, [forceHide, hover]);
|
||||
|
||||
private showTooltip = (): void => {
|
||||
if (this.props.onHover) this.props.onHover(true);
|
||||
if (this.props.forceHide) return;
|
||||
this.setState({
|
||||
hover: true,
|
||||
});
|
||||
const showTooltip = (): void => {
|
||||
props.onHover?.(true);
|
||||
if (forceHide) return;
|
||||
setHover(true);
|
||||
};
|
||||
|
||||
private hideTooltip = (ev: SyntheticEvent): void => {
|
||||
if (this.props.onHover) this.props.onHover(false);
|
||||
this.setState({
|
||||
hover: false,
|
||||
});
|
||||
this.props.onHideTooltip?.(ev);
|
||||
const hideTooltip = (ev: SyntheticEvent): void => {
|
||||
props.onHover?.(false);
|
||||
setHover(false);
|
||||
onHideTooltip?.(ev);
|
||||
};
|
||||
|
||||
private onFocus = (ev: FocusEvent): void => {
|
||||
const onFocus = (ev: FocusEvent): void => {
|
||||
// We only show the tooltip if focus arrived here from some other
|
||||
// element, to avoid leaving tooltips hanging around when a modal closes
|
||||
if (ev.relatedTarget) this.showTooltip();
|
||||
if (ev.relatedTarget) showTooltip();
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip, ...props } =
|
||||
this.props;
|
||||
|
||||
const tip = this.state.hover && (title || tooltip) && (
|
||||
<Tooltip tooltipClassName={tooltipClassName} label={tooltip || title} alignment={alignment} />
|
||||
);
|
||||
return (
|
||||
<AccessibleButton
|
||||
{...props}
|
||||
onMouseOver={this.showTooltip || props.onMouseOver}
|
||||
onMouseLeave={this.hideTooltip || props.onMouseLeave}
|
||||
onFocus={this.onFocus || props.onFocus}
|
||||
onBlur={this.hideTooltip || props.onBlur}
|
||||
aria-label={title || props["aria-label"]}
|
||||
>
|
||||
{children}
|
||||
{this.props.label}
|
||||
{(tooltip || title) && tip}
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
const tip = hover && (title || tooltip) && (
|
||||
<Tooltip tooltipClassName={tooltipClassName} label={tooltip || title} alignment={alignment} />
|
||||
);
|
||||
return (
|
||||
<AccessibleButton
|
||||
{...props}
|
||||
onMouseOver={showTooltip}
|
||||
onMouseLeave={hideTooltip}
|
||||
onFocus={onFocus}
|
||||
onBlur={hideTooltip}
|
||||
aria-label={title || props["aria-label"]}
|
||||
>
|
||||
{children}
|
||||
{props.label}
|
||||
{(tooltip || title) && tip}
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccessibleTooltipButton;
|
||||
|
||||
Reference in New Issue
Block a user