Fix: CurrencySelectList

client/src/components/CurrencySelectList.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { ListSelect } from 'components';
+import { MenuItem } from '@blueprintjs/core';
+
+export default function CurrencySelectList({
+  currenciesList,
+  selectedCurrencyCode,
+  defaultSelectText = <T id={'select_currency_code'} />,
+  onCurrencySelected,
+  ...restProps
+}) {
+  const [selectedCurrency, setSelectedCurrency] = useState(null);
+
+  // Filters currencies list.
+  const filterCurrencies = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.currency_code.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${currency.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  const onCurrencySelect = useCallback((currency) => {
+    setSelectedCurrency({ ...currency });
+    onCurrencySelected && onCurrencySelected(currency);
+  });
+
+  const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
+    return (
+      <MenuItem
+        key={CurrencyCode.id}
+        text={CurrencyCode.currency_code}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  return (
+    <ListSelect
+      items={currenciesList}
+      selectedItemProp={'currency_code'}
+      selectedItem={selectedCurrencyCode}
+      labelProp={'currency_code'}
+      defaultText={defaultSelectText}
+      onItemSelect={onCurrencySelect}
+      itemPredicate={filterCurrencies}
+      itemRenderer={currencyCodeRenderer}
+      popoverProps={{ minimal: true }}
+      {...restProps}
+    />
+  );
+}

client/src/components/index.js

@@ -31,6 +31,8 @@ import Col from './Grid/Col';
 import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
 import ContactSelecetList from './ContactSelecetList';
+import CurrencySelectList from './CurrencySelectList'
+
 
 const Hint = FieldHint;
 
@@ -69,4 +71,5 @@ export {
   CloudLoadingIndicator,
   MoneyExchangeRate,
   ContactSelecetList ,
+  CurrencySelectList
 };