@zohodesk/components 1.0.0-temp-610 → 1.0.0-temp-352

package/es/Responsive/ResizeComponent.js

@@ -13,13 +13,32 @@ export default class ResizeComponent extends React.Component {
     this.childrenCurrentList = [];
     this.widthCheck = debounce(this.widthCheck.bind(this), 10); // this.widthCheck = this.widthCheck.bind(this);
 
-    this.onResize = this.onResize.bind(this);
+    this.onResize = debounce(this.onResize.bind(this), 500);
     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);
+    this.onAnimationStart = this.onAnimationStart.bind(this);
+    this.onAnimationEnd = this.onAnimationEnd.bind(this);
+    this.isAnimating = false;
+    this.state = {
+      responsiveHook: true,
+      validListCount: this.props.childrenList ? this.props.childrenList.length : 0
+    };
+  }
+
+  onAnimationStart(e) {
+    if (this.props.wrapperDivRef.current === e.target) {
+      this.isAnimating = true;
+    }
+  }
+
+  onAnimationEnd(e) {
+    if (this.props.wrapperDivRef.current === e.target) {
+      this.isAnimating = false;
+    }
   }
 
   querySelector() {
@@ -72,6 +91,8 @@ export default class ResizeComponent extends React.Component {
 
   componentDidMount() {
     if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
+      this.props.wrapperDivRef.current.addEventListener('animationstart', this.onAnimationStart, false);
+      this.props.wrapperDivRef.current.addEventListener('animationend', this.onAnimationEnd, false);
       this.tabsObserver.observe(this.props.wrapperDivRef.current);
       this.tabObserver.observe(this.props.wrapperDivRef.current, {
         characterData: true,
@@ -91,10 +112,16 @@ export default class ResizeComponent extends React.Component {
     this.childrenCurrentList = [];
     this.tabsObserver.disconnect();
     this.tabObserver && this.tabObserver.disconnect();
+    this.props.wrapperDivRef.current.removeEventListener('animationstart', this.onAnimationStart);
+    this.props.wrapperDivRef.current.removeEventListener('animationend', this.onAnimationEnd);
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.childrenCurrentList.length === 0) {
+  componentDidUpdate(prevProps, prevState) {
+    // if (this.childrenCurrentList.length === 0) {
+    //   this.childrenCurrentList = this.querySelector();
+    //   this.widthCheck();
+    // }
+    if (this.state.responsiveHook !== prevState.responsiveHook && !this.state.responsiveHook) {
       this.childrenCurrentList = this.querySelector();
       this.widthCheck();
     }
@@ -116,10 +143,24 @@ export default class ResizeComponent extends React.Component {
     }
   }
 
-  onResize() {
-    // if (this.childrenCurrentList.length !== 0) {
-    this.childrenCurrentList = [];
-    this.constructChildren(0, false); //}
+  onResize(size) {
+    if (size) {
+      window.requestAnimationFrame(() => {
+        if (this.height !== size.height || this.width !== size.width && !this.isAnimating) {
+          this.height = size.height;
+          this.width = size.width;
+          this.childrenCurrentList = [];
+          this.constructChildren(0, false);
+        }
+      });
+    } else {
+      this.childrenCurrentList = [];
+      this.constructChildren(0, false);
+    } // if (this.childrenCurrentList.length !== 0) {
+    // this.childrenCurrentList = [];
+    // this.constructChildren(0, false); 
+    //}
+
   } // shouldComponentUpdate() {
   //   return this.childrenCurrentList.length === 0
   // }
@@ -152,6 +193,11 @@ export default class ResizeComponent extends React.Component {
 
           if (totalWidth <= _childrenTotalWidth) {
             dataCount = i;
+
+            if (dataCount == 0) {
+              this.noSpaceForChildren = true;
+            }
+
             break;
           }
         }
@@ -167,31 +213,40 @@ export default class ResizeComponent extends React.Component {
     let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let responsive = arguments.length > 1 ? arguments[1] : undefined;
     const {
-      childrenList,
-      getData
+      childrenList
     } = 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
+    // let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    // let responsive = arguments.length > 1 ? arguments[1] : undefined;
+    //let isResize = arguments.length > 2 ? arguments[2] : false;
 
-    dataCount = dataCount || childrenList && childrenList.length;
-    getData({
+    dataCount = dataCount || childrenList && childrenList.length; // dataCount = responsive ? dataCount : dataCount || (childrenList && childrenList.length);
+    //dataCount = !isResize ? dataCount : dataCount || (childrenList && childrenList.length);
+
+    this.setState({
       responsiveHook: responsive,
       validListCount: this.noSpaceForChildren ? 0 : dataCount
     });
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
+    let {
+      responsiveHook,
+      validListCount
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children({
+      responsiveHook,
+      validListCount
+    }));
   }
 
 }
 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/Responsive/docs/Responsive__Custom.docs.js

@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { ResponsiveSender, ResponsiveReceiver } from '../CustomResponsive';
+import { Container, Box } from '../../Layout';
+import Radio from '../../Radio/Radio'; // eslint-disable-next-line css-modules/no-unused-class
+
+import style from './style.module.css'; // eslint-disable-next-line react/prop-types
+
+function WindowSizeBar(_ref) {
+  let {
+    isTouchDevice
+  } = _ref;
+  let [{
+    windowWidth,
+    windowHeight
+  }, setState] = useState({
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight
+  });
+  useEffect(() => {
+    function handler() {
+      setState({
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
+      });
+    }
+
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    className: style.header
+  }, ` Width: ${windowWidth} * Height: ${windowHeight} * isTouchDevice: ${isTouchDevice} `);
+} // eslint-disable-next-line camelcase
+
+
+export default class Responsive__Custom extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      method: 'orFunction'
+    };
+    this.customQuery = this.customQuery.bind(this);
+    this.handleMethodChange = this.handleMethodChange.bind(this);
+    this.switchToAnd = this.handleMethodChange.bind(this, 'AndFunction');
+    this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
+  }
+
+  customQuery(_ref2) {
+    let {
+      mediaQueryOR,
+      mediaQueryAND,
+      isTouchDevice
+    } = _ref2;
+    const {
+      method
+    } = this.state;
+    return {
+      isTouchDevice,
+      isQureyMatched: method === 'orFunction' ? mediaQueryOR([{
+        minHeight: 700,
+        maxHeight: 800
+      }, {
+        minWidth: 700,
+        maxWidth: 800
+      } // {
+      //   minWidth: 700
+      // },
+      // {
+      //   minHeight: 700
+      // }
+      // {
+      //   minHeight: 700,
+      //   minWidth: 700
+      // },
+      // {
+      //   maxHeight: 600,
+      //   maxWidth: 600
+      // }
+      // {
+      //   minHeight: 700,
+      //   maxHeight: 800,
+      //   minWidth: 700,
+      //   maxWidth: 800
+      // }
+      // {
+      //   minWidth: 700,
+      //   minHeight: 700
+      // }
+      // {
+      //   minWidth: 700,
+      //   minHeight: 700,
+      //   maxHeight: 800
+      // }
+      // {
+      //   minWidth: 700,
+      //   maxWidth: 800,
+      //   minHeight: 700,
+      //   maxHeight: 800
+      // }
+      ]) : method === 'AndFunction' ? mediaQueryAND([{
+        minHeight: 700,
+        maxHeight: 800
+      }, {
+        minWidth: 700,
+        maxWidth: 800
+      } // {
+      //   minWidth: 700
+      // },
+      // {
+      //   minHeight: 700
+      // }
+      // {
+      //   minHeight: 700,
+      //   minWidth: 700
+      // },
+      // {
+      //   maxHeight: 600,
+      //   maxWidth: 600
+      // }
+      // {
+      //   minHeight: 700,
+      //   maxHeight: 800,
+      //   minWidth: 700,
+      //   maxWidth: 800
+      // }
+      // {
+      //   minWidth: 700,
+      //   minHeight: 700
+      // }
+      // {
+      //   minWidth: 700,
+      //   minHeight: 700,
+      //   maxHeight: 800
+      // }
+      // {
+      //   minWidth: 700,
+      //   maxWidth: 800,
+      //   minHeight: 700,
+      //   maxHeight: 800
+      // }
+      ]) : ''
+    };
+  }
+
+  handleMethodChange(value) {
+    this.setState({
+      method: value
+    });
+  }
+
+  render() {
+    let {
+      method
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.customQuery
+    }, _ref3 => {
+      let {
+        isQureyMatched,
+        isTouchDevice
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
+        isTouchDevice: isTouchDevice
+      }), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        align: "vertical",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Radio, {
+        text: "AND Function",
+        onChange: this.switchToAnd,
+        name: "AndFunction",
+        checked: method === 'AndFunction'
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          margin: '20px'
+        }
+      }, /*#__PURE__*/React.createElement(Radio, {
+        text: "OR Function",
+        onChange: this.switchToOr,
+        name: "orFunction",
+        checked: method === 'orFunction'
+      }))), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        align: "both",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
+      }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
+    })));
+  }
+
+}
+
+if (false) {
+  // eslint-disable-next-line camelcase
+  Responsive__Custom.docs = {
+    componentGroup: 'Layout',
+    folderName: 'Style Guide'
+  };
+}

package/es/Responsive/docs/Responsive__default.docs.js

@@ -0,0 +1,97 @@
+/* eslint-disable camelcase */
+
+/* eslint-disable react/forbid-component-props */
+// Example1.js
+import React from 'react';
+import { ResponsiveReceiver } from '..';
+import { Container, Box } from '../../Layout';
+import style from './style.module.css';
+export default class Responsive__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
+      let {
+        breakPoint,
+        deviceUpto,
+        deviceBetween,
+        deviceOnly,
+        isTouchDevice
+      } = _ref;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+        className: style.header
+      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
+      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
+      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
+      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
+      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
+      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
+      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
+      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
+      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
+      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
+      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
+      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
+      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
+      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
+      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
+      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
+      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
+      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
+      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
+      }, "MOBILE"))));
+    }));
+  }
+
+}
+
+if (false) {
+  Responsive__default.docs = {
+    componentGroup: 'Layout',
+    folderName: 'Style Guide'
+  };
+}

package/es/Responsive/docs/style.module.css

@@ -0,0 +1,47 @@
+.header{
+  background-color: #c60000;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 24px;
+  padding: 10px;
+  text-align: center;
+  margin: 10px 6px;
+}
+.box{
+  height: 80px;
+  background-color: #ffbb11;
+  text-align: center;
+  line-height: 80px;
+  min-width: 300px;
+  margin:6px;
+  padding: 0 100x;
+}
+.selected{
+  background-color: #60de55
+}
+.subHeading{
+  text-align: center;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  background-color: #fff
+}
+
+/* ---layout css--- */
+.contentBar{
+  height: 20px;
+  background-color: rgb(142, 156, 169);
+  margin: 6px 10px
+}
+.wrapper{
+  position: absolute;
+  width: 60%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  left: 50%;
+  border: 1px solid #aaa;
+  border-radius: 4px
+}
+.avatar{
+  margin:20px auto
+}

package/es/{ResponsiveDropbox/ResponsiveDropbox.js → ResponsiveDropBox/ResponsiveDropBox.js}

@@ -3,10 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DropBox from '../DropBox/DropBox';
-import { Container, Box } from '../Layout';
+import { Container } from '../Layout';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-import style from './ResponsiveDropbox.module.css';
-export default class ResponsiveDropbox extends Component {
+import style from './ResponsiveDropBox.module.css';
+export default class ResponsiveDropBox extends Component {
   constructor(props) {
     super(props);
     this.responsiveFunc = this.responsiveFunc.bind(this);
@@ -62,13 +62,13 @@ export default class ResponsiveDropbox extends Component {
   }
 
 }
-ResponsiveDropbox.propTypes = {
+ResponsiveDropBox.propTypes = {
   children: PropTypes.element,
   customClass: PropTypes.object,
   isResponsivePadding: PropTypes.bool,
   alignBox: PropTypes.oneOf(['column', 'row'])
 };
-ResponsiveDropbox.defaultProps = {
+ResponsiveDropBox.defaultProps = {
   isResponsivePadding: false,
   alignBox: 'column'
 };