Merge pull request #9 from webdevia/homework-7

Tooltip: Fix positioning issues, add stories to storybook

Author: webdevia

src/shared/tooltip-buttons/TooltipButtons.module.scss

@@ -0,0 +1,5 @@
+.tooltip-buttons {
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+}

src/shared/tooltip-buttons/TooltipButtons.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import { Position, Tooltip } from '../tooltip/Tooltip';
+import { Button } from '../button/Button';
+import s from './TooltipButtons.module.scss';
+
+type PredefinedTooltipProps = {
+  children: ReactNode;
+  position: Position;
+};
+
+const PredefinedTooltip = ({ children, position }: PredefinedTooltipProps) => (
+  <Tooltip content="Всплывающая подсказка" position={position}>
+    {children}
+  </Tooltip>
+);
+
+export const TooltipButtons = () => (
+  <div className={s['tooltip-buttons']}>
+    <PredefinedTooltip position={'left'}>
+      <Button>{'Слева'}</Button>
+    </PredefinedTooltip>
+    <PredefinedTooltip position={'right'}>
+      <Button>{'Справа'}</Button>
+    </PredefinedTooltip>
+    <PredefinedTooltip position={'top'}>
+      <Button>{'Сверху'}</Button>
+    </PredefinedTooltip>
+    <PredefinedTooltip position={'bottom'}>
+      <Button>{'Снизу'}</Button>
+    </PredefinedTooltip>
+  </div>
+);

src/shared/tooltip/Tooltip.module.scss

@@ -4,6 +4,7 @@
 }
 
 .tooltip-content {
+  z-index: 1;
   position: absolute;
   padding: 5px;
   border-radius: 5px;

src/shared/tooltip/Tooltip.tsx

@@ -14,32 +14,35 @@ type CoordProps = {
   offset: number;
 };
 
-type Position = 'top' | 'bottom' | 'left' | 'right';
+export type Position = 'top' | 'bottom' | 'left' | 'right';
 
 type PositionMap = Record<Position, (props: CoordProps) => Coords>;
 
 const getCenterCoord = (primary: number, secondary: number) => (primary - secondary) / 2;
 
-const YLeft = (primary: DOMRect, secondary: DOMRect) => primary.left + getCenterCoord(primary.width, secondary.width);
-const XTop = (primary: DOMRect, secondary: DOMRect) => primary.top + getCenterCoord(primary.height, secondary.height);
+const YLeft = (primary: DOMRect, secondary: DOMRect) =>
+  primary.left + window.scrollX + getCenterCoord(primary.width, secondary.width);
+const XTop = (primary: DOMRect, secondary: DOMRect) =>
+  primary.top + window.scrollY + getCenterCoord(primary.height, secondary.height);
 
 const positionMap: PositionMap = {
   top: ({ targetRect, tooltipRect, offset }) => ({
-    top: targetRect.top - tooltipRect.height - offset,
-    left: YLeft(targetRect, tooltipRect),
+    top: targetRect.top + window.scrollY - tooltipRect.height - offset,
+    left: targetRect.left + window.scrollX + getCenterCoord(targetRect.width, tooltipRect.width),
   }),
+
   bottom: ({ targetRect, tooltipRect, offset }) => ({
-    top: targetRect.bottom + offset,
+    top: targetRect.bottom + window.scrollY + offset,
     left: YLeft(targetRect, tooltipRect),
   }),
   left: ({ targetRect, tooltipRect, offset }) => ({
     top: XTop(targetRect, tooltipRect),
-    left: targetRect.left - (tooltipRect.width + offset),
+    left: targetRect.left + window.scrollX - tooltipRect.width - offset,
   }),
 
   right: ({ targetRect, tooltipRect, offset }) => ({
     top: XTop(targetRect, tooltipRect),
-    left: targetRect.left + (targetRect.width + offset),
+    left: targetRect.left + window.scrollX + targetRect.width + offset,
   }),
 };
 
@@ -59,7 +62,7 @@ export const Tooltip = ({ children, content, duration = 1000, position = 'bottom
   const timerRef = useRef(null);
   const mountTimerRef = useRef(null);
 
-  const mountTimer = 10;
+  const mountTimer = 50;
 
   const clearTimeouts = () => {
     timerRef.current && clearTimeout(timerRef.current);
@@ -83,12 +86,11 @@ export const Tooltip = ({ children, content, duration = 1000, position = 'bottom
 
     if (!target || !tooltip) return;
 
-    tooltip.style.setProperty('--tooltip-animation-ms', `${duration + mountTimer}ms`);
-
     if (mounted) {
+      tooltipRef.current?.style.setProperty('--tooltip-animation-ms', `${duration + mountTimer}ms`);
       const targetRect = target.getBoundingClientRect();
       const tooltipRect = tooltip.getBoundingClientRect();
-      const calcPosition = positionMap[position];
+      const calcPosition = positionMap[position] ?? positionMap['bottom'];
       setCoords(calcPosition({ targetRect, tooltipRect, offset: 5 }));
     }
 

src/stories/TooltipOnButtons.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { TooltipButtons } from '../shared/tooltip-buttons/TooltipButtons';
+
+const meta: Meta<typeof TooltipButtons> = {
+  component: TooltipButtons,
+  title: 'Сложные компоненты/Подсказка/Позиционирование',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Test = {};

src/stories/TooltipOnButton.stories.tsx …tories/TooltipWithProperties.stories.tsxsrc/stories/TooltipOnButton.stories.tsx renamed to src/stories/TooltipWithProperties.stories.tsx src/stories/TooltipOnButton.stories.tsx renamed to src/stories/TooltipWithProperties.stories.tsx

@@ -6,15 +6,17 @@ import { Button } from '../shared/button/Button';
 
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
-  title: 'Сложные компоненты/Подсказка/На кнопке',
+  title: 'Сложные компоненты/Подсказка/С настройками',
   tags: ['autodocs'],
 };
 
 export default meta;
 
 export const Test = {
   args: {
-    children: <Button>{'Наведи на меня'}</Button>,
-    content: 'Плавно всплывающая подсказка',
+    content: 'Подсказка',
+    duration: 1000,
+    position: 'top',
+    children: <Button>Наведи на меня</Button>,
   },
 };