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

In this Package, we Provide Some Basic Components to Build Web App

/**** Libraries ****/
import React from 'react';
import { Suggestions_propTypes } from "./props/propTypes";
import { Suggestions_defaultProps } from "./props/defaultProps";
/**** Components ****/

import ListItem from "../ListItem/ListItem";
import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
import ListItemWithIcon from "../ListItem/ListItemWithIcon";
import { Container, Box } from "../Layout";
export default class Suggestions extends React.PureComponent {
  render() {
    const {
      suggestions,
      getRef,
      hoverOption,
      onClick,
      onMouseEnter,
      needTick,
      needBorder,
      selectedOptions = [],
      activeId,
      hoverId,
      dataId,
      listItemSize,
      className,
      avatarPalette,
      palette,
      htmlId,
      a11y
    } = 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,
        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,
        ...listItemCustomProps
      };

      if (listItemProps) {
        commonProps.customProps = {
          ListItemProps: { ...listItemProps
          }
        };
      }

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

      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
        autoHover: false,
        getRef: getRef,
        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
      });
    })));
  }

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