@zohodesk/components 1.4.8 → 1.4.10-exp-0

package/es/MultiSelect/Suggestions.js

@@ -1,142 +1,219 @@
 /**** Libraries ****/
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Suggestions_propTypes } from "./props/propTypes";
 import { Suggestions_defaultProps } from "./props/defaultProps";
+import { Virtualizer } from '@zohodesk/virtualizer';
 /**** Components ****/
 
 import ListItem from "../ListItem/ListItem";
 import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
 import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Container, Box } from "../Layout";
+import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
+
+function SuggestionsVirtualizerContainer(_ref) {
+  let {
+    eleRef,
+    children,
+    setVirtualizerContainerRefFunction
+  } = _ref;
+  useMemo(() => {
+    typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
+  }, [eleRef, setVirtualizerContainerRefFunction]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 export default class Suggestions extends React.PureComponent {
-  render() {
+  constructor(props) {
+    super(props);
+    this.renderSuggestionList = this.renderSuggestionList.bind(this);
+    this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
+  }
+
+  renderSuggestionList(_ref2) {
+    let {
+      suggestion,
+      index,
+      ref
+    } = _ref2;
     const {
-      suggestions,
       getRef,
       hoverOption,
       onClick,
       onMouseEnter,
       needTick,
       needBorder,
-      selectedOptions = [],
+      selectedOptions = DUMMY_ARRAY,
       activeId,
       hoverId,
-      dataId,
       listItemSize,
-      className,
       avatarPalette,
       palette,
-      htmlId,
       a11y,
-      needMultiLineText
+      needMultiLineText,
+      limit,
+      limitReachedMessage
     } = this.props;
     const {
-      ariaParentRole,
-      ariaMultiselectable
-    } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      role: ariaParentRole,
-      id: htmlId,
-      tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
-    }, /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}`,
-      className: className ? className : ''
-    }, suggestions.map((suggestion, index) => {
-      const {
-        id,
-        value,
-        secondaryValue,
-        photoURL,
-        icon,
-        optionType,
-        iconSize,
-        isDisabled,
-        listItemProps,
-        listItemCustomProps = {}
-      } = suggestion;
-      const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-      const isHighlight = hoverOption === index || id === hoverId ? true : false;
-      const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive,
-        ariaLabel: value,
-        'data-a11y-list-active': isHighlight
-      });
-      const commonProps = {
-        isDisabled,
-        needMultiLineText,
-        ...listItemCustomProps
+      id,
+      value,
+      secondaryValue,
+      photoURL,
+      icon,
+      optionType,
+      iconSize,
+      isDisabled,
+      listItemProps,
+      listItemCustomProps = DUMMY_OBJECT
+    } = suggestion;
+    const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
+    const isHighlight = hoverOption === index || id === hoverId ? true : false;
+    const selectedOptionsLength = selectedOptions.length;
+    const isLimitReached = selectedOptionsLength >= limit && !isActive;
+    const list_a11y = Object.assign({}, a11y, {
+      ariaSelected: isActive,
+      ariaLabel: value,
+      'data-a11y-list-active': isHighlight
+    });
+    const commonProps = {
+      isDisabled: isDisabled ? isDisabled : isLimitReached,
+      needMultiLineText,
+      ...listItemCustomProps
+    };
+
+    if (listItemProps) {
+      commonProps.customProps = {
+        ListItemProps: { ...listItemProps
+        }
       };
+    }
 
-      if (listItemProps) {
-        commonProps.customProps = {
-          ListItemProps: { ...listItemProps
-          }
-        };
-      }
+    if (isLimitReached) {
+      commonProps.disableTitle = limitReachedMessage;
+    }
+
+    function getListItemRef(ele, index, id) {
+      ref && ref(ele);
 
-      if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          imgSrc: photoURL,
-          key: `${id}avatarListItem`,
-          name: value,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          size: listItemSize,
-          avatarPalette: avatarPalette,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
-      } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          key: `${id}iconListItem`,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          iconName: icon,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          iconSize: iconSize,
-          size: listItemSize,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
+      if (typeof getRef === 'function') {
+        getRef(ele, index, id);
       }
+    }
 
-      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+    if (optionType === 'avatar') {
+      return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
+        autoHover: false,
+        getRef: getListItemRef,
+        highlight: isHighlight,
+        id: id,
+        imgSrc: photoURL,
+        key: `${id}avatarListItem`,
+        name: value,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        value: value,
+        title: value,
+        needTick: needTick,
+        needBorder: needBorder,
+        active: isActive,
+        size: listItemSize,
+        avatarPalette: avatarPalette,
+        palette: palette,
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    } else if (optionType === 'icon') {
+      return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
         autoHover: false,
-        getRef: getRef,
+        getRef: getListItemRef,
         highlight: isHighlight,
         id: id,
-        key: `${id}listItem`,
+        key: `${id}iconListItem`,
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         value: value,
         title: value,
+        iconName: icon,
         needTick: needTick,
         needBorder: needBorder,
         active: isActive,
+        iconSize: iconSize,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+      autoHover: false,
+      getRef: getListItemRef,
+      highlight: isHighlight,
+      id: id,
+      key: `${id}listItem`,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      value: value,
+      title: value,
+      needTick: needTick,
+      needBorder: needBorder,
+      active: isActive,
+      size: listItemSize,
+      palette: palette,
+      a11y: list_a11y
+    });
+  }
+
+  renderVirtualizerSuggestionListItem(_ref3) {
+    let {
+      index,
+      ref
+    } = _ref3;
+    const {
+      suggestions
+    } = this.props;
+    const suggestion = suggestions[index];
+    return this.renderSuggestionList({
+      suggestion,
+      index,
+      ref
+    });
+  }
+
+  render() {
+    const {
+      suggestions,
+      dataId,
+      className,
+      isVirtualizerEnabled,
+      htmlId,
+      a11y,
+      setVirtualizerContainerRefFunction
+    } = this.props;
+    const {
+      ariaParentRole,
+      ariaMultiselectable
+    } = a11y;
+    return /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      role: ariaParentRole,
+      id: htmlId,
+      tabindex: "0",
+      "aria-multiselectable": ariaMultiselectable
+    }, /*#__PURE__*/React.createElement(Box, {
+      dataId: `${dataId}`,
+      className: className ? className : ''
+    }, isVirtualizerEnabled ? /*#__PURE__*/React.createElement(Virtualizer, {
+      containerType: SuggestionsVirtualizerContainer,
+      elementRenderer: this.renderVirtualizerSuggestionListItem,
+      elementsCount: suggestions.length,
+      isElementsFixedHeight: false,
+      dataId: `${dataId}_virtualizer`,
+      setVirtualizerContainerRefFunction: setVirtualizerContainerRefFunction
+    }) : suggestions.map((suggestion, index) => {
+      return this.renderSuggestionList({
+        suggestion,
+        index
       });
     })));
   }

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MultiSelect from "../MultiSelect";
+const testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
+const testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +10,27 @@ describe('MultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with limit feature', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: testData,
+      selectedOptions: testSelectedData,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      needResponsive: true,
+      limit: 3
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -1,6 +1,53 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Suggestions from "../Suggestions";
+const sampleData = [{
+  "id": 2,
+  "value": "text2",
+  "optionType": "default",
+  "listItemProps": {
+    "style": {
+      "color": "red"
+    }
+  }
+}, {
+  "id": 3,
+  "value": "text3",
+  "optionType": "default",
+  "listItemProps": {
+    "style": {
+      "color": "blue"
+    }
+  }
+}, {
+  "id": 4,
+  "value": "text4",
+  "optionType": "default"
+}, {
+  "id": 5,
+  "value": "text5",
+  "optionType": "default"
+}, {
+  "id": 6,
+  "value": "text6",
+  "optionType": "default"
+}, {
+  "id": 7,
+  "value": "text7",
+  "optionType": "default"
+}, {
+  "id": 8,
+  "value": "text8",
+  "optionType": "default"
+}, {
+  "id": 9,
+  "value": "text9",
+  "optionType": "default"
+}, {
+  "id": 10,
+  "value": "text10",
+  "optionType": "default"
+}];
 describe('Suggestions', () => {
   test('rendering the defult props', () => {
     const {
@@ -10,4 +57,15 @@ describe('Suggestions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with limit props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      selectedOptions: [1, 2, 3, 4],
+      suggestions: sampleData,
+      limit: 3,
+      limitReachedMessage: "Limit Reached"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -84,3 +84,256 @@ exports[`MultiSelect rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`MultiSelect rendering with limit feature 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="5"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text1"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="5"
+          >
+            text1
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="6"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text2"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="6"
+          >
+            text2
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="7"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text3"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="7"
+          >
+            text3
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium clearIconSpace
+          "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              placeholder=""
+              role="combobox"
+              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
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="rightPlaceholder inflex rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                >
+                  <button
+                    class="delete defaultDelete shrinkOff"
+                    data-id="multiSelect_clearIcon"
+                    data-selector-id="box"
+                    data-test-id="multiSelect_clearIcon"
+                    data-title="Clear Selected Items"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-delete    rtl "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                      style="--zd-iconfont-size: var(--zd_font_size15);"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;