refactor(Tooltip) 重构文字提示 uiwjs#845

Author: cuilanxin

packages/react-tooltip/src/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
 import { IProps } from '@uiw/utils';
-import './style/index.less';
-
+import { TooltipWarp, TooltipContainerWarp, TooltipArrowWarp, TooltipInnerWarp } from './style';
 export interface TooltipProps extends IProps, OverlayTriggerProps {
   visibleArrow?: boolean;
   content?: React.ReactNode;
@@ -23,7 +22,8 @@ export default (props: TooltipProps = {}) => {
   } = props;
   const cls = [prefixCls, className, !visibleArrow ? 'no-arrow' : null].filter(Boolean).join(' ').trim();
   return (
-    <OverlayTrigger
+    <TooltipWarp
+      as={OverlayTrigger}
       usePortal={usePortal}
       isOpen={isOpen}
       trigger={trigger}
@@ -32,13 +32,13 @@ export default (props: TooltipProps = {}) => {
       placement={placement}
       {...other}
       overlay={
-        <div className={cls}>
-          {visibleArrow && <div className={`${prefixCls}-arrow`} />}
-          <div className={`${prefixCls}-inner`}>{props.content}</div>
-        </div>
+        <TooltipContainerWarp placement={placement} visibleArrow={visibleArrow} className={cls}>
+          {visibleArrow && <TooltipArrowWarp placement={placement} className={`${prefixCls}-arrow`} />}
+          <TooltipInnerWarp className={`${prefixCls}-inner`}>{props.content}</TooltipInnerWarp>
+        </TooltipContainerWarp>
       }
     >
       {typeof props.children === 'object' ? props.children : <span>{props.children}</span>}
-    </OverlayTrigger>
+    </TooltipWarp>
   );
 };

packages/react-tooltip/src/style/index.ts

@@ -0,0 +1,180 @@
+import styled, { css } from 'styled-components';
+import { getThemeVariantValue, ThemeVariantValueOptions } from '@uiw/utils';
+import { TooltipProps } from '../';
+
+export interface TooltipStyleProps extends TooltipProps, ThemeVariantValueOptions {}
+
+interface TooltipContainerProps {
+  visibleArrow: boolean;
+  placement: TooltipStyleProps['placement'];
+}
+
+interface TooltipArrowProps extends ThemeVariantValueOptions {
+  placement: TooltipStyleProps['placement'];
+}
+
+function tooltipHandle(placement: TooltipStyleProps['placement']) {
+  const obj = {
+    right: 'right',
+    rightTop: 'right',
+    rightBottom: 'right',
+
+    left: 'left',
+    leftTop: 'left',
+    leftBottom: 'left',
+
+    top: 'top',
+    topLeft: 'top',
+    topRight: 'top',
+
+    bottom: 'bottom',
+    bottomLeft: 'bottom',
+    bottomRight: 'bottom',
+  };
+  switch (obj[placement!]) {
+    case 'bottom':
+      return css`
+        padding-top: 5px;
+      `;
+    case 'top':
+      return css`
+        padding-bottom: 5px;
+      `;
+    case 'right':
+      return css`
+        padding-left: 5px;
+      `;
+    case 'left':
+      return css`
+        padding-right: 5px;
+      `;
+    default:
+      return css``;
+  }
+}
+
+function tooltipArrowHandle(placement: TooltipStyleProps['placement']) {
+  const obj = {
+    right: 'right',
+    rightTop: 'right',
+    rightBottom: 'right',
+
+    left: 'left',
+    leftTop: 'left',
+    leftBottom: 'left',
+
+    top: 'top',
+    topLeft: 'top',
+    topRight: 'top',
+
+    bottom: 'bottom',
+    bottomLeft: 'bottom',
+    bottomRight: 'bottom',
+  };
+  switch (obj[placement!]) {
+    case 'right':
+      return css`
+        border-right-color: ${(props) => getThemeVariantValue(props, 'borderColorDefault')};
+        border-width: 5px 5px 5px 0;
+        left: 0;
+        margin-top: -5px;
+        top: 50%;
+      `;
+    case 'left':
+      return css`
+        border-left-color: ${(props) => getThemeVariantValue(props, 'borderColorDefault')};
+        border-width: 5px 0 5px 5px;
+        margin-top: -5px;
+        right: 0;
+        top: 50%;
+      `;
+    case 'top':
+      return css`
+        border-top-color: ${(props) => getThemeVariantValue(props, 'borderColorDefault')};
+        border-width: 5px 5px 0;
+        bottom: 0;
+        left: 50%;
+        margin-left: -5px;
+      `;
+    case 'bottom':
+      return css`
+        border-bottom-color: ${(props) => getThemeVariantValue(props, 'borderColorDefault')};
+        border-width: 0 5px 5px;
+        left: 50%;
+        margin-left: -5px;
+        top: 0;
+      `;
+    default:
+      return css``;
+  }
+}
+
+export const TooltipWarp = styled.div<TooltipStyleProps>``;
+export const TooltipContainerWarp = styled.div<TooltipContainerProps>`
+  position: relative;
+  display: inline-block;
+  ${(props) =>
+    !props.visibleArrow &&
+    css`
+      padding: 0 !important;
+    `}
+  ${(props) => tooltipHandle(props.placement)}
+`;
+export const TooltipArrowWarp = styled.div<TooltipArrowProps>`
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  ${(props) => tooltipArrowHandle(props.placement)}
+  ${({ placement }) => {
+    if (['leftTop', 'rightTop'].includes(placement!)) {
+      return css`
+        top: 15px;
+      `;
+    }
+    if (['leftBottom', 'rightBottom'].includes(placement!)) {
+      return css`
+        bottom: 10px;
+        top: auto;
+      `;
+    }
+    if (['bottomLeft', 'topLeft'].includes(placement!)) {
+      return css`
+        left: 15px;
+      `;
+    }
+    if (['bottomRight', 'topRight'].includes(placement!)) {
+      return css`
+        right: 10px;
+        left: auto;
+      `;
+    }
+    return css``;
+  }}
+`;
+export const TooltipInnerWarp = styled.div<ThemeVariantValueOptions>`
+  font-size: 12px;
+  max-width: 250px;
+  padding: 5px 10px;
+  display: block;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  border-radius: 4px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+  word-break: break-all;
+  background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorDefault')};
+`;
+
+TooltipInnerWarp.defaultProps = {
+  defaultTheme: {
+    backgroundColorDefault: 'rgba(0, 0, 0, 0.75)',
+    borderColorDefault: 'rgba(0, 0, 0, 0.75)',
+  },
+};
+TooltipArrowWarp.defaultProps = {
+  defaultTheme: {
+    borderColorDefault: 'rgba(0, 0, 0, 0.75)',
+  },
+};