Adding partial support for internal scrolling

demo/components/popup-demo.tsx

@@ -38,12 +38,12 @@ export class PopupDemo extends React.Component<{}, DemoState> {
             {value: 'top', labelText: 'top'},
             {value: 'center', labelText: 'center'},
             {value: 'bottom', labelText: 'bottom'}
-            ];
+        ];
         const hPos: RadioGroupDataSchemaProps[] = [
             {value: 'left', labelText: 'left'},
             {value: 'center', labelText: 'center'},
             {value: 'right', labelText: 'right'}
-            ];
+        ];
         return (
             <div>
                 <button
@@ -60,6 +60,7 @@ export class PopupDemo extends React.Component<{}, DemoState> {
                     anchorPosition={anchorPos}
                     open={this.state.isOpen}
                     ref={popup => this.popup = popup}
+                    onExitBounds={this.onExitBounds}
                 >
                     <div style={{color: 'white', backgroundColor: 'black'}}>Hello!</div>
                 </Popup>
@@ -113,4 +114,7 @@ export class PopupDemo extends React.Component<{}, DemoState> {
         this.setState({aHorizontal: e.value});
     }
 
+    private onExitBounds = () => {
+        this.setState({isOpen: false});
+    }
 }

src/components/popup/popup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {properties} from 'wix-react-tools';
 import {Point} from '../../types';
 import {StylableProps} from '../../types/props';
+import {noop} from '../../utils';
 import {Portal} from '../portal';
 
 export type PopupVerticalPosition =  'top' | 'center' | 'bottom';
@@ -17,6 +18,7 @@ export interface PopupProps extends StylableProps {
     anchorPosition?: PopupPositionPoint;
     popupPosition?: PopupPositionPoint;
     syncWidth?: boolean;
+    onExitBounds?: () => void;
     children?: React.ReactNode;
 }
 
@@ -30,17 +32,21 @@ export class Popup extends React.Component<PopupCompProps> {
         open: false,
         anchorPosition: {vertical: 'bottom', horizontal: 'left'},
         popupPosition: {vertical: 'top', horizontal: 'left'},
-        syncWidth: true
+        syncWidth: true,
+        onExitBounds: noop
     };
 
     private portal: Portal | null;
+    private isExitingBounds = false;
+    private portalRect: ClientRect | null = null;
 
     public render() {
         if (this.props.anchor && this.props.open) {
             return (
                 <Portal
                     style={this.createStyle()}
                     ref={portal => this.portal = portal}
+                    onLayout={this.onPortalLayout}
                 >
                     {this.props.children}
                 </Portal>);
@@ -49,10 +55,32 @@ export class Popup extends React.Component<PopupCompProps> {
         return null;
     }
 
+    public componentDidMount() {
+        window.addEventListener('scroll', this.onScroll, true);
+    }
+
+    public componentWillUnmount() {
+        window.removeEventListener('scroll', this.onScroll);
+    }
+
+    public componentDidUpdate() {
+        if (this.isExitingBounds) {
+            this.props.onExitBounds!();
+        }
+        this.isExitingBounds = false;
+    }
+
     public getPortal(): Portal | null {
         return this.portal;
     }
 
+    private onScroll = (e: Event) => {
+        if (this.props.anchor && this.props.open
+                && !isPoint(this.props.anchor) && (e.target as Node).contains(this.props.anchor)) {
+            this.forceUpdate();
+        }
+    }
+
     private createStyle(): React.CSSProperties {
         if (!this.props.anchor) {
             return {};
@@ -91,8 +119,16 @@ export class Popup extends React.Component<PopupCompProps> {
                 break;
         }
 
+        if (this.portalRect) {
+            this.isExitingBounds = isFullyContainedWithinWindow(newStyle.top,
+                newStyle.left, this.portalRect.height, this.portalRect.width);
+        }
         return newStyle;
     }
+
+    private onPortalLayout = (rect: ClientRect | null) => {
+        this.portalRect = rect;
+    }
 }
 
 function getVerticalReference(rect: ClientRect, anchorPosition: PopupVerticalPosition): number {
@@ -119,3 +155,10 @@ function addTransform(style: React.CSSProperties, transformation: string) {
 function isPoint(elem: Element | Point): elem is Point {
     return elem.hasOwnProperty('x') && elem.hasOwnProperty('y');
 }
+
+function isFullyContainedWithinWindow(top: number, left: number, height: number, width: number): boolean {
+    return top < window.pageYOffset ||
+        left < window.pageXOffset ||
+        top + height - window.pageYOffset > window.innerHeight ||
+        left + width - window.pageXOffset > window.innerWidth;
+}

src/components/portal/portal.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {globalId} from 'wix-react-tools';
+import {noop} from '../../utils';
 
 export interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    onLayout?(layout: ClientRect | null): void;
 }
 
 export class Portal extends React.PureComponent<PortalProps> {
+    public static defaultProps: Partial<PortalProps> = {
+        onLayout: noop
+    };
     private container: HTMLDivElement | null;
     private portalContent: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;
 
     public render() {
-        const {children, ...rest} = this.props;
+        const {children, onLayout, ...rest} = this.props;
         const uniqueId = globalId.getRootId(this);
         this.portalContent = (
             <div {...rest} data-automation-id={uniqueId}>{children}</div>
@@ -36,10 +41,17 @@ export class Portal extends React.PureComponent<PortalProps> {
     }
 
     private renderPortal() {
-        ReactDOM.unstable_renderSubtreeIntoContainer(this, this.portalContent, this.getContainer());
+        ReactDOM.unstable_renderSubtreeIntoContainer(this, this.portalContent, this.getContainer(), this.onRender);
     }
 
     private getContainer() {
         return this.container = this.container || document.body.appendChild(document.createElement('div'));
     }
+
+    private onRender = () => {
+        if (this.props.onLayout !== noop) {
+            const portalContent = this.container && this.container.firstElementChild;
+            this.props.onLayout!(portalContent ? portalContent.getBoundingClientRect() : null);
+        }
+    }
 }

test/components/popup.spec.tsx

@@ -1,6 +1,6 @@
 import React = require('react');
 import ReactDOM = require('react-dom');
-import {ClientRenderer, DriverBase, expect, waitFor} from 'test-drive-react';
+import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-react';
 import {PopupDemo} from '../../demo/components/popup-demo';
 import {Popup, PopupPositionPoint} from '../../src/components/';
 import {PopupTestDriver} from '../../test-kit/components/popup-driver';
@@ -126,6 +126,9 @@ describe('<Popup />', () => {
 
         after(() => {
             document.body.removeChild(scroll);
+        });
+
+        afterEach(() => {
             document.body.scrollTop = 0;
             document.body.scrollLeft = 0;
         });
@@ -156,6 +159,177 @@ describe('<Popup />', () => {
                 expect([div, popup.root]).to.be.inVerticalSequence();
             });
         });
+
+        it('listens to internal scrolling and adjusts the popup location accordingly', async () => {
+            let anchorDiv: HTMLDivElement;
+            let scrollDiv: HTMLDivElement;
+            const {waitForDom} = clientRenderer.render(
+                <div>
+                    <div
+                        ref={(elem: HTMLDivElement) => scrollDiv = elem}
+                        style={{height: '100px', overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+                    >
+                        <div style={{height: '300px'}}>Filler</div>
+                        <div ref={(elem: HTMLDivElement) => anchorDiv = elem}>Anchor</div>
+                    </div>
+                </div>
+            );
+
+            await waitForDom(() => expect(anchorDiv).to.be.present());
+
+            const {driver: popup} = clientRenderer.render(
+                <Popup
+                    anchor={anchorDiv!}
+                    open
+                >
+                    <span data-automation-id="SPAN">Popup Body</span>
+                </Popup>).withDriver(PopupTestDriver);
+
+            scrollDiv!.scrollTop = 200;
+
+            return waitForDom(() => {
+                expect([anchorDiv, popup.root]).to.be.inVerticalSequence();
+            });
+        });
+
+        it('calls onExitBounds when the popup leaves the viewport from top', async () => {
+            let anchorDiv: HTMLDivElement;
+            let scrollDiv: HTMLDivElement;
+            const onExitBounds = sinon.spy();
+            const {waitForDom} = clientRenderer.render(
+                <div
+                    ref={(elem: HTMLDivElement) => scrollDiv = elem}
+                    style={{height: '1000px', overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+                >
+                    <div ref={(elem: HTMLDivElement) => anchorDiv = elem} style={{height: '50px'}}>Anchor</div>
+                    <div style={{height: '5000px'}}/>
+                </div>
+            );
+
+            await waitForDom(() => expect(anchorDiv).to.be.present());
+
+            const {driver: popup} = clientRenderer.render(
+                <Popup
+                    anchor={anchorDiv!}
+                    open
+                    onExitBounds={onExitBounds}
+                >
+                    <div style={{height: '50px'}}>Body</div>
+                </Popup>).withDriver(PopupTestDriver);
+
+            await waitForDom(() => {
+                expect(popup.root).to.be.present();
+                expect(popup.root.getBoundingClientRect().top).to.equal(50);
+            });
+            expect(onExitBounds).to.not.have.been.called;
+            scrollDiv!.scrollTop = 51;
+
+            return waitFor(() => {
+                expect(onExitBounds).to.have.been.calledOnce;
+            });
+        });
+
+        it('calls onExitBounds when the popup leaves the viewport from bottom', async () => {
+            let anchorDiv: HTMLDivElement;
+            let scrollDiv: HTMLDivElement;
+            const onExitBounds = sinon.spy();
+            const {waitForDom} = clientRenderer.render(
+                <div
+                    ref={(elem: HTMLDivElement) => scrollDiv = elem}
+                    style={{height: '1000px', overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+                >
+                    <div style={{height: '3000px'}}/>
+                    <div ref={(elem: HTMLDivElement) => anchorDiv = elem} style={{height: '50px'}}>Anchor</div>
+                    <div style={{height: '100px'}}/>
+                </div>
+            );
+            scrollDiv!.scrollTop = 3100;
+            await waitForDom(() => expect(anchorDiv).to.be.present());
+
+            const {driver: popup} = clientRenderer.render(
+                <Popup
+                    anchor={anchorDiv!}
+                    open
+                    onExitBounds={onExitBounds}
+                >
+                    <div style={{height: '50px'}}>Body</div>
+                </Popup>).withDriver(PopupTestDriver);
+
+            await waitForDom(() => expect(popup.root).to.be.present());
+            expect(onExitBounds).to.not.have.been.called;
+            scrollDiv!.scrollTop = 2000;
+            return waitFor(() => {
+                expect(onExitBounds).to.have.been.calledOnce;
+            });
+        });
+
+        it('calls onExitBounds when the popup leaves the viewport from left', async () => {
+            let anchorDiv: HTMLDivElement;
+            let scrollDiv: HTMLDivElement;
+            const onExitBounds = sinon.spy();
+            const {waitForDom} = clientRenderer.render(
+                <div
+                    ref={(elem: HTMLDivElement) => scrollDiv = elem}
+                    style={{width: '100%', overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+                >
+                    <div ref={(elem: HTMLDivElement) => anchorDiv = elem} style={{width: '50px'}}>Anchor</div>
+                    <div style={{width: '5000px', height: '1px'}}/>
+                </div>
+            );
+
+            await waitForDom(() => expect(anchorDiv).to.be.present());
+
+            const {driver: popup} = clientRenderer.render(
+                <Popup
+                    anchor={anchorDiv!}
+                    open
+                    onExitBounds={onExitBounds}
+                >
+                    <div style={{width: '50px'}}>Body</div>
+                </Popup>).withDriver(PopupTestDriver);
+
+            await waitForDom(() => expect(popup.root).to.be.present());
+            expect(onExitBounds).to.not.have.been.called;
+            scrollDiv!.scrollLeft = 1;
+
+            return waitFor(() => {
+                expect(onExitBounds).to.have.been.calledOnce;
+            });
+        });
+
+        it('calls onExitBounds when the popup leaves the viewport from right', async () => {
+            let anchorDiv: HTMLDivElement;
+            let scrollDiv: HTMLDivElement;
+            const onExitBounds = sinon.spy();
+            const {waitForDom} = clientRenderer.render(
+                <div
+                    ref={(elem: HTMLDivElement) => scrollDiv = elem}
+                    style={{width: '100%', overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
+                >
+                    <div ref={(elem: HTMLDivElement) => anchorDiv = elem} style={{width: '200%'}}>Anchor</div>
+                </div>
+            );
+
+            await waitForDom(() => expect(anchorDiv).to.be.present());
+            scrollDiv!.scrollLeft = 50;
+            const {driver: popup} = clientRenderer.render(
+                <Popup
+                    anchor={anchorDiv!}
+                    anchorPosition={{vertical: 'bottom', horizontal: 'center'}}
+                    open
+                    onExitBounds={onExitBounds}
+                >
+                    <div style={{width: '50px'}}>Body</div>
+                </Popup>).withDriver(PopupTestDriver);
+
+            await waitForDom(() => expect(popup.root).to.be.present());
+            expect(onExitBounds).to.not.have.been.called;
+            scrollDiv!.scrollLeft = 0;
+
+            return waitFor(() => {
+                expect(onExitBounds).to.have.been.calledOnce;
+            });
+        });
     });
 
     describe('Layout tests', () => {