importantForLayout property to track the size changes faster.

Author: mshoho

src/common/Interfaces.ts

@@ -140,9 +140,6 @@ export abstract class UserInterface {
 
     // On-screen Keyboard
     abstract dismissKeyboard(): void;
-
-    // Explicit layout change indication
-    abstract layoutChangePending(): void;
 }
 
 export abstract class Modal {

src/common/Types.ts

@@ -277,7 +277,7 @@ export type LinkStyleRuleSet = StyleRuleSet<LinkStyle>;
 
 export interface ImageStyle extends ViewAndImageCommonStyle, FlexboxStyle {
     resizeMode?: 'contain' | 'cover' | 'stretch';
-    
+
     // This is an Android only style attribute that is used to fill the gap in the case of rounded corners
     // in gif images.
     overlayColor?: string;
@@ -452,7 +452,7 @@ export interface ImagePropsShared extends CommonProps {
     children?: ReactNode;
     resizeMode?: 'stretch' | 'contain' | 'cover' | 'auto' | 'repeat';
 
-    resizeMethod?: 'auto' | 'resize' | 'scale'; // Android only 
+    resizeMethod?: 'auto' | 'resize' | 'scale'; // Android only
     title?: string;
 
     onLoad?: (size: Dimensions) => void;
@@ -489,17 +489,17 @@ export interface TextPropsShared extends CommonProps {
 
     // iOS and Android only
     ellipsizeMode?:  'head' | 'middle'| 'tail';
-    
+
     // Exposing this property as temporary workaround to fix a bug.
     // TODO : http://skype.vso.io/865016 : remove this exposed property
     // Used only for Android.
     textBreakStrategy?: 'highQuality' | 'simple' | 'balanced';
 
     importantForAccessibility?: ImportantForAccessibility;
-    
+
     // Android only
     elevation?: number;
-    
+
     onPress?: (e: SyntheticEvent) => void;
 }
 
@@ -522,6 +522,7 @@ export interface ViewPropsShared extends CommonProps, CommonAccessibilityProps {
     viewLayerTypeAndroid?: ViewLayerType; // Android only property
     children?: ReactNode;
     focusable?: boolean;
+    importantForLayout?: boolean; // Web-only, additional invisible DOM elements will be added to track the size changes faster
 
     // There are a couple of constraints when child animations are enabled:
     //   - Every child must have a `key`.
@@ -547,7 +548,7 @@ export interface ViewPropsShared extends CommonProps, CommonAccessibilityProps {
     onBlur?: (e: FocusEvent) => void;
 
     // iOS and Android only. Visual touchfeedback properties
-    disableTouchOpacityAnimation?: boolean;    
+    disableTouchOpacityAnimation?: boolean;
     activeOpacity?: number;
     underlayColor?: string;
 }
@@ -762,7 +763,7 @@ export interface TextInputPropsShared extends CommonProps, CommonAccessibilityPr
     secureTextEntry?: boolean;
     value?: string;
     textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
-     
+
      // Should fonts be scaled according to system setting? Defaults
     // to true. iOS and Android only.
     allowFontScaling?: boolean;
@@ -869,9 +870,9 @@ export interface PopupOptions {
         popupWidth: number, popupHeight: number) => ReactNode;
 
     // Returns a mounted component instance that controls the triggering of the popup.
-    // In majority of cases, "anchor" of popup has handlers to control when the popup will be seen and this function is not required. 
+    // In majority of cases, "anchor" of popup has handlers to control when the popup will be seen and this function is not required.
     // In a few cases, where anchor is not the same as the whole component that triggers when the popup wil be seen, this can be used.
-    // For instance, a button combined with a chevron icon, which on click triggers a popup below the chevron icon. 
+    // For instance, a button combined with a chevron icon, which on click triggers a popup below the chevron icon.
     // In this example, getElementTriggeringPopup() can return the container with button and chevron icon.
     getElementTriggeringPopup?: () => React.Component<any, any>;
 
@@ -893,8 +894,8 @@ export interface PopupOptions {
     // already unmounted as it uses a time delay to accommodate a fade-out animation.
     onAnchorPressed?: (e: RX.Types.SyntheticEvent) => void;
 
-    // Determines if the anchor invoking the popup should behave like a toggle. 
-    // Value = true  => Calling Popup.show will show the popup. A subsequent call, will hide the popup, and so on. 
+    // Determines if the anchor invoking the popup should behave like a toggle.
+    // Value = true  => Calling Popup.show will show the popup. A subsequent call, will hide the popup, and so on.
     // Value = false or undefined (default)  => Calling Popup.show will always show the popup.
      dismissIfShown?: boolean;
 }

src/native-common/UserInterface.ts

@@ -121,10 +121,6 @@ export class UserInterface extends RX.UserInterface {
     renderMainView() {
         // Nothing to do
     }
-
-    layoutChangePending() {
-        // Nothing to do
-    }
 }
 
 export default new UserInterface();

src/web/UserInterface.ts

@@ -107,19 +107,6 @@ export class UserInterface extends RX.UserInterface {
     dismissKeyboard() {
         // Nothing to do
     }
-
-    layoutChangePending() {
-        if (!this._layoutChangeAnimationFrame) {
-            // ViewBase checks for the layout changes once a second or on window resize.
-            // To avoid laggy layout updates we can indicate that there is a change pending.
-            this._layoutChangeAnimationFrame = window.requestAnimationFrame(() => {
-                this._layoutChangeAnimationFrame = undefined;
-                let event = document.createEvent('HTMLEvents');
-                event.initEvent('resize', true, false);
-                window.dispatchEvent(event);
-            });
-        }
-    }
 }
 
 export default new UserInterface();

src/web/View.tsx

@@ -8,6 +8,7 @@
 */
 
 import React = require('react');
+import ReactDOM = require('react-dom');
 
 import AccessibilityUtil from './AccessibilityUtil';
 import AnimateListEdits from './listAnimations/AnimateListEdits';
@@ -24,6 +25,31 @@ const _styles = {
         flex: '0 0 auto',
         overflow: 'hidden',
         alignItems: 'stretch'
+    },
+
+    resizeDetectorContainerStyles: {
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        right: '0',
+        bottom: '0',
+        overflow: 'scroll',
+        zIndex: '-1',
+        visibility: 'hidden'
+    },
+
+    resizeGrowDetectorStyles: {
+        position: 'absolute',
+        left: '100500px',
+        top: '100500px',
+        width: '1px',
+        height: '1px'
+    },
+
+    resizeShrinkDetectorStyles: {
+        position: 'absolute',
+        width: '150%',
+        height: '150%'
     }
 };
 
@@ -50,6 +76,89 @@ export class View extends ViewBase<Types.ViewProps, {}> {
         isRxParentAText: React.PropTypes.bool.isRequired
     };
 
+    private resizeDetectorAnimationFrame: number;
+    private resizeDetectorNodes: {grow?: HTMLElement, shrink?: HTMLElement} = {};
+
+    private resizeDetectorReset() {
+        const scrollMax = 100500;
+
+        let node = this.resizeDetectorNodes.grow;
+
+        if (node) {
+            node.scrollLeft = scrollMax;
+            node.scrollTop = scrollMax;
+        }
+
+        node = this.resizeDetectorNodes.shrink;
+
+        if (node) {
+            node.scrollLeft = scrollMax;
+            node.scrollTop = scrollMax;
+        }
+    }
+
+    private resizeDetectorOnScroll() {
+        if (this.resizeDetectorAnimationFrame) {
+            return;
+        }
+
+        this.resizeDetectorAnimationFrame = window.requestAnimationFrame(() => {
+            this.resizeDetectorReset();
+            this.resizeDetectorAnimationFrame = undefined;
+            ViewBase._checkViews();
+        });
+
+    }
+
+    private renderResizeDetectorIfNeeded(containerStyles: any): React.ReactNode {
+        if (!this.props.importantForLayout) {
+            return null;
+        }
+
+        if (containerStyles.position !== 'relative') {
+            console.error('View: importantForLayout property is applicable only for a view with relative position');
+            return null;
+        }
+
+        let initResizer = (key: 'grow' | 'shrink', ref: React.DOMComponent<React.HTMLAttributes>) => {
+            const cur: HTMLElement = this.resizeDetectorNodes[key];
+            const element = ReactDOM.findDOMNode<HTMLElement>(ref);
+
+            if (cur) {
+                delete this.resizeDetectorNodes[key];
+            }
+
+            if (element) {
+                this.resizeDetectorNodes[key] = element;
+            }
+
+            this.resizeDetectorOnScroll();
+        };
+
+        return [
+            (
+                <div
+                    key='grow'
+                    style={ _styles.resizeDetectorContainerStyles }
+                    ref={ (ref) => initResizer('grow', ref) }
+                    onScroll={ () => this.resizeDetectorOnScroll() }>
+
+                    <div style={_styles.resizeGrowDetectorStyles}></div>
+                </div>
+            ),
+            (
+                <div
+                    key='shrink'
+                    style={ _styles.resizeDetectorContainerStyles }
+                    ref={ (ref) => initResizer('shrink', ref) }
+                    onScroll={ () => this.resizeDetectorOnScroll() }>
+
+                    <div style={_styles.resizeShrinkDetectorStyles}></div>
+                </div>
+            )
+        ];
+    }
+
     getChildContext() {
         // Let descendant Types components know that their nearest Types ancestor is not an Types.Text.
         // Because they're in an Types.View, they should use their normal styling rather than their
@@ -66,7 +175,7 @@ export class View extends ViewBase<Types.ViewProps, {}> {
         const ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
         const ariaSelected = AccessibilityUtil.accessibilityTraitToAriaSelected(this.props.accessibilityTraits);
         const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);
-        
+
         let props: Types.AccessibilityHtmlAttributes = {
             role: ariaRole,
             tabIndex: this.props.tabIndex,
@@ -111,6 +220,7 @@ export class View extends ViewBase<Types.ViewProps, {}> {
         } else {
             reactElement = (
                 <div {...props} >
+                    {this.renderResizeDetectorIfNeeded(combinedStyles)}
                     {this.props.children}
                 </div>
             );

src/web/ViewBase.tsx

@@ -78,7 +78,7 @@ export abstract class ViewBase<P extends Types.ViewProps, S> extends RX.ViewBase
         }
     }
 
-    private static _checkViews() {
+    protected static _checkViews() {
         _.each(ViewBase._viewCheckingList, view => {
             view._checkAndReportLayout();
         });