refactor(js-ts): tooltip convert (#1043)

Author: mydearxym

src/components/Cards/JobCard.tsx

@@ -92,7 +92,6 @@ const JobCard: React.FC<TProps> = ({
           </PublisherInfo>
         </Publisher>
         <TechKeywords>
-          {/* @ts-ignore  */}
           <Tooltip
             content={<CommunityCard item={fakeCommunity} />}
             placement="top"

src/components/FiltersMenu/Header.tsx

@@ -23,7 +23,6 @@ const Header: React.FC<TProps> = ({ title, showReset, onReset }) => {
     <Wrapper>
       <Title active={showReset}>{title}</Title>
       <OperatorsWrapper>
-        {/* @ts-ignore */}
         <Tooltip
           content={<HelpHint>重置筛选条件</HelpHint>}
           placement="bottom"

src/components/PagedContents/CommunityRecommends.tsx

@@ -64,7 +64,6 @@ const CommunityRecommends: React.FC<TProps> = ({ items = tmpItems }) => {
       <ListWrapper>
         {items.map((item) => (
           <Community key={item.id}>
-            {/* @ts-ignore  */}
             <Tooltip content={<CommunityCard item={item} />} placement="top">
               <CommunityTitle>{item.title}</CommunityTitle>
             </Tooltip>

src/components/Tooltip/ConfirmFooter.js renamed to src/components/Tooltip/ConfirmFooter.tsx

@@ -7,14 +7,25 @@ import { FOOTER_BEHAVIOR } from './constant'
 
 import { Wrapper, ButtonsWrapper, CancelButton } from './styles/confirm_footer'
 
-const ConfirmFooter = ({ onConfirm, onCancel, footerBehavior }) => {
+type TProps = {
+  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+const ConfirmFooter: React.FC<TProps> = ({
+  onConfirm,
+  onCancel,
+  footerBehavior,
+}) => {
   let content = null
 
   switch (footerBehavior) {
     case FOOTER_BEHAVIOR.DELETE_CONFIRM: {
       content = (
         <ButtonsWrapper>
-          <Button size="small" type="red" onClick={onConfirm}>
+          <Button size="small" type="red" onClick={() => onConfirm?.()}>
             确认删除
           </Button>
           <Space right={10} />
@@ -27,11 +38,11 @@ const ConfirmFooter = ({ onConfirm, onCancel, footerBehavior }) => {
     case FOOTER_BEHAVIOR.ADD: {
       content = (
         <ButtonsWrapper>
-          <Button size="small" type="primary" onClick={onConfirm}>
+          <Button size="small" type="primary" onClick={() => onConfirm?.()}>
             添加
           </Button>
           <Space right={10} />
-          <CancelButton onClick={onCancel}>取消</CancelButton>
+          <CancelButton onClick={() => onCancel?.()}>取消</CancelButton>
         </ButtonsWrapper>
       )
       break
@@ -44,7 +55,7 @@ const ConfirmFooter = ({ onConfirm, onCancel, footerBehavior }) => {
             确定
           </Button>
           <Space right={10} />
-          <CancelButton onClick={onCancel}>取消</CancelButton>
+          <CancelButton onClick={() => onCancel?.()}>取消</CancelButton>
         </ButtonsWrapper>
       )
       break

src/components/Tooltip/index.js renamed to src/components/Tooltip/index.tsx

@@ -5,9 +5,8 @@
  */
 
 import React, { useState, useRef } from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
+import type { TTooltipPlacement, TTooltipAnimation } from '@/spec'
 import { css, buildLog, isDescendant } from '@/utils'
 import { useOutsideClick } from '@/hooks'
 
@@ -26,19 +25,44 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Tooltip:index')
 
-const Tooltip = ({
+type TProps = {
+  children: React.ReactNode
+  content: string | React.ReactNode
+  animation?: TTooltipAnimation
+  placement?: TTooltipPlacement
+  // more options see: https://atomiks.github.io/tippyjs/all-options/
+  delay?: number
+  duration?: number
+  trigger?: 'mouseenter focus' | 'click'
+  hideOnClick?: boolean
+  noPadding?: boolean
+  showArrow?: boolean
+  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+  // currently only for AvatarsRow, it will collapse the height
+  // for same reason, figure out later
+  contentHeight?: string
+
+  onShow?: () => void
+  onHide?: () => void
+  onConfirm?: () => void
+}
+
+const Tooltip: React.FC<TProps> = ({
   children,
-  noPadding,
+  animation = 'fade',
+  noPadding = false,
   onHide,
   onShow,
-  placement,
+  placement = 'top',
+  delay = 0,
+  duration = 0,
   content,
-  hideOnClick,
-  showArrow,
-  footerBehavior,
+  hideOnClick = true,
+  showArrow = true,
+  footerBehavior = 'default',
+  trigger = 'mouseenter focus',
   onConfirm,
   contentHeight,
-  ...restProps
 }) => {
   const [instance, setInstance] = useState(null)
   const [active, setActive] = useState(false)
@@ -110,7 +134,10 @@ const Tooltip = ({
       }}
       zIndex={css.zIndex.popover}
       interactive
-      {...restProps}
+      delay={delay}
+      duration={duration}
+      animation={animation}
+      trigger={trigger}
     >
       {ContentComp}
     </StyledTippy>
@@ -120,7 +147,7 @@ const Tooltip = ({
       content={PopoverContent}
       placement={placement}
       hideOnClick={hideOnClick}
-      animation="scale"
+      animation={animation}
       onHide={(instance) => {
         setInstance(instance)
         setActive(false)
@@ -133,76 +160,13 @@ const Tooltip = ({
       }}
       zIndex={css.zIndex.popover}
       interactive
-      {...restProps}
+      delay={delay}
+      duration={duration}
+      trigger={trigger}
     >
       {ContentComp}
     </NoPaddingStyledTippy>
   )
 }
 
-Tooltip.propTypes = {
-  children: T.node.isRequired,
-  content: T.oneOfType([T.string, T.node]).isRequired,
-  // options
-  animation: T.oneOf([
-    'shift-away',
-    'shift-toward',
-    'fade',
-    'scale',
-    'perspective',
-  ]),
-  arrow: T.bool,
-  delay: T.number,
-  duration: T.number,
-  placement: T.oneOf([
-    'top',
-    'top-start',
-    'top-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-    'right',
-    'right-start',
-    'right-end',
-  ]),
-  // hooks
-  trigger: T.oneOf(['mouseenter focus', 'click']),
-  hideOnClick: T.oneOf([true, false]),
-  maxWidth: T.oneOf([350, 'none']),
-  // more options see: https://atomiks.github.io/tippyjs/all-options/
-  onShow: T.oneOfType([T.func, T.instanceOf(null)]),
-  onHide: T.oneOfType([T.func, T.instanceOf(null)]),
-  noPadding: T.bool,
-  showArrow: T.bool,
-  footerBehavior: T.oneOf(values(FOOTER_BEHAVIOR)),
-  onConfirm: T.oneOfType([T.func, T.instanceOf(null)]),
-
-  // currently only for AvatarsRow, it will collapse the height
-  // for same reason, figure out later
-  contentHeight: T.string,
-}
-
-Tooltip.defaultProps = {
-  animation: 'fade',
-  arrow: true,
-  delay: 0,
-  duration: 0,
-  hideOnClick: true,
-  placement: 'top',
-  // hooks
-  trigger: 'mouseenter focus',
-  onShow: null,
-  onHide: null,
-  noPadding: false,
-  maxWidth: 'none',
-  showArrow: true,
-  footerBehavior: 'default',
-  onConfirm: null,
-
-  contentHeight: 'auto',
-}
-
 export default React.memo(Tooltip)

src/components/Tooltip/styles/index.ts

@@ -14,6 +14,10 @@ export const StyledTippy = styled(Tippy)`
 
   border-radius: 5px;
   padding: 10px;
+
+  .tippy-arrow {
+    display: none;
+  }
 `
 export const NoPaddingStyledTippy = styled(StyledTippy)`
   padding: 0;

src/spec/index.ts

@@ -27,6 +27,8 @@ export type {
   TPlatform,
   Nullable,
   TScrollDirection,
+  TTooltipAnimation,
+  TTooltipPlacement,
 } from './utils'
 
 export type { TGQLError } from './graphql'

src/spec/utils.ts

@@ -47,3 +47,24 @@ export type TPlatform = {
 }
 
 export type TScrollDirection = 'up' | 'down'
+
+export type TTooltipAnimation =
+  | 'shift-away'
+  | 'shift-toward'
+  | 'fade'
+  | 'scale'
+  | 'perspective'
+
+export type TTooltipPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'