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

package/es/Radio/docs/Radio__default.docs.js

@@ -8,27 +8,25 @@ export default class Radio__default extends Component {
       checked: false
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -157,9 +155,7 @@ export default class Radio__default extends Component {
       text: "Danger"
     }))));
   }
-
 }
-
 if (false) {
   Radio__default.docs = {
     componentGroup: 'Form Elements',

package/es/Responsive/CustomResponsive.js

@@ -5,12 +5,15 @@ import ResizeObserver from './ResizeObserver';
 import DOMRefWrapper from './RefWrapper';
 import shallowCompare from './utils/shallowCompare';
 import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from './sizeObservers';
-import { ContextOptimizer } from '../utils/ContextOptimizer'; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
+import { ContextOptimizer } from '../utils/ContextOptimizer';
+
+// const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
 // const otherBreakPoints = [320, 360, 375, 720, 1280, 1600, 1920];
-// defaultResponsiveId means if ResponsiveSender do not recive id This will be id
 
-const defaultResponsiveId = 'parent_sender'; // validSizeResponsiveId means in some parent's height and with is caluclated ( readed )
+// defaultResponsiveId means if ResponsiveSender do not recive id This will be id
+const defaultResponsiveId = 'parent_sender';
 
+// validSizeResponsiveId means in some parent's height and with is caluclated ( readed )
 const validSizeResponsiveId = 'valid_sender';
 const ResponsiveContext = /*#__PURE__*/React.createContext({
   [validSizeResponsiveId]: windowResizeObserver
@@ -22,24 +25,20 @@ export function ResponsiveSender(props) {
     domRefKey,
     responsiveId
   } = props;
-
   function init() {
     let size = {
       height: 0,
       width: 0
     };
-
     function getSize() {
       return size;
     }
-
     const childContext = {
       resize: new Subscribale(),
       getSize,
       // TODO: rename isParentSize ==> isSizeReaded (or) isMySize (or) isOriginalSize
       isParentSize: false
     };
-
     function onResize(newSize) {
       childContext.isParentSize = true;
       size = newSize;
@@ -47,38 +46,31 @@ export function ResponsiveSender(props) {
         childContext.resize.dispatch(newSize);
       });
     }
-
     const observer = new ResizeObserver(onResize);
-
     function containerRef(node) {
       observer.replaceObservationElement(node);
     }
-
     return {
       containerRef,
       childContext
     };
   }
-
   const {
     containerRef,
     childContext
   } = useMemo(init, []);
-
   function contextSelector(context) {
-    const totalContext = { ...context
+    const totalContext = {
+      ...context
     };
-    totalContext[responsiveId] = childContext; // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
-
+    totalContext[responsiveId] = childContext;
+    // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
     totalContext[defaultResponsiveId] = childContext;
-
     if (childContext.isParentSize) {
       totalContext[validSizeResponsiveId] = childContext;
     }
-
     return totalContext;
   }
-
   return /*#__PURE__*/React.createElement(ContextOptimizer, {
     Context: ResponsiveContext,
     calculation: contextSelector
@@ -89,7 +81,8 @@ export function ResponsiveSender(props) {
     ref: containerRef
   }, children)));
 }
-ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = {
+  ...CustomResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -104,14 +97,12 @@ export function useResponsiveReceiver() {
 
   const resizeHandlerRef = useRef();
   const data = useRef();
-
   function updateLatestData() {
     const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
     data.current = query({
       isTouchDevice,
       isParentSize: contextData.isParentSize,
       currentScreenSize: size,
-
       mediaQueryOR(breakPointArray) {
         return breakPointArray.some(breakPoint => {
           const {
@@ -121,7 +112,6 @@ export function useResponsiveReceiver() {
           return isHeight || isWidth;
         });
       },
-
       mediaQueryAND(breakPointArray) {
         return breakPointArray.every(breakPoint => {
           const {
@@ -131,10 +121,8 @@ export function useResponsiveReceiver() {
           return (isHeight === undefined ? true : isHeight) && (isWidth === undefined ? true : isWidth);
         });
       }
-
     });
   }
-
   resizeHandlerRef.current = updateLatestData;
   useEffect(() => {
     function handleResize(size) {
@@ -143,10 +131,10 @@ export function useResponsiveReceiver() {
       const isSameValues = shallowCompare(data.current, prevData);
       !isSameValues && forceUpdate({});
     }
-
     contextData.resize.subscribe(handleResize);
     return () => contextData.resize.unsubscribe(handleResize);
-  }, [contextData]); // const prevContextDataRef = useRef();
+  }, [contextData]);
+  // const prevContextDataRef = useRef();
   // function handleResize(size) {
   //   const prevData = data.current;
   //   resizeHandlerRef.current(size);
@@ -161,10 +149,11 @@ export function useResponsiveReceiver() {
   //     contextData.resize.subscribe(handleResize);
   //   } else {
   //     windowResizeObserver.observe(handleResize);
+
   //   }
+
   // }
   // NOTE: this call for we must give updated value
-
   updateLatestData();
   return data.current;
 }
@@ -183,7 +172,8 @@ export function ResponsiveReceiver(_ref) {
     ref: eleRef
   }, child) : child;
 }
-ResponsiveReceiver.defaultProps = { ...CustomResponsiveReceiver_defaultProps,
+ResponsiveReceiver.defaultProps = {
+  ...CustomResponsiveReceiver_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveReceiver.propTypes = CustomResponsiveReceiver_propTypes;

package/es/Responsive/RefWrapper.js

@@ -1,6 +1,5 @@
 import React, { forwardRef, useCallback, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-
 function setRef(refFunc, value) {
   if (typeof refFunc === 'function') {
     refFunc(value);
@@ -8,20 +7,22 @@ function setRef(refFunc, value) {
     refFunc.current = value;
   }
 }
-
 const DOMRefWrapper = /*#__PURE__*/forwardRef((props, refFunc) => {
   const ele = Children.only(props.children);
   const {
     domRefKey = 'eleRef'
-  } = props; // NOTE: need to  check for forward  Ref function, Because in Froward Ref case refKey is "ref"
-
-  const refKey = typeof ele.type !== 'string' ? domRefKey : 'ref'; // const setAttribute = useCallback(node => {
+  } = props;
 
+  // NOTE: need to  check for forward  Ref function, Because in Froward Ref case refKey is "ref"
+  const refKey = typeof ele.type !== 'string' ? domRefKey : 'ref';
+  // const setAttribute = useCallback(node => {
   const eleRealRefFunc = ele.props[refKey];
   const setAttribute = useCallback(ref => {
     setRef(refFunc, ref);
     setRef(eleRealRefFunc, ref);
-  }, [refFunc, eleRealRefFunc]); // let refKey = typeof ele.type === 'string' ? 'ref' : 'eleRef';
+  }, [refFunc, eleRealRefFunc]);
+
+  // let refKey = typeof ele.type === 'string' ? 'ref' : 'eleRef';
 
   let childProps = {
     [refKey]: setAttribute

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
     };
   }
-
 }