@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp.213

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,161 +0,0 @@
-function _extends() { _extends = Object.assign || 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); }
-
-/**** Libraries ****/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-/**** Components ****/
-
-import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-/**** CSS ****/
-
-import style from './StatusListItem.module.css';
-export default class StatusListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-  }
-
-  getRef(ele) {
-    this.ele = ele;
-    let {
-      index,
-      getRef,
-      id
-    } = this.props;
-    getRef && getRef(ele, index, id);
-  }
-
-  handleClick(e) {
-    let {
-      onClick,
-      id,
-      value,
-      index
-    } = this.props;
-    onClick && onClick(id, value, index, e);
-  }
-
-  handleMouseEnter(e) {
-    let {
-      onMouseEnter,
-      id,
-      value,
-      index
-    } = this.props;
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  render() {
-    let {
-      size,
-      active,
-      highlight,
-      value,
-      autoHover,
-      palette,
-      title,
-      disableTitle,
-      needTick,
-      isLink,
-      href,
-      target,
-      needBorder,
-      isDisabled,
-      bulletColor,
-      a11y
-    } = this.props;
-    let options = {};
-    let {
-      role,
-      ariaSelected,
-      ariaHidden = true
-    } = a11y;
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
-      dataId: String(value).replace("'", '_'),
-      onClick: !isDisabled && this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      eleRef: this.getRef,
-      tagName: isLink ? 'a' : 'li',
-      "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.statusType} ${style[bulletColor]}`
-    }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
-      flexible: true,
-      shrink: true,
-      className: style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
-  }
-
-}
-StatusListItem.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  bulletColor: 'black',
-  a11y: {}
-};
-StatusListItem.propTypes = {
-  active: PropTypes.bool,
-  autoHover: PropTypes.bool,
-  bulletColor: PropTypes.oneOf(['black', 'orange', 'green']),
-  disableTitle: PropTypes.string,
-  getRef: PropTypes.func,
-  highlight: PropTypes.bool,
-  href: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  index: PropTypes.number,
-  isDisabled: PropTypes.bool,
-  isLink: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  target: PropTypes.oneOf(['blank', 'self']),
-  title: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaSelected: PropTypes.bool,
-    ariaHidden: PropTypes.bool
-  })
-};
-
-if (false) {
-  StatusListItem.docs = {
-    componentGroup: 'StatusListItem',
-    folderName: 'List'
-  };
-}

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -1,81 +0,0 @@
-.list {
-  color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13);
-  position: relative;
-  cursor: pointer;
-  list-style: none;
-}
-.withBorder {
-  border-left: 1px solid var(--zdt_statuslistitem_default_border);
-}
-.small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
-}
-.medium {
-  padding: var(--zd_size9) var(--zd_size20);
-}
-.large {
-  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
-  height: var(--zd_size48);
-}
-
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.withBorder.active {
-  border-left-color: var(--zdt_statuslistitem_default_active_border);
-}
-
-.default.hover,
-.default.effect:hover {
-  background-color: var(--zdt_statuslistitem_default_effect_bg);
-}
-.primary.hover,
-.primary.effect:hover,
-.selected {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.secondary.hover,
-.secondary.effect:hover {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.list.active.default,
-.list.active.primary {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.list.active.secondary {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.secondary.hover,
-.secondary.effect:hover,
-.list.active.secondary {
-  color: var(--zdt_statuslistitem_secondary_effect_text);
-}
-.tickIcon {
-  color: var(--zdt_statuslistitem_tickicon);
-  position: absolute;
-  right: var(--zd_size20);
-}
-.tickIcon > i {
-  display: block;
-}
-.active.withTick {
-  padding-right: var(--zd_size39);
-}
-/* Status Type */
-.statusType {
-  width: var(--zd_size8);
-  height: var(--zd_size8);
-  border-radius: 50%;
-  margin-right: var(--zd_size13);
-}
-.black {
-  background-color: var(--zdt_statuslistitem_black_bg);
-}
-.orange {
-  background-color: var(--zdt_statuslistitem_orange_bg);
-}
-.green {
-  background-color: var(--zdt_statuslistitem_green_bg);
-}

package/es/lookup/EmptyPage/EmptyPage.js

@@ -1,71 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
-import EmptyAccounts from '@zohodesk/svg/lib/svg/EmptyAccounts';
-import EmptyContact from '@zohodesk/svg/lib/svg/EmptyContact';
-import EmptyProducts from '@zohodesk/svg/lib/svg/EmptyProducts';
-/*** CSS ***/
-
-import style from './LookupEmptyPage.module.css';
-export default class EmptyPage extends Component {
-  constructor(props) {
-    super(props);
-    this.renderEmptyState = this.renderEmptyState.bind();
-  }
-
-  renderEmptyState(type) {
-    switch (type) {
-      case 'search':
-        return /*#__PURE__*/React.createElement(EmptySearch, {
-          className: style.image
-        });
-
-      case 'account':
-        return /*#__PURE__*/React.createElement(EmptyAccounts, {
-          className: style.image
-        });
-
-      case 'contact':
-        return /*#__PURE__*/React.createElement(EmptyContact, {
-          className: style.image
-        });
-
-      case 'product':
-        return /*#__PURE__*/React.createElement(EmptyProducts, {
-          className: style.image
-        });
-
-      default:
-        return null;
-    }
-  }
-
-  render() {
-    let {
-      type,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": `empty_${type}`
-    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
-    }, title));
-  }
-
-}
-EmptyPage.propTypes = {
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
-};
-EmptyPage.defaultProps = {
-  title: 'No Results Found',
-  type: 'search'
-};
-
-if (false) {
-  EmptyPage.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,12 +0,0 @@
-.container {
-  text-align: center;
-}
-.image {
-  margin: var(--zd_size20) auto;
-}
-.contentDiv {
-  font-size: var(--zd_font_size20);
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  margin-top: var(--zd_size15);
-}

package/es/lookup/Lookup/Lookup.js

@@ -1,112 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-/*** Components ***/
-
-import FreezeLayer from '../../FreezeLayer/FreezeLayer';
-import { Container } from '@zohodesk/components/lib/Layout';
-/*** CSS ***/
-
-import style from './Lookup.module.css';
-/*eslint-disable react/forbid-component-props */
-
-export default class Lookup extends Component {
-  constructor(props) {
-    super(props);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isActive
-    } = this.props;
-
-    if (prevProps.isActive !== isActive) {
-      isActive ? document.addEventListener('keydown', this.handleKeyDown) : document.removeEventListener('keydown', this.handleKeyDown);
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown(e) {
-    const {
-      onKeyDown
-    } = this.props;
-    onKeyDown && onKeyDown(e);
-  }
-
-  render() {
-    const {
-      isActive,
-      children,
-      size,
-      dataId,
-      forwardRef,
-      onClick,
-      customClass,
-      htmlId,
-      a11y,
-      childAnimationName
-    } = this.props;
-    const {
-      role = 'dialog',
-      ariaLabelledby,
-      ariaDescribedby,
-      ariaModal = isActive ? true : undefined
-    } = a11y;
-    return /*#__PURE__*/React.createElement(FreezeLayer, {
-      align: "horizontal",
-      animationName: "fade",
-      childAnimationName: childAnimationName,
-      isActive: isActive,
-      palette: "snow",
-      forwardRef: forwardRef,
-      onClick: onClick,
-      customClass: customClass
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.container,
-      dataId: "fldValue"
-    }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "0",
-      role: role,
-      "aria-labelledby": ariaLabelledby,
-      "aria-describedby": ariaDescribedby,
-      "aria-modal": ariaModal,
-      id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]}`,
-      "data-id": dataId
-    }, children)));
-  }
-
-}
-Lookup.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaDescribedby: PropTypes.string,
-    ariaModal: PropTypes.bool
-  }),
-  onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  customClass: '',
-  a11y: {},
-  childAnimationName: 'flyDown'
-};
-
-if (false) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/Lookup/Lookup.module.css

@@ -1,26 +0,0 @@
-.container {
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_font_size16);
-}
-.box {
-  position: relative;
-  margin: auto;
-  height: 100%;
-  width: 100%;
-}
-/* Size */
-.smallSize {
-  max-width: var(--zd_size470);
-}
-.xmediumSize {
-  max-width: var(--zd_size620);
-}
-.mediumSize {
-  max-width: var(--zd_size840);
-}
-.largeSize {
-  max-width: 70%;
-}
-.fullSize {
-  max-width: 90%;
-}

package/es/lookup/Section/LookupSection.module.css

@@ -1,8 +0,0 @@
-.section {
-  max-height: 80%;
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--zdt_lookupsection_bg);
-  min-height: var(--zd_size390);
-  height: auto;
-  box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
-}

package/es/lookup/Section/Section.js

@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './LookupSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      alignBox,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: alignBox,
-      className: `${style.section} ${className ? className : ''}`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, this.props.children));
-  }
-
-}
-Section.propTypes = {
-  alignBox: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-Section.defaultProps = {};

package/es/lookup/header/Close/Close.js

@@ -1,37 +0,0 @@
-/*** Libraries ***/
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-/*** FontIcons ***/
-
-import IconButton from '../../../IconButton/IconButton';
-export default class Close extends PureComponent {
-  render() {
-    let {
-      onClose,
-      dataId,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      dataId: dataId,
-      onClick: onClose,
-      iconName: "ZD-cross",
-      iconSize: "11",
-      title: title
-    });
-  }
-
-}
-Close.propTypes = {
-  dataId: PropTypes.string,
-  onClose: PropTypes.func,
-  title: PropTypes.string
-};
-Close.defaultProps = {
-  dataId: 'closeButton'
-};
-
-if (false) {
-  Close.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/header/Close/LookupClose.module.css

@@ -1,15 +0,0 @@
-.container {
-  text-align: center;
-  width: var(--zd_size25);
-  height: var(--zd_size25);
-  line-height: var(--zd_size25);
-  cursor: pointer;
-  border-radius: 50%;
-  color: var(--zdt_lookupclose_default_text);
-  transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
-  font-size: var(--zd_font_size9);
-}
-.container:hover {
-  background-color: var(--zdt_lookupclose_default_hover_bg);
-  color: var(--zdt_lookupclose_default_hover_text);
-}

package/es/lookup/header/ModuleHeader/ModuleHeader.js

@@ -1,89 +0,0 @@
-/*** Libraries ***/
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-/*** Components ***/
-
-import Title from '../Title/Title';
-import Close from '../Close/Close';
-import Search from '../Search/Search';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-/*** CSS ***/
-
-import commonStyle from '../lookupHeaderCommon.module.css';
-import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
-/*eslint-disable react/forbid-component-props */
-
-export default class ModuleHeader extends PureComponent {
-  render() {
-    const {
-      title = '',
-      needSearch = false,
-      onLookupClose,
-      searchStr = '',
-      onSearch,
-      onSearchChange,
-      searchPlaceHolder,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      miniDescription,
-      dataId,
-      closeTitle,
-      onSearchKeyDown
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${commonStyle.container}`,
-      isCover: false,
-      wrap: "wrap",
-      dataId: dataId
-    }, onLookupClose ? /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.closeContainer
-    }, /*#__PURE__*/React.createElement(Close, {
-      dataId: "close",
-      onClose: onLookupClose,
-      title: closeTitle
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.title
-    }, /*#__PURE__*/React.createElement(Title, {
-      text: title
-    })), miniDescription && /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.para
-    }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
-      className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
-    }, /*#__PURE__*/React.createElement(Search, {
-      onSearch: onSearch,
-      searchStr: searchStr,
-      onChange: onSearchChange,
-      placeHolder: searchPlaceHolder,
-      dataId: "search",
-      needOnTypeSearch: needOnTypeSearch,
-      getRef: getSearchBoxRef,
-      onKeyDown: onSearchKeyDown
-    })));
-  }
-
-}
-ModuleHeader.propTypes = {
-  getSearchBoxRef: PropTypes.func,
-  miniDescription: PropTypes.string,
-  needOnTypeSearch: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  onLookupClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  searchPlaceHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  title: PropTypes.string,
-  dataId: PropTypes.string,
-  closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func
-};
-
-if (false) {
-  ModuleHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,48 +0,0 @@
-.searchStyle,
-.boxStyle {
-  transition: var(--zd_transition1);
-  width: var(--zd_size96);
-  height: var(--zd_size28);
-  background: none;
-  position: relative;
-}
-.boxStyle {
-  width: var(--zd_size160);
-  border-radius: 4px;
-  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.searchStyle:hover,
-.boxStyle:hover {
-  border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
-}
-.focusWidth {
-  width: var(--zd_size220);
-}
-.drpSearchBox {
-  position: relative;
-  cursor: pointer;
-  height: var(--zd_size28);
-}
-.drpSearchBox::after {
-  content: '';
-  right: calc(var(--zd_size1) * -1);
-  position: absolute;
-  top: var(--zd_size8);
-  bottom: var(--zd_size8);
-  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.inputBox,
-.drpSearchBox {
-  padding: 0 var(--zd_size9);
-}
-.searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
-}
-.active,
-.boxStyle.active,
-.lineActive.drpSearchBox::after {
-  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
-}
-.iconArrow {
-  margin-left: var(--zd_size5);
-}