refactor(OverlayTrigger): 重构OverlayTrigger 基础触发弹出 (#886，#845)

uiwjs · Jul 23, 2022 · 5ab7092 · 5ab7092
1 parent 3bcc804
commit 5ab7092
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -216,3 +216,5 @@ export default function Overlay(props: OverlayProps) {
     return TransitionGroupComp;
   }
 }
+
+export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };
-Original file line number
+Diff line change
@@ Expand Up / @@ -216,3 +216,5 @@ export default function Overlay(props: OverlayProps) { @@
         return TransitionGroupComp;
       }
     }
+    export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };