90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import { HeartOutlined } from "@ant-design/icons";
|
|
import { Select, Space, Tag } from "antd";
|
|
import React, { forwardRef, useEffect, useState } from "react";
|
|
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
|
const { Option } = Select;
|
|
|
|
//To be used as a form element only.
|
|
|
|
const VendorSearchSelect = (
|
|
{ value, onChange, options, onSelect, disabled, preferredMake, showPhone },
|
|
ref
|
|
) => {
|
|
const [option, setOption] = useState(value);
|
|
|
|
useEffect(() => {
|
|
if (value !== option && onChange) {
|
|
onChange(option);
|
|
}
|
|
}, [value, option, onChange]);
|
|
|
|
const favorites =
|
|
preferredMake && options
|
|
? options.filter(
|
|
(o) =>
|
|
o.favorite.filter(
|
|
(f) => f.toLowerCase() === preferredMake.toLowerCase()
|
|
).length > 0
|
|
)
|
|
: [];
|
|
|
|
return (
|
|
<Select
|
|
ref={ref}
|
|
showSearch
|
|
value={option}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
dropdownMatchSelectWidth={false}
|
|
onChange={setOption}
|
|
optionFilterProp="name"
|
|
onSelect={onSelect}
|
|
disabled={disabled || false}
|
|
>
|
|
{favorites
|
|
? favorites.map((o) => (
|
|
<Option
|
|
key={`favorite-${o.id}`}
|
|
value={o.id}
|
|
name={o.name}
|
|
discount={o.discount}
|
|
>
|
|
<div className="imex-flex-row">
|
|
<div style={{ flex: 1 }}>{o.name}</div>
|
|
<Space style={{ marginLeft: "1rem" }}>
|
|
<HeartOutlined style={{ color: "red" }} />
|
|
{o.phone && showPhone && (
|
|
<PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
|
|
)}
|
|
{o.discount && o.discount !== 0 ? (
|
|
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
|
) : null}
|
|
</Space>
|
|
</div>
|
|
</Option>
|
|
))
|
|
: null}
|
|
{options
|
|
? options.map((o) => (
|
|
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
|
|
<div className="imex-flex-row" style={{ width: "100%" }}>
|
|
<div style={{ flex: 1 }}>{o.name}</div>
|
|
|
|
<Space style={{ marginLeft: "1rem" }}>
|
|
{o.phone && showPhone && (
|
|
<PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
|
|
)}
|
|
{o.discount && o.discount !== 0 ? (
|
|
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
|
) : null}
|
|
</Space>
|
|
</div>
|
|
</Option>
|
|
))
|
|
: null}
|
|
</Select>
|
|
);
|
|
};
|
|
export default forwardRef(VendorSearchSelect);
|