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

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

@@ -0,0 +1,208 @@
+/**** 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 ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+/**** Icons ****/
+
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } 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);
+    }
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  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(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: true,
+        isArrow: false,
+        isActive: isPopupReady,
+        boxPosition: position || `${defaultDropBoxPosition}Center`,
+        getRef: getContainerRef,
+        onClick: removeClose,
+        animationStyle: animationStyle,
+        size: "large",
+        alignBox: "row",
+        isResponsivePadding: true
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__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, {
+        shrink: true,
+        eleRef: this.suggestionContainerRef,
+        customClass: !tabletMode && 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

@@ -0,0 +1,45 @@
+.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/ViewDropDown/docs/ViewDropDown__default.docs.js

@@ -0,0 +1,75 @@
+/**** Libraries ****/
+import React from 'react';
+/**** Components ****/
+
+import ViewDropDown from '../ViewDropDown';
+export default class ViewDropDown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'All Tickets',
+      id: '1'
+    }, {
+      text: 'Tickets for review',
+      id: '2'
+    }, {
+      text: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      text: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      text: 'Spam Tickets',
+      id: '5'
+    }, {
+      text: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      text: 'Overdue Tickets',
+      id: '7'
+    }, {
+      text: 'My Tickets',
+      id: '8'
+    }, {
+      text: 'My Open Tickets',
+      id: '9'
+    }, {
+      text: 'My Overdue Tickets',
+      id: '10'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(ViewDropDown, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found"
+    }));
+  }
+
+}
+
+if (false) {
+  ViewDropDown__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

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

@@ -0,0 +1,31 @@
+.container {
+  min-height: var(--zd_size51);
+  position: relative;
+  padding: 0 var(--zd_size52) 0 var(--zd_size10);
+}
+.default {
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
+}
+.white {
+  background-color: var(--zdt_lookupheader_white_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_white_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);
+}

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

@@ -0,0 +1,15 @@
+/* Responsive */
+.extraSmall {
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0;
+  justify-content: normal;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.extraSmall .searchContainer {
+  text-align: left;
+}
+.extraSmall .searchContainer input {
+  border-bottom: 1px solid var(--zdt_lookupheader_input_border);
+  width: var(--zd_size193);
+}

package/es/setup/header/Button/Button.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GenButton from '@zohodesk/components/lib/Button/Button';
+import style from './HeaderButton.module.css';
+export default class Button extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      palette,
+      text,
+      onClick,
+      id
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container
+    }, /*#__PURE__*/React.createElement(GenButton, {
+      id: id,
+      onClick: onClick,
+      palette: palette,
+      size: "medium",
+      text: text
+    }));
+  }
+
+}
+Button.defaultProps = {
+  palette: 'primaryFilled',
+  text: ''
+};
+Button.propTypes = {
+  id: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.string,
+  text: PropTypes.string
+};
+
+if (false) {
+  Button.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Button/HeaderButton.module.css

@@ -0,0 +1,3 @@
+.container {
+  margin-right: var(--zd_size15);
+}

package/es/setup/header/Button/docs/Button__default.docs.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+export default class Button__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Button, {
+      text: "Add New"
+    });
+  }
+
+}
+
+if (false) {
+  Button__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Link/HeaderLink.module.css

@@ -0,0 +1,15 @@
+.container {
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_headerlink_text);
+  font-size: var(--zd_font_size12);
+  margin-right: var(--zd_size15);
+}
+.icon {
+  margin-right: var(--zd_size5);
+}
+.container:hover .text {
+  border-bottom: 1px solid var(--zdt_headerlink_hover_text);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/setup/header/Link/Link.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Box } from '@zohodesk/components/lib/Layout';
+import ExternalLink from '../../../ExternalLink/ExternalLink';
+import style from './HeaderLink.module.css';
+export default class Link extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      url,
+      text,
+      iconName,
+      iconClass,
+      iconSize
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ExternalLink, {
+      className: style.container,
+      href: url
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      isBold: true,
+      name: iconName,
+      size: iconSize,
+      iconClass: iconClass ? iconClass : ''
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: style.text,
+      flexible: true
+    }, text));
+  }
+
+}
+Link.defaultProps = {
+  iconName: 'ZD-newtab',
+  iconSize: 10
+};
+Link.propTypes = {
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.number,
+  text: PropTypes.string,
+  url: PropTypes.string
+};
+
+if (false) {
+  Link.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Link/docs/Link__default.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Link, {
+      text: "View Page",
+      url: "https://zoho.com"
+    });
+  }
+
+}
+
+if (false) {
+  Link__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Search/Search.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import style from './Search.module.css';
+export default class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    let {
+      value
+    } = this.props;
+    this.state = {
+      value: value || '',
+      isFocus: false
+    };
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus(id, name, value) {
+    let {
+      onFocus
+    } = this.props;
+    this.setState({
+      isFocus: true
+    });
+    onFocus && onFocus(id, name, value);
+  }
+
+  onBlur(id, name, value) {
+    let {
+      onBlur
+    } = this.props;
+    this.state.value == '' && this.setState({
+      isFocus: false
+    });
+    onBlur && onBlur(id, name, value);
+  }
+
+  render() {
+    let {
+      placeHolder,
+      maxLength,
+      value,
+      onChange,
+      onKeyPress,
+      customClass
+    } = this.props;
+    let {
+      isFocus
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      placeHolder: placeHolder,
+      customClass: style.input,
+      maxLength: maxLength,
+      value: value,
+      onChange: onChange,
+      onKeyUp: onKeyPress,
+      onFocus: this.onFocus,
+      needAppearance: false,
+      onBlur: this.onBlur
+    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+      className: style.icon,
+      onClick: this.onBlur
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close",
+      size: "19"
+    })) : null);
+  }
+
+}
+Search.propTypes = {
+  customClass: PropTypes.string,
+  maxLength: PropTypes.number,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  placeHolder: PropTypes.string,
+  value: PropTypes.string
+};
+Search.defaultProps = {
+  placeHolder: 'Search',
+  maxLength: 150,
+  customClass: ''
+};
+
+if (false) {
+  Search.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Search/Search.module.css

@@ -0,0 +1,57 @@
+.container {
+  position: relative;
+  transition: width var(--zd_transition3);
+  width: var(--zd_size90);
+  margin-right: var(--zd_size15);
+}
+.active {
+  width: var(--zd_size180);
+}
+.active .input,
+.input:hover {
+  border-bottom-color: var(--zdt_search_input_border);
+}
+.icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  color: var(--zdt_search_icon);
+  line-height: var(--zd_size26);
+  cursor: pointer;
+}
+.icon:hover {
+  color: var(--zdt_search_hover_icon);
+}
+.input {
+  border: 0;
+  height: var(--zd_size26);
+  font-size: var(--zd_font_size13);
+  width: 100%;
+  letter-spacing: 0.2px;
+  border-bottom: 1px solid transparent;
+  transition: all var(--zd_transition3) ease;
+  color: var(--zdt_search_input_text);
+  font-family: var(--zd_regular);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: var(--zd_size20);
+  background: var(--zdt_search_input_bg);
+}
+.input::placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-webkit-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-moz-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input::-ms-placeholder {
+  color: var(--zdt_search_placeholder_text);
+}
+.input:focus,
+.active .input:focus {
+  border-bottom-color: var(--zdt_search_input_focus_border);
+}