@zohodesk/components/es/MultiSelect/SelectedOptions.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

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

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

import Tag from "../Tag/Tag";
import { Box } from "../Layout";
/**** Style ****/

import style from "./SelectedOptions.module.css";
/* eslint-disable react/forbid-component-props */

export default class SelectedOptions extends React.PureComponent {
  render() {
    const {
      selectedOptions,
      highLightedSelectOptions,
      isReadOnly,
      getRef,
      onRemove,
      onSelect,
      size,
      palette,
      dataId,
      limit,
      renderCustomSelectedValue,
      isPopupOpen,
      isPopupReady,
      isDisabled: isInputDisabled
    } = this.props;
    const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
    const selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedData.map(option => {
      const {
        id,
        value,
        photoURL,
        icon,
        optionType,
        iconSize,
        isDisabled
      } = option;
      const commonProps = {
        disabled: isDisabled,
        onRemove: isDisabled || isReadOnly ? null : onRemove,
        text: value,
        palette: isDarkPalette,
        onSelectTag: isReadOnly ? null : onSelect,
        getRef: getRef,
        initial: value,
        id: id,
        isReadOnly: isReadOnly
      };

      if (optionType === 'avatar') {
        return /*#__PURE__*/React.createElement(Box, {
          className: `${style.tag} ${style[size]}`,
          key: `${id}photoTag`,
          dataId: dataId
        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
          active: highLightedSelectOptions.indexOf(id) >= 0,
          hasAvatar: true,
          imageURL: photoURL
        })));
      } else if (optionType === 'icon') {
        return /*#__PURE__*/React.createElement(Box, {
          className: `${style.tag} ${style[size]}`,
          key: `${id}iconTag`,
          dataId: dataId
        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
          active: highLightedSelectOptions.indexOf(id) >= 0,
          iconName: icon,
          iconSize: iconSize
        })));
      } else if (optionType === 'custom') {
        return /*#__PURE__*/React.createElement(Box, {
          className: `${style.tag} ${style[size]}`,
          key: `${id}customTag`,
          dataId: dataId
        }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
          onRemove: isDisabled || isReadOnly ? null : onRemove,
          palette: isDarkPalette,
          onSelectTag: isReadOnly ? null : onSelect,
          getRef: getRef,
          isReadOnly: isReadOnly,
          isPopupReady: isPopupReady,
          isPopupOpen: isPopupOpen,
          isDisabled: isInputDisabled,
          size,
          highLightedSelectOptions,
          isActive: highLightedSelectOptions.indexOf(id) >= 0,
          option
        }) : renderCustomSelectedValue);
      }

      return /*#__PURE__*/React.createElement(Box, {
        className: `${style.tag} ${style[size]}`,
        key: `${id}tag`,
        dataId: dataId
      }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
        active: highLightedSelectOptions.indexOf(id) >= 0
      })));
    }));
  }

}
SelectedOptions.propTypes = SelectedOptions_propTypes;
SelectedOptions.defaultProps = SelectedOptions_defaultProps;