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

package/es/v1/Provider/NumberGenerator/NumberGenerator.js

@@ -1,136 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-export function addGlobalId(globalId) {
-  if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) + 1)) {
-    globalId = Number(globalId) + 1;
-  } else {
-    globalId = `${globalId}1`;
-  }
-
-  return globalId;
-}
-
-function decreaseGlobalId(number, globalId) {
-  if (`${number}` == `${globalId}`) {
-    if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) - 1)) {
-      globalId = Number(globalId) - 1;
-    } else {
-      globalId = `${globalId}`;
-      globalId = globalId.substring(0, globalId.length - 1);
-    }
-
-    return {
-      isDeleted: true,
-      globalId
-    };
-  }
-
-  return {
-    isDeleted: false,
-    globalId
-  };
-}
-
-export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
-  deletedIndexes = [...deletedIndexes];
-  [...numbers].reverse().map(number => {
-    let result = decreaseGlobalId(number, globalId);
-    globalId = result.globalId;
-    !result.isDeleted && deletedIndexes.push(number);
-  });
-
-  for (; deletedIndexes.indexOf(globalId) != -1;) {
-    let presentHighValue = globalId;
-    let result = decreaseGlobalId(globalId, globalId);
-    globalId = result.globalId;
-    deletedIndexes = deletedIndexes.filter(ele => `${ele}` != `${presentHighValue}`);
-  }
-
-  return {
-    globalId,
-    deletedIndexes
-  };
-}
-export function useNumberGenerator(_ref) {
-  let {
-    getGlobalId,
-    prefix,
-    getGlobalPrefix,
-    getDeletedIndexes,
-    callback
-  } = _ref;
-  let presentValues = useRef([]),
-      presentIndex = useRef(0);
-  prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
-  let globalPrefix = typeof getGlobalPrefix() === 'undefined' ? '' : `${getGlobalPrefix()}_`;
-
-  function getNextId() {
-    presentIndex.current = presentIndex.current + 1;
-    let currentIndex = presentIndex.current;
-    let isValuePresent = typeof presentValues.current[currentIndex] !== 'undefined';
-    let result = isValuePresent ? presentValues.current[currentIndex] : presentValues.current[currentIndex] = addGlobalId(getGlobalId());
-    !isValuePresent && callback({
-      globalId: result,
-      deletedIndexes: getDeletedIndexes()
-    });
-    return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
-  }
-
-  useEffect(() => {
-    presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
-  });
-  useEffect(() => () => {
-    callback(decreaseGlobalIds(presentValues.current, getDeletedIndexes(), getGlobalId()));
-  }, []);
-  presentIndex.current = -1;
-  return getNextId;
-}
-export function getNumberGenerators(_ref2) {
-  let {
-    Component,
-    prefix,
-    getGlobalPrefix,
-    getGlobalId,
-    getDeletedIndexes,
-    callback
-  } = _ref2;
-  let presentIndex = 0,
-      presentValues = [],
-      {
-    name
-  } = Component.props;
-  let didUpdateRef = Component.componentDidUpdate ? Component.componentDidUpdate.bind(Component) : undefined,
-      renderRef = Component.render.bind(Component),
-      willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
-  prefix = typeof prefix !== 'undefined' ? `${prefix}_` : '';
-
-  Component.componentDidUpdate = function () {
-    didUpdateRef && didUpdateRef(...arguments);
-    presentValues = presentValues.filter((value, index) => index <= presentIndex);
-  };
-
-  Component.componentWillUnmount = function () {
-    callback(decreaseGlobalIds(presentValues, getDeletedIndexes(), getGlobalId()));
-    willUnMountRef && willUnMountRef();
-    didUpdateRef = null, renderRef = null, willUnMountRef = null;
-  };
-
-  Component.render = function () {
-    presentIndex = -1;
-    return renderRef();
-  };
-
-  function getNextId() {
-    presentIndex += 1;
-    let isValuePresent = typeof presentValues[presentIndex] !== 'undefined';
-    let result = isValuePresent ? presentValues[presentIndex] : presentValues[presentIndex] = addGlobalId(getGlobalId(getGlobalId()));
-    let globalPrefix = getGlobalPrefix();
-    globalPrefix = typeof globalPrefix === 'undefined' ? '' : `${globalPrefix}_`;
-    !isValuePresent && callback({
-      globalId: result,
-      deletedIndexes: getDeletedIndexes()
-    });
-    return `${globalPrefix}${prefix}${result}`;
-  }
-
-  return getNextId;
-}

package/es/v1/Provider/ZindexProvider.js

@@ -1,57 +0,0 @@
-import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
-import { getLibraryConfig } from './Config';
-let globalId = getLibraryConfig('zindexCounter'),
-    deletedIndexes = [],
-    globalPrefix;
-export function removeGlobalZIndexPrefix() {
-  globalPrefix = undefined;
-}
-
-function getGlobalZIndexPrefix() {
-  return globalPrefix;
-}
-
-export function setInitialZIndex(id) {
-  globalId = id;
-}
-
-function getGlobalId() {
-  return globalId;
-}
-
-function setDeletedIndexes(array) {
-  deletedIndexes = array;
-}
-
-function getDeletedIndexes() {
-  return deletedIndexes;
-}
-
-function callback(_ref) {
-  let {
-    globalId,
-    deletedIndexes
-  } = _ref;
-  setInitialZIndex(globalId);
-  setDeletedIndexes(deletedIndexes);
-}
-
-export function useZIndex(prefix) {
-  return useNumberGenerator({
-    getGlobalId,
-    prefix,
-    getGlobalPrefix: getGlobalZIndexPrefix,
-    getDeletedIndexes,
-    callback
-  });
-}
-export function getZIndex(Component, prefix) {
-  return getNumberGenerators({
-    Component,
-    prefix,
-    getGlobalPrefix: getGlobalZIndexPrefix,
-    getGlobalId,
-    getDeletedIndexes,
-    callback
-  });
-}

package/es/v1/Provider/index.js

@@ -1,4 +0,0 @@
-export { getLibraryConfig, setLibraryConfig } from './Config';
-export { default as LibraryContextProvider } from './LibraryContext';
-export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
-export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';

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