Support tooltip on disabled buttons, support click action
This commit is contained in:
parent
25d61525b3
commit
7a6440988b
2 changed files with 20 additions and 13 deletions
|
@ -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",
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue