diff --git a/client/src/components/CustomersMultiSelect.js b/client/src/components/CustomersMultiSelect.js new file mode 100644 index 000000000..1afa5a2f2 --- /dev/null +++ b/client/src/components/CustomersMultiSelect.js @@ -0,0 +1,82 @@ +import React, { useMemo, useCallback, useState } from 'react'; +import { MenuItem, Button } from '@blueprintjs/core'; +import { omit } from 'lodash'; +import MultiSelect from 'components/MultiSelect'; +import { FormattedMessage as T } from 'react-intl'; + +export default function CustomersMultiSelect({ + customers, + defaultText = , + buttonProps, + + onCustomerSelected, + ...selectProps +}) { + const [selectedCustomers, setSelectedCustomers] = useState({}); + + const isCustomerSelect = useCallback( + (id) => typeof selectedCustomers[id] !== 'undefined', + [selectedCustomers], + ); + + const customerRenderer = useCallback( + (customer, { handleClick }) => ( + + ), + [isCustomerSelect], + ); + + const countSelected = useMemo(() => Object.values(selectedCustomers).length, [ + selectedCustomers, + ]); + + const onContactSelect = useCallback( + ({ id }) => { + const selected = { + ...(isCustomerSelect(id) + ? { + ...omit(selectedCustomers, [id]), + } + : { + ...selectedCustomers, + [id]: true, + }), + }; + setSelectedCustomers({ ...selected }); + onCustomerSelected && onCustomerSelected(selected); + }, + [ + setSelectedCustomers, + selectedCustomers, + isCustomerSelect, + onCustomerSelected, + ], + ); + + return ( + } + itemRenderer={customerRenderer} + popoverProps={{ minimal: true }} + filterable={true} + onItemSelect={onContactSelect} + > +