@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/Popup/Popup.js

@@ -1,16 +1,18 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
-
 /**** Methods ****/
-import { debounce, isDescendant } from '../utils/Common.js';
+
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
 import viewPort from './viewPort';
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.json';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];
 let popups = {};
+
 global.closeGroupPopups = function (groupName) {
   const groupPopups = popups[groupName] || [];
   groupPopups.forEach(popup => {
@@ -20,6 +22,7 @@ global.closeGroupPopups = function (groupName) {
     });
   });
 };
+
 const defaultState = {
   position: 'bottomCenter',
   height: '0px',
@@ -33,8 +36,8 @@ const defaultState = {
   //{height: ‘’, width: ‘’,}
   isAbsolutePositioningNeeded: true
 };
-
 /* eslint-disable react/no-deprecated */
+
 /* eslint-disable react/prop-types */
 
 const Popup = function (Component) {
@@ -47,6 +50,7 @@ const Popup = function (Component) {
     scrollDebounceTime: popupScrollDebounceTime = 0,
     closeOnScroll: closeOnScrollPopup = false
   } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
   class Popup extends React.Component {
     constructor(props) {
       super(props);
@@ -87,9 +91,8 @@ const Popup = function (Component) {
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
       this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
       this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
-      this.popupObserver = new ResizeObserver(this.handlePopupResize);
+      this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
-      //dropBoxSize
       this.size = null;
       this.isAbsolutePopup = isAbsolutePopup;
       this.needPopupArrow = needPopupArrow;
@@ -101,25 +104,29 @@ const Popup = function (Component) {
       } = this.getScrollDebounceTime(this);
       this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
     }
+
     componentDidMount() {
       const group = this.getGroup();
       const groupPopups = popups[group] || [];
       groupPopups.push(this);
       popups[group] = groupPopups;
+
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
         document.addEventListener('click', this.documentClickHandler, false);
-        document.addEventListener('keyup', this.documentKeyupHandler, false);
-        // document.addEventListener('scroll', this.handleScroll, true);
+        document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
+
         window.addEventListener('resize', this.handleResize);
         document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
     }
+
     componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;
+
       if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {
         this.setState({
           isPopupOpen: nextProps.isPopupOpen,
@@ -127,6 +134,7 @@ const Popup = function (Component) {
         });
       }
     }
+
     componentDidUpdate(prevProps, prevState) {
       const {
         isPopupReady
@@ -140,6 +148,7 @@ const Popup = function (Component) {
       const {
         needResizeHandling: propResizeHandling
       } = this.props;
+
       if (oldStateOpen !== isPopupReady) {
         if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
           this.popupObserver.replaceObservationElement(dropElement);
@@ -149,6 +158,7 @@ const Popup = function (Component) {
         }
       }
     }
+
     componentWillUnmount() {
       const group = this.getGroup();
       popups = Object.keys(popups).reduce((res, groupName) => {
@@ -158,34 +168,40 @@ const Popup = function (Component) {
           newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
           res[group] = newGroupPopups;
         }
+
         return res;
       }, popups);
       let noPopups = true;
+
       for (const i in popups) {
         if (popups[i].length >= 1) {
           noPopups = false;
           break;
         }
       }
+
       if (this.popupObserver) {
         this.popupObserver.disconnect();
       }
+
       if (noPopups) {
         document.removeEventListener('click', this.documentClickHandler);
-        document.removeEventListener('keyup', this.documentKeyupHandler);
-        // document.removeEventListener('scroll', this.handleScroll);
+        document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
+
         window.removeEventListener('resize', this.handleResize);
         document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
     }
+
     getGroup() {
       const {
         popupGroup
       } = this.props;
       return popupGroup || group;
     }
+
     getNeedArrow(popup) {
       const {
         isArrow
@@ -195,6 +211,7 @@ const Popup = function (Component) {
       } = popup;
       return isArrow !== undefined ? isArrow : needPopupArrow;
     }
+
     getScrollDebounceTime(popup) {
       const {
         scrollDebounceTime
@@ -204,6 +221,7 @@ const Popup = function (Component) {
       } = popup;
       return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
     }
+
     getCloseOnScrollPopup(popup) {
       const {
         closeOnScroll
@@ -213,6 +231,7 @@ const Popup = function (Component) {
       } = popup;
       return closeOnScroll !== undefined ? closeOnScroll : closeOnScrollPopup;
     }
+
     getIsAbsolutePopup(popup) {
       const {
         isAbsolutePositioningNeeded
@@ -222,6 +241,7 @@ const Popup = function (Component) {
       } = popup;
       return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
     }
+
     getCustomPositionOrder(popup) {
       const {
         customOrder = []
@@ -231,6 +251,7 @@ const Popup = function (Component) {
       } = popup;
       return customOrder.length !== 0 ? customOrder : customPositionOrder;
     }
+
     togglePopup(e, defaultPosition) {
       const group = this.getGroup();
       this.removeClose(e);
@@ -248,6 +269,7 @@ const Popup = function (Component) {
           });
         }
       });
+
       if (isPopupOpen) {
         this.setState({
           isPopupOpen: false,
@@ -257,18 +279,21 @@ const Popup = function (Component) {
         this.handlePopupPosition(defaultPosition);
       }
     }
+
     openPopupOnly(e, defaultPosition) {
       const group = this.getGroup();
       this.removeClose(e);
       lastOpenedGroup = lastOpenedGroup.indexOf(group) === -1 ? [group, ...lastOpenedGroup] : lastOpenedGroup;
       this.handlePopupPosition(defaultPosition);
     }
+
     closePopupOnly(e) {
       this.removeClose(e);
       lastOpenedGroup.splice(0, 1);
       const {
         isPopupOpen
       } = this.state;
+
       if (isPopupOpen) {
         this.setState({
           isPopupOpen: false,
@@ -276,6 +301,7 @@ const Popup = function (Component) {
         });
       }
     }
+
     handleCloseLastOpenedGroup() {
       const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] || [] : [];
       lastOpenedGroup.splice(0, 1);
@@ -286,99 +312,106 @@ const Popup = function (Component) {
         });
       });
     }
+
     handleDocumentMouseDown(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
+
       if (needPrevent) {
         this.removeClose(e);
       }
     }
+
     handleDocumentFocus(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
+
       if (needPrevent) {
         this.removeClose(e);
       }
     }
+
     handleGetNeedPrevent(e) {
       let needPrevent = false;
+
       if (lastOpenedGroup.length > 1) {
         const {
           target
         } = e;
         const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] : [];
-        let openedPopup = null;
-        // eslint-disable-next-line guard-for-in
+        let openedPopup = null; // eslint-disable-next-line guard-for-in
+
         for (const i in groupPopups) {
           const {
             isPopupOpen
           } = groupPopups[i].state;
+
           if (isPopupOpen) {
             openedPopup = groupPopups[i];
             break;
           }
         }
+
         if (openedPopup) {
           const {
             dropElement,
             placeHolderElement
           } = openedPopup;
           const isDropBoxChild = isDescendant(dropElement, target);
-          const isTargetChild = isDescendant(placeHolderElement, target);
-          // const massUpdateParent = document.querySelector(
-          //   '[data-id=massUpdatePopup]'
-          // );
-          // const isPopupMassUpdateChild = isDescendant(
+          const isTargetChild = isDescendant(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
           //   massUpdateParent,
           //   dropElement
           // );
 
-          if (!isDropBoxChild && !isTargetChild
-          // && isPopupMassUpdateChild
+          if (!isDropBoxChild && !isTargetChild // && isPopupMassUpdateChild
           ) {
             needPrevent = true;
           }
         }
       }
+
       return needPrevent;
     }
+
     documentClickHandler1(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
+
       if (needPrevent) {
         this.removeClose(e);
         this.handleCloseLastOpenedGroup();
       }
     }
+
     documentClickHandler() {
       try {
         Object.keys(popups).forEach(groupName => {
           const groupPopups = popups[groupName] || [];
           groupPopups.forEach(popup => {
-            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && popup.setState({
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
               isPopupOpen: false,
               isPopupReady: false
             });
           });
         });
         lastOpenedGroup = [];
-      } catch (e) {
-        // eslint-disable-next-line no-console
+      } catch (e) {// eslint-disable-next-line no-console
         //console.error('popup component not unmounted properly', e);
       }
     }
+
     documentKeyupHandler(e) {
       try {
         if (e.keyCode === 27) {
           this.handleCloseLastOpenedGroup();
         }
-      } catch (e) {
-        // eslint-disable-next-line no-console
+      } catch (e) {// eslint-disable-next-line no-console
         //console.log('error', e);
       }
     }
+
     removeClose(e) {
       // e && e.preventDefault && e.preventDefault();
-      e && e.stopPropagation && e.stopPropagation();
-      e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+      cancelBubblingEffect(e);
     }
+
     handlePopupPosition() {
       let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
       let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
@@ -393,11 +426,13 @@ const Popup = function (Component) {
       const needArrow = this.getNeedArrow(this);
       const isAbsolute = this.getIsAbsolutePopup(this);
       const customOrder = this.getCustomPositionOrder(this);
+
       if (direction === 'rtl') {
         defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
       } else {
         defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
       }
+
       if (!placeHolderElement && !dropElement) {
         this.setState({
           isPopupOpen: true,
@@ -405,6 +440,7 @@ const Popup = function (Component) {
         });
         return;
       }
+
       const setPosition = () => {
         requestAnimationFrame(() => {
           const {
@@ -428,6 +464,7 @@ const Popup = function (Component) {
             targetOffset,
             popupOffset
           } = betterPosition || {};
+
           if (position !== view || !isPopupReady) {
             this.setState({
               isPopupReady: true,
@@ -441,6 +478,7 @@ const Popup = function (Component) {
           }
         });
       };
+
       if (isResizeHandling) {
         setPosition();
       } else {
@@ -451,6 +489,7 @@ const Popup = function (Component) {
         }, setPosition);
       }
     }
+
     handleOpenPopupPositionChange() {
       Object.keys(popups).forEach(groupName => {
         const groupPopups = popups[groupName] || [];
@@ -465,6 +504,7 @@ const Popup = function (Component) {
               position,
               positionsOffset = {}
             } = popup.state;
+
             if (placeHolderElement && dropElement) {
               const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
               requestAnimationFrame(() => {
@@ -491,9 +531,7 @@ const Popup = function (Component) {
                   left = '',
                   top = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top;
-
-                // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -507,9 +545,7 @@ const Popup = function (Component) {
                     popupOffset,
                     isAbsolutePositioningNeeded: isAbsolute
                   });
-                }
-
-                // if (!isInViewPort && !isAbsolute) {
+                } // if (!isInViewPort && !isAbsolute) {
                 //   popup.setState({ isPopupOpen: false, isPopupReady: false });
                 // } else if (view && changeState) {
                 //   popup.setState({
@@ -521,6 +557,7 @@ const Popup = function (Component) {
                 //     isAbsolutePositioningNeeded: isAbsolute
                 //   });
                 // }
+
               });
             }
           }
@@ -531,6 +568,7 @@ const Popup = function (Component) {
     handleResize() {
       this.handleOpenPopupPositionChange();
     }
+
     handleScroll(e) {
       // this.handleOpenPopupPositionChange();
       const {
@@ -539,14 +577,17 @@ const Popup = function (Component) {
       const {
         isPopupReady
       } = this.state;
+
       if (isPopupReady) {
         console.log('onscrollPopupREady');
       }
+
       if (isPopupReady && closeOnScroll) {
         console.log(this, 'handle Scroll');
         this.togglePopup(e);
       }
     }
+
     handlePopupResize(popupSize) {
       const {
         height,
@@ -560,17 +601,22 @@ const Popup = function (Component) {
         isPopupReady,
         position
       } = this.state;
+
       if (isPopupReady && this.size && (oldHeight !== height || width !== oldWidth)) {
         this.handlePopupPosition(position, true);
       }
+
       this.size = popupSize;
     }
+
     getTargetRef(el) {
       this.placeHolderElement = el;
     }
+
     getContainerRef(el) {
       this.dropElement = el;
     }
+
     render() {
       const {
         isPopupReady,
@@ -586,11 +632,14 @@ const Popup = function (Component) {
         getContainerRef: this.getContainerRef
       }));
     }
+
   }
+
   Popup.displayName = Component.displayName || Component.name || Popup.name;
   Popup.contextTypes = {
     direction: PropTypes.string
   };
   return hoistStatics(Popup, Component);
 };
+
 export default Popup;

package/es/Popup/PositionMapping.json

@@ -1,74 +1,74 @@
-{ 
-    "absolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomLeftToRight",
-        "bottomLeft": "bottomRightToLeft",
-        "topCenter": "topCenter",
-        "topRight": "topLeftToRight",
-        "topLeft": "topRightToLeft",
-        "rightCenter": "rightCenter",
-        "rightBottom": "rightTopToBottom",
-        "rightTop": "rightBottomToTop",
-        "leftCenter": "leftCenter",
-        "leftBottom": "leftTopToBottom",
-        "leftTop": "leftBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlAbsolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomRightToLeft",
-        "bottomLeft": "bottomLeftToRight",
-        "topCenter": "topCenter",
-        "topRight": "topRightToLeft",
-        "topLeft": "topLeftToRight",
-        "rightCenter": "leftCenter",
-        "rightBottom": "leftTopToBottom",
-        "rightTop": "leftBottomToTop",
-        "leftCenter": "rightCenter",
-        "leftBottom": "rightTopToBottom",
-        "leftTop": "rightBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlFixedPositionMapping": {
-        "bottomCenter":"bottomCenter",
-        "bottomLeftToRight": "bottomRightToLeft",
-        "bottomCenterToRight": "bottomCenterToLeft",
-        "bottomRightToLeft": "bottomLeftToRight",
-        "bottomCenterToLeft": "bottomCenterToRight",
-        "topCenter": "topCenter",
-        "topLeftToRight": "topRightToLeft",
-        "topCenterToRight": "topCenterToLeft",
-        "topRightToLeft": "topLeftToRight",
-        "topCenterToLeft": "topCenterToRight",
-        "rightTopToBottom": "leftTopToBottom",
-        "rightCenterToBottom": "leftCenterToBottom",
-        "rightCenter": "leftCenter",
-        "rightBottomToTop": "leftBottomToTop",
-        "rightCenterToTop": "leftCenterToTop",
-        "leftTopToBottom": "rightTopToBottom",
-        "leftCenterToBottom": "rightCenterToBottom",
-        "leftCenter": "rightCenter",
-        "leftBottomToTop": "rightBottomToTop",
-        "leftCenterToTop": "rightCenterToTop",
-        "bottomRight": "bottomLeft",
-        "bottomLeft": "bottomRight",
-        "topRight": "topLeft",
-        "topLeft": "topRight",
-        "rightBottom": "leftBottom",
-        "rightTop": "leftTop",
-        "leftBottom": "rightBottom",
-        "leftTop": "rightTop"      
-    }
+{ 
+    "absolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomLeftToRight",
+        "bottomLeft": "bottomRightToLeft",
+        "topCenter": "topCenter",
+        "topRight": "topLeftToRight",
+        "topLeft": "topRightToLeft",
+        "rightCenter": "rightCenter",
+        "rightBottom": "rightTopToBottom",
+        "rightTop": "rightBottomToTop",
+        "leftCenter": "leftCenter",
+        "leftBottom": "leftTopToBottom",
+        "leftTop": "leftBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlAbsolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomRightToLeft",
+        "bottomLeft": "bottomLeftToRight",
+        "topCenter": "topCenter",
+        "topRight": "topRightToLeft",
+        "topLeft": "topLeftToRight",
+        "rightCenter": "leftCenter",
+        "rightBottom": "leftTopToBottom",
+        "rightTop": "leftBottomToTop",
+        "leftCenter": "rightCenter",
+        "leftBottom": "rightTopToBottom",
+        "leftTop": "rightBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlFixedPositionMapping": {
+        "bottomCenter":"bottomCenter",
+        "bottomLeftToRight": "bottomRightToLeft",
+        "bottomCenterToRight": "bottomCenterToLeft",
+        "bottomRightToLeft": "bottomLeftToRight",
+        "bottomCenterToLeft": "bottomCenterToRight",
+        "topCenter": "topCenter",
+        "topLeftToRight": "topRightToLeft",
+        "topCenterToRight": "topCenterToLeft",
+        "topRightToLeft": "topLeftToRight",
+        "topCenterToLeft": "topCenterToRight",
+        "rightTopToBottom": "leftTopToBottom",
+        "rightCenterToBottom": "leftCenterToBottom",
+        "rightCenter": "leftCenter",
+        "rightBottomToTop": "leftBottomToTop",
+        "rightCenterToTop": "leftCenterToTop",
+        "leftTopToBottom": "rightTopToBottom",
+        "leftCenterToBottom": "rightCenterToBottom",
+        "leftCenter": "rightCenter",
+        "leftBottomToTop": "rightBottomToTop",
+        "leftCenterToTop": "rightCenterToTop",
+        "bottomRight": "bottomLeft",
+        "bottomLeft": "bottomRight",
+        "topRight": "topLeft",
+        "topLeft": "topRight",
+        "rightBottom": "leftBottom",
+        "rightTop": "leftTop",
+        "leftBottom": "rightBottom",
+        "leftTop": "rightTop"      
+    }
 }