feat!: add useId hook and remove id property from Tooltip (#974)

* feat: add useId * fix: remove id props BREAKING CHANGE: Remove id property from Tooltip component * fix: change prefix to sequence number
kufu · Sep 7, 2020 · f638d6b · f638d6b
1 parent c38fa0a
commit f638d6b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 45 deletions.
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -17,22 +17,17 @@ storiesOf('Tooltip', module)
     <List>
       <dt>Default</dt>
       <dd>
-        <LightTooltip message="LightBalloon" id="tooltip-1">
-          LightTooltip
-        </LightTooltip>
+        <LightTooltip message="LightBalloon">LightTooltip</LightTooltip>
       </dd>
       <dd>
-        <DarkTooltip message="DarkBalloon" id="tooltip-2">
-          DarkTooltip
-        </DarkTooltip>
+        <DarkTooltip message="DarkBalloon">DarkTooltip</DarkTooltip>
       </dd>
       <dt>horizontal & vertical</dt>
       <dd>
         <LightTooltip
           message="horizontal=left & vertical=bottom (default)"
           horizontal="left"
           vertical="bottom"
-          id="tooltip-3"
         >
           horizontal=left & vertical=bottom (default)
         </LightTooltip>
@@ -42,7 +37,6 @@ storiesOf('Tooltip', module)
           message="horizontal=center & vertical=bottom"
           horizontal="center"
           vertical="bottom"
-          id="tooltip-4"
         >
           horizontal=center & vertical=bottom
         </LightTooltip>
@@ -52,7 +46,6 @@ storiesOf('Tooltip', module)
           message="horizontal=right & vertical=bottom"
           horizontal="right"
           vertical="bottom"
-          id="tooltip-5"
         >
           horizontal=right & vertical=bottom
         </LightTooltip>
@@ -62,7 +55,6 @@ storiesOf('Tooltip', module)
           message="horizontal=left & vertical=middle"
           horizontal="left"
           vertical="middle"
-          id="tooltip-6"
         >
           horizontal=left & vertical=middle
         </DarkTooltip>
@@ -72,49 +64,33 @@ storiesOf('Tooltip', module)
           message="horizontal=right & vertical=middle"
           horizontal="right"
           vertical="middle"
-          id="tooltip-7"
         >
           horizontal=right & vertical=middle
         </DarkTooltip>
       </dd>
       <dd>
-        <LightTooltip
-          message="horizontal=left & vertical=top"
-          horizontal="left"
-          vertical="top"
-          id="tooltip-8"
-        >
+        <LightTooltip message="horizontal=left & vertical=top" horizontal="left" vertical="top">
           horizontal=left & vertical=top
         </LightTooltip>
       </dd>
       <dd className="center">
-        <LightTooltip
-          message="horizontal=center & vertical=top"
-          horizontal="center"
-          vertical="top"
-          id="tooltip-9"
-        >
+        <LightTooltip message="horizontal=center & vertical=top" horizontal="center" vertical="top">
           horizontal=center & vertical=top
         </LightTooltip>
       </dd>
       <dd className="right">
-        <LightTooltip
-          message="horizontal=right & vertical=top"
-          horizontal="right"
-          vertical="top"
-          id="tooltip-10"
-        >
+        <LightTooltip message="horizontal=right & vertical=top" horizontal="right" vertical="top">
           horizontal=right & vertical=top
         </LightTooltip>
       </dd>
       <dt>ellipsisOnly</dt>
       <dd className="limit">
-        <DarkTooltip message="invisible message" ellipsisOnly={true} id="tooltip-11">
+        <DarkTooltip message="invisible message" ellipsisOnly={true}>
           ellipsisOnly: invisible
         </DarkTooltip>
       </dd>
       <dd className="limit">
-        <DarkTooltip message="visible message" ellipsisOnly={true} id="tooltip-12">
+        <DarkTooltip message="visible message" ellipsisOnly={true}>
           <Text>
             ellipsisOnly: visible: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de
             la Santísima Trinidad Ruiz Picasso
@@ -126,7 +102,6 @@ storiesOf('Tooltip', module)
         <LightTooltip
           message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
           multiLine={true}
-          id="tooltip-13"
         >
           MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
           Santísima Trinidad Ruiz Picasso
@@ -145,7 +120,6 @@ storiesOf('Tooltip', module)
               ...
             </>
           }
-          id="tooltip-14"
         >
           <Text>
             MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
@@ -160,7 +134,6 @@ storiesOf('Tooltip', module)
           horizontal="left"
           vertical="bottom"
           triggerType="icon"
-          id="tooltip-15"
         >
           <Icon name="fa-arrow-alt-circle-up" />
         </LightTooltip>
@@ -169,7 +142,6 @@ storiesOf('Tooltip', module)
           horizontal="center"
           vertical="bottom"
           triggerType="icon"
-          id="tooltip-16"
         >
           <Icon name="fa-arrow-alt-circle-up" />
         </LightTooltip>
@@ -178,7 +150,6 @@ storiesOf('Tooltip', module)
           horizontal="right"
           vertical="bottom"
           triggerType="icon"
-          id="tooltip-17"
         >
           <Icon name="fa-arrow-alt-circle-up" />
         </LightTooltip>
@@ -187,7 +158,6 @@ storiesOf('Tooltip', module)
           horizontal="left"
           vertical="middle"
           triggerType="icon"
-          id="tooltip-18"
         >
           <Icon name="fa-arrow-alt-circle-right" />
         </DarkTooltip>
@@ -196,7 +166,6 @@ storiesOf('Tooltip', module)
           horizontal="right"
           vertical="middle"
           triggerType="icon"
-          id="tooltip-19"
         >
           <Icon name="fa-arrow-alt-circle-left" />
         </DarkTooltip>
@@ -205,7 +174,6 @@ storiesOf('Tooltip', module)
           horizontal="left"
           vertical="top"
           triggerType="icon"
-          id="tooltip-20"
         >
           <Icon name="fa-arrow-alt-circle-down" />
         </LightTooltip>
@@ -214,7 +182,6 @@ storiesOf('Tooltip', module)
           horizontal="center"
           vertical="top"
           triggerType="icon"
-          id="tooltip-21"
         >
           <Icon name="fa-arrow-alt-circle-down" />
         </LightTooltip>
@@ -223,7 +190,6 @@ storiesOf('Tooltip', module)
           horizontal="right"
           vertical="top"
           triggerType="icon"
-          id="tooltip-22"
         >
           <Icon name="fa-arrow-alt-circle-down" />
         </LightTooltip>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,12 +1,13 @@
 import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styled, { css } from 'styled-components'
+
 import { Props as BalloonProps, BalloonTheme, DarkBalloon, LightBalloon } from '../Balloon'
 import { TooltipPortal } from './TooltipPortal'
 import { Theme, useTheme } from '../../hooks/useTheme'
+import { useId } from '../../hooks/useId'
 
 type Props = {
-  id: string
   message: ReactNode
   children: ReactNode
   triggerType?: 'icon' | 'text'
@@ -17,7 +18,6 @@ type Props = {
 }
 
 const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = (balloonTheme) => ({
-  id,
   message,
   children,
   triggerType,
@@ -30,6 +30,7 @@ const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = (balloonTheme)
   const [isVisible, setIsVisible] = useState(false)
   const [rect, setRect] = useState<DOMRect | null>(null)
   const ref = React.createRef<HTMLDivElement>()
+  const tooltipId = useId()
 
   const getBalloonWrapperWidth = (): number => {
     if (!ref.current) {
@@ -84,7 +85,7 @@ const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = (balloonTheme)
 
   return (
     <Wrapper
-      aria-describedby={isVisible ? id : undefined}
+      aria-describedby={isVisible ? tooltipId : undefined}
       ref={ref}
       onMouseEnter={overAction}
       onTouchStart={overAction}
@@ -99,7 +100,7 @@ const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = (balloonTheme)
         rect &&
         createPortal(
           <TooltipPortal
-            id={id}
+            id={tooltipId}
             parentRect={rect}
             isIcon={isIcon}
             isMultiLine={multiLine}

diff --git a/src/hooks/useId.tsx b/src/hooks/useId.tsx
@@ -0,0 +1,31 @@
+import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'
+
+interface IdContextValue {
+  prefix: number
+  current: number
+}
+
+const defaultContext: IdContextValue = {
+  prefix: 0,
+  current: 0,
+}
+
+const IdContext = createContext<IdContextValue>(defaultContext)
+
+export function useId(defaultId?: string) {
+  const context = useContext(IdContext)
+  return useMemo(() => defaultId || `id-${context.prefix}-${++context.current}`, [
+    defaultId,
+    context,
+  ])
+}
+
+export const SequencePrefixIdProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const context = useContext(IdContext)
+  // increment `prefix` and reset `current` to 0 on every Provider
+  const value: IdContextValue = {
+    prefix: context.prefix + 1,
+    current: 0,
+  }
+  return <IdContext.Provider value={value}>{children}</IdContext.Provider>
+}
diff --git a/src/index.ts b/src/index.ts
@@ -88,3 +88,6 @@ export { defaultSize } from './themes/createSize'
 
 // constants
 export { FONT_FAMILY } from './constants'
+
+// utils
+export { SequencePrefixIdProvider } from './hooks/useId'