@zohodesk/components 1.0.0-temp-209 → 1.0.0-temp-210

package/lib/v1/Popup/Popup.js

@@ -9,10 +9,10 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
+var _propTypes = require("../../Popup/props/propTypes.js");
+
 var _Common = require("../../utils/Common.js");
 
 var _viewPort = _interopRequireDefault(require("../../Popup/viewPort"));
@@ -151,6 +151,11 @@ var Popup = function Popup(Component) {
       _this.handleDocumentMouseDown = _this.handleDocumentMouseDown.bind(_assertThisInitialized(_this));
       _this.handleDocumentFocus = _this.handleDocumentFocus.bind(_assertThisInitialized(_this));
       _this.handleGetNeedPrevent = _this.handleGetNeedPrevent.bind(_assertThisInitialized(_this));
+      _this.handleBlockScroll = _this.handleBlockScroll.bind(_assertThisInitialized(_this));
+      _this.handlePositionChange = _this.handlePositionChange.bind(_assertThisInitialized(_this));
+      _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
+      _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
@@ -164,6 +169,7 @@ var Popup = function Popup(Component) {
           scrollDebounceTime = _this$getScrollDeboun.scrollDebounceTime;
 
       _this.handleScroll = (0, _Common.debounce)(_this.handleScroll.bind(_assertThisInitialized(_this)), scrollDebounceTime);
+      _this.handleDebouncedPositionChange = (0, _Common.debounce)(_this.handlePositionChange.bind(_assertThisInitialized(_this)), 100);
       return _this;
     }
 
@@ -207,7 +213,10 @@ var Popup = function Popup(Component) {
             oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
-        var propResizeHandling = this.props.needResizeHandling;
+        var _this$props = this.props,
+            propResizeHandling = _this$props.needResizeHandling,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            isBlockedOutsideScroll = _this$props.isBlockedOutsideScroll;
 
         if (oldStateOpen !== isPopupReady) {
           if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -216,6 +225,14 @@ var Popup = function Popup(Component) {
             this.size = null;
             this.popupObserver.disconnect();
           }
+
+          if (isBlockedOutsideScroll && !isAbsolutePositioningNeeded) {
+            if (isPopupReady) {
+              this.addScrollBlockListeners();
+            } else {
+              this.removeScrollBlockListeners();
+            }
+          }
         }
       }
     }, {
@@ -236,6 +253,7 @@ var Popup = function Popup(Component) {
 
           return res;
         }, popups);
+        this.removeScrollBlockListeners();
         var noPopups = true;
 
         for (var i in popups) {
@@ -259,6 +277,81 @@ var Popup = function Popup(Component) {
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
       }
+    }, {
+      key: "addScrollBlockListeners",
+      value: function addScrollBlockListeners() {
+        document.addEventListener('wheel', this.handleBlockScroll, {
+          capture: true,
+          passive: false
+        });
+        document.addEventListener('touchmove', this.handleBlockScroll, {
+          capture: true,
+          passive: false
+        });
+        document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+          capture: true,
+          passive: false
+        });
+        document.addEventListener('keydown', this.preventKeyboardScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }, {
+      key: "removeScrollBlockListeners",
+      value: function removeScrollBlockListeners() {
+        document.removeEventListener('wheel', this.handleBlockScroll, {
+          capture: true,
+          passive: false
+        });
+        document.removeEventListener('touchmove', this.handleBlockScroll, {
+          capture: true,
+          passive: false
+        });
+        document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+          capture: true,
+          passive: false
+        });
+        document.removeEventListener('keydown', this.preventKeyboardScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }, {
+      key: "handleBlockScroll",
+      value: function handleBlockScroll(event) {
+        // const targetElement = this.placeHolderElement;
+        var containerElement = this.dropElement;
+
+        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
+          // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
+          // if(
+          //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
+          //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
+          // ) {
+          event.preventDefault();
+        }
+      }
+    }, {
+      key: "handlePositionChange",
+      value: function handlePositionChange(event) {
+        var targetElement = this.placeHolderElement;
+        var containerElement = this.dropElement;
+
+        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
+          this.handlePopupPosition(this.state.position);
+        }
+      }
+    }, {
+      key: "preventKeyboardScroll",
+      value: function preventKeyboardScroll(event) {
+        var containerElement = this.dropElement;
+        var keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
+
+        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
+          event.preventDefault();
+        }
+      }
     }, {
       key: "getGroup",
       value: function getGroup() {
@@ -587,15 +680,19 @@ var Popup = function Popup(Component) {
                       _ref6$left = _ref6.left,
                       oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
                       _ref6$top = _ref6.top,
-                      oldTop = _ref6$top === void 0 ? '' : _ref6$top;
+                      oldTop = _ref6$top === void 0 ? '' : _ref6$top,
+                      _ref6$bottom = _ref6.bottom,
+                      oldBottom = _ref6$bottom === void 0 ? '' : _ref6$bottom;
 
                   var _ref7 = viewsOffset[view] || {},
                       _ref7$left = _ref7.left,
                       left = _ref7$left === void 0 ? '' : _ref7$left,
                       _ref7$top = _ref7.top,
-                      top = _ref7$top === void 0 ? '' : _ref7$top;
+                      top = _ref7$top === void 0 ? '' : _ref7$top,
+                      _ref7$bottom = _ref7.bottom,
+                      bottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
 
-                  var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
+                  var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
                   //   scrollContainer
                   // );
@@ -705,9 +802,8 @@ var Popup = function Popup(Component) {
   }(_react["default"].Component);
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = {
-    direction: _propTypes["default"].string
-  };
+  Popup.contextTypes = _propTypes.ContextTypes;
+  Popup.propTypes = _propTypes.PopupPropTypes;
   return (0, _hoistNonReactStatics["default"])(Popup, Component);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-209",
+  "version": "1.0.0-temp-210",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run download",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",