@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-252

package/es/Responsive/ResizeComponent.js

@@ -11,8 +11,8 @@ export default class ResizeComponent extends React.Component {
     super(props);
     this.noSpaceForChildren = false;
     this.childrenCurrentList = [];
-    this.widthCheck = debounce(this.widthCheck.bind(this), 10); // this.widthCheck = this.widthCheck.bind(this);
-
+    this.widthCheck = debounce(this.widthCheck.bind(this), 10);
+    // this.widthCheck = this.widthCheck.bind(this);
     this.onResize = this.onResize.bind(this);
     this.onResizeMutation = this.onResizeMutation.bind(this);
     this.tabsObserver = new ResizeObserver(this.onResize);
@@ -21,7 +21,6 @@ export default class ResizeComponent extends React.Component {
     this.constructChildren = this.constructChildren.bind(this);
     this.querySelector = this.querySelector.bind(this);
   }
-
   querySelector() {
     if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
       return this.props.wrapperDivRef.current.querySelectorAll('[data-responsive="true"]');
@@ -29,13 +28,11 @@ export default class ResizeComponent extends React.Component {
       return [];
     }
   }
-
   onResizeMutation(mutations) {
     // console.log(mutations);
     let {
       childrenList
     } = this.props;
-
     for (const mutation of mutations) {
       if (mutation.type === 'childList') {
         if (mutation.addedNodes.length) {
@@ -46,19 +43,24 @@ export default class ResizeComponent extends React.Component {
               newAdded = true;
             }
           });
-
           if (newAdded) {
             //console.log('A child node has been added ', mutation);
+
             this.onResize();
           }
-        } else if (mutation.removedNodes.length) {// ?? removed nodes ku check pannanum ah ??
+        } else if (mutation.removedNodes.length) {
+          // ?? removed nodes ku check pannanum ah ??
           // console.log('A child node has been removed ', mutation);
         }
-      } else if (mutation.type === 'attributes') {//console.log('The ' + mutation.attributeName + ' attribute was modified.', mutation);
-      } else if (mutation.type === 'characterData') {// To Call While Changing InnerText, Remove Below line If Required. But It might affect Performance.
+      } else if (mutation.type === 'attributes') {
+        //console.log('The ' + mutation.attributeName + ' attribute was modified.', mutation);
+      } else if (mutation.type === 'characterData') {
+        // To Call While Changing InnerText, Remove Below line If Required. But It might affect Performance.
         // this.onResize();
       }
-    } // mutations.forEach(mutation => {
+    }
+
+    // mutations.forEach(mutation => {
     //   if (mutation.target === foo &&
     //     mutation.attributeName === 'style' &&
     //     oldWidth !== foo.style.width) {
@@ -67,7 +69,6 @@ export default class ResizeComponent extends React.Component {
     //       oldWidth = foo.style.width;
     //   }
     // });
-
   }
 
   componentDidMount() {
@@ -82,27 +83,22 @@ export default class ResizeComponent extends React.Component {
       });
     }
   }
-
   componentWillUnmount() {
     this.reset();
   }
-
   reset() {
     this.childrenCurrentList = [];
     this.tabsObserver.disconnect();
     this.tabObserver && this.tabObserver.disconnect();
   }
-
   componentDidUpdate(prevProps) {
     if (this.childrenCurrentList.length === 0) {
       this.childrenCurrentList = this.querySelector();
       this.widthCheck();
     }
-
     if (this.props.resizeId !== prevProps.resizeId) {
       // Completely reset the observers and set new observer if id is changed
       this.reset();
-
       if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
         this.tabsObserver.observe(this.props.wrapperDivRef.current);
         this.tabObserver.observe(this.props.wrapperDivRef.current, {
@@ -115,73 +111,67 @@ export default class ResizeComponent extends React.Component {
       }
     }
   }
-
   onResize() {
     // if (this.childrenCurrentList.length !== 0) {
     this.childrenCurrentList = [];
-    this.constructChildren(0, false); //}
-  } // shouldComponentUpdate() {
+    this.constructChildren(0, false);
+    //}
+  }
+
+  // shouldComponentUpdate() {
   //   return this.childrenCurrentList.length === 0
   // }
 
-
   widthCheck() {
     let wrapperDivRef = this.props.wrapperDivRef.current;
     let moreDivRef = this.props.moreDivRef.current;
-
     if (wrapperDivRef && this.childrenCurrentList.length > 0) {
-      const childrenWidthList = this.childrenCurrentList; // this.childrenCurrentList = childrenWidthList;
-
-      const moreWidth = getElementSpace(moreDivRef).neededSpace; //console.log(moreWidth,'moreWidth');
-
+      const childrenWidthList = this.childrenCurrentList;
+      // this.childrenCurrentList = childrenWidthList;
+      const moreWidth = getElementSpace(moreDivRef).neededSpace;
+      //console.log(moreWidth,'moreWidth');
       let totalWidth = getElementSpace(wrapperDivRef).availableInsideSpace - moreWidth;
       let _childrenTotalWidth = 0;
       let dataCount = 0;
       this.noSpaceForChildren = false;
-
       if (totalWidth <= moreWidth) {
         this.noSpaceForChildren = true;
       } else {
         for (let i = 0; i < childrenWidthList.length; i++) {
           let currentWidth = getElementSpace(childrenWidthList[i]).neededSpace;
-          _childrenTotalWidth += currentWidth; // console.log(_childrenTotalWidth, currentWidth, totalWidth)
-
+          _childrenTotalWidth += currentWidth;
+          // console.log(_childrenTotalWidth, currentWidth, totalWidth)
           if (i === childrenWidthList.length - 1 && moreWidth >= currentWidth) {
             totalWidth += moreWidth;
           }
-
           if (totalWidth <= _childrenTotalWidth) {
             dataCount = i;
             break;
           }
         }
       }
-
       this.constructChildren(dataCount, true);
     } else {
       this.constructChildren(0, false);
     }
   }
-
   constructChildren() {
     let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let responsive = arguments.length > 1 ? arguments[1] : undefined;
     const {
       childrenList,
       getData
-    } = this.props; // If the data count is zero we assume that we can render all the items - data count will be zero only when we want to calculate the whole list width
-
+    } = this.props;
+    // If the data count is zero we assume that we can render all the items - data count will be zero only when we want to calculate the whole list width
     dataCount = dataCount || childrenList && childrenList.length;
     getData({
       responsiveHook: responsive,
       validListCount: this.noSpaceForChildren ? 0 : dataCount
     });
   }
-
   render() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
   }
-
 }
 ResizeComponent.propTypes = {
   children: PropTypes.node,

package/es/Responsive/ResizeObserver.js

@@ -4,33 +4,30 @@ const mutationObserverOptions = {
   // childList: true,
   attributes: true
 };
-
 function getSize(element) {
   let {
     offsetHeight,
     offsetWidth
-  } = element; // const { height, width } = element.getBoundingClientRect();
-
+  } = element;
+  // const { height, width } = element.getBoundingClientRect();
   return {
     height: offsetHeight,
     width: offsetWidth
   };
 }
-
 function dispatch() {
   let resizeResponsive = new Event('resizeResponsive');
   window.dispatchEvent(resizeResponsive);
 }
-
 if (!hasResizeObserver) {
   let interval = null;
   window.addEventListener('resize', () => {
     clearTimeout(interval);
     interval = setTimeout(dispatch, 100);
   });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
+}
 
+// NOTE: this is not full polyfill , we just wrote what types of changes wlli
 export default class ResizeObserverPolyfill {
   constructor(onResize) {
     // method finding
@@ -45,70 +42,57 @@ export default class ResizeObserverPolyfill {
       height: 0,
       width: 0
     };
-
     if (hasResizeObserver) {
       this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
     } else {
       this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
     }
   }
-
   replaceResizeHandler(onResize) {
     this.onResize = onResize;
   }
-
   resizeHandler() {
     if (!this.targetNode) {
       return;
     }
-
-    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
-
+    const currentSize = getSize(this.targetNode);
+    // if (this.size && shallowCompare(currentSize, this.size)) {
     if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
       return;
     }
-
     this.size = currentSize;
     this.onResize(this.size, this.targetNode);
     return true;
   }
-
   resizeHandlerDispatch() {
     if (!this.resizeHandler() || hasResizeObserver) {
       return;
     }
-
     dispatch();
   }
-
   debounce() {
     clearTimeout(this.interval);
     this.interval = setTimeout(this.resizeHandler, 100);
   }
-
   transitionEndHandler(event) {
     if (event.propertyName.indexOf('color') === -1) {
       this.resizeHandlerDispatch();
     }
   }
-
   addEventListeners(targetNode) {
     targetNode.addEventListener('transitionend', this.transitionEndHandler);
     window.addEventListener('resizeResponsive', this.debounce);
     targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
     targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
   }
-
   removeEventListeners(targetNode) {
     targetNode.removeEventListener('transitionend', this.transitionEndHandler);
     window.removeEventListener('resizeResponsive', this.debounce);
     targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
     targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
   }
-
   observe(targetNode) {
     this.targetNode = targetNode;
-
     if (hasResizeObserver) {
       this.resizeObserverInstance.observe(targetNode);
     } else {
@@ -116,17 +100,14 @@ export default class ResizeObserverPolyfill {
       this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
     }
   }
-
   replaceObservationElement(targetNode) {
     if (this.targetNode === targetNode) {
       return;
     }
-
     this.targetNode && this.disconnect();
     targetNode && this.observe(targetNode);
     targetNode && this.resizeHandlerDispatch();
   }
-
   disconnect() {
     this.targetNode && this.removeEventListeners(this.targetNode);
     hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
@@ -136,5 +117,4 @@ export default class ResizeObserverPolyfill {
       width: 0
     };
   }
-
 }

package/es/Responsive/Responsive.js

@@ -1,41 +1,42 @@
-import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
-
+import React, { useContext, useEffect, useState, useMemo } from 'react';
+// import React, { useState, useMemo, useCallback, useContext } from 'react';
 import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from './props/defaultProps';
 import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from './props/propTypes';
 import ResizeObserver from './ResizeObserver';
 import DOMRefWrapper from './RefWrapper';
 import { windowResizeObserver } from './windowResizeObserver';
-import { getBreakPointValue, defaultMatcher } from './utils/'; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
+import { getBreakPointValue, defaultMatcher } from './utils/';
+
+// const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
 
 export const ResponsiveContext = /*#__PURE__*/React.createContext({});
 const defaultResponsiveId = 'parentReceiver';
 export class ResponsiveSender extends React.Component {
   constructor(props) {
-    super(props); // method binding
+    super(props);
 
+    // method binding
     this.onResize = this.onResize.bind(this);
     this.containerRef = this.containerRef.bind(this);
     this.getWidth = this.getWidth.bind(this);
     this.state = {
       breakPoint: null,
       getWidth: this.getWidth
-    }; // variables
+    };
 
+    // variables
     this.observer = new ResizeObserver(this.onResize);
     this.size = null;
   }
-
   getWidth() {
     if (!this.size) {
       return 0;
     }
-
     const {
       width
     } = this.size;
     return width;
   }
-
   onResize(size) {
     // const { matcher } = this.props;
     const {
@@ -43,25 +44,21 @@ export class ResponsiveSender extends React.Component {
     } = this.state;
     const newBreakPoint = defaultMatcher(size);
     this.size = size;
-
     if (breakPoint !== newBreakPoint) {
       this.setState({
         breakPoint: newBreakPoint
       });
     }
   }
-
   containerRef(node) {
     this.observer.replaceObservationElement(node);
   }
-
   isChanged(data, key) {
     this.memo = this.memo || {};
     const changed = this.memo[key] !== data;
     this.memo[key] = data;
     return changed;
   }
-
   render() {
     const parentContext = this.context;
     const {
@@ -71,10 +68,9 @@ export class ResponsiveSender extends React.Component {
     } = this.props;
     let {
       childContext
-    } = this; // NOTE: this method called here ,Because of we must update local memo.
-
+    } = this;
+    // NOTE: this method called here ,Because of we must update local memo.
     const isStateChanged = this.isChanged(this.state, 'state');
-
     if (this.isChanged(this.context, 'context') || isStateChanged) {
       childContext = Object.assign({}, parentContext);
       childContext[responsiveId] = this.state;
@@ -89,9 +85,9 @@ export class ResponsiveSender extends React.Component {
       ref: this.containerRef
     }, children));
   }
-
 }
-ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = {
+  ...ResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -101,20 +97,17 @@ export function useResponsiveReceiver() {
   const [_, forceUpdate] = useState();
   let totalContextData = useContext(ResponsiveContext);
   let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
-
   let data = contextData;
   useEffect(() => {
     !contextData && windowResizeObserver.observe(forceUpdate);
     return () => !contextData && windowResizeObserver.unobserve(forceUpdate);
   }, [!!contextData]);
-
   if (!contextData) {
     data = {
       breakPoint: windowResizeObserver.getBreackPoint(),
       getWidth: () => windowResizeObserver.getSize().width
     };
   }
-
   const {
     breakPoint,
     getWidth
@@ -124,45 +117,37 @@ export function useResponsiveReceiver() {
     return {
       breakPoint,
       isTouchDevice,
-
       deviceBetween(breakPoint1, breakPoint2) {
         const width = getWidth();
-
         if (!width) {
           return false;
-        } // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
+        }
+        // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
         // const value1 = smallBreakPointIndex < 1 ?  0 : getBreakPointValue(sortedBreackPointKey[smallBreakPointIndex-1]);
-
-
         const value1 = getBreakPointValue(breakPoint1);
         const value2 = getBreakPointValue(breakPoint2);
-
         if (value1 > value2) {
           return this.deviceBetween(breakPoint2, breakPoint1);
         }
-
         return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
       },
-
       deviceOnly() {
         let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         return breakPoints.includes(breakPoint);
       },
-
       deviceUpto(breakPoint) {
         const width = getWidth();
-
         if (!width) {
           return false;
         }
-
         return width <= getBreakPointValue(breakPoint);
       }
-
     };
   }, [breakPoint, getWidth]);
   return childArg;
-} // function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
+}
+
+// function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
 //   const { breakPoint, methods } = useResponsiveReceiver();
 //   console.log(hiddenSizes);
 //   return hiddenSizes.indexOf(breakPoint) === -1 ? (
@@ -188,7 +173,8 @@ export function ResponsiveReceiver(_ref) {
     ref: eleRef
   }, child) : child : null;
 }
-ResponsiveReceiver.defaultProps = { ...ResponsiveReceiver_defaultProps,
+ResponsiveReceiver.defaultProps = {
+  ...ResponsiveReceiver_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveReceiver.propTypes = ResponsiveReceiver_propTypes;

package/es/Responsive/docs/Responsive__Custom.docs.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { ResponsiveSender, ResponsiveReceiver } from '../CustomResponsive';
 import { Container, Box } from '../../Layout';
-import Radio from '../../Radio/Radio'; // eslint-disable-next-line css-modules/no-unused-class
-
-import style from './style.module.css'; // eslint-disable-next-line react/prop-types
+import Radio from '../../Radio/Radio';
+// eslint-disable-next-line css-modules/no-unused-class
+import style from './style.module.css';
 
+// eslint-disable-next-line react/prop-types
 function WindowSizeBar(_ref) {
   let {
     isTouchDevice
@@ -23,16 +24,14 @@ function WindowSizeBar(_ref) {
         windowHeight: window.innerHeight
       });
     }
-
     window.addEventListener('resize', handler);
     return () => window.removeEventListener('resize', handler);
   });
   return /*#__PURE__*/React.createElement(Box, {
     className: style.header
   }, ` Width: ${windowWidth} * Height: ${windowHeight} * isTouchDevice: ${isTouchDevice} `);
-} // eslint-disable-next-line camelcase
-
-
+}
+// eslint-disable-next-line camelcase
 export default class Responsive__Custom extends React.Component {
   constructor(props) {
     super(props);
@@ -44,7 +43,6 @@ export default class Responsive__Custom extends React.Component {
     this.switchToAnd = this.handleMethodChange.bind(this, 'AndFunction');
     this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
   }
-
   customQuery(_ref2) {
     let {
       mediaQueryOR,
@@ -62,12 +60,15 @@ export default class Responsive__Custom extends React.Component {
       }, {
         minWidth: 700,
         maxWidth: 800
-      } // {
+      }
+
+      // {
       //   minWidth: 700
       // },
       // {
       //   minHeight: 700
       // }
+
       // {
       //   minHeight: 700,
       //   minWidth: 700
@@ -76,21 +77,25 @@ export default class Responsive__Custom extends React.Component {
       //   maxHeight: 600,
       //   maxWidth: 600
       // }
+
       // {
       //   minHeight: 700,
       //   maxHeight: 800,
       //   minWidth: 700,
       //   maxWidth: 800
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700,
       //   maxHeight: 800
       // }
+
       // {
       //   minWidth: 700,
       //   maxWidth: 800,
@@ -103,12 +108,15 @@ export default class Responsive__Custom extends React.Component {
       }, {
         minWidth: 700,
         maxWidth: 800
-      } // {
+      }
+
+      // {
       //   minWidth: 700
       // },
       // {
       //   minHeight: 700
       // }
+
       // {
       //   minHeight: 700,
       //   minWidth: 700
@@ -117,21 +125,25 @@ export default class Responsive__Custom extends React.Component {
       //   maxHeight: 600,
       //   maxWidth: 600
       // }
+
       // {
       //   minHeight: 700,
       //   maxHeight: 800,
       //   minWidth: 700,
       //   maxWidth: 800
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700,
       //   maxHeight: 800
       // }
+
       // {
       //   minWidth: 700,
       //   maxWidth: 800,
@@ -141,13 +153,11 @@ export default class Responsive__Custom extends React.Component {
       ]) : ''
     };
   }
-
   handleMethodChange(value) {
     this.setState({
       method: value
     });
   }
-
   render() {
     let {
       method
@@ -194,9 +204,7 @@ export default class Responsive__Custom extends React.Component {
       }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
     })));
   }
-
 }
-
 if (false) {
   // eslint-disable-next-line camelcase
   Responsive__Custom.docs = {

package/es/Responsive/docs/Responsive__default.docs.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
-
 /* eslint-disable react/forbid-component-props */
 // Example1.js
+
 import React from 'react';
 import { ResponsiveReceiver } from '..';
 import { Container, Box } from '../../Layout';
@@ -86,9 +86,7 @@ export default class Responsive__default extends React.Component {
       }, "MOBILE"))));
     }));
   }
-
 }
-
 if (false) {
   Responsive__default.docs = {
     componentGroup: 'Layout',