frontend: use reusable dropdown for countryselect

BitBoxSwiss · Nov 26, 2024 · 8821fe1 · 8821fe1
1 parent ca57abf
commit 8821fe1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 82 deletions.
diff --git a/frontends/web/src/routes/exchange/components/countryselect.module.css b/frontends/web/src/routes/exchange/components/countryselect.module.css
@@ -1,10 +1,5 @@
-.dropdown {
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    font-weight: 400;
-    height: calc(var(--space-quarter) * 3);
-    padding: 0 calc(var(--space-half) + var(--space-eight));
+.select :global(.react-select__input-container) {
+    padding-left: calc(var(--space-default) + var(--space-eight));
 }
 
 .flag {
@@ -22,48 +17,6 @@
     display: flex;
 }
 
-.select :global(.react-select__input-container) {
-    color: var(--color-default);
-}
-
-.select :global(.react-select__single-value) {
-    color: var(--color-default);
-}
-
-.select :global(.react-select__menu) {
-    background-color: var(--background-secondary);
-}
-
-.select :global(.react-select__option) {
-    background-color: var(--background-secondary);
-}
-
-.select :global(.react-select__option):hover {
-    background-color: var(--background-custom-select-hover);
-}
-
-.select :global(.react-select__option--is-selected),
-.select :global(.react-select__option--is-selected):hover {
-    background-color: var(--background-custom-select-selected);
-}
-
-.select :global(.react-select__control) {
-    background-color: var(--background-secondary);
-    padding: var(--space-quarter) var(--space-eight);
-}
-
-.select :global(.react-select__input-container) {
-    padding-left: var(--space-default);
-}
-
 .selectLabelText {
-    color: var(--color-default);
-    margin-left: 6px;
-}
-
-.singleValueContainer {
-    align-items: center;
-    display: flex;
-    left: var(--space-quarter);
-    position: absolute;
-}
+    margin-left: 10px;
+}
diff --git a/frontends/web/src/routes/exchange/components/countryselect.tsx b/frontends/web/src/routes/exchange/components/countryselect.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
-import Select, { components, SingleValueProps, OptionProps, SingleValue, DropdownIndicatorProps } from 'react-select';
+import { SingleValue } from 'react-select';
 import { useDarkmode } from '@/hooks/darkmode';
+import { Dropdown } from '@/components/dropdown/dropdown';
 import { GlobeDark, GlobeLight } from '@/components/icon';
 import { i18n } from '@/i18n/i18n';
 import styles from './countryselect.module.css';
@@ -43,37 +43,17 @@ const SelectedRegionIcon = ({ regionCode }: { regionCode: string }) => {
   );
 };
 
-const SelectSingleValue: FunctionComponent<SingleValueProps<TOption>> = (props) => {
-  const { label, value } = props.data;
+
+const Option = ({ props }: {props: TOption}) => {
+  const { label, value } = props;
   return (
-    <div className={styles.singleValueContainer}>
+    <div className={styles.optionsContainer}>
       <SelectedRegionIcon regionCode={value.toLowerCase()} />
-      <components.SingleValue {...props}>
-        <span className={styles.selectLabelText}>{label}</span>
-      </components.SingleValue>
+      <span className={styles.selectLabelText}>{label}</span>
     </div>
   );
 };
 
-const SelectOption: FunctionComponent<OptionProps<TOption>> = (props) => {
-  const { label, value } = props.data;
-  return (
-    <components.Option {...props}>
-      <div className={styles.optionsContainer}>
-        <SelectedRegionIcon regionCode={value.toLowerCase()} />
-        <span className={styles.selectLabelText}>{label}</span>
-      </div>
-    </components.Option>
-  );
-};
-
-const DropdownIndicator: FunctionComponent<DropdownIndicatorProps<TOption>> = (props) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <div className={styles.dropdown} />
-    </components.DropdownIndicator>
-  );
-};
 
 const CountrySelect = ({ onChangeRegion, regions, selectedRegion }: TProps) => {
   const { t } = useTranslation();
@@ -82,11 +62,10 @@ const CountrySelect = ({ onChangeRegion, regions, selectedRegion }: TProps) => {
     selectedRegionName = new Intl.DisplayNames([i18n.language], { type: 'region' }).of(selectedRegion) || '';
   }
   return (
-    <Select
-      className={styles.select}
-      classNamePrefix="react-select"
-      components={{ DropdownIndicator, SingleValue: SelectSingleValue, Option: SelectOption, IndicatorSeparator: () => null }}
+    <Dropdown
       defaultValue={{ label: selectedRegionName, value: selectedRegion }}
+      className={`${styles.select}`}
+      renderOptions={(e) => <Option props={e} />}
       isSearchable={true}
       onChange={(e) =>
         onChangeRegion(e as SingleValue<TOption>)