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

package/es/lookup/header/Search/Search.js

@@ -1,260 +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); }
-
-/* eslint-disable react/forbid-component-props */
-
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-/** * Components ** */
-
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
-import ToggleDropDown from '../../../dropdown/ToggleDropDown/ToggleDropDown';
-/** * Methods ** */
-
-import { debounce } from '@zohodesk/components/lib/utils/debounce';
-/** * CSS ** */
-
-import style from './LookupSearch.module.css';
-export default class Search extends Component {
-  constructor(props) {
-    super(props);
-    this.handleDropDownOpen = this.handleDropDownOpen.bind(this);
-    this.handleDropDownClose = this.handleDropDownClose.bind(this);
-    this.handleTextBoxFocus = this.handleTextBoxFocus.bind(this);
-    this.handleTextBoxBlur = this.handleTextBoxBlur.bind(this);
-    this.handleGetTextBoxRef = this.handleGetTextBoxRef.bind(this);
-    this.state = {
-      isFocus: false,
-      isDropDownOpen: false
-    };
-  }
-
-  handleDropDownOpen() {
-    this.setState({
-      isDropDownOpen: true
-    });
-  }
-
-  handleDropDownClose() {
-    this.setState({
-      isDropDownOpen: false
-    });
-  }
-
-  handleTextBoxFocus(e) {
-    const {
-      onFocus
-    } = this.props;
-    this.setState({
-      isFocus: true
-    });
-    onFocus && onFocus(e);
-  }
-
-  handleTextBoxBlur(e) {
-    const {
-      onBlur
-    } = this.props;
-    this.setState({
-      isFocus: false
-    });
-    onBlur && onBlur(e);
-  }
-
-  handleGetTextBoxRef(el) {
-    const {
-      getRef
-    } = this.props;
-    this.textBox = el;
-    getRef && getRef(el);
-  }
-
-  render() {
-    const {
-      options,
-      onSelect,
-      value,
-      selectedId
-    } = this.props;
-    const {
-      isFocus,
-      isDropDownOpen
-    } = this.state;
-    const searchUIExtraProps = {
-      isFocus: isFocus || isDropDownOpen,
-      onFocus: this.handleTextBoxFocus,
-      onBlur: this.handleTextBoxBlur,
-      getRef: this.handleGetTextBoxRef
-    };
-    return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
-      value: value,
-      options: options,
-      onClick: onSelect,
-      needTick: true,
-      isArrow: false,
-      isToggleStateNeeded: true,
-      selectedId: selectedId,
-      onDropDownOpen: this.handleDropDownOpen,
-      onDropDownClose: this.handleDropDownClose
-    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
-  }
-
-}
-Search.propTypes = {
-  getRef: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onSelect: PropTypes.func,
-  options: PropTypes.array,
-  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.string
-};
-
-class SearchUI extends Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleSearch = debounce(this.handleSearch.bind(this), 500);
-  }
-
-  cancelBubblingEffect(e) {
-    e && e.stopPropagation && e.stopPropagation();
-    e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-  }
-
-  handleSearch() {
-    const {
-      onSearch
-    } = this.props;
-    onSearch && onSearch();
-  }
-
-  handleKeyDown(e) {
-    const {
-      keyCode
-    } = e;
-    const {
-      onSearch,
-      needOnTypeSearch,
-      onKeyDown
-    } = this.props;
-    onKeyDown && onKeyDown(e);
-
-    if (keyCode === 13) {
-      !needOnTypeSearch && onSearch && onSearch();
-    }
-  }
-
-  handleChange(value) {
-    const {
-      onChange,
-      needOnTypeSearch
-    } = this.props;
-    onChange && onChange(value);
-    needOnTypeSearch && this.handleSearch();
-  }
-
-  handleClear(e) {
-    const {
-      onChange
-    } = this.props;
-    this.cancelBubblingEffect(e);
-    onChange && onChange('');
-    this.handleSearch();
-  }
-
-  render() {
-    const {
-      dataId,
-      searchStr,
-      placeHolder,
-      getRef,
-      title,
-      isBoxed,
-      isSearchIconNeed,
-      options,
-      activeClass,
-      isFocus,
-      onFocus,
-      onBlur
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical",
-      className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
-    }, options && /*#__PURE__*/React.createElement(Container, {
-      className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      "data-title": title
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-search",
-      size: "11"
-    }), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "7",
-      iconClass: style.iconArrow
-    })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
-      className: style.searchIconBox
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-search",
-      size: "11"
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      customClass: {
-        customTextBox: `${isBoxed ? style.inputBox : ''}`
-      },
-      placeHolder: placeHolder,
-      value: searchStr,
-      onChange: this.handleChange,
-      onClick: this.cancelBubblingEffect,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: this.handleKeyDown,
-      onMouseDown: this.cancelBubblingEffect,
-      dataId: dataId,
-      size: "small",
-      inputRef: getRef,
-      onClear: this.handleClear,
-      onClearMouseDown: this.cancelBubblingEffect
-    })));
-  }
-
-}
-
-SearchUI.defaultProps = {
-  activeClass: '',
-  isBoxed: false,
-  isSearchIconNeed: false
-};
-SearchUI.propTypes = {
-  activeClass: PropTypes.string,
-  dataId: PropTypes.string,
-  getRef: PropTypes.func,
-  isBoxed: PropTypes.bool,
-  isFocus: PropTypes.bool,
-  isSearchIconNeed: PropTypes.bool,
-  needOnTypeSearch: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.array,
-  placeHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  title: PropTypes.string
-};
-
-if (false) {
-  Search.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -1,116 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-/*** Components ***/
-
-import Title from '../Title/Title';
-import Close from '../Close/Close';
-import Search from '../Search/Search';
-import ViewDropDown from '../ViewDropDown/ViewDropDown';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-/*** CSS ***/
-
-import commonStyle from '../lookupHeaderCommon.module.css';
-import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
-import style from './TicketHeader.module.css';
-/* eslint-disable react/forbid-component-props */
-
-export default class TicketHeader extends Component {
-  render() {
-    let {
-      needSearch,
-      onLookupClose,
-      searchStr,
-      onSearchChange,
-      searchPlaceHolder,
-      title,
-      selectedViewId,
-      onSelectView,
-      allViews,
-      onSearch,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      needViewsList,
-      i18nKeys
-    } = this.props;
-    let {
-      menuEmptyMessage = 'No matches found'
-    } = i18nKeys;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
-      isCover: false,
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.closeContainer
-    }, /*#__PURE__*/React.createElement(Close, {
-      onClose: onLookupClose,
-      dataId: "close"
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      className: `${style.innerContainer}`,
-      isCover: false,
-      wrap: "wrap",
-      dataId: "lookupView"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: commonStyle.title
-    }, /*#__PURE__*/React.createElement(Title, {
-      text: title
-    })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.dropdown}`,
-      dataId: "filterIdselected"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.menuWrapper
-    }, /*#__PURE__*/React.createElement(ViewDropDown, {
-      dropBoxSize: "small",
-      emptyMessage: menuEmptyMessage,
-      needSearch: true,
-      onChange: onSelectView,
-      options: allViews,
-      textField: "displayLabel",
-      selectedValue: selectedViewId,
-      needCloseOnSelect: true
-    }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
-      className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
-    }, /*#__PURE__*/React.createElement(Search, {
-      onSearch: onSearch,
-      searchStr: searchStr,
-      onChange: onSearchChange,
-      placeHolder: searchPlaceHolder,
-      dataId: "search",
-      needOnTypeSearch: needOnTypeSearch,
-      getRef: getSearchBoxRef
-    })) : null);
-  }
-
-}
-TicketHeader.propTypes = {
-  allViews: PropTypes.array,
-  getSearchBoxRef: PropTypes.func,
-  needOnTypeSearch: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needViewsList: PropTypes.bool,
-  onLookupClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  onSelectView: PropTypes.func,
-  searchPlaceHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  selectedViewId: PropTypes.string,
-  title: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    menuEmptyMessage: PropTypes.string
-  })
-};
-TicketHeader.defaultProps = {
-  i18nKeys: {}
-};
-
-if (false) {
-  TicketHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,20 +0,0 @@
-.dropdown {
-  margin: 0 var(--zd_size20);
-}
-/* Responsive */
-.small .searchContainer {
-  text-align: left;
-}
-.small .searchContainer input {
-  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
-  width: var(--zd_size193);
-}
-.small .innerContainer,
-.extraSmall .innerContainer {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.extraSmall .container {
-  flex-direction: column;
-}
-.menuWrapper{display: inline-block;}

package/es/lookup/header/Title/LookupTitle.module.css

@@ -1,20 +0,0 @@
-.title {
-  font-size: var(--zd_font_size16);
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  word-break: break-all;
-}
-.bold {
-  font-family: var(--zd_semibold);
-}
-/* Palette */
-.default {
-  color: var(--zdt_lookuptitle_default_text);
-}
-.primary {
-  color: var(--zdt_lookuptitle_primary_text);
-}
-.danger {
-  color: var(--zdt_lookuptitle_danger_text);
-}

package/es/lookup/header/Title/Title.js

@@ -1,34 +0,0 @@
-/*** Libraries ***/
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-/*** CSS ***/
-
-import style from './LookupTitle.module.css';
-export default class Title extends PureComponent {
-  render() {
-    let {
-      text,
-      palette,
-      isBold
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: `${style.title} ${style[palette]} ${isBold ? style.bold : ''}`,
-      "data-title": text
-    }, text);
-  }
-
-}
-Title.propTypes = {
-  isBold: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  text: PropTypes.string
-};
-Title.defaultProps = {
-  palette: 'default'
-};
-
-if (false) {
-  Title.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/lookup/header/ViewDropDown/ViewDropDown.js

@@ -1,183 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import PropTypes from 'prop-types';
-/**** Components ****/
-
-import { SelectComponent } from '@zohodesk/components/lib/Select/Select';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-/**** Icons ****/
-
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
-import Loader from '@zohodesk/svg/lib/svg/Loader';
-import style from './ViewDropDown.module.css';
-/* eslint-disable react/forbid-component-props */
-
-/*eslint-disable  react/sort-prop-types*/
-
-class DropDown extends SelectComponent {
-  constructor(props) {
-    super(props);
-    this.onSearchKeyDown = this.onSearchKeyDown.bind(this);
-  }
-
-  onSearchKeyDown(e) {
-    const {
-      closePopupOnly
-    } = this.props;
-
-    if (e.keyCode === 27) {
-      closePopupOnly && closePopupOnly(e);
-    } else {
-      this.handleKeyDown(e);
-    }
-  }
-
-  render() {
-    var _this = this;
-
-    const {
-      needSearch,
-      dropBoxSize,
-      emptyMessage,
-      searchEmptyMessage,
-      position,
-      defaultDropBoxPosition,
-      getTargetRef,
-      getContainerRef,
-      isPopupOpen,
-      removeClose,
-      isPopupReady,
-      animationStyle,
-      searchBoxSize,
-      searchBoxVariant,
-      searchBoxPlaceHolder,
-      maxLength
-    } = this.props;
-    const {
-      hoverIndex,
-      selected,
-      searchStr,
-      isFetchingOptions,
-      selectedId
-    } = this.state;
-    const suggestions = this.handleFilterSuggestions();
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: this.togglePopup,
-      ref: getTargetRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.labelCnt} ${isPopupOpen ? style.focused : ''}`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.labelText,
-      "data-title": selected
-    }, selected), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "7",
-      iconClass: style.arrowIcon
-    }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      isAnimate: true,
-      isArrow: false,
-      isActive: isPopupReady,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
-      getRef: getContainerRef,
-      onClick: removeClose,
-      animationStyle: animationStyle,
-      size: "large"
-    }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
-      value: searchStr,
-      onChange: this.handleSearch,
-      onKeyDown: this.onSearchKeyDown,
-      getRef: this.searchInputRef,
-      size: searchBoxSize,
-      variant: searchBoxVariant,
-      placeHolder: searchBoxPlaceHolder,
-      maxLength: maxLength
-    })) : null, /*#__PURE__*/React.createElement(CardContent, {
-      eleRef: this.suggestionContainerRef,
-      customClass: dropBoxSize ? style[dropBoxSize] : ''
-    }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-      className: style.listItemContainer
-    }, suggestions.map(function () {
-      let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      let index = arguments.length > 1 ? arguments[1] : undefined;
-      const {
-        id,
-        value
-      } = option;
-      return /*#__PURE__*/React.createElement(ListItem, {
-        active: id === selectedId,
-        getRef: _this.suggestionItemRef,
-        highlight: hoverIndex === index ? true : false,
-        id: id,
-        key: `${id}dropDown`,
-        onClick: _this.handleChange,
-        onMouseEnter: _this.handleMouseEnter,
-        size: "medium",
-        value: value,
-        index: index,
-        needTick: true,
-        needBorder: false
-      });
-    })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, emptyMessage)))) : null);
-  }
-
-}
-
-DropDown.propTypes = {
-  emptyMessage: PropTypes.string,
-  needSearch: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string
-  }))]).isRequired,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
-  needLocalSearch: PropTypes.bool,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**** Popup props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  removeClose: PropTypes.func,
-  closePopupOnly: PropTypes.func,
-  position: PropTypes.string,
-  getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func
-};
-DropDown.defaultProps = {
-  dropBoxSize: 'small',
-  needLocalSearch: true,
-  needSearch: true,
-  textField: 'text',
-  valueField: 'id'
-};
-const ViewDropDown = Popup(DropDown);
-ViewDropDown.defaultProps = DropDown.defaultProps;
-
-if (false) {
-  DropDown.docs = {
-    componentGroup: 'Lookup'
-  }; // eslint-disable-next-line react/forbid-foreign-prop-types
-
-  ViewDropDown.propTypes = DropDown.propTypes;
-}
-
-export default ViewDropDown;

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -1,45 +0,0 @@
-.small {
-  max-height: var(--zd_size200);
-}
-.medium {
-  max-height: var(--zd_size348);
-}
-.large {
-  max-height: var(--zd_size400);
-}
-.emptyState {
-  font-size: var(--zd_font_size14);
-  padding: var(--zd_size12) var(--zd_size15);
-  color: var(--zdt_viewdropdown_empty_text);
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-}
-.hide {
-  composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
-}
-.container {
-  position: relative;
-}
-.listItemContainer {
-  padding: var(--zd_size10) 0;
-}
-/* Label Style */
-.labelCnt {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
-  cursor: pointer;
-  color: var(--zdt_viewdropdown_label_text);
-}
-.labelText {
-  font-size: var(--zd_font_size12);
-  margin-right: var(--zd_size5);
-  max-width: var(--zd_size180);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.labelCnt:hover .arrowIcon {
-  color: var(--zdt_viewdropdown_hover_label_text);
-}
-
-.loader {
-  padding: var(--zd_size12) var(--zd_size15);
-}

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -1,25 +0,0 @@
-.container {
-  min-height: var(--zd_size51);
-  position: relative;
-  padding: 0 var(--zd_size52) 0 var(--zd_size10);
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
-}
-.searchContainer,
-.title {
-  margin: 0 var(--zd_size20);
-}
-.searchContainer {
-  text-align: right;
-}
-.closeContainer {
-  position: absolute;
-  right: var(--zd_size30);
-  top: 50%;
-  composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
-}
-.para {
-  margin: 0 var(--zd_size20);
-  font-size: var(--zd_font_size12);
-  color: var(--zdt_lookupheader_para_text);
-}