@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

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

package/es/v1/Responsive/Responsive.js

@@ -0,0 +1,194 @@
+import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
+
+import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from '../../Responsive/props/defaultProps';
+import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from '../../Responsive/props/propTypes';
+import ResizeObserver from './ResizeObserver';
+import DOMRefWrapper from './RefWrapper';
+import { windowResizeObserver } from '../../Responsive/windowResizeObserver';
+import { getBreakPointValue, defaultMatcher } from '../../Responsive/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
+
+    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
+
+    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 {
+      breakPoint
+    } = 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 {
+      children,
+      domRefKey,
+      responsiveId
+    } = this.props;
+    let {
+      childContext
+    } = 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;
+      childContext[defaultResponsiveId] = this.state; // NOTE: this for fallback of if responsive receiver id wrong
+    }
+
+    this.childContext = childContext;
+    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+      value: childContext
+    }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
+      domRefKey: domRefKey,
+      ref: this.containerRef
+    }, children));
+  }
+
+}
+ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveSender.contextType = ResponsiveContext;
+ResponsiveSender.propTypes = ResponsiveSender_propTypes;
+export function useResponsiveReceiver() {
+  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
+  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
+  } = data;
+  const childArg = useMemo(() => {
+    const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+    return {
+      breakPoint,
+      isTouchDevice,
+
+      deviceBetween(breakPoint1, breakPoint2) {
+        const width = getWidth();
+
+        if (!width) {
+          return false;
+        } // 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) {
+//   const { breakPoint, methods } = useResponsiveReceiver();
+//   console.log(hiddenSizes);
+//   return hiddenSizes.indexOf(breakPoint) === -1 ? (
+//     <RefWrapper ref={ref}>{children(breakPoint, methods)}</RefWrapper>
+//   ) : null;
+// }
+
+export function ResponsiveReceiver(_ref) {
+  let {
+    children,
+    responsiveId,
+    hiddenSizes,
+    eleRef,
+    domRefKey
+  } = _ref;
+  const data = useResponsiveReceiver(responsiveId);
+  const {
+    breakPoint
+  } = data;
+  const child = children(data);
+  return !hiddenSizes.includes(breakPoint) ? eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {
+    domRefKey: domRefKey,
+    ref: eleRef
+  }, child) : child : null;
+}
+ResponsiveReceiver.defaultProps = { ...ResponsiveReceiver_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveReceiver.propTypes = ResponsiveReceiver_propTypes;

package/es/v1/Responsive/index.js

@@ -0,0 +1,9 @@
+export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
+export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
+export { default as ResizeComponent } from './ResizeComponent'; // let Responsive = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide'
+//   }
+// };
+// export { Responsive };

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -0,0 +1,58 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback } from 'react';
+import { defaultProps } from '../../ResponsiveDropBox/props/defaultProps';
+import { propTypes } from '../../ResponsiveDropBox/props/propTypes';
+import DropBox from '../DropBox/DropBox';
+import { Container } from '../Layout';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import style from '../../ResponsiveDropBox/ResponsiveDropBox.module.css';
+export default function ResponsiveDropBox(props) {
+  const {
+    children,
+    customClass = {},
+    isResponsivePadding,
+    alignBox
+  } = props;
+  const {
+    customDropBox = '',
+    customMobileDropBox = '',
+    customDropBoxWrap = '',
+    customMobileDropBoxWrap = '',
+    customResponsiveContainer = ''
+  } = customClass;
+  const dropBoxClasses = {
+    customDropBox: `${customDropBox}`,
+    customMobileDropBox: `${customMobileDropBox}`,
+    customDropBoxWrap: `${customDropBoxWrap}`,
+    customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
+    customResponsiveContainer: `${customResponsiveContainer}`
+  };
+  const responsiveFunc = useCallback(_ref => {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(DropBox, _extends({}, props, {
+    customClass: dropBoxClasses
+  }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: "Helmet"
+  }, _ref2 => {
+    let {
+      tabletMode
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: alignBox,
+      isCover: false,
+      className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
+    }, children);
+  }));
+}
+ResponsiveDropBox.propTypes = propTypes;
+ResponsiveDropBox.defaultProps = defaultProps;

package/es/v1/Ribbon/Ribbon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defaultProps } from '../../Ribbon/props/defaultProps';
+import { propTypes } from '../../Ribbon/props/propTypes';
+import style from '../../Ribbon/Ribbon.module.css';
+export default function Ribbon(props) {
+  let {
+    type,
+    text,
+    children,
+    palette,
+    size,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
+                ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.after
+  }) : null, children ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, children) : null, /*#__PURE__*/React.createElement("span", {
+    className: style.childText
+  }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.before
+  }) : null);
+}
+Ribbon.propTypes = propTypes;
+Ribbon.defaultProps = defaultProps;

package/es/v1/RippleEffect/RippleEffect.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { defaultProps } from '../../RippleEffect/props/defaultProps';
+import { propTypes } from '../../RippleEffect/props/propTypes';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../RippleEffect/RippleEffect.module.css';
+export default function RippleEffect(props) {
+  let {
+    children,
+    isActive,
+    isDisabled,
+    palette,
+    hoverType,
+    isNeedEffect,
+    needBorder,
+    isCopyTextEnabled
+  } = props;
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let child = React.Children.only(children);
+  return /*#__PURE__*/React.cloneElement(child, {
+    className: `${child.props.className || ''} ${className}`
+  });
+}
+RippleEffect.defaultProps = defaultProps;
+RippleEffect.propTypes = propTypes;