fix: split type

kufu · Apr 28, 2020 · 8b948db · 8b948db
1 parent 7941e0d
commit 8b948db
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 53 deletions.
diff --git a/src/components/Balloon/Balloon.tsx b/src/components/Balloon/Balloon.tsx
@@ -3,7 +3,8 @@ import styled, { css } from 'styled-components'
 
 import { useTheme, Theme } from '../../hooks/useTheme'
 
-type BalloonTheme = 'light' | 'dark'
+export type BalloonTheme = 'light' | 'dark'
+
 export type Props = {
   horizontal: 'right' | 'center' | 'left'
   vertical: 'top' | 'middle' | 'bottom'

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -3,92 +3,99 @@ import * as React from 'react'
 import styled from 'styled-components'
 
 import { Icon } from '../Icon'
-import { Tooltip } from './Tooltip'
+import { LightTooltip, DarkTooltip } from './Tooltip'
 
 storiesOf('Tooltip', module).add('all', () => (
   <List>
     <dt>Default</dt>
     <dd>
-      <Tooltip message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso">
-        Default: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima
-        Trinidad Ruiz Picasso
-      </Tooltip>
+      <LightTooltip message="LightBalloon">LightTooltip</LightTooltip>
+      <DarkTooltip message="DarkBalloon">DarkTooltip</DarkTooltip>
     </dd>
     <dt>horizontal & vertical</dt>
     <dd>
-      <Tooltip
+      <LightTooltip
         message="horizontal=left & vertical=bottom (default)"
         horizontal="left"
         vertical="bottom"
       >
         horizontal=left & vertical=bottom (default)
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dd className="center">
-      <Tooltip message="horizontal=center & vertical=bottom" horizontal="center" vertical="bottom">
+      <LightTooltip
+        message="horizontal=center & vertical=bottom"
+        horizontal="center"
+        vertical="bottom"
+      >
         horizontal=center & vertical=bottom
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dd className="right">
-      <Tooltip message="horizontal=right & vertical=bottom" horizontal="right" vertical="bottom">
+      <LightTooltip
+        message="horizontal=right & vertical=bottom"
+        horizontal="right"
+        vertical="bottom"
+      >
         horizontal=right & vertical=bottom
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dd>
-      <Tooltip message="horizontal=left & vertical=middle" horizontal="left" vertical="middle">
+      <DarkTooltip message="horizontal=left & vertical=middle" horizontal="left" vertical="middle">
         horizontal=left & vertical=middle
-      </Tooltip>
+      </DarkTooltip>
     </dd>
     <dd className="right">
-      <Tooltip message="horizontal=right & vertical=middle" horizontal="right" vertical="middle">
+      <DarkTooltip
+        message="horizontal=right & vertical=middle"
+        horizontal="right"
+        vertical="middle"
+      >
         horizontal=right & vertical=middle
-      </Tooltip>
+      </DarkTooltip>
     </dd>
     <dd>
-      <Tooltip message="horizontal=left & vertical=top" horizontal="left" vertical="top">
+      <LightTooltip message="horizontal=left & vertical=top" horizontal="left" vertical="top">
         horizontal=left & vertical=top
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dd className="center">
-      <Tooltip message="horizontal=center & vertical=top" horizontal="center" vertical="top">
+      <LightTooltip message="horizontal=center & vertical=top" horizontal="center" vertical="top">
         horizontal=center & vertical=top
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dd className="right">
-      <Tooltip message="horizontal=right & vertical=top" horizontal="right" vertical="top">
+      <LightTooltip message="horizontal=right & vertical=top" horizontal="right" vertical="top">
         horizontal=right & vertical=top
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dt>ellipsisOnly</dt>
     <dd className="limit">
-      <Tooltip message="invisible message" ellipsisOnly={true}>
-        invisible
-      </Tooltip>
+      <DarkTooltip message="invisible message" ellipsisOnly={true}>
+        ellipsisOnly: invisible
+      </DarkTooltip>
     </dd>
-    <dd>
-      <Tooltip
-        message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
-        ellipsisOnly={true}
-      >
+    <dd className="limit">
+      <DarkTooltip message="visible message" ellipsisOnly={true}>
         <Text>
-          visible: Ellipsis Only: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
+          ellipsisOnly: visible: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
           Santísima Trinidad Ruiz Picasso
         </Text>
-      </Tooltip>
+      </DarkTooltip>
     </dd>
     <dt>multiLine</dt>
-    <dd>
-      <Tooltip
+    <dd className="limit">
+      <LightTooltip
         message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
         multiLine={true}
       >
         MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
         Santísima Trinidad Ruiz Picasso
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dt>ReactNode message attribute</dt>
     <dd>
-      <Tooltip
+      <LightTooltip
         message={
           <>
             MultiLineMessage
@@ -99,19 +106,18 @@ storiesOf('Tooltip', module).add('all', () => (
             ...
           </>
         }
-        multiLine={true}
       >
         <Text>
           MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
           Santísima Trinidad Ruiz Picasso
         </Text>
-      </Tooltip>
+      </LightTooltip>
     </dd>
     <dt>triggerType</dt>
     <dd>
-      <Tooltip message="Icon Message" triggerType="icon">
+      <DarkTooltip message="Icon Message" triggerType="icon">
         <Icon name="fa-question-circle" />
-      </Tooltip>
+      </DarkTooltip>
     </dd>
   </List>
 ))

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,30 +1,28 @@
-import React, { useState } from 'react'
+import React, { ReactNode, FC, useState } from 'react'
 import styled, { css } from 'styled-components'
-import { LightBalloon, DarkBalloon, Props as BalloonProps } from '../Balloon'
+import { LightBalloon, DarkBalloon, Props as BalloonProps, BalloonTheme } from '../Balloon'
 import { useTheme, Theme } from '../../hooks/useTheme'
 
-interface Prop {
-  message: React.ReactNode
-  children: React.ReactNode
+type Props = {
+  message: ReactNode
+  children: ReactNode
   triggerType?: 'icon' | 'text'
   multiLine?: boolean
   ellipsisOnly?: boolean
-  balloonType?: 'light' | 'dark'
   horizontal?: BalloonProps['horizontal']
   vertical?: BalloonProps['vertical']
 }
 
-export const Tooltip: React.FC<Prop> = ({
+const tooltipFactory: (balloonTheme: BalloonTheme) => FC<Props> = balloonTheme => ({
   message,
   children,
   triggerType,
   multiLine,
   ellipsisOnly = false,
-  balloonType = 'light',
   horizontal = 'left',
   vertical = 'bottom',
 }) => {
-  const theme = useTheme()
+  const themes = useTheme()
   const [isVisible, setIsVisible] = useState(false)
 
   const className = [triggerType === 'icon' ? 'icon-tooltip' : '', multiLine ? 'multi-line' : '']
@@ -58,7 +56,7 @@ export const Tooltip: React.FC<Prop> = ({
 
     const parentWidth = getParentWidth()
 
-    if (parentWidth < 0 && parentWidth > getBalloonWrapperWidth()) {
+    if (parentWidth < 0 || parentWidth > getBalloonWrapperWidth()) {
       return
     }
 
@@ -67,7 +65,7 @@ export const Tooltip: React.FC<Prop> = ({
   const outAction = () => {
     setIsVisible(false)
   }
-  const StyledBalloon = balloonType === 'light' ? StyledLightBalloon : StyledDarkBallon
+  const StyledBalloon = balloonTheme === 'light' ? StyledLightBalloon : StyledDarkBallon
 
   return (
     <Wrapper
@@ -79,14 +77,17 @@ export const Tooltip: React.FC<Prop> = ({
     >
       {isVisible && (
         <StyledBalloon horizontal={horizontal} vertical={vertical} className={className}>
-          <StyledBalloonText themes={theme}>{message}</StyledBalloonText>
+          <StyledBalloonText themes={themes}>{message}</StyledBalloonText>
         </StyledBalloon>
       )}
       {children}
     </Wrapper>
   )
 }
 
+export const LightTooltip = tooltipFactory('light')
+export const DarkTooltip = tooltipFactory('dark')
+
 const Wrapper = styled.span`
   position: relative;
   display: inline-block;

diff --git a/src/index.ts b/src/index.ts
@@ -63,7 +63,7 @@ export {
 export { InformationPanel } from './components/InformationPanel'
 export { Footer } from './components/Footer'
 export { RightFixedNote } from './components/RightFixedNote'
-export { Tooltip } from './components/Tooltip'
+export { LightTooltip, DarkTooltip } from './components/Tooltip'
 
 // themes
 export { createTheme } from './themes/createTheme'