@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Avatar/Avatar.js

@@ -0,0 +1,189 @@
+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 { defaultProps } from '../../Avatar/props/defaultProps';
+import { propTypes } from '../../Avatar/props/propTypes';
+import { getInitial } from '../../utils/getInitial';
+import AvatarSize from '../../Provider/AvatarSize';
+import style from '../../Avatar/Avatar.module.css';
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+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;
+    let _validImgArr = [...Avatar.validImageURLs];
+    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
+    //   _validImgArr.push(alternateSrc);
+    // }
+
+    const validIndex = _validImgArr.indexOf(src);
+
+    if (validIndex !== -1) {
+      _validImgArr.splice(validIndex, 1);
+    }
+
+    _invalidImgArr.push(src);
+
+    Avatar.invalidImageURLs = _invalidImgArr;
+    Avatar.validImageURLs = _validImgArr;
+    this.setState({
+      isLoaded: !isLoaded
+    });
+  }
+
+  putValidImageURLJSON() {
+    const {
+      src
+    } = this.props;
+    let {
+      isLoaded
+    } = this.state;
+    const validImgArr = Avatar.validImageURLs;
+    const invalidImgArr = Avatar.invalidImageURLs;
+
+    if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
+      let _validImgArr = [...validImgArr];
+
+      _validImgArr.push(src);
+
+      Avatar.validImageURLs = _validImgArr;
+      this.setState({
+        isLoaded: !isLoaded
+      });
+    }
+  }
+  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
+
+
+  getInitialByFullName() {
+    let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    fullName = (fullName || '').trim();
+    let nameList = fullName.split(' ');
+
+    if (nameList.length === 1) {
+      return getInitial('', nameList[0]);
+    }
+
+    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} `
+    })));
+  }
+
+}
+Avatar.defaultProps = defaultProps;
+Avatar.propTypes = propTypes;
+Avatar.invalidImageURLs = [];
+Avatar.validImageURLs = []; // if (__DOCS__) {
+//   Avatar.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -0,0 +1,70 @@
+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 { defaultProps } from '../../AvatarTeam/props/defaultProps';
+import { propTypes } from '../../AvatarTeam/props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from '../../AvatarTeam/AvatarTeam.module.css';
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
+*/
+
+export default function AvatarTeam(props) {
+  const {
+    src,
+    name,
+    size,
+    palette,
+    textPalette,
+    onClick,
+    title,
+    isFilled,
+    dataId,
+    needTitle,
+    customClass,
+    borderOnActive,
+    borderOnHover,
+    dataSelectorId,
+    customProps,
+    needInnerBorder,
+    needBorder,
+    needDefaultBorder
+  } = props;
+  const {
+    AvatarTeamProps = {},
+    AvatarProps = {}
+  } = customProps;
+  const {
+    customAvatar = '',
+    customAvatarTeam = ''
+  } = customClass;
+  const border = borderOnHover || onClick;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+    name: name,
+    onClick: onClick,
+    palette: palette,
+    textPalette: textPalette,
+    size: size,
+    src: src,
+    title: title,
+    needTitle: needTitle,
+    customClass: customAvatar,
+    borderOnActive: borderOnActive,
+    borderOnHover: border,
+    needInnerBorder: needInnerBorder,
+    needBorder: needBorder,
+    needDefaultBorder: needDefaultBorder
+  }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
+    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
+          ${style[`${size}team`]} ${customAvatarTeam}`
+  }));
+}
+AvatarTeam.defaultProps = defaultProps;
+AvatarTeam.propTypes = propTypes;

package/es/v1/Button/Button.js

@@ -0,0 +1,68 @@
+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 { defaultProps } from '../../Button/props/defaultProps';
+import { propTypes } from '../../Button/props/propTypes';
+import cssJSLogic from '../../Button/css/cssJSLogic';
+import { mergeStyle } from '@zohodesk/utils';
+import style from '../../Button/css/Button.module.css';
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
+*/
+
+export default function Button(props) {
+  let {
+    text,
+    disabled,
+    onClick,
+    status,
+    children,
+    dataId,
+    needAppearance,
+    getRef,
+    title,
+    dataSelectorId,
+    customProps,
+    customStyle,
+    a11y,
+    id
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    buttonClass,
+    loaderParentClass,
+    loaderChildClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  let statusLower = status.toLowerCase();
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClass,
+    "data-id": disabled ? `${dataId}_disabled` : dataId,
+    "data-test-id": disabled ? `${dataId}_disabled` : dataId,
+    disabled: disabled || statusLower === 'loading',
+    onClick: onClick,
+    "data-title": title,
+    type: "button",
+    ref: getRef,
+    "data-selector-id": dataSelectorId
+  }, customProps, a11y, {
+    id: id
+  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.overlay
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderParentClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderChildClass
+  }))));
+}
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes; // if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Buttongroup/Buttongroup.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../Buttongroup/props/defaultProps';
+import { propTypes } from '../../Buttongroup/props/propTypes';
+import style from '../../Buttongroup/Buttongroup.module.css';
+export default function Buttongroup(props) {
+  const {
+    children,
+    type,
+    buttonPosition,
+    customClass,
+    dataId,
+    dataSelectorId
+  } = props;
+  const btnGroup = [];
+  children && children.forEach(child => {
+    let btnRight = /*#__PURE__*/React.createElement("span", {
+      className: style[type]
+    }, child);
+    btnGroup.push(btnRight);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style[`align${buttonPosition}`]
+  }, children));
+}
+Buttongroup.defaultProps = defaultProps;
+Buttongroup.propTypes = propTypes;

package/es/v1/Card/Card.js

@@ -0,0 +1,271 @@
+import React, { Component } from 'react';
+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';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Card/Card.module.css';
+/* eslint-disable react/forbid-component-props */
+
+/*
+isscroll header border change use ref
+scroll logic remove from here
+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;
+  }
+
+  getCardHeaderDom(ele) {
+    this.cardHeader = ele;
+  }
+
+  setScrollClassName() {
+    if (!this.cardHeader) {
+      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);
+  }
+
+}
+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);
+  }
+
+}
+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) {
+    let scrollContainerObj = e.currentTarget;
+    let {
+      scrollHeight
+    } = scrollContainerObj;
+    let {
+      scrollTop
+    } = scrollContainerObj;
+    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';
+    } else {
+      this.scrollDirection = 'up';
+    }
+
+    this.lastScrollTop = scrollTop;
+
+    if (fetchData && !this.isFetching) {
+      if (this.scrollDirection === '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;
+          }, () => {
+            this.isFetching = 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;
+          }, () => {
+            this.isFetching = false;
+          });
+        }
+      }
+    }
+
+    if (fetchData && !noNeedUpScroll) {
+      if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
+      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+        scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
+      }
+    } // if (isScrollShadow) {
+    //   this.onSetScroll();
+    // }
+
+  } // setScroll(isScroll) {
+  //   let { isScroll: stateIsScroll } = this.state;
+  //   if (isScroll && !stateIsScroll) {
+  //     this.setState({ isScroll: true }, () => {
+  //       this.onClearScroll();
+  //     });
+  //   } else if (!isScroll && stateIsScroll) {
+  //     this.setState({ isScroll: false });
+  //   }
+  // }
+
+
+  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 child;
+    }));
+  }
+
+}
+Card.propTypes = Card_propTypes;
+Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
+
+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);
+  }
+
+}
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;