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

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

/**** 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
    } = this.props;
    const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.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, { ...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, { ...commonProps,
          active: highLightedSelectOptions.indexOf(id) >= 0,
          iconName: icon,
          iconSize: iconSize
        }));
      }

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

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