@ -1,23 +1,18 @@
import React , { cloneElement } from 'react' ;
import ReachTooltip , {
TooltipProps ,
useTooltip ,
TooltipPopup ,
} from '@reach/tooltip' ;
import React , { cloneElement , ReactElement } from 'react' ;
import { TooltipProps , useTooltip , TooltipPopup } from '@reach/tooltip' ;
import Portal from '@reach/portal' ;
import '@reach/tooltip/styles.css' ;
import Block from './elements/Block' ;
import { useThemeUI } from 'theme-ui' ;
import { useThemeSystem } from './ThemeSystemProvider' ;
import { ForwardRefExoticComponentWithAs } from '@reach/utils' ;
const centered = ( triggerRect : DOMRect , tooltipRect ) = > {
// if (!triggerRect) {
// return {
// left: 0,
// top: 0,
// };
// }
if ( ! tooltipRect || ! triggerRect ) {
throw new Error (
'Could not find a reference to calculate tooltip position.\nThis most likely means you forgot to use forwardRef to pass down a ref through a component:\nhttps://reactjs.org/docs/react-api.html#reactforwardref\n'
) ;
}
const triggerCenter = triggerRect . left + triggerRect . width / 2 ;
const left = triggerCenter - tooltipRect . width / 2 ;
const maxLeft = window . innerWidth - tooltipRect . width - 2 ;
@ -27,64 +22,24 @@ const centered = (triggerRect: DOMRect, tooltipRect) => {
} ;
} ;
// const TriangleTooltip = ({ children, label, 'aria-label': ariaLabel }) => {
// // get the props from useTooltip
// const [trigger, tooltip] = useTooltip();
// // destructure off what we need to position the triangle
// const { isVisible, triggerRect } = tooltip;
// const { currentTheme } = useThemeSystem();
// const { theme } = useThemeUI();
// const color = currentTheme === 'chapo' ? '#2F2F37' : theme.colors.muted;
// return (
// <>
// {cloneElement(children, trigger)}
// {isVisible && (
// // The Triangle. We position it relative to the trigger, not the popup
// // so that collisions don't have a triangle pointing off to nowhere.
// // Using a Portal may seem a little extreme, but we can keep the
// // positioning logic simpler here instead of needing to consider
// // the popup's position relative to the trigger and collisions
// <Portal>
// <div
// style={{
// position: 'absolute',
// left:
// triggerRect && triggerRect.left - 10 + triggerRect.width / 2,
// top: triggerRect && triggerRect.bottom + window.scrollY,
// width: 0,
// height: 0,
// borderLeft: '10px solid transparent',
// borderRight: '10px solid transparent',
// borderBottom: `10px solid ${color}`,
// }}
// />
// </Portal>
// )}
// <TooltipPopup
// {...tooltip}
// label={label}
// aria-label={ariaLabel}
// style={{
// backgroundColor: color,
// color: 'white',
// border: 'none',
// borderRadius: '6px',
// padding: '15px',
// fontSize: '15px',
// lineHeight: '18px',
// fontWeight: 500,
// }}
// position={centered}
// />
// </>
// );
// };
interface CustomTooltipProps extends TooltipProps {
style? : React.CSSProperties ;
label : string ; // text visually shown to user
'aria-label' : string ; // text read to screenreaders for accessibility
}
const TriangleTooltip = React . forwardRef (
( { children , label , 'aria-label' : ariaLabel } : any , ref ) = > {
const TriangleTooltip : ForwardRefExoticComponentWithAs <
'div' ,
TooltipProps
> = React . forwardRef (
(
{
children ,
label ,
'aria-label' : ariaLabel ,
} : { children : ReactElement } & CustomTooltipProps ,
ref
) = > {
// get the props from useTooltip
const [ trigger , tooltip ] = useTooltip ( ) ;
// destructure off what we need to position the triangle
@ -145,29 +100,12 @@ const TriangleTooltip = React.forwardRef(
}
) ;
// const Tooltip = React.forwardRef(
// (
// {
// style,
// 'aria-label': ariaLabel,
// ...props
// }: { style?: React.CSSProperties; 'aria-label': string } & TooltipProps,
// ref
// ) => {
// return <TriangleTooltip ref={ref} aria-label={ariaLabel} {...props} />;
// }
// );
const Tooltip = ( {
style ,
'aria-label' : ariaLabel ,
label ,
. . . props
} : {
style? : React.CSSProperties ;
label : string ;
'aria-label' : string ;
} & TooltipProps ) = > {
} : CustomTooltipProps ) = > {
return < TriangleTooltip label = { label } aria - label = { ariaLabel } { ...props } / > ;
} ;
