react -select

import classNames from "classnames";
import React, { ReactElement } from "react";
import Select, { SingleValue } from "react-select";
import { getDistinctDestination, getDistinctOrigin } from "../../data/priceEstimation/priceData";
import { Icon } from "../Icons";

interface Props {
  inputId: string;
  form: any;
  className?: string;
  setForm: (form: any) => void;
}

function OriginSelector({ form, setForm, inputId, className }: Props): ReactElement {
  const originRaw = getDistinctOrigin();

  const options = originRaw.map((origin) => ({
    value: origin,
    label: origin
  }));

  function handleChange(newValue: SingleValue<{ value: string; label: string }>) {
    setForm((prev: any) => ({ ...prev, Origin: newValue?.value }));
  }

  return (
    <div className={classNames("selector__container", className)}>
      <span style={{ display: "grid", placeContent: "center" }}>
        <Icon.PinMarker />
      </span>
      <div className="selector__wrapper">
        <Select
          inputId={inputId}
          options={options}
          onChange={handleChange}
          className="select__container"
          classNamePrefix="select"
        />
      </div>
    </div>
  );
}

function DestinationSelector({ form, setForm, inputId, className }: Props): ReactElement {
  const destinationRaw = getDistinctDestination();

  const options = destinationRaw.map((destination) => ({
    value: destination,
    label: destination
  }));
  function handleChange(newValue: SingleValue<{ value: string; label: string }>) {
    setForm((prev: any) => ({ ...prev, Destination: newValue?.value }));
  }
  return (
    <div className={classNames("selector__container", className)}>
      <span style={{ display: "grid", placeContent: "center" }}>
        <Icon.PinMarker />
      </span>
      <div className="selector__wrapper">
        <Select
          inputId={inputId}
          options={options}
          onChange={handleChange}
          blurInputOnSelect={false}
          openMenuOnFocus={false}
          className="select__container"
          classNamePrefix="select"
        />
      </div>
    </div>
  );
}

export { OriginSelector, DestinationSelector };