@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Radio/Radio.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { defaultProps } from '../../Radio/props/defaultProps';
+import { propTypes } from '../../Radio/props/propTypes';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import style from '../../Radio/Radio.module.css';
+
+const Radio = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    palette,
+    disabledTitle,
+    title,
+    text,
+    labelPalette,
+    size,
+    labelSize,
+    variant,
+    active,
+    isFilled,
+    customClass,
+    a11y
+  } = props;
+  let {
+    customRadioWrap = '',
+    customRadio = '',
+    customLabel = ''
+  } = customClass;
+  let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+  let toolTip = disabled ? disabledTitle : title ? title : null;
+  let {
+    ariaHidden,
+    role = 'radio',
+    ariaChecked = checked,
+    ariaLabel,
+    ariaLabelledby,
+    ariaReadonly = isReadOnly || disabled ? true : false
+  } = a11y;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(value, e);
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: value ? value.toLowerCase() : 'RadioComp',
+    isCover: false,
+    isInline: text ? false : true,
+    alignBox: "row",
+    align: "both",
+    className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+    "data-title": toolTip,
+    onClick: !isReadOnly && !disabled ? onChange : '',
+    "aria-checked": ariaChecked,
+    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    role: role,
+    "aria-Hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": ariaReadonly
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
+          ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    name: name,
+    value: value
+  }), /*#__PURE__*/React.createElement("label", {
+    className: `${style.radioLabel} ${accessMode}`
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "19",
+    className: `${style.rdBox}`
+  }), checked ? /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "11.03",
+    className: `${style.centerPath}`
+  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.text
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: disabled ? 'disable' : labelPalette,
+    size: labelSize,
+    type: "title",
+    clipped: true,
+    dataId: `${text}_label`,
+    variant: variant,
+    title: toolTip ? toolTip : text,
+    customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
+            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
+  })));
+};
+
+export default Radio;
+Radio.defaultProps = defaultProps;
+Radio.propTypes = propTypes; // if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Responsive/CustomResponsive.js

@@ -0,0 +1,195 @@
+import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
+import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from '../../Responsive/props/defaultProps';
+import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from '../../Responsive/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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,197 @@
+/* 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

@@ -0,0 +1,140 @@
+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
+    };
+  }
+
+}