@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/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 "./props/defaultProps";
+import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from "./props/propTypes";
+import ResizeObserver from "./ResizeObserver";
+import DOMRefWrapper from "./RefWrapper";
+import { windowResizeObserver } from "./windowResizeObserver";
+import { getBreakPointValue, defaultMatcher } from "./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/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/Responsive/props/defaultProps.js

@@ -0,0 +1,13 @@
+export const CustomResponsiveSender_defaultProps = {
+  domRefKey: 'eleRef'
+};
+export const CustomResponsiveReceiver_defaultProps = {
+  domRefKey: 'eleRef'
+};
+export const ResponsiveSender_defaultProps = {
+  domRefKey: 'eleRef'
+};
+export const ResponsiveReceiver_defaultProps = {
+  domRefKey: 'eleRef',
+  hiddenSizes: []
+};

package/es/Responsive/props/propTypes.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+export const CustomResponsiveSender_propTypes = {
+  children: PropTypes.any.isRequired,
+  domRefKey: PropTypes.string,
+  responsiveId: PropTypes.string
+};
+export const CustomResponsiveReceiver_propTypes = {
+  children: PropTypes.func,
+  domRefKey: PropTypes.string,
+  eleRef: PropTypes.func,
+  query: PropTypes.func,
+  responsiveId: PropTypes.string
+};
+export const ResponsiveSender_propTypes = {
+  children: PropTypes.any.isRequired,
+  domRefKey: PropTypes.string,
+  responsiveId: PropTypes.string
+};
+export const ResponsiveReceiver_propTypes = {
+  children: PropTypes.func,
+  domRefKey: PropTypes.string,
+  eleRef: PropTypes.func,
+  hiddenSizes: PropTypes.array,
+  responsiveId: PropTypes.string
+};

package/es/Responsive/sizeObservers.js

@@ -0,0 +1,141 @@
+const breakPointKeys = {
+  minHeight: true,
+  maxHeight: true,
+  minWidth: true,
+  maxWidth: true
+};
+
+function isValideBreakPoint(breakPoint) {
+  return Object.keys(breakPoint).every(key => breakPointKeys[key]);
+}
+
+function rangeCheck(minValue, maxValue, screenValue) {
+  if (minValue === undefined) {
+    if (maxValue === undefined) {
+      return undefined;
+    }
+
+    return maxValue >= screenValue;
+  }
+
+  if (maxValue === undefined) {
+    return minValue <= screenValue;
+  }
+
+  return minValue <= screenValue && maxValue >= screenValue;
+}
+
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+export const isTouchDevice = isTouchDeviceFunc();
+export function isBreackPointMatched(object, screen) {
+  if (!isValideBreakPoint(object)) {
+    // eslint-disable-next-line no-console
+    console.error('only minHeight,maxHeight,minWidth,maxWidth these keys are allowed, your object', JSON.stringify(object)); // return;
+  }
+
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = screen;
+  let {
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = object;
+  let isWidth = rangeCheck(minWidth, maxWidth, screenWidth);
+  let isHeight = rangeCheck(minHeight, maxHeight, screenHeight);
+  return {
+    isHeight,
+    isWidth
+  };
+}
+export class Subscribale {
+  constructor() {
+    this.subscribers = [];
+  }
+
+  connect() {}
+
+  disconnect() {}
+
+  subscribe(func) {
+    this.subscribers.length && this.connect();
+    this.subscribers.push(func);
+  }
+
+  unsubscribe(func) {
+    this.subscribers = this.subscribers.filter(s => s !== func);
+    this.subscribers.length && this.disconnect();
+  }
+
+  dispatch() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    this.subscribers.forEach(subscriber => {
+      subscriber(...args);
+    });
+  }
+
+}
+
+class InitSubscribale extends Subscribale {
+  // must be OverWrite
+  connect() {} // must be OverWrite
+
+
+  disconnect() {}
+
+  subscribe(func) {
+    !this.subscribers.length && this.connect();
+    super.subscribe(func);
+  }
+
+  unsubscribe(func) {
+    super.unsubscribe(func);
+    !this.subscribers.length && this.disconnect();
+  }
+
+}
+
+export const windowResizeObserver = (() => {
+  const subscribaleInstance = new InitSubscribale();
+  let size = {
+    heigth: window.innerHeight,
+    width: window.innerWidth
+  };
+
+  function handleResize() {
+    const newSize = {
+      height: window.innerHeight,
+      width: window.innerWidth
+    };
+    size = newSize;
+    subscribaleInstance.dispatch(newSize);
+  }
+
+  function addResizeListener() {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+  }
+
+  function removeResizeListener() {
+    window.removeEventListener('resize', handleResize);
+  }
+
+  subscribaleInstance.connect = addResizeListener;
+  subscribaleInstance.disconnect = removeResizeListener;
+  return {
+    getSize: () => size,
+    resize: subscribaleInstance,
+    isParentSize: true
+  };
+})();

package/es/Responsive/utils/index.js

@@ -0,0 +1,52 @@
+import { getHTMLFontSize } from "../../utils/getHTMLFontSize";
+export const breakPoints = {
+  // common break points
+  MOBILE: 30,
+  //480
+  TABLET_S: 40,
+  //640
+  TABLET: 48,
+  //768
+  LAPTOP_S: 64,
+  //1024
+  LAPTOP: 90,
+  //1440
+  // other break points
+  MOBILE_XS: 20,
+  //320
+  MOBILE_S: 22.5,
+  //360
+  MOBILE_M: 23.44,
+  //375
+  TABLET_M: 45,
+  //720
+  LAPTOP_M: 80,
+  //1280
+  MONITOR_M: 100,
+  //1600
+  MONITOR: 120 //1920
+
+};
+export function getBreakPointValue(breakPoint) {
+  return breakPoints[breakPoint] * getHTMLFontSize(); // return breakPoints[breakPoint] * 16;
+}
+export const sortedBreackPointKey = Object.keys(breakPoints).sort((a, b) => breakPoints[a] - breakPoints[b]);
+export function defaultMatcher(size) {
+  let currentSize = '';
+
+  if (!size) {
+    return currentSize;
+  }
+
+  let key;
+
+  for (let i = 0; i < sortedBreackPointKey.length; i++) {
+    key = sortedBreackPointKey[i];
+
+    if (getBreakPointValue(key) >= size.width) {
+      break;
+    }
+  }
+
+  return key;
+}

package/es/Responsive/utils/shallowCompare.js

@@ -0,0 +1,28 @@
+function isSame(a, b) {
+  return a === b;
+}
+
+const {
+  hasOwnProperty
+} = Object.prototype;
+export default function shallowCompare(objA, objB) {
+  if (objA && objB && typeof objA === 'object' && typeof objB === 'object') {
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    } // Test for A's keys different from B.
+
+
+    for (let key of keysA) {
+      if (!hasOwnProperty.call(objB, key) || !isSame(objA[key], objB[key])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  return isSame(objA, objB);
+}

package/es/Responsive/windowResizeObserver.js

@@ -0,0 +1,51 @@
+import { defaultMatcher } from "./utils/";
+export const windowResizeObserver = (() => {
+  let listeners = [];
+  let size = {
+    height: 0,
+    width: 0
+  };
+  let breackPoint = null;
+
+  function handleResize() {
+    const newSize = {
+      height: window.innerHeight,
+      width: window.innerWidth
+    };
+    size = newSize;
+    const newBreackPoint = defaultMatcher(size);
+
+    if (newBreackPoint !== breackPoint) {
+      breackPoint = newBreackPoint;
+      listeners.forEach(listener => listener(newBreackPoint));
+    }
+  }
+
+  function addResizeListener() {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+  }
+
+  function removeResizeListener() {
+    window.removeEventListener('resize', handleResize);
+  }
+
+  return {
+    observe: function (listener) {
+      listeners.push(listener);
+      listener.length === 1 && addResizeListener();
+    },
+
+    getBreackPoint() {
+      return breackPoint;
+    },
+
+    getSize: function () {
+      return size;
+    },
+    unobserve: function (listener) {
+      listeners = listeners.filter(l => l !== listener);
+      listener.length === 0 && removeResizeListener();
+    }
+  };
+})();

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -0,0 +1,67 @@
+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, { Component } from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import DropBox from "../DropBox/DropBox";
+import { Container } from "../Layout";
+import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+import style from "./ResponsiveDropBox.module.css";
+export default class ResponsiveDropBox extends Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  render() {
+    const {
+      children,
+      customClass = {},
+      isResponsivePadding,
+      alignBox
+    } = this.props;
+    const {
+      customDropBox = '',
+      customMobileDropBox = '',
+      customDropBoxWrap = '',
+      customMobileDropBoxWrap = '',
+      customResponsiveContainer = ''
+    } = customClass;
+    const dropBoxClasses = {
+      customDropBox: `${customDropBox}`,
+      customMobileDropBox: `${customMobileDropBox}`,
+      customDropBoxWrap: `${customDropBoxWrap}`,
+      customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
+      customResponsiveContainer: `${customResponsiveContainer}`
+    };
+    return /*#__PURE__*/React.createElement(DropBox, _extends({}, this.props, {
+      customClass: dropBoxClasses
+    }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.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/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -0,0 +1,6 @@
+.dropBoxContainer {
+  max-height: 70vh ;
+}
+.boxPadding{
+  padding-bottom: var(--zd_size10) ;
+}

package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ResponsiveDropBox from "../ResponsiveDropBox";
+describe('ResponsiveDropBox', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ResponsiveDropBox, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResponsiveDropBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="main hidden container bottomStart default"
+    data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+    dot-ui-element="dropbox"
+  >
+    <div
+      class="subContainer shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="arrowPosition"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+      <div
+        class="flex coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ResponsiveDropBox/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  isResponsivePadding: false,
+  alignBox: 'column'
+};

package/es/ResponsiveDropBox/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import { DropBoxPropTypes } from "./../../DropBox/props/propTypes";
+export const propTypes = { ...DropBoxPropTypes,
+  children: PropTypes.element,
+  customClass: PropTypes.object,
+  isResponsivePadding: PropTypes.bool,
+  alignBox: PropTypes.oneOf(['column', 'row'])
+};