@zohodesk/dot 1.0.0-temp-187.24 → 1.0.0-temp-225

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -0,0 +1,335 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Tag from '@zohodesk/components/es/Tag/Tag';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
+import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/es/MultiSelect/MultiSelectHeader';
+import { stopBubbling } from "../../../utils/General";
+import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
+import style from "./TagsMultiSelect.module.css";
+export default class TagsMultiSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAll: false
+    };
+    this.emptySearchSVG = this.emptySearchSVG.bind(this);
+    this.onShowAllClick = this.onShowAllClick.bind(this);
+    this.getContainerRef = this.getContainerRef.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
+    this.textInputRef = this.textInputRef.bind(this);
+  }
+
+  textInputRef(el) {
+    const {
+      getTextInputRef
+    } = this.props;
+    this.inputEl = el;
+    getTextInputRef && getTextInputRef(el);
+  }
+
+  onScroll() {
+    let {
+      onScroll,
+      name,
+      noMoreData,
+      searchList
+    } = this.props;
+    let {
+      containerRef
+    } = this;
+
+    if (findScrollEnd(this.containerRef) && !noMoreData) {
+      onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length - 1}`];
+      scrollTo(containerRef, selectItemRef);
+    }
+  }
+
+  getSelectedItemRef(el, index) {
+    this[`selectedList_${index}`] = el;
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isTagListLoading,
+      tagsList,
+      isPopupReady,
+      selectSearchIndex
+    } = this.props;
+
+    if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
+      setTimeout(() => {
+        if (this.inputEl) {
+          this.inputEl.focus();
+        }
+      }, 300);
+    }
+
+    if (selectSearchIndex != prevProps.selectSearchIndex) {
+      let selectItemRef = this[`selectedList_${selectSearchIndex}`];
+      let {
+        containerRef
+      } = this;
+      scrollTo(containerRef, selectItemRef);
+    }
+  }
+
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  onShowAllClick() {
+    this.setState({
+      showAll: !this.state.showAll
+    });
+  }
+
+  getContainerRef(ele) {
+    this.containerRef = ele;
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  render() {
+    let {
+      searchList,
+      selectSearchIndex,
+      tagsList,
+      deleteTag,
+      name,
+      isReadOnly,
+      className,
+      handleKeyUp,
+      handleChange,
+      addTag,
+      isTagListLoading,
+      getContainerRef,
+      getTargetRef,
+      isPopupReady,
+      isPopupOpen,
+      boxPosition,
+      handleTogglePopup,
+      listDisabled,
+      chipNeedToShow,
+      i18nKeys,
+      dataId,
+      needBorder,
+      borderColor,
+      getTextBoxChildren,
+      htmlId,
+      boxSize,
+      onSelectTag,
+      clickableTag,
+      dataSelectorId,
+      handleSelectAll,
+      selectAllText,
+      needSelectAll,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset,
+      customClass,
+      customProps,
+      isFocus
+    } = this.props;
+    let {
+      showAll
+    } = this.state;
+    let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+    let {
+      tagCustomClass = '',
+      listItemClass = '',
+      textBoxIconWrapperClass = '',
+      dropBoxClass = ''
+    } = customClass;
+    const {
+      TextBoxIconProps = {},
+      TagWrapperProps = {},
+      TagProps = {},
+      ListItemProps = {}
+    } = customProps;
+    const isEditable = !isReadOnly;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder || isEditable && isFocus ? style.active : ''}` : ''} ${className}`,
+      onClick: stopBubbling,
+      "data-id": `${dataId}_tagsContainer`,
+      "data-test-id": `${dataId}_tagsContainer`,
+      "data-selector-id": dataSelectorId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: `${style.tagDiv} ${textBoxIconWrapperClass}`,
+      wrap: "wrap",
+      eleRef: getTargetRef,
+      scroll: "vertical"
+    }, tagsList.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsList.map((tag, index) => {
+      let {
+        name,
+        tagType,
+        id,
+        boxCustomProps,
+        tagCustomProps
+      } = tag;
+      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
+        className: style.tag,
+        key: index
+      }, TagWrapperProps, boxCustomProps), /*#__PURE__*/React.createElement(Tag, _extends({
+        id: id,
+        text: name,
+        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
+        closeTitle: i18nKeys.deleteText,
+        palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
+        isReadOnly: isReadOnly,
+        onSelectTag: onSelectTag ? onSelectTag : undefined,
+        customClass: tagCustomClass
+      }, TagProps, tagCustomProps))) : null;
+    }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
+      className: style.moreLess,
+      dataId: `${dataId}_tagsMore`,
+      onClick: this.onShowAllClick
+    }, showAll ? `${i18nKeys.lessText}` : `+${tagsList.length - chipNeedToShow} ${i18nKeys.moreText}`) : null) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      adjust: true,
+      shrink: true,
+      className: style.inputWrapper
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.custmSpan
+    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      htmlId: htmlId,
+      dataId: `${dataId}_tagInp`,
+      value: name,
+      onKeyUp: handleKeyUp,
+      onChange: handleChange,
+      maxLength: 50,
+      isReadOnly: isReadOnly,
+      needBorder: false,
+      placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
+      onClick: !isReadOnly ? handleTogglePopup : undefined,
+      customClass: {
+        customTBoxWrap: style.custmInp,
+        customTextBox: style.input
+      },
+      size: "xsmall",
+      inputRef: this.textInputRef
+    }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: false,
+        isActive: isPopupReady,
+        isArrow: false,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        size: boxSize,
+        boxPosition: boxPosition,
+        isPadding: false,
+        customClass: {
+          customDropBoxWrap: style.dropdown,
+          customDropBox: dropBoxClass
+        },
+        dataId: `${dataId}_dropbox`,
+        isResponsivePadding: true,
+        alignBox: "row",
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
+        onSelect: handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: searchList,
+        dataId: `${dataId}_selectAll`
+      }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: `${tabletMode ? '' : style.viewpopNew}`
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+        scroll: "vertical",
+        className: `${tabletMode ? '' : style.viewpopNew}`,
+        onScroll: this.onScroll,
+        eleRef: this.getContainerRef
+      }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        dataId: `${dataId}_Options`
+      }, searchList.map((item, index) => {
+        let {
+          name,
+          isNew,
+          listItemProps: listProps
+        } = item;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({}, ListItemProps, {
+          key: index,
+          index: index,
+          autoHover: true,
+          value: isNew ? '' : name,
+          title: isNew ? '' : name,
+          onClick: addTag.bind(this, item),
+          needTick: true,
+          highlight: selectSearchIndex === index,
+          getRef: this.getSelectedItemRef,
+          isDisabled: listDisabled,
+          customProps: listProps,
+          customClass: listItemClass
+        }), isNew ? /*#__PURE__*/React.createElement(Container, {
+          alignBox: "row",
+          align: "vertical"
+        }, /*#__PURE__*/React.createElement(Box, {
+          className: style.newTagLabel
+        }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
+          shrink: true,
+          "data-title": name,
+          className: `${style.dotted} ${style.newTagText} `,
+          dataId: `${dataId}_new_tag_text`
+        }, name)) : null));
+      })) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        dataId: `${dataId}_empty`
+      }, /*#__PURE__*/React.createElement(Container, {
+        className: style.searchEmpty
+      }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+        title: i18nKeys.emptyTitleText,
+        description: i18nKeys.emptyDescription,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      })))))));
+    }) : null);
+  }
+
+}
+TagsMultiSelect.propTypes = propTypes;
+TagsMultiSelect.defaultProps = defaultProps; // if (__DOCS__) {
+//   TagsMultiSelect.docs = {
+//     componentGroup: 'TagsMultiSelect'
+//   };
+// }

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -0,0 +1,120 @@
+.container {
+  position: relative;
+}
+.tag {
+  max-width: 100% ;
+}
+[dir=ltr] .moreLess, [dir=ltr] .tag {
+  margin: 0 var(--zd_size6) var(--zd_size6) 0 ;
+}
+[dir=rtl] .moreLess, [dir=rtl] .tag {
+  margin: 0 0 var(--zd_size6) var(--zd_size6) ;
+}
+.input {
+  height: var(--zd_size20) ;
+  width: 100% ;
+  margin-bottom: var(--zd_size4) ;
+}
+.viewpopNew {
+  max-height: var(--zd_size250) ;
+}
+.tagDiv {
+  max-height: var(--zd_size160) ;
+  margin-top: var(--zd_size5) ;
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
+}
+.borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
+}
+.borderColor_transparent.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
+}
+.borderColor_default:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
+}
+.borderColor_default.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
+}
+.borderColor_dark:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
+}
+.borderColor_dark.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
+}
+.moreLess {
+  color: var(--zdt_tagsmultiselect_more_text);
+  font-size: var(--zd_font_size13) ;
+  cursor: pointer;
+}
+.moreLess:hover {
+  color: var(--zdt_tagsmultiselect_more_hover_text);
+}
+.inputWrapper {
+  position: relative;
+  max-width: 100% ;
+  min-width: var(--zd_size5) ;
+  font-size: 0 ;
+}
+.newTagLabel {
+  color: var(--zdt_tagsmultiselect_labelt_text);
+  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
+}
+[dir=ltr] .newTagLabel {
+  margin-right: var(--zd_size5) ;
+}
+[dir=rtl] .newTagLabel {
+  margin-left: var(--zd_size5) ;
+}
+.dotted {
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
+}
+.dropdown {
+  margin-top: var(--zd_size1) ;
+}
+.custmSpan {
+  height: var(--zd_size25) ;
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100% ;
+  visibility: hidden;
+}
+[dir=ltr] .custmSpan {
+  padding-right: var(--zd_size28) ;
+}
+[dir=rtl] .custmSpan {
+  padding-left: var(--zd_size28) ;
+}
+.custmInp {
+  position: absolute;
+  top: 0 ;
+  width: 100% ;
+}
+[dir=ltr] .custmInp {
+  left: 0 ;
+}
+[dir=rtl] .custmInp {
+  right: 0 ;
+}
+.newTagText {
+  color: var(--zdt_tagsmultiselect_more_text);
+}
+
+.searchEmpty{
+  padding:0 var(--zd_size10) 
+}

package/es/form/fields/TagsMultiSelect/__tests__/TagsMultiSelect.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TagsMultiSelect from "../TagsMultiSelect";
+describe('TagsMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TagsMultiSelect, {
+      tagsList: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagsMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container  hasBorder
+              borderColor_default  "
+    data-id="_tagsContainer"
+    data-selector-id="tagsMultiSelectField"
+    data-test-id="_tagsContainer"
+  >
+    <div
+      class="tagDiv  flex rowdir wrap vCenter scrolly"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="inputWrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class="custmSpan"
+        />
+        <div
+          class="varClass customContainer    effect     container custmInp  flex rowdir"
+          data-selector-id="textBoxIcon"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              class="  container xsmall  default  effect  borderColor_default  input"
+              data-id="_tagInp"
+              data-selector-id="textBoxIcon"
+              data-test-id="_tagInp"
+              maxlength="50"
+              placeholder="-"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -0,0 +1,16 @@
+export const defaultProps = {
+  className: '',
+  i18nKeys: {},
+  chipNeedToShow: '5',
+  borderColor: 'default',
+  needBorder: true,
+  dataId: '',
+  boxSize: 'default',
+  clickableTag: false,
+  dataSelectorId: 'tagsMultiSelectField',
+  needSelectAll: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  customClass: {},
+  customProps: {}
+};

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  addTag: PropTypes.func,
+  boxPosition: PropTypes.string,
+  className: PropTypes.string,
+  deleteTag: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  getTextInputRef: PropTypes.func,
+  handleChange: PropTypes.func,
+  handleKeyUp: PropTypes.func,
+  handleTogglePopup: PropTypes.func,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isTagListLoading: PropTypes.bool,
+  name: PropTypes.string,
+  noMoreData: PropTypes.bool,
+  onScroll: PropTypes.func,
+  searchList: PropTypes.array,
+  selectSearchIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tagsList: PropTypes.array,
+  chipNeedToShow: PropTypes.string,
+  listDisabled: PropTypes.bool,
+  dataId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    newTagText: PropTypes.string.isRequired,
+    emptyTitleText: PropTypes.string.isRequired,
+    emptyDescription: PropTypes.string.isRequired,
+    errorMessage: PropTypes.string.isRequired,
+    deleteText: PropTypes.string.isRequired,
+    lessText: PropTypes.string.isRequired,
+    moreText: PropTypes.string.isRequired,
+    placeholderText: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  needBorder: PropTypes.bool,
+  getTextBoxChildren: PropTypes.func,
+  htmlId: PropTypes.string,
+  boxSize: PropTypes.string,
+  onSelectTag: PropTypes.func,
+  clickableTag: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  handleSelectAll: PropTypes.func,
+  selectAllText: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
+  customClass: PropTypes.object,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    TagWrapperProps: PropTypes.object,
+    TagProps: PropTypes.object,
+    ListItemProps: PropTypes.object
+  }),
+  isFocus: PropTypes.bool
+};