From 682b0b791c4e2acd9184b7039da9b56ba773255a Mon Sep 17 00:00:00 2001
From: ShanaMaid <uestczeng@gmail.com>
Date: Wed, 4 Jul 2018 12:06:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(pop):=20=E4=BF=AE=E5=A4=8Dpop=20=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93position=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Pop/Pop.tsx         | 81 +++++++++++-----------------------
 components/Tooltip/Tooltip.tsx | 18 --------
 2 files changed, 25 insertions(+), 74 deletions(-)

diff --git a/components/Pop/Pop.tsx b/components/Pop/Pop.tsx
index b8c2261..d90b3a2 100644
--- a/components/Pop/Pop.tsx
+++ b/components/Pop/Pop.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {IBaseComponent} from '../template/component';
 import { RenderInRootDom } from '../utils/renderInRootDom';
-import { CSSTransition } from 'react-transition-group';
 
 export interface IPopProps extends IBaseComponent {
   /**
@@ -34,10 +33,6 @@ export interface IPopProps extends IBaseComponent {
    * 触发行为
    */
   trigger?: 'hover' | 'focus' | 'click';
-  /**
-   * 内容
-   */
-  title?: string;
   /**
    * 受控-是否可见
    */
@@ -58,14 +53,6 @@ export interface IPopProps extends IBaseComponent {
    * 进入时才渲染
    */
   mountOnEnter?: boolean;
-  /**
-   * 过度动画样式
-   */
-  transitionCls: {[key: string]: string};
-  /**
-   * pop 宽高修改
-   */
-  setPopRect?: (rect: {width: number; height: number}) => {width: number; height: number};
 }
 
 export interface IPopState {
@@ -81,7 +68,6 @@ export class Pop extends Component<IPopProps, IPopState> {
 
   animateTimeHandle: number[] = []; // 动画timeout句柄
 
-  scale = 0.8;
   popId = `pop_${new Date().getTime() * Math.random()}`; // pop唯一id
 
   static defaultProps = {
@@ -101,53 +87,40 @@ export class Pop extends Component<IPopProps, IPopState> {
 
   renderPop = () => {
     const {
-      className, children, title, style,
+      className, children, style, defaultVisible,
       placement, overlayStyle, overlayClassName,
       mouseEnterDelay, mouseLeaveDelay, mountOnEnter,
-      onChange, content, transitionCls, ...otherProps,
+      onChange, content, visible,
+      ...otherProps
     } = this.props;
     const preCls = 'yoshino-pop';
-    const visible = this.getVisible();
+    const clsName = classNames(
+      preCls, this.popId,
+      `${preCls}-${placement}`, overlayClassName,
+      className,
+    );
+    const child = React.Children.only(content);
+
     return (
-      <RenderInRootDom>
-        <CSSTransition
-          timeout={25}
-          classNames={transitionCls}
-          in={visible}
-          onEnter={() => {
-            this.resetPopPostion();
-          }}
-          mountOnEnter={true}
-          appear
-        >
-          {
-            () => {
-              const clsName = classNames(
-                preCls, this.popId,
-                `${preCls}-${placement}`, overlayClassName,
-                className,
-              );
-              const child = React.Children.only(content);
-              return (
-                <div
-                  className={clsName}
-                  style={{...overlayStyle}}
-                  {...otherProps}
-                  {...this.getConentTriggerAction()}
-                >
-                  {child}
-                </div>
-              );
-            }
-          }
-        </CSSTransition>
-      </RenderInRootDom>
+      this.getVisible() ? (
+        <RenderInRootDom callBack={this.resetPopPostion}>
+          <div
+            className={clsName}
+            style={{...overlayStyle}}
+            {...otherProps}
+            {...this.getConentTriggerAction()}
+          >
+            {child}
+          </div>
+        </RenderInRootDom>
+      )
+      : null
     );
   }
 
   resetPopPostion = () => {
     const children = ReactDOM.findDOMNode(this.refChildren) as Element;
-    const {placement = 'top', setPopRect} = this.props;
+    const {placement = 'top'} = this.props;
     const dom =  document.getElementsByClassName(this.popId)[0] as HTMLElement;
     const domRectReal = dom.getBoundingClientRect() as DOMRect; // Pop - content -  dom
     const rect = children.getBoundingClientRect() as DOMRect; // Pop - target - dom
@@ -157,11 +130,7 @@ export class Pop extends Component<IPopProps, IPopState> {
     const childrenY = pageY + rect.top; // 子元素y
     // 解决部分浏览器rect不可修改的问题
     const domRect = {width: domRectReal.width, height: domRectReal.height};
-    if (setPopRect) {
-      const popRect = setPopRect(domRect);
-      domRect.width = popRect.width;
-      domRect.height = popRect.height;
-    }
+
     // placement所对应的left top
     const config = {
       top: {left: childrenX + rect.width / 2 - domRect.width / 2, top: childrenY - domRect.height},
diff --git a/components/Tooltip/Tooltip.tsx b/components/Tooltip/Tooltip.tsx
index 41b9854..9af86d2 100644
--- a/components/Tooltip/Tooltip.tsx
+++ b/components/Tooltip/Tooltip.tsx
@@ -82,12 +82,6 @@ export class Tooltip extends Component<ITooltipProps, ITooltipState> {
     visible: this.props.defaultVisible as boolean,
   };
 
-  setPopRect = (rect: {width: number; height: number}): {width: number; height: number} => {
-    const width = rect.width / this.scale;
-    const height = rect.height / this.scale;
-    return {width, height};
-  }
-
   render() {
     const {children, title, placement} = this.props;
     // tslint:disable
@@ -96,16 +90,6 @@ export class Tooltip extends Component<ITooltipProps, ITooltipState> {
     const contentCls = classNames(
       preCls, `${preCls}-${placement}`,
     );
-    const transitionCls = {
-      appear: `${preCls}-appear`,
-      appearActive: `${preCls}-active-appear`,
-      enter: `${preCls}-enter`,
-      enterActive: `${preCls}-active-enter`,
-      enterDone: `${preCls}-done-enter`,
-      exit: `${preCls}-exit`,
-      exitActive: `${preCls}-active-exit`,
-      exitDone: `${preCls}-done-exit`,
-    };
     const content = (
       <div className={contentCls}>
         <div className={`${preCls}-content`}>{title}</div>
@@ -116,8 +100,6 @@ export class Tooltip extends Component<ITooltipProps, ITooltipState> {
       <Pop
         {...this.props}
         content={content}
-        setPopRect={this.setPopRect}
-        transitionCls={transitionCls}
       >
         {child}
       </Pop>