@zohodesk/components 1.2.9 → 1.2.11

package/es/v1/Avatar/Avatar.js

@@ -1,6 +1,7 @@
 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 from 'react';
+import React, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { defaultProps } from '../../Avatar/props/defaultProps';
 import { propTypes } from '../../Avatar/props/propTypes';
 import { getInitial } from '../../utils/getInitial';
@@ -13,40 +14,36 @@ import style from '../../Avatar/Avatar.module.css';
 4. team pass name as lastName and pass pattern via prop
 */
 
-export default class Avatar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isLoaded: false
-    };
-    this.putInvalidImageURLJSON = this.putInvalidImageURLJSON.bind(this);
-    this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
-    this.getInitialByFullName = this.getInitialByFullName.bind(this);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    let {
-      src
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
-
-    if (prevProps.src !== src) {
-      this.setState({
-        isLoaded: !isLoaded
-      });
-    }
-  }
-
-  putInvalidImageURLJSON() {
-    const {
-      src,
-      alternateSrc
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
+function Avatar(props) {
+  let {
+    src,
+    name,
+    size,
+    palette,
+    onClick,
+    title,
+    shape,
+    needTitle,
+    dataId,
+    initial,
+    needBorder,
+    borderOnActive,
+    borderOnHover,
+    textPalette,
+    customClass,
+    alternateSrc,
+    isAnimate,
+    dataSelectorId,
+    customProps,
+    needInnerBorder,
+    needDefaultBorder
+  } = props;
+  let {
+    AvatarProps = {}
+  } = customProps;
+  const [isLoaded, setLoaded] = useState(false);
+
+  const putInvalidImageURLJSON = () => {
     let _validImgArr = [...Avatar.validImageURLs];
     let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
     //   _validImgArr.push(alternateSrc);
@@ -62,18 +59,10 @@ export default class Avatar extends React.Component {
 
     Avatar.invalidImageURLs = _invalidImgArr;
     Avatar.validImageURLs = _validImgArr;
-    this.setState({
-      isLoaded: !isLoaded
-    });
-  }
-
-  putValidImageURLJSON() {
-    const {
-      src
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
+    setLoaded(isLoaded => !isLoaded);
+  };
+
+  const putValidImageURLJSON = () => {
     const validImgArr = Avatar.validImageURLs;
     const invalidImgArr = Avatar.invalidImageURLs;
 
@@ -83,15 +72,13 @@ export default class Avatar extends React.Component {
       _validImgArr.push(src);
 
       Avatar.validImageURLs = _validImgArr;
-      this.setState({
-        isLoaded: !isLoaded
-      });
+      setLoaded(isLoaded => !isLoaded);
     }
-  }
+  };
   /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
 
 
-  getInitialByFullName() {
+  const getInitialByFullName = function () {
     let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     fullName = (fullName || '').trim();
     let nameList = fullName.split(' ');
@@ -101,89 +88,52 @@ export default class Avatar extends React.Component {
     }
 
     return getInitial(nameList[0], nameList[1]);
-  } // componentDidMount() {
-  //   const { src } = this.props;
-  //   const validImgArr = Avatar.validImageURLs;
-  //   if (validImgArr.indexOf(src) === -1) {
-  //     let _validImgArr = [...validImgArr];
-  //     _validImgArr.push(src);
-  //   }
-  // }
-
-
-  render() {
-    let {
-      src,
-      name,
-      size,
-      palette,
-      onClick,
-      title,
-      shape,
-      needTitle,
-      dataId,
-      initial,
-      needBorder,
-      borderOnActive,
-      borderOnHover,
-      textPalette,
-      customClass,
-      alternateSrc,
-      isAnimate,
-      dataSelectorId,
-      customProps,
-      needInnerBorder,
-      needDefaultBorder
-    } = this.props;
-    let {
-      AvatarProps = {}
-    } = customProps;
-    let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
-    let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
-    initial = initial || this.getInitialByFullName(name);
-    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
-
-    let showAvatar = src && !isInvalidImageList;
-    let showInitial = !showAvatar || showAvatar && isInvalidImageList;
-    const showAlternateAvatar = alternateSrc ? showInitial : false;
-    let border = borderOnHover || onClick;
-    let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
-    let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
-    borderStyle = showAlternateAvatar ? '' : borderStyle;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
-      "data-title": needTitle ? title ? title : name : null,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      onClick: onClick,
-      "data-selector-id": dataSelectorId
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
-      className: `${style.initial}`,
-      "data-id": `${dataId}_AvatarInitial`,
-      "data-test-id": `${dataId}_AvatarInitial`,
-      "data-selector-id": `${dataSelectorId}_AvatarInitial`
-    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
-      "data-id": `${dataId}_AvatarImg`,
-      "data-test-id": `${dataId}_AvatarImg`,
-      "data-selector-id": `${dataSelectorId}_AvatarImg`,
-      name: name,
-      onError: this.putInvalidImageURLJSON,
-      onLoad: this.putValidImageURLJSON,
-      src: showAlternateAvatar ? alternateSrc : src,
-      alt: name
-    }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
-    })));
-  }
-
+  };
+
+  useEffectCallOnlyAfterState(() => {
+    setLoaded(isLoaded => !isLoaded);
+  }, [src]);
+  let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
+  let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
+  initial = initial || getInitialByFullName(name);
+  let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+
+  let showAvatar = src && !isInvalidImageList;
+  let showInitial = !showAvatar || showAvatar && isInvalidImageList;
+  const showAlternateAvatar = alternateSrc ? showInitial : false;
+  let border = borderOnHover || onClick;
+  let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+  let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
+  borderStyle = showAlternateAvatar ? '' : borderStyle;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
+    "data-title": needTitle ? title ? title : name : null,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick,
+    "data-selector-id": dataSelectorId
+  }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+    className: `${style.initial}`,
+    "data-id": `${dataId}_AvatarInitial`,
+    "data-test-id": `${dataId}_AvatarInitial`,
+    "data-selector-id": `${dataSelectorId}_AvatarInitial`
+  }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
+    "data-id": `${dataId}_AvatarImg`,
+    "data-test-id": `${dataId}_AvatarImg`,
+    "data-selector-id": `${dataSelectorId}_AvatarImg`,
+    name: name,
+    onError: putInvalidImageURLJSON,
+    onLoad: putValidImageURLJSON,
+    src: showAlternateAvatar ? alternateSrc : src,
+    alt: name
+  }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
+    className: `${style.shadow} ${textStyle} `
+  })));
 }
+
+export default Avatar;
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = []; // if (__DOCS__) {
-//   Avatar.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide'
-//   };
-// }
+Avatar.validImageURLs = [];

package/es/v1/Card/Card.js

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from '../../Card/props/propTypes';
 import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from '../../Card/props/defaultProps';
 import { Container, Box } from '../Layout';
@@ -14,99 +15,97 @@ scroll logic move to virtualizer list
 
 /* performance handling pending in card component moving to ref instead of setState */
 
-export class CardHeader extends Component {
-  constructor(props) {
-    super(props);
-    this.getCardHeaderDom = this.getCardHeaderDom.bind(this);
-    this.cardHeader = null;
+export function CardHeader(props) {
+  let {
+    isScroll,
+    children,
+    dataId,
+    dataSelectorId,
+    customClass
+  } = props;
+  const cardHeader = useRef(null);
+
+  function getCardHeaderDom(ele) {
+    cardHeader.current = ele;
   }
 
-  getCardHeaderDom(ele) {
-    this.cardHeader = ele;
-  }
-
-  setScrollClassName() {
-    if (!this.cardHeader) {
+  function setScrollClassName() {
+    if (!cardHeader.current) {
       return null;
     }
   }
 
-  render() {
-    let {
-      isScroll,
-      children,
-      dataId,
-      dataSelectorId,
-      customClass
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
-      eleRef: this.getCardHeaderDom,
-      dataId: dataId,
-      dataSelectorId: dataSelectorId
-    }, children);
-  }
-
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
+    eleRef: getCardHeaderDom,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
 }
 CardHeader.propTypes = CardHeader_propTypes;
 CardHeader.defaultProps = CardHeader_defaultProps;
-export class CardContent extends Component {
-  render() {
-    let {
-      onScroll,
-      eleRef,
-      children,
-      scroll,
-      isScrollAttribute,
-      dataId,
-      dataSelectorId,
-      shrink,
-      customClass,
-      preventParentScroll
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      onScroll: onScroll,
-      eleRef: eleRef,
-      scroll: scroll,
-      preventParentScroll: preventParentScroll,
-      isScrollAttribute: isScrollAttribute,
-      dataId: dataId,
-      shrink: shrink,
-      className: customClass,
-      dataSelectorId: dataSelectorId
-    }, children);
-  }
-
+export function CardContent(props) {
+  let {
+    onScroll,
+    eleRef,
+    children,
+    scroll,
+    isScrollAttribute,
+    dataId,
+    dataSelectorId,
+    shrink,
+    customClass,
+    preventParentScroll
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    onScroll: onScroll,
+    eleRef: eleRef,
+    scroll: scroll,
+    preventParentScroll: preventParentScroll,
+    isScrollAttribute: isScrollAttribute,
+    dataId: dataId,
+    shrink: shrink,
+    className: customClass,
+    dataSelectorId: dataSelectorId
+  }, children);
 }
 CardContent.propTypes = CardContent_propTypes;
 CardContent.defaultProps = CardContent_defaultProps;
-export default class Card extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isScroll: false
-    };
-    let {
-      from,
-      limit
-    } = props;
-    this.from = from;
-    this.limit = limit;
-    this.to = from + 3 * limit;
-    this.isFetching = false;
-    this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
-    //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.from !== nextProps.from) {
-      this.from = nextProps.from;
-    }
-  }
-
-  onScroll(e) {
+export default function Card(props) {
+  let {
+    onClick,
+    children,
+    isScrollAttribute,
+    dataId,
+    eleRef,
+    customClass = '',
+    htmlId,
+    a11y,
+    from,
+    limit,
+    fetchData,
+    noMoreData,
+    scrollAt,
+    noNeedUpScroll,
+    isPercentageScroll,
+    onScroll
+  } = props;
+  let {
+    role
+  } = a11y;
+  const [isScroll, setScroll] = useState(false);
+  const fromRef = useRef(from);
+  const limitRef = useRef(limit);
+  const to = useRef(from + 3 * limit);
+  const lastScrollTop = useRef(0);
+  const isFetching = useRef(false);
+  const scrollDirection = useRef(null);
+  useEffectCallOnlyAfterState(() => {
+    fromRef.current = from;
+  }, [from]);
+
+  function onCardScroll(e) {
     let scrollContainerObj = e.currentTarget;
     let {
       scrollHeight
@@ -117,56 +116,45 @@ export default class Card extends Component {
     let {
       offsetHeight
     } = scrollContainerObj;
-    let {
-      onScroll
-    } = this.props;
     onScroll && onScroll(e);
-    let {
-      fetchData,
-      noMoreData,
-      scrollAt,
-      noNeedUpScroll,
-      // isScrollShadow,
-      isPercentageScroll
-    } = this.props;
 
-    if (scrollTop > this.lastScrollTop) {
-      this.scrollDirection = 'down';
+    if (scrollTop > lastScrollTop.current) {
+      scrollDirection.current = 'down';
     } else {
-      this.scrollDirection = 'up';
+      scrollDirection.current = 'up';
     }
 
-    this.lastScrollTop = scrollTop;
+    lastScrollTop.current = scrollTop;
 
-    if (fetchData && !this.isFetching) {
-      if (this.scrollDirection === 'down' && !noMoreData) {
+    if (fetchData && !isFetching.current) {
+      if (scrollDirection.current === 'down' && !noMoreData) {
         const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
         const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
 
         if (prefetch) {
-          this.isFetching = true;
-          fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
-            this.to = this.limit + this.to;
-            this.isFetching = false;
+          isFetching.current = true;
+          fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
+            to.current = limitRef.current + to.current;
+            isFetching.current = false;
           }, () => {
-            this.isFetching = false;
+            isFetching.current = false;
           });
         }
       } else {
-        if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
-          this.isFetching = true;
-          fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(() => {
-            this.to = this.to - this.limit;
-            this.isFetching = false;
+        if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
+          isFetching.current = true;
+          fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
+            to.current = to.current - limitRef.current;
+            isFetching.current = false;
           }, () => {
-            this.isFetching = false;
+            isFetching.current = false;
           });
         }
       }
     }
 
     if (fetchData && !noNeedUpScroll) {
-      if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+      if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
       } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
@@ -187,59 +175,40 @@ export default class Card extends Component {
   // }
 
 
-  render() {
-    let {
-      onClick,
-      children,
-      isScrollAttribute,
-      dataId,
-      eleRef,
-      customClass = '',
-      htmlId,
-      a11y
-    } = this.props;
-    let {
-      isScroll
-    } = this.state;
-    let {
-      role
-    } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
-      className: `${customClass}`,
-      isScrollAttribute: isScrollAttribute,
-      onClick: onClick,
-      dataId: dataId,
-      eleRef: eleRef
-    }, React.Children.map(children, child => {
-      if (!child) {
-        return child;
-      }
-
-      if (child.type === CardHeader || this.props.childTypes && child.type === this.props.childTypes.cardHeader) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          isScroll
-        });
-      } else if (child.type === CardContent || this.props.childTypes && child.type === this.props.childTypes.cardContent) {
-        return /*#__PURE__*/React.createElement(Box, {
-          id: htmlId,
-          role: role,
-          flexible: true,
-          scroll: child.props.scroll,
-          preventParentScroll: child.props.preventParentScroll,
-          onScroll: this.onScroll,
-          eleRef: child.props.eleRef,
-          isScrollAttribute: child.props.isScrollAttribute,
-          dataId: child.props.dataId,
-          shrink: child.props.shrink,
-          className: child.props.customClass,
-          dataSelectorId: child.props.dataSelectorId
-        }, child.props.children);
-      }
-
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${customClass}`,
+    isScrollAttribute: isScrollAttribute,
+    onClick: onClick,
+    dataId: dataId,
+    eleRef: eleRef
+  }, React.Children.map(children, child => {
+    if (!child) {
       return child;
-    }));
-  }
+    }
+
+    if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        isScroll
+      });
+    } else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
+      return /*#__PURE__*/React.createElement(Box, {
+        id: htmlId,
+        role: role,
+        flexible: true,
+        scroll: child.props.scroll,
+        preventParentScroll: child.props.preventParentScroll,
+        onScroll: onCardScroll,
+        eleRef: child.props.eleRef,
+        isScrollAttribute: child.props.isScrollAttribute,
+        dataId: child.props.dataId,
+        shrink: child.props.shrink,
+        className: child.props.customClass,
+        dataSelectorId: child.props.dataSelectorId
+      }, child.props.children);
+    }
 
+    return child;
+  }));
 }
 Card.propTypes = Card_propTypes;
 Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
@@ -251,21 +220,18 @@ Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
 //   };
 // }
 
-export class CardFooter extends Component {
-  render() {
-    let {
-      children,
-      dataId,
-      customClass,
-      dataSelectorId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      className: `${customClass}`,
-      dataId: dataId,
-      dataSelectorId: dataSelectorId
-    }, children);
-  }
-
+export function CardFooter(props) {
+  let {
+    children,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${customClass}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
 }
 CardFooter.propTypes = CardFooter_propTypes;
 CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/MultiSelect/MultiSelect.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { MultiSelect_propTypes } from '../../MultiSelect/props/propTypes';
 import { MultiSelect_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from '../../MultiSelect/MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -4,6 +4,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from '../../MultiSelect/props/propTypes';
 import { MultiSelectWithAvatar_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from '../../MultiSelect/MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';