@zohodesk/components 1.0.0-temp-199.23 → 1.0.0-temp-199.25

package/es/AppContainer/AppContainer.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
-import '@zohodesk/variables/assets/colorVariables.module.css';
-import '@zohodesk/variables/assets/dotVariables.module.css';
-import '@zohodesk/variables/assets/sizeVariables.module.css';
-import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/es/fontFamilyVariables.module.css';
-import '@zohodesk/variables/es/fontWeightVariables.module.css';
-import '@zohodesk/variables/assets/transitionVariables.module.css';
-import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./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');
-    setLibraryConfig({
-      getTooltipContainer: () => this.containerElement
-    });
-  }
-
-  mouseOverDispatch(e) {
-    if (this.tooltipRef) {
-      this.tooltipRef.handleOver(e, this.containerElement);
-    }
-  }
-
-  removeTimeout() {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
-    }
-  }
-
-  handleOver(e) {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
-    }
-
-    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
-  }
-
-  getContainerRef(ref) {
-    let {
-      eleRef
-    } = this.props;
-    this.containerElement = 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();
-    }
-  }
-
-  componentWillUnmount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.unObserveElement();
-    }
-
-    setLibraryConfig({
-      getTooltipContainer: () => null
-    });
-  }
-
-  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, {
-      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", { ...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, {
-      ref: this.setTooltipRef,
-      customClass: tooltipClass,
-      ...TooltipProps
-    })) : null);
-  }
-
-}
-AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/AppContainer/AppContainer.module.css

@@ -1,19 +0,0 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container, .container button, .container input, .container textarea ,.container select {
-  /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
-}
-.tooltip {
-  height: 0 ;
-  font-size: 0 ;
-  /* contain:strict */
-}

package/es/AppContainer/__tests__/AppContainer.spec.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AppContainer from "../AppContainer.js";
-describe('AppContainer', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the customClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      className: "AppcontainerClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the needTooltip is false', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      needTooltip: false
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the tooltipClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      tooltipClass: "customTooltipClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the tooltipParentClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      tooltipParentClass: "tooltipParentClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the Custom props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      customProps: {
-        ExtraProps: {
-          'data-props': true
-        },
-        ContainerProps: {
-          'data-container': true
-        }
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('eleRef prop is a function', () => {
-    const mockEleRef = jest.fn();
-    render( /*#__PURE__*/React.createElement(AppContainer, {
-      eleRef: mockEleRef
-    }));
-    expect(mockEleRef).toHaveBeenCalled();
-  });
-  test('rendering the childern as element', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", null, "Children")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the childern as element in array', () => {
-    const children = [/*#__PURE__*/React.createElement("div", {
-      key: "child1"
-    }, "Child 1"), /*#__PURE__*/React.createElement("span", {
-      key: "child2"
-    }, "Child 2")];
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, children));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap

@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppContainer rendering the Custom props 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-container="true"
-    data-id="AppContainer"
-    data-props="true"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-props="true"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the childern as element 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div>
-        Children
-      </div>
-    </div>
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the childern as element in array 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div>
-        Child 1
-      </div>
-      <span>
-        Child 2
-      </span>
-    </div>
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the customClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container AppcontainerClass flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the needTooltip is false 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the tooltipClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the tooltipParentClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip tooltipParentClass"
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;

package/es/AppContainer/props/defaultProps.js

@@ -1,10 +0,0 @@
-export const defaultProps = {
-  dataId: 'AppContainer',
-  tagName: 'div',
-  className: '',
-  tooltipClass: '',
-  tooltipParentClass: '',
-  customProps: {},
-  dataSelectorId: 'appContainer',
-  needTooltip: true
-};

package/es/AppContainer/props/propTypes.js

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  eleRef: PropTypes.func,
-  tagName: PropTypes.string,
-  className: PropTypes.string,
-  needTooltip: PropTypes.bool,
-  tooltipClass: PropTypes.string,
-  tooltipParentClass: PropTypes.string,
-  customProps: PropTypes.shape({
-    ContainerProps: PropTypes.object,
-    TooltipProps: PropTypes.object,
-    ExtraProps: PropTypes.object
-  })
-};

package/es/Avatar/Avatar.js

@@ -1,195 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getInitial } from "../utils/getInitial";
-import AvatarSize from "../Provider/AvatarSize";
-import style from "./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
-*/
-
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
-*/
-
-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", {
-      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,
-      tabIndex: onClick ? 0 : null,
-      ...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'
-//   };
-// }