@zohodesk/components 1.2.10 → 1.2.11

package/es/Select/props/propTypes.js

@@ -171,7 +171,9 @@ export const GroupSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool
 };
-export const SelectWithAvatar_propTypes = {
+export const SelectWithAvatar_propTypes = { ...Select_propTypes,
+  textBoxClass: PropTypes.string,
+  imageField: PropTypes.string,
   animationStyle: PropTypes.string,
   avatarPalette: PropTypes.string,
   borderColor: PropTypes.oneOf(['transparent', 'default']),

package/es/v1/Accordion/Accordion.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
 import { Accordion_propTypes } from '../../Accordion/props/propTypes';
 export default function Accordion(props) {
@@ -29,7 +30,7 @@ export default function Accordion(props) {
     !disableInternalState && setSelectedItem(selectedItem);
   }
 
-  useEffect(() => {
+  useEffectCallOnlyAfterState(() => {
     if (!disableInternalState) {
       setSelectedItem(propSelectedItem);
     }

package/es/v1/AppContainer/AppContainer.js

@@ -1,6 +1,6 @@
 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, { useEffect, useRef, useLayoutEffect } from 'react';
 import { defaultProps } from '../../AppContainer/props/defaultProps';
 import { propTypes } from '../../AppContainer/props/propTypes';
 import { Container, Box } from '../Layout';
@@ -17,116 +17,99 @@ import '../../common/a11y.module.css';
 import '../../common/boxShadow.module.css';
 import style from '../../AppContainer/AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
-export default class AppContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setTooltipRef = this.setTooltipRef.bind(this);
-    this.handleOver = this.handleOver.bind(this);
-    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
-    this.removeTimeout = this.removeTimeout.bind(this);
-    this.getContainerRef = this.getContainerRef.bind(this);
-    this.timer = null;
-    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
+export default function AppContainer(props) {
+  let {
+    className,
+    children,
+    tagName,
+    dataId,
+    dataSelectorId,
+    tooltipClass,
+    tooltipParentClass,
+    needTooltip,
+    customProps,
+    eleRef
+  } = props;
+  let {
+    ContainerProps = {},
+    TooltipProps = {},
+    ExtraProps = {}
+  } = customProps;
+  const tooltipRef = useRef(null);
+  const containerElement = useRef(null);
+  const timer = useRef(null);
+  const tooltipDebounce = useRef(getLibraryConfig('tooltipDebounce'));
+  useLayoutEffect(() => {
     setLibraryConfig({
-      getTooltipContainer: () => this.containerElement
+      getTooltipContainer: () => containerElement.current
     });
-  }
+  }, []);
 
-  mouseOverDispatch(e) {
-    if (this.tooltipRef) {
-      this.tooltipRef.handleOver(e, this.containerElement);
+  function mouseOverDispatch(e) {
+    if (tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerElement.current);
     }
   }
 
-  removeTimeout() {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
+  function removeTimeout() {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
     }
   }
 
-  handleOver(e) {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
+  function handleOver(e) {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
     }
 
-    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
+    timer.current = setTimeout(() => mouseOverDispatch(e), tooltipDebounce.current);
   }
 
-  getContainerRef(ref) {
-    let {
-      eleRef
-    } = this.props;
-    this.containerElement = ref;
+  function getContainerRef(ref) {
+    containerElement.current = ref;
     eleRef && eleRef(ref);
   }
 
-  setTooltipRef(ref) {
-    this.tooltipRef = ref;
-  }
-
-  componentDidMount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.addEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.observeElement();
-    }
+  function setTooltipRef(ref) {
+    tooltipRef.current = ref;
   }
 
-  componentWillUnmount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.unObserveElement();
-      setLibraryConfig({
-        getTooltipContainer: () => null
-      });
+  useEffect(() => {
+    if (containerElement.current && needTooltip) {
+      containerElement.current.addEventListener('mouseover', handleOver, false);
+      containerElement.current.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
     }
-  }
-
-  render() {
-    let {
-      className,
-      children,
-      tagName,
-      dataId,
-      dataSelectorId,
-      tooltipClass,
-      tooltipParentClass,
-      needTooltip,
-      customProps
-    } = this.props;
-    let {
-      ContainerProps = {},
-      TooltipProps = {},
-      ExtraProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}`,
-      dataId: dataId,
-      dataSelectorId: dataSelectorId,
-      tagName: tagName,
-      eleRef: this.getContainerRef
-    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
-      className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
-      "data-id": `${dataId}_tooltip`,
-      "data-test-id": `${dataId}_tooltip`,
-      "data-selector-id": `${dataSelectorId}_tooltip`
-    }), /*#__PURE__*/React.createElement(Tooltip, _extends({
-      ref: this.setTooltipRef,
-      customClass: tooltipClass
-    }, TooltipProps))) : null);
-  }
-
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (containerElement.current && needTooltip) {
+        containerElement.current.removeEventListener('mouseover', handleOver, false);
+        containerElement.current.addEventListener('mouseout', removeTimeout, false);
+        tooltipRef.current.unObserveElement();
+        setLibraryConfig({
+          getTooltipContainer: () => null
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+    className: `${style.container} ${className}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName,
+    eleRef: getContainerRef
+  }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+    "data-id": `${dataId}_tooltip`,
+    "data-test-id": `${dataId}_tooltip`,
+    "data-selector-id": `${dataSelectorId}_tooltip`
+  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: setTooltipRef,
+    customClass: tooltipClass
+  }, TooltipProps))) : null);
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps; // if (__DOCS__) {

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 = [];