@zohodesk/components/es/MultiSelect/Suggestions.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

/**** Libraries ****/
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 {
  constructor(props) {
    super(props);
    this.renderSuggestionList = this.renderSuggestionList.bind(this);
    this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
  }

  renderSuggestionList(_ref2) {
    let {
      suggestion,
      index,
      ref
    } = _ref2;
    const {
      getRef,
      hoverOption,
      onClick,
      onMouseEnter,
      needTick,
      needBorder,
      selectedOptions = DUMMY_ARRAY,
      activeId,
      hoverId,
      listItemSize,
      avatarPalette,
      palette,
      a11y,
      needMultiLineText,
      limit,
      limitReachedMessage
    } = this.props;
    const {
      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 (isLimitReached) {
      commonProps.disableTitle = limitReachedMessage;
    }

    function getListItemRef(ele, index, id) {
      ref && ref(ele);

      if (typeof getRef === 'function') {
        getRef(ele, index, id);
      }
    }

    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: getListItemRef,
        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
      });
    }

    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
      });
    })));
  }

}
Suggestions.propTypes = Suggestions_propTypes;
Suggestions.defaultProps = Suggestions_defaultProps;