Support tooltip on disabled buttons, support click action

This commit is contained in:
DaneEveritt 2022-07-02 17:24:49 -04:00
parent 25d61525b3
commit 7a6440988b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 20 additions and 13 deletions

View file

@ -4,7 +4,7 @@
"node": ">=14" "node": ">=14"
}, },
"dependencies": { "dependencies": {
"@floating-ui/react-dom-interactions": "^0.6.3", "@floating-ui/react-dom-interactions": "^0.6.6",
"@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.11", "@fortawesome/react-fontawesome": "^0.1.11",

View file

@ -7,7 +7,7 @@ import {
Placement, Placement,
shift, shift,
Side, Side,
Strategy, useClick,
useDismiss, useDismiss,
useFloating, useFloating,
useFocus, useFocus,
@ -18,15 +18,16 @@ import {
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import classNames from 'classnames'; import classNames from 'classnames';
type Interaction = 'hover' | 'click' | 'focus';
interface Props { interface Props {
rest?: number; rest?: number;
delay?: number | Partial<{ open: number; close: number }>; delay?: number | Partial<{ open: number; close: number }>;
alwaysOpen?: boolean;
content: string | React.ReactChild; content: string | React.ReactChild;
disabled?: boolean; disabled?: boolean;
arrow?: boolean; arrow?: boolean;
interactions?: Interaction[];
placement?: Placement; placement?: Placement;
strategy?: Strategy;
className?: string; className?: string;
children: React.ReactElement; children: React.ReactElement;
} }
@ -38,27 +39,33 @@ const arrowSides: Record<Side, string> = {
left: 'top-0 right-[-6px]', left: 'top-0 right-[-6px]',
}; };
export default ({ content, children, disabled = false, alwaysOpen = false, delay = 0, rest = 30, ...props }: Props) => { export default ({ children, ...props }: Props) => {
const arrowEl = useRef<HTMLDivElement>(null); const arrowEl = useRef<HTMLDivElement>(null);
const [open, setOpen] = useState(alwaysOpen || false); const [open, setOpen] = useState(false);
const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({ const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({
open, open,
strategy: 'fixed',
placement: props.placement || 'top', placement: props.placement || 'top',
strategy: props.strategy || 'absolute',
middleware: [ middleware: [
offset(props.arrow ? 10 : 6), offset(props.arrow ? 10 : 6),
flip(), flip(),
shift({ padding: 6 }), shift({ padding: 6 }),
arrow({ element: arrowEl, padding: 6 }), arrow({ element: arrowEl, padding: 6 }),
], ],
onOpenChange: (o) => setOpen(o || alwaysOpen || false), onOpenChange: setOpen,
whileElementsMounted: autoUpdate, whileElementsMounted: autoUpdate,
}); });
const interactions = props.interactions || ['hover', 'focus'];
const { getReferenceProps, getFloatingProps } = useInteractions([ const { getReferenceProps, getFloatingProps } = useInteractions([
useFocus(context), useHover(context, {
useHover(context, { restMs: rest, delay }), restMs: props.rest ?? 30,
delay: props.delay ?? 0,
enabled: interactions.includes('hover'),
}),
useFocus(context, { enabled: interactions.includes('focus') }),
useClick(context, { enabled: interactions.includes('click') }),
useRole(context, { role: 'tooltip' }), useRole(context, { role: 'tooltip' }),
useDismiss(context), useDismiss(context),
]); ]);
@ -66,7 +73,7 @@ export default ({ content, children, disabled = false, alwaysOpen = false, delay
const side = arrowSides[(props.placement || 'top').split('-')[0] as Side]; const side = arrowSides[(props.placement || 'top').split('-')[0] as Side];
const { x: ax, y: ay } = middlewareData.arrow || {}; const { x: ax, y: ay } = middlewareData.arrow || {};
if (disabled) { if (props.disabled) {
return children; return children;
} }
@ -83,7 +90,7 @@ export default ({ content, children, disabled = false, alwaysOpen = false, delay
{...getFloatingProps({ {...getFloatingProps({
ref: floating, ref: floating,
className: className:
'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[20rem] z-[9999]', 'bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[24rem]',
style: { style: {
position: strategy, position: strategy,
top: `${y || 0}px`, top: `${y || 0}px`,
@ -91,7 +98,7 @@ export default ({ content, children, disabled = false, alwaysOpen = false, delay
}, },
})} })}
> >
{content} {props.content}
{props.arrow && ( {props.arrow && (
<div <div
ref={arrowEl} ref={arrowEl}