@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.215

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,81 @@
+.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

@@ -0,0 +1,71 @@
+/*** 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

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,112 @@
+/*** 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

@@ -0,0 +1,26 @@
+.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

@@ -0,0 +1,8 @@
+.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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,37 @@
+/*** 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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,89 @@
+/*** 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

@@ -0,0 +1,48 @@
+.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);
+}