import React, { useCallback, useMemo, useEffect, useState } from 'react'; import { MenuItem } from '@blueprintjs/core'; import ListSelect from 'components/ListSelect'; import { FormattedMessage as T } from 'react-intl'; function EstimateListField({ products, initialProductId, selectedProductId, defautlSelectText = , onProductSelected, }) { const initialProduct = useMemo( () => products.find((a) => a.id === initialProductId), [initialProductId], ); const [selectedProduct, setSelectedProduct] = useState( initialProduct || null, ); useEffect(() => { if (typeof selectedProductId !== 'undefined') { const product = selectedProductId ? products.find((a) => a.id === selectedProductId) : null; setSelectedProduct(product); } }, [selectedProductId, products, setSelectedProduct]); const onProductSelect = useCallback( (product) => { setSelectedProduct({ ...product }); onProductSelected && onProductSelected(product); }, [onProductSelected], ); const productRenderer = useCallback( (item, { handleClick }) => ( ), [], ); const filterProduct = useCallback((query, product, _index, exactMatch) => { const normalizedTitle = product.name.toLowerCase(); const normalizedQuery = query.toLowerCase(); if (exactMatch) { return normalizedTitle === normalizedQuery; } else { return normalizedTitle.indexOf(normalizedQuery) >= 0; } }, []); return ( } itemRenderer={productRenderer} itemPredicate={filterProduct} popoverProps={{ minimal: true }} onItemSelect={onProductSelect} selectedItem={`${selectedProductId}`} selectedItemProp={'id'} labelProp={'name'} defaultText={selectedProduct ? selectedProduct.name : defautlSelectText} /> ); } export default EstimateListField;