82 lines
2.8 KiB
JavaScript
82 lines
2.8 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%"
|
|
}}
|
|
labelRender={({ label, value, ...rest }) => {
|
|
if (!value || !options) return label;
|
|
const discount = options?.find((o) => o.id === value)?.discount;
|
|
return (
|
|
<div className="imex-flex-row" style={{ width: "100%" }}>
|
|
<div style={{ flex: 1 }}>{label}</div>
|
|
|
|
{discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
|
|
</div>
|
|
);
|
|
}}
|
|
popupMatchSelectWidth={false}
|
|
onChange={setOption}
|
|
optionFilterProp="name"
|
|
onSelect={onSelect}
|
|
disabled={disabled || false}
|
|
optionLabelProp={"name"}
|
|
>
|
|
{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);
|