@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-191

package/es/v1/Responsive/CustomResponsive.js

@@ -1,195 +0,0 @@
-import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
-import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from './props/defaultProps';
-import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from './props/propTypes';
-import ResizeObserver from './ResizeObserver';
-import DOMRefWrapper from './RefWrapper';
-import shallowCompare from '../../Responsive/utils/shallowCompare';
-import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from '../../Responsive/sizeObservers';
-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 )
-
-const validSizeResponsiveId = 'valid_sender';
-const ResponsiveContext = /*#__PURE__*/React.createContext({
-  [validSizeResponsiveId]: windowResizeObserver
-});
-export function ResponsiveSender(props) {
-  // variables
-  const {
-    children,
-    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;
-      setTimeout(() => {
-        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
-    };
-    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
-  }, totalContext => /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-    value: totalContext
-  }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
-    domRefKey: domRefKey,
-    ref: containerRef
-  }, children)));
-}
-ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
-  responsiveId: defaultResponsiveId
-};
-ResponsiveSender.contextType = ResponsiveContext;
-ResponsiveSender.propTypes = CustomResponsiveSender_propTypes;
-export function useResponsiveReceiver() {
-  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
-  let query = arguments.length > 1 ? arguments[1] : undefined;
-  const [, forceUpdate] = useState();
-  const totalContextData = useContext(ResponsiveContext);
-  const validSizeContextData = totalContextData[validSizeResponsiveId];
-  const contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId] || validSizeContextData; // NOTE: this for fallback of if responsive receiver id wrong
-
-  const resizeHandlerRef = useRef();
-  const data = useRef();
-
-  function updateLatestData() {
-    const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
-    const prevData = data.current;
-    data.current = query({
-      isTouchDevice,
-      isParentSize: contextData.isParentSize,
-      currentScreenSize: size,
-
-      mediaQueryOR(breakPointArray) {
-        return breakPointArray.some(breakPoint => {
-          const {
-            isHeight,
-            isWidth
-          } = isBreackPointMatched(breakPoint, size);
-          return isHeight || isWidth;
-        });
-      },
-
-      mediaQueryAND(breakPointArray) {
-        return breakPointArray.every(breakPoint => {
-          const {
-            isHeight,
-            isWidth
-          } = isBreackPointMatched(breakPoint, size);
-          return (isHeight === undefined ? true : isHeight) && (isWidth === undefined ? true : isWidth);
-        });
-      }
-
-    });
-    const isSameValues = shallowCompare(data.current, prevData);
-
-    if (isSameValues) {
-      data.current = prevData;
-    }
-
-    return isSameValues;
-  }
-
-  resizeHandlerRef.current = updateLatestData;
-  useEffect(() => {
-    function handleResize(size) {
-      const isSameValues = resizeHandlerRef.current(size);
-      !isSameValues && forceUpdate({});
-    }
-
-    contextData.resize.subscribe(handleResize);
-    return () => contextData.resize.unsubscribe(handleResize);
-  }, [contextData]); // const prevContextDataRef = useRef();
-  // function handleResize(size) {
-  //   const prevData = data.current;
-  //   resizeHandlerRef.current(size);
-  //   const isSammeValues = shallowCompare(data.current, prevData);
-  //   !isSammeValues && forceUpdate({});
-  // }
-  // if(prevContextDataRef.current !== contextData) {
-  //   prevContextDataRef.current = contextData;
-  //   contextData.resize.unsubscribe(handleResize);
-  //   windowResizeObserver.unobserve(handleResize);
-  //   if (contextData) {
-  //     contextData.resize.subscribe(handleResize);
-  //   } else {
-  //     windowResizeObserver.observe(handleResize);
-  //   }
-  // }
-  // NOTE: this call for we must give updated value
-
-  updateLatestData();
-  return data.current;
-}
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    query,
-    eleRef,
-    domRefKey
-  } = _ref;
-  const data = useResponsiveReceiver(responsiveId, query);
-  const child = children(data);
-  return eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {
-    domRefKey: domRefKey,
-    ref: eleRef
-  }, child) : child;
-}
-ResponsiveReceiver.defaultProps = { ...CustomResponsiveReceiver_defaultProps,
-  responsiveId: defaultResponsiveId
-};
-ResponsiveReceiver.propTypes = CustomResponsiveReceiver_propTypes;

package/es/v1/Responsive/RefWrapper.js

@@ -1,39 +0,0 @@
-import React, { forwardRef, useCallback, Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-
-function setRef(refFunc, value) {
-  if (typeof refFunc === 'function') {
-    refFunc(value);
-  } else if (refFunc instanceof Object) {
-    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 => {
-
-  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';
-
-  let childProps = {
-    [refKey]: setAttribute
-  };
-  return /*#__PURE__*/cloneElement(ele, childProps);
-});
-DOMRefWrapper.defaultProps = {
-  domRefKey: 'eleRef'
-};
-DOMRefWrapper.propTypes = {
-  domRefKey: PropTypes.any,
-  children: PropTypes.any
-};
-DOMRefWrapper.displayName = 'DOMRefWrapper';
-export default DOMRefWrapper;

package/es/v1/Responsive/ResizeComponent.js

@@ -1,197 +0,0 @@
-/* eslint-disable */
-// QUestions to be discussed
-//1) mutation.type === 'characterData' needed ???
-// 2) debounce Mutation observer and resize observer
-import React from 'react';
-import PropTypes from 'prop-types';
-import ResizeObserver from './ResizeObserver';
-import { getElementSpace, debounce } from '../../utils/Common';
-export default class ResizeComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.noSpaceForChildren = false;
-    this.childrenCurrentList = [];
-    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);
-    this.tabObserver = new MutationObserver(this.onResizeMutation);
-    this.reset = this.reset.bind(this);
-    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"]');
-    } else {
-      return [];
-    }
-  }
-
-  onResizeMutation(mutations) {
-    // console.log(mutations);
-    let {
-      childrenList
-    } = this.props;
-
-    for (const mutation of mutations) {
-      if (mutation.type === 'childList') {
-        if (mutation.addedNodes.length) {
-          let newAdded = false;
-          mutation.addedNodes.forEach(mut => {
-            // Here we can listen for icon nodes. Confirm with bk
-            if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
-              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 ??
-          // 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.
-        // this.onResize();
-      }
-    } // mutations.forEach(mutation => {
-    //   if (mutation.target === foo &&
-    //     mutation.attributeName === 'style' &&
-    //     oldWidth !== foo.style.width) {
-    //       foo.textContent = 'Width changed from ' +
-    //         oldWidth + ' to ' + foo.style.width;
-    //       oldWidth = foo.style.width;
-    //   }
-    // });
-
-  }
-
-  componentDidMount() {
-    if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
-      this.tabsObserver.observe(this.props.wrapperDivRef.current);
-      this.tabObserver.observe(this.props.wrapperDivRef.current, {
-        characterData: true,
-        attributes: true,
-        childList: true,
-        subtree: true,
-        attributeFilter: ['data-responsive']
-      });
-    }
-  }
-
-  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, {
-          characterData: true,
-          attributes: true,
-          childList: true,
-          subtree: true,
-          attributeFilter: ['data-responsive']
-        });
-      }
-    }
-  }
-
-  onResize() {
-    // if (this.childrenCurrentList.length !== 0) {
-    this.childrenCurrentList = [];
-    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');
-
-      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)
-
-          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
-
-    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,
-  getData: PropTypes.func,
-  resizeId: PropTypes.number,
-  childrenList: PropTypes.array,
-  wrapperDivRef: PropTypes.any,
-  moreDivRef: PropTypes.any
-};
-ResizeComponent.defaultProps = {
-  getData: () => {},
-  resizeId: null
-};

package/es/v1/Responsive/ResizeObserver.js

@@ -1,140 +0,0 @@
-const hasResizeObserver = !!window.ResizeObserver;
-const mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  let {
-    offsetHeight,
-    offsetWidth
-  } = 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
-
-
-export default class ResizeObserverPolyfill {
-  constructor(onResize) {
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
-    this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
-    this.onResize = onResize;
-    this.targetNode = null;
-    this.size = {
-      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)) {
-
-    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 {
-      this.addEventListeners(targetNode);
-      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();
-    this.targetNode = null;
-    this.size = {
-      height: 0,
-      width: 0
-    };
-  }
-
-}