67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import { Select, Tag } from "antd";
|
|
import React, { forwardRef, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
|
|
//To be used as a form element only.
|
|
const { Option } = Select;
|
|
const BillLineSearchSelect = (
|
|
{ value, onChange, options, onBlur, onSelect, disabled },
|
|
ref
|
|
) => {
|
|
const [option, setOption] = useState(value);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
if (value !== option && onChange) {
|
|
onChange(option);
|
|
}
|
|
}, [value, option, onChange]);
|
|
|
|
return (
|
|
<Select
|
|
disabled={disabled}
|
|
ref={ref}
|
|
showSearch
|
|
autoFocus
|
|
value={option}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
onChange={setOption}
|
|
optionFilterProp="line_desc"
|
|
onBlur={onBlur}
|
|
onSelect={onSelect}
|
|
>
|
|
<Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
|
|
{t("billlines.labels.other")}
|
|
</Select.Option>
|
|
{options
|
|
? options.map((item) => (
|
|
<Option
|
|
key={item.id}
|
|
value={item.id}
|
|
cost={item.act_price ? item.act_price : 0}
|
|
part_type={item.part_type}
|
|
line_desc={item.line_desc}
|
|
part_qty={item.part_qty}
|
|
>
|
|
<div className="imex-flex-row">
|
|
<div style={{ flex: 1 }}>{item.line_desc}</div>
|
|
{item.oem_partno ? (
|
|
<Tag color="blue">{item.oem_partno}</Tag>
|
|
) : null}
|
|
{item.act_price ? (
|
|
<Tag color="green">
|
|
<CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
|
|
</Tag>
|
|
) : null}
|
|
</div>
|
|
</Option>
|
|
))
|
|
: null}
|
|
</Select>
|
|
);
|
|
};
|
|
export default forwardRef(BillLineSearchSelect);
|