@zohodesk/components/es/ColorSelect/ColorMultiSelect.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); }

import React, { useMemo } from 'react';
import MultiSelect from "../MultiSelect/MultiSelect";
import { ColorMultiSelect_propTypes } from "./props/propTypes";
import { ColorMultiSelect_defaultProps } from "./props/defaultProps";
import { renderColoredTag, renderColorIndicator } from "./_shared/helpers/renderHelpers";

function ColorMultiSelect(props) {
  const {
    options,
    renderCustomColorIndicator,
    renderCustomSelectedValue,
    customProps,
    ...rest
  } = props;
  const renderSelectedValue = renderCustomSelectedValue || renderColoredTag;
  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
  const optionsWithOptionType = useMemo(() => {
    return options.map(option => {
      if (typeof option !== "object") return option;
      return { ...option,
        optionType: "custom"
      };
    });
  }, [options]);
  return /*#__PURE__*/React.createElement(MultiSelect, _extends({}, rest, {
    options: optionsWithOptionType,
    renderCustomSelectedValue: renderSelectedValue,
    customProps: { ...customProps,
      SuggestionsProps: { ...customProps.SuggestionsProps,
        renderBeforeChildren: colorIndicator
      }
    }
  }));
}

ColorMultiSelect.propTypes = ColorMultiSelect_propTypes;
ColorMultiSelect.defaultProps = ColorMultiSelect_defaultProps;
export default ColorMultiSelect;