@zohodesk/components/es/ColorSelect/ColorSingleSelect.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 from 'react';
import Select from "../Select/Select";
import { ColorSingleSelect_propTypes } from "./props/propTypes";
import { ColorSingleSelect_defaultProps } from "./props/defaultProps";
import { renderColoredTag, renderColorIndicator } from "./_shared/helpers/renderHelpers";
import Box from "../Layout/Box";
import Container from "../Layout/Container";
import ArrowIcon from "../shared/ArrowIcon/ArrowIcon";
import Typography from "../Typography/Typography";
import arrowIconStyle from "../shared/ArrowIcon/ArrowIcon.module.css";
import style from "./ColorSelect.module.css";
const fontSizes = {
  xmedium: '14',
  medium: '14',
  small: '12',
  xsmall: '13'
};

function ColorSingleSelect(props) {
  const {
    options,
    renderCustomColorIndicator,
    renderCustomSelectedValue,
    customClass,
    customProps,
    borderColor,
    dataId,
    renderRightPlaceholderNode,
    placeholder,
    renderCustomToggleIndicator,
    ...rest
  } = props;
  const {
    select: selectClass
  } = customClass;

  function renderSelectedValue(data) {
    const {
      isPopupOpen,
      selectedId,
      isDisabled,
      isReadOnly
    } = data;
    const {
      size
    } = props;
    const fontSize = fontSizes[size] || 14;
    return /*#__PURE__*/React.createElement(Container, {
      alignBox: "row"
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, selectedId ? renderCustomSelectedValue ? renderCustomSelectedValue(data) : renderColoredTag(data) : /*#__PURE__*/React.createElement(Typography, {
      $ui_size: fontSize,
      $ui_className: `${style.placeholder}`,
      $flag_dotted: true
    }, placeholder)), /*#__PURE__*/React.createElement(ArrowIcon, {
      isRotated: isPopupOpen,
      isDisabled: isDisabled,
      isReadOnly: isReadOnly,
      renderCustomToggleIndicator: renderCustomToggleIndicator
    }), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
  }

  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
  return /*#__PURE__*/React.createElement(Select, _extends({}, rest, {
    placeHolder: placeholder,
    dataId: dataId,
    borderColor: borderColor,
    className: `${borderColor === 'transparent' ? arrowIconStyle.transparentContainer : ''} ${arrowIconStyle.arrowContainer} ${selectClass ? selectClass : ''}`,
    options: options,
    renderCustomSelectedValue: renderSelectedValue,
    customProps: { ...customProps,
      SuggestionsProps: { ...customProps.SuggestionsProps,
        renderBeforeChildren: colorIndicator
      }
    }
  }));
}

ColorSingleSelect.propTypes = ColorSingleSelect_propTypes;
ColorSingleSelect.defaultProps = ColorSingleSelect_defaultProps;
export default ColorSingleSelect;