140 lines
4.1 KiB
JavaScript
140 lines
4.1 KiB
JavaScript
import { HeartOutlined } from "@ant-design/icons";
|
|
import { Select, Space, Tag } from "antd";
|
|
import { 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(() => {
|
|
console.log("*** ~ VendorSearchSelect ~ USEEFFECT:", value, option);
|
|
if (value !== option && onChange) {
|
|
if (value && !option) {
|
|
onChange(value);
|
|
} else {
|
|
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 }) => {
|
|
if (!value || !options) return label;
|
|
const discount = options?.find((o) => o.id === value)?.discount;
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexWrap: "nowrap",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 0,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
{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
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexWrap: "nowrap",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 0,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
{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>
|
|
))}
|
|
{options &&
|
|
options.map((o) => (
|
|
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexWrap: "nowrap",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 0,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
{o.name}
|
|
</div>
|
|
<Space style={{ marginLeft: "1rem" }}>
|
|
{o.tags?.map((tag, idx) => (
|
|
<Tag key={idx} style={{ marginLeft: "0.5rem" }}>
|
|
{tag}
|
|
</Tag>
|
|
))}
|
|
{o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
|
|
{o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
|
|
</Space>
|
|
</div>
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
};
|
|
export default VendorSearchSelect;
|