From 5ab7092f30a4561c35e26951ba8ce12b0e8de0c6 Mon Sep 17 00:00:00 2001
From: WmW <zhouzheng0646@qq.com>
Date: Sat, 23 Jul 2022 16:53:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(OverlayTrigger):=20=E9=87=8D=E6=9E=84O?=
 =?UTF-8?q?verlayTrigger=20=E5=9F=BA=E7=A1=80=E8=A7=A6=E5=8F=91=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=20(#886=EF=BC=8C#845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-overlay-trigger/README.md      |  2 +-
 packages/react-overlay-trigger/src/index.tsx  | 13 ++-
 .../react-overlay-trigger/src/style/index.ts  | 93 +++++++++++++++++++
 packages/react-overlay/src/index.tsx          |  2 +
 4 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-overlay-trigger/src/style/index.ts

diff --git a/packages/react-overlay-trigger/README.md b/packages/react-overlay-trigger/README.md
index c7ec163b14..93cba50391 100644
--- a/packages/react-overlay-trigger/README.md
+++ b/packages/react-overlay-trigger/README.md
@@ -75,7 +75,7 @@ const card = (
 const Demo = () => (
   <div>
     <div style={{ position: 'relative' }}>
-      <OverlayTrigger placement="topLeft" overlay={card}>
+      <OverlayTrigger disabled placement="topLeft" overlay={card}>
         <Button style={{ ...btnStl, left: 70 }}>TL</Button>
       </OverlayTrigger>
       <OverlayTrigger placement="top" overlay={card}>
diff --git a/packages/react-overlay-trigger/src/index.tsx b/packages/react-overlay-trigger/src/index.tsx
index 52899dc593..6a7b32e056 100644
--- a/packages/react-overlay-trigger/src/index.tsx
+++ b/packages/react-overlay-trigger/src/index.tsx
@@ -1,10 +1,11 @@
 import React, { cloneElement, useEffect, useRef, useState, useImperativeHandle } from 'react';
-import { IProps, noop } from '@uiw/utils';
+import { GetStyledCloneComponent, IProps, noop } from '@uiw/utils';
 import Overlay, { OverlayProps } from '@uiw/react-overlay';
 import contains from './utils';
 import { IBoundingClientRect } from './util/getBoundingClientRect';
 import { getStyle } from './getStyle';
-import './style/index.less';
+// import './style/index.less';
+import { OverlayTriggerWrap, TriggerWrap } from './style';
 
 export interface OverlayTriggerProps extends IProps, OverlayProps {
   onVisibleChange?: (isVisbale: boolean) => void;
@@ -298,11 +299,12 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
     }
   }
   overlayProps.style = { ...overlayProps.style, ...overlayStyl };
+
   return (
     <React.Fragment>
       {cloneElement(
         child,
-        Object.assign({}, child.props, {
+        Object.assign({ disabled }, child.props, {
           ...triggerProps,
           ref: triggerRef,
           className: [child.props.className, disabled ? `${prefixCls}-disabled` : null]
@@ -311,8 +313,9 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
             .trim(),
         }),
       )}
-      <Overlay
+      <OverlayTriggerWrap
         {...overlayProps}
+        // as={Overlay}
         style={{ ...overlayProps.style, ...overlayStyl }}
         onEnter={handleEnter}
         className={[prefixCls, className, overlayStyl.placement].filter(Boolean).join(' ').trim()}
@@ -329,7 +332,7 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
             className: [overlay.props && overlay.props.className, placement].filter(Boolean).join(' ').trim(),
           }),
         )}
-      </Overlay>
+      </OverlayTriggerWrap>
     </React.Fragment>
   );
 });
diff --git a/packages/react-overlay-trigger/src/style/index.ts b/packages/react-overlay-trigger/src/style/index.ts
new file mode 100644
index 0000000000..c685fdb990
--- /dev/null
+++ b/packages/react-overlay-trigger/src/style/index.ts
@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+import Overlay, { ContainerWrap, ContentWrap } from '@uiw/react-overlay';
+import { ThemeVariantValueOptions } from '@uiw/utils';
+import { OverlayTriggerProps } from 'src';
+
+interface OverlayTriggerWrapProps extends ThemeVariantValueOptions, OverlayTriggerProps {}
+
+export const OverlayTriggerWrap = styled(Overlay)<OverlayTriggerWrapProps>`
+  ${(props) => css`
+    position: absolute;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    overflow: inherit;
+    width: initial;
+    height: initial;
+    ${ContainerWrap} {
+      position: relative;
+      overflow: inherit;
+      &::before {
+        display: none;
+      }
+    }
+    ${ContentWrap} {
+      margin: 0;
+
+      ${props.placement === 'rightTop' &&
+      css`
+        transform-origin: left top;
+      `}
+
+      ${props.placement === 'right' &&
+      css`
+        transform-origin: left center;
+      `}
+
+    ${props.placement === 'rightBottom' &&
+      css`
+        transform-origin: left bottom;
+      `}
+
+    ${props.placement === 'topLeft' &&
+      css`
+        transform-origin: bottom left;
+      `}
+
+    ${props.placement === 'top' &&
+      css`
+        transform-origin: bottom center;
+      `}
+
+    ${props.placement === 'topRight' &&
+      css`
+        transform-origin: bottom right;
+      `}
+
+    ${props.placement === 'left' &&
+      css`
+        transform-origin: right center;
+      `}
+
+    ${props.placement === 'leftBottom' &&
+      css`
+        transform-origin: right bottom;
+      `}
+
+    ${props.placement === 'bottomLeft' &&
+      css`
+        transform-origin: top left;
+      `}
+
+    ${props.placement === 'bottom' &&
+      css`
+        transform-origin: top center;
+      `}
+
+    ${props.placement === 'bottomRight' &&
+      css`
+        transform-origin: top right;
+      `}
+    }
+  `}
+`;
+
+export const TriggerWrap = styled.div<{ disabled?: boolean }>`
+  ${(props) => css`
+    ${props.disabled &&
+    css`
+      cursor: not-allowed;
+    `}
+  `}
+`;
diff --git a/packages/react-overlay/src/index.tsx b/packages/react-overlay/src/index.tsx
index efdf85f006..d44b7cebab 100644
--- a/packages/react-overlay/src/index.tsx
+++ b/packages/react-overlay/src/index.tsx
@@ -216,3 +216,5 @@ export default function Overlay(props: OverlayProps) {
     return TransitionGroupComp;
   }
 }
+
+export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };