@zohodesk/components 1.0.0-temp-67 → 1.0.0-temp-350

package/es/Radio/docs/Radio__custom.docs.js

@@ -0,0 +1,245 @@
+import React, { Component } from 'react';
+import Radio from '../Radio';
+import styles from '../../common/docStyle.module.css';
+export default class Radio__custom extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.state = {
+      checked: false
+    };
+  }
+
+  onChange() {
+    this.setState({
+      checked: !this.state.checked
+    });
+  }
+
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase',
+      borderTop: '1px solid #e3e6eb'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px 0'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      onChange: this.onChange,
+      checked: this.state.checked
+    })))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled Type Radio Button"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      disabled: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Label With Radio Button"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      text: "ReadOnly With Label"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label",
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      palette: "danger",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      palette: "danger",
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      palette: "danger",
+      text: "ReadOnly With Label"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Size"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      text: "Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      palette: "danger",
+      text: "Danger"
+    }))));
+  }
+
+}
+
+if (false) {
+  Radio__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Radio/docs/Radio__default.docs.js

@@ -0,0 +1,169 @@
+import React, { Component } from 'react';
+import Radio from '../Radio';
+export default class Radio__default extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.state = {
+      checked: false
+    };
+  }
+
+  onChange() {
+    this.setState({
+      checked: !this.state.checked
+    });
+  }
+
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase',
+      borderTop: '1px solid #e3e6eb'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px 0'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      onChange: this.onChange,
+      checked: this.state.checked
+    })))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled Type Radio Button"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: true,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      disabled: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Label With Radio Button"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      text: "ReadOnly With Label"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label",
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      palette: "danger",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      palette: "danger",
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      palette: "danger",
+      text: "ReadOnly With Label"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Size"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: true,
+      text: "Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: true,
+      palette: "danger",
+      text: "Danger"
+    }))));
+  }
+
+}
+
+if (false) {
+  Radio__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

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/Responsive.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes";
 import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
 
 import PropTypes from 'prop-types';