feat(Overlay): v2 fix #3070,#3054,#2797,#2689,#2606,#2598,#2533,#2500,#…

…742
alibaba-fusion · Oct 21, 2021 · 06a6969 · 06a6969
1 parent 79397c4
commit 06a6969
Show file tree

Hide file tree

Showing 16 changed files with 1,134 additions and 52 deletions.
diff --git a/docs/overlay/demo/align.md b/docs/overlay/demo/align.md
@@ -22,15 +22,15 @@ const { Popup } = Overlay;
 ReactDOM.render(
 
     <div id="containerId" className="overlay-container">
-        <Overlay target="containerId" visible align="br tl"><Button>br tl</Button></Overlay>
-        <Overlay target="containerId" visible align="tc tc"><Button>tc tc</Button></Overlay>
-        <Overlay target="containerId" visible align="bl tr"><Button>bl tr</Button></Overlay>
-        <Overlay target="containerId" visible align="cr cr"><Button>cr cr</Button></Overlay>
-        <Overlay target="containerId" visible align="br br"><Button>br br</Button></Overlay>
-        <Overlay target="containerId" visible align="tc bc"><Button>tc bc</Button></Overlay>
-        <Overlay target="containerId" visible align="bl bl"><Button>bl bl</Button></Overlay>
-        <Overlay target="containerId" visible align="cl cl"><Button>cl cl</Button></Overlay>
-        <Overlay target="containerId" visible align="cc cc"><Button>cc cc</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="br tl"><Button>br tl</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="tc tc"><Button>tc tc</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="bl tr"><Button>bl tr</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="cr cr"><Button>cr cr</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="br br"><Button>br br</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="tc bc"><Button>tc bc</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="bl bl"><Button>bl bl</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="cl cl"><Button>cl cl</Button></Overlay>
+        <Overlay v2 target="containerId" visible align="cc cc"><Button>cc cc</Button></Overlay>
     </div>
   , mountNode);
 ````

diff --git a/docs/overlay/demo/backdrop.md b/docs/overlay/demo/backdrop.md
@@ -2,7 +2,8 @@
 # 遮罩层
 
 - order: 1
-
+- debug: true
+
 带有遮罩的弹层。
 
 :::lang=en-us
@@ -47,7 +48,9 @@ class Demo extends React.Component {
                 }}>
                     Open
                 </Button>
-                <Overlay visible={this.state.visible}
+                <Overlay 
+                    v2
+                    visible={this.state.visible}
                     safeNode={() => this.btn}
                     align="cc cc"
                     hasMask

diff --git a/docs/overlay/demo/baisc.md b/docs/overlay/demo/baisc.md
@@ -47,7 +47,9 @@ class Demo extends React.Component {
                 }}>
                     Toggle visible
                 </Button>
-                <Overlay visible={this.state.visible}
+                <Overlay 
+                    v2
+                    visible={this.state.visible}
                     target={() => this.btn}
                     safeNode={() => this.btn}
                     onRequestClose={this.onClose}>

diff --git a/docs/overlay/demo/controlled.md b/docs/overlay/demo/controlled.md
@@ -44,7 +44,9 @@ class Demo extends React.Component {
         return (
             <div>
                 <div>
-                    <Popup trigger={<Button>Open</Button>}
+                    <Popup 
+                        v2
+                        trigger={<Button>Open</Button>}
                         triggerType="click"
                         visible={this.state.visible}
                         onVisibleChange={this.onVisibleChange}>
@@ -55,7 +57,9 @@ class Demo extends React.Component {
                 </div>
                 <br />
                 <div>
-                    <Popup trigger={<Button style={{"marginRight": "50px"}} ref={ref => {this.btn1 = ref;}}>Paired Popup 1</Button>}
+                    <Popup 
+                        v2
+                        trigger={<Button style={{"marginRight": "50px"}} ref={ref => {this.btn1 = ref;}}>Paired Popup 1</Button>}
                         triggerType="click"
                         visible={this.state.groupVisible}
                         safeNode={[() => this.btn2, () => this.overlay2]}
@@ -64,7 +68,9 @@ class Demo extends React.Component {
                             Hello World From Popup!
                         </span>
                     </Popup>
-                    <Popup trigger={<Button ref={ref => {this.btn2 = ref;}}>Paired Popup 2</Button>}
+                    <Popup 
+                        v2
+                        trigger={<Button ref={ref => {this.btn2 = ref;}}>Paired Popup 2</Button>}
                         triggerType="click"
                         visible={this.state.groupVisible}
                         safeNode={[() => this.btn1, () => this.overlay1]}

diff --git a/docs/overlay/demo/nested.md b/docs/overlay/demo/nested.md
@@ -20,10 +20,10 @@ import { Overlay, Button } from '@alifd/next';
 const { Popup } = Overlay;
 
 ReactDOM.render(
-    <Popup trigger={<Button>Open first overlay</Button>}
+    <Popup v2 trigger={<button>Open first overlay</button>}
         triggerType="click">
         <div className="overlay-demo">
-            <Popup trigger={<Button>Open second overlay</Button>}
+            <Popup v2 trigger={<button>Open second overlay</button>}
                 triggerType="click"
                 container={trigger => trigger.parentNode}>
                 <div className="overlay-demo">

diff --git a/docs/overlay/demo/popup.md b/docs/overlay/demo/popup.md
@@ -22,14 +22,14 @@ const { Popup } = Overlay;
 
 ReactDOM.render(
     <div>
-        <Popup trigger={<Button>Open</Button>} triggerType="click">
+        <Popup v2 trigger={<Button>Open</Button>} triggerType="click">
             <span className="overlay-demo">
                 Hello World From Popup!
             </span>
         </Popup>
         <br />
         <br />
-        <Popup trigger={<Input placeholder="Use Down Arrow to open" />} triggerType="click" triggerClickKeycode={40}>
+        <Popup v2 trigger={<Input placeholder="Use Down Arrow to open" />} triggerType="click" triggerClickKeycode={[32,40]}>
             <span className="overlay-demo">
                 Hello World From Popup!
             </span>

diff --git a/docs/overlay/demo/scroll-position.md b/docs/overlay/demo/scroll-position.md
@@ -0,0 +1,70 @@
+# 弹层自动跟随滚动
+
+- order: 7
+
+如果弹层显示隐藏的触发元素所在容器有滚动条，弹窗会自动更新自己的位置跟随滚动。但是实时更新会消耗较大的计算，可以通过更好挂载容器到父节点获得更好性能
+
+:::lang=en-us
+# Overlay follows the container scroll
+
+- order: 7
+
+The overlay defaults to absolute positioning with reference to document.body. If the overlay trigger element's container (usually the parent node) has a scrollbar, then when the container is scrolled, the trigger element can be scroll autoly
+:::
+
+
+---
+
+````jsx
+import { useState } from 'react';
+import { Overlay, Button } from '@alifd/next';
+
+const { Popup } = Overlay;
+
+const style = {
+    width: 400,
+    height: 100,
+    padding: 10,
+    background: '#fff',
+    borderRadius: 2,
+    boxShadow: '2px 2px 20px rgba(0, 0, 0, 0.15)'
+};
+
+const App  = () => {
+    const [position, setPosition] = useState({});
+    const [position2, setPosition2] = useState({});
+
+    return <div style={{
+        position: 'relative',
+        height: 150,
+        padding: 50,
+        border: '1px solid #eee',
+        overflow: 'auto',
+    }}>
+        <Popup 
+            v2 cache
+            overlay={<div style={style}>transform: {JSON.stringify(position)}</div>}
+            onPosition={(result) => {
+                const {style} = result;
+                console.log(result);
+                setPosition(style);
+            }}
+            >
+            <button style={{marginTop: 10}}>Open1</button>
+        </Popup>
+        <br/>
+        <Popup 
+            v2
+            overlay={<div style={style}>transform: {JSON.stringify(position2)}</div>}
+            onPosition={({style}) => {
+                setPosition2(style);
+            }}
+            >
+            <button style={{marginTop: 200}}>Open2</button>
+        </Popup>
+        <div style={{ height: 300, width: 1200 }} />
+    </div>
+}
+
+ReactDOM.render( <App/>, mountNode);
+````
diff --git a/docs/overlay/demo/scroll.md b/docs/overlay/demo/scroll.md
@@ -1,8 +1,10 @@
-# 弹层跟随滚动
+# 更换弹窗挂载容器
 
 - order: 7
 
-弹层默认参照 `document.body` 绝对定位，如果弹层显示隐藏的触发元素所在容器（一般为父节点）有滚动条，那么当容器滚动时，会发生触发元素与弹层相分离的情况，解决的办法是将弹层渲染到触发元素所在的容器中。（触发元素所在的容器，必须设置 `position` 样式，以完成弹层的绝对定位。）
+遇到有父元素有 overflow 滚动的情况，可以通过更换弹窗的挂载容器到父节点，获得更好性能。
+
+
 
 :::lang=en-us
 # Overlay follows the container scroll
@@ -36,7 +38,7 @@ ReactDOM.render(
 
 ````css
 .overlay-demo {
-    width: 300px;
+    width: 400px;
     height: 100px;
     padding: 10px;
     border: 1px solid #eee;

diff --git a/docs/overlay/demo/trigger-type.md b/docs/overlay/demo/trigger-type.md
@@ -15,23 +15,24 @@ Use `triggerType` prop.
 ---
 
 ````jsx
-import { Overlay, Button, Input } from '@alifd/next';
+import { Overlay } from '@alifd/next';
 
 const { Popup } = Overlay;
 
+const style ={ marginLeft: 10}
 ReactDOM.render(
     <div>
-        <Popup trigger={<Button>click</Button>} triggerType="click">
+        <Popup v2 trigger={<button style={style}>click</button>} triggerType="click">
             <span className="overlay-demo">
                 Click to open Popup!
             </span>
         </Popup>
-        <Popup trigger={<Button>hover</Button>} triggerType="hover">
+        <Popup v2 trigger={<button style={style}>hover</button>} triggerType="hover">
             <span className="overlay-demo">
                 Hover to open Popup!
             </span>
         </Popup>
-        <Popup trigger={<Button>focus</Button>} triggerType="focus">
+        <Popup v2 trigger={<button style={style}>focus</button>} triggerType="focus" autoFocus={false}>
             <span className="overlay-demo">
                 Focus to open Popup!
             </span>
@@ -49,7 +50,4 @@ ReactDOM.render(
     background: #FFFFFF;
     box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
 }
-.next-btn:not(last-child) {
-    margin-right: 20px;
-}
 ````
diff --git a/package.json b/package.json
@@ -97,6 +97,7 @@
   },
   "dependencies": {
     "@alifd/field": "~1.5.5",
+    "@alifd/overlay": "^0.1.8",
     "@alifd/validate": "~1.2.0",
     "babel-runtime": "^6.26.0",
     "bignumber.js": "^9.0.1",
@@ -118,6 +119,7 @@
     "@alifd/doc-parser": "^1.0.0",
     "@alifd/dts-generator": "^1.0.3",
     "@alifd/eslint-config-next": "^2.0.0",
+    "@alifd/overlay": "^0.1.7",
     "@alifd/sass-mapper": "^2.0.2",
     "@alifd/sass-tracker": "^0.1.0",
     "@alifd/sassdoc-parser": "^2.0.0",
@@ -217,8 +219,8 @@
     "react-dev-utils": "^4.2.1",
     "react-dnd": "^7.0.0",
     "react-dnd-html5-backend": "^7.0.0",
-    "react-draggable": "^4.4.4",
     "react-dom": "^16.0.0",
+    "react-draggable": "^4.4.4",
     "react-live": "^2.2.3",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",

diff --git a/src/animate/overlay-animate.jsx b/src/animate/overlay-animate.jsx
@@ -1,15 +1,18 @@
 import React, { useState } from 'react';
 import { Transition } from 'react-transition-group';
+import classNames from '_classnames@2.3.1@classnames';
 
-const OverlayAnimate = props => {
+const OverlayAnimate = React.forwardRef((props, ref) => {
     const { animation, visible, children, timeout = 300, ...others } = props;
 
     const animationMap = typeof animation === 'string' ? { in: animation, out: animation } : animation;
 
-    const animateClsMap = {
-        entering: animationMap.in,
-        exiting: animationMap.out,
-    };
+    const animateClsMap = animation
+        ? {
+              entering: animationMap.in,
+              exiting: animationMap.out,
+          }
+        : {};
 
     if (animation === false) {
         animateClsMap.entering = '';
@@ -19,17 +22,20 @@ const OverlayAnimate = props => {
     return (
         <Transition {...others} in={visible} timeout={animation ? timeout : 0} appear>
             {state => {
-                if (state in animateClsMap && animateClsMap[state]) {
-                    let cls = animateClsMap[state];
-                    if (children.props && children.props.className) {
-                        cls = children.props.className + ' ' + animateClsMap[state];
-                    }
-                    return React.cloneElement(children, { className: cls });
-                }
-                return children;
+                const cls = classNames({
+                    [children.props.className]: !!children.props.className,
+                    [animateClsMap[state]]: state in animateClsMap && animateClsMap[state],
+                });
+
+                const childProps = {
+                    className: cls,
+                    ref,
+                };
+
+                return React.cloneElement(children, childProps);
             }}
         </Transition>
     );
-};
+});
 
 export default OverlayAnimate;