farrah/76186/currency selector component (#6512)

* currency dropdown component * refactor * fixed bugs
binary-com · Sep 21, 2022 · 5e32328 · 5e32328
1 parent fc8c9fd
commit 5e32328
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 1 deletion.
diff --git a/packages/components/src/components/autocomplete/autocomplete.jsx b/packages/components/src/components/autocomplete/autocomplete.jsx
@@ -38,6 +38,7 @@ const Autocomplete = React.memo(props => {
         has_updating_list = true,
         input_id,
         is_alignment_top,
+        is_list_visible = false,
         list_items,
         list_portal_id,
         onHideDropdownList,
@@ -299,7 +300,7 @@ const Autocomplete = React.memo(props => {
                         // marginTop: form.errors[field.name] ? 'calc(4px - 18px)' : '4px', // 4px is the standard margin. In case of error, the list should overlap the error
                     }),
                 }}
-                is_visible={should_show_list}
+                is_visible={should_show_list || is_list_visible}
                 list_items={filtered_items}
                 list_height={props.list_height}
                 // Autocomplete must use the `text` property and not the `value`, however DropdownList provides access to both
@@ -321,6 +322,7 @@ Autocomplete.defaultProps = {
 
 Autocomplete.propTypes = {
     className: PropTypes.string,
+    is_list_visible: PropTypes.bool,
     list_items: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.string),
         PropTypes.arrayOf(

diff --git a/packages/components/src/components/dropdown-list/dropdown-list.jsx b/packages/components/src/components/dropdown-list/dropdown-list.jsx
@@ -131,6 +131,7 @@ const DropdownList = React.forwardRef((props, ref) => {
 
     const el_dropdown_list = (
         <CSSTransition
+            appear={is_visible}
             in={is_visible}
             timeout={100}
             classNames={{

diff --git a/packages/p2p/src/components/buy-sell/currency-selector.jsx b/packages/p2p/src/components/buy-sell/currency-selector.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Field, Formik } from 'formik';
+import { Autocomplete, Icon } from '@deriv/components';
+import { localize } from 'Components/i18next';
+import './currency-selector.scss';
+
+const CurrencySelector = ({ className, default_value, list, onSelect }) => {
+    const filtered_currency_list = list.filter(item => item.has_adverts);
+
+    return (
+        <Formik enableReinitialize initialValues={{ currency: '' }}>
+            {({ setFieldValue }) => (
+                <Field name='currency'>
+                    {({ field }) => (
+                        <Autocomplete
+                            {...field}
+                            autoComplete='off'
+                            className={classNames('currency-selector', className)}
+                            data-lpignore='true'
+                            historyValue={default_value}
+                            is_list_visible
+                            leading_icon={<Icon className='currency-selector__search-icon' icon='IcSearch' />}
+                            list_items={filtered_currency_list}
+                            not_found_text={
+                                list.filter(
+                                    item => item.text.toLowerCase() === field.value.toLowerCase() && !item.has_adverts
+                                ).length === 1
+                                    ? localize('No ads for this currency.')
+                                    : localize('No results for "{{value}}".', {
+                                          value: field.value,
+                                          interpolation: { escapeValue: false },
+                                      })
+                            }
+                            onItemSelection={({ value }) => {
+                                if (value) onSelect?.(value);
+                            }}
+                            placeholder={localize('Search currency')}
+                            trailing_icon={
+                                field.value ? (
+                                    <Icon
+                                        color='secondary'
+                                        icon='IcCloseCircle'
+                                        onClick={() => {
+                                            setFieldValue('currency', '');
+                                        }}
+                                    />
+                                ) : (
+                                    <></>
+                                )
+                            }
+                            type='text'
+                        />
+                    )}
+                </Field>
+            )}
+        </Formik>
+    );
+};
+
+CurrencySelector.propTypes = {
+    className: PropTypes.string,
+    default_value: PropTypes.string,
+    list: PropTypes.array,
+    onSelect: PropTypes.func,
+};
+
+export default CurrencySelector;
diff --git a/packages/p2p/src/components/buy-sell/currency-selector.scss b/packages/p2p/src/components/buy-sell/currency-selector.scss
@@ -0,0 +1,24 @@
+.currency-selector {
+    &__search-icon {
+        margin-right: 1rem;
+    }
+
+    .dc-dropdown-list {
+        margin-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    .dc-input {
+        border: 0;
+        border-bottom: 1px solid var(--border-normal);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        box-shadow: 0 8px 16px 0 var(--shadow-menu);
+        background: var(--general-main-2);
+
+        &__field {
+            padding-left: 3.4rem;
+        }
+    }
+}