Renamed Dropdown component to DropdownBtn

src/domains/DomainSelector.tsx

@@ -4,7 +4,7 @@ import { InputProps } from 'reactstrap/lib/Input';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty, pipe } from 'ramda';
-import { Dropdown } from '../utils/Dropdown';
+import { DropdownBtn } from '../utils/DropdownBtn';
 import { useToggle } from '../utils/helpers/hooks';
 import { DomainsList } from './reducers/domainsList';
 import './DomainSelector.scss';
@@ -52,7 +52,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
       </InputGroupAddon>
     </InputGroup>
   ) : (
-    <Dropdown
+    <DropdownBtn
       text={valueIsEmpty ? 'Domain' : `Domain: ${value}`}
       className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : ''}
     >
@@ -70,6 +70,6 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
       <DropdownItem onClick={pipe(unselectDomain, showInput)}>
         <i>New domain</i>
       </DropdownItem>
-    </Dropdown>
+    </DropdownBtn>
   );
 };

src/utils/DropdownBtn.tsx

@@ -1,22 +1,22 @@
 import { FC } from 'react';
-import { Dropdown as BsDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from './helpers/hooks';
 import './Dropdown.scss';
 
-export interface DropdownProps {
+export interface DropdownBtnProps {
   text: string;
   disabled?: boolean;
   className?: string;
 }
 
-export const Dropdown: FC<DropdownProps> = ({ text, disabled = false, className = '', children }) => {
+export const DropdownBtn: FC<DropdownBtnProps> = ({ text, disabled = false, className = '', children }) => {
   const [ isOpen, toggle ] = useToggle();
   const toggleClasses = `dropdown__btn btn-block ${className}`;
 
   return (
-    <BsDropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
+    <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
       <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
       <DropdownMenu className="w-100">{children}</DropdownMenu>
-    </BsDropdown>
+    </Dropdown>
   );
 };

src/utils/dates/DateRangeSelector.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DropdownItem } from 'reactstrap';
-import { Dropdown } from '../Dropdown';
+import { DropdownBtn } from '../DropdownBtn';
 import {
   DateInterval,
   DateRange,
@@ -39,7 +39,7 @@ export const DateRangeSelector = (
   };
 
   return (
-    <Dropdown disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
+    <DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
       <DropdownItem
         active={activeInterval === undefined && dateRangeIsEmpty(activeDateRange)}
         onClick={updateInterval(undefined)}
@@ -63,6 +63,6 @@ export const DateRangeSelector = (
           onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
         />
       </DropdownItem>
-    </Dropdown>
+    </DropdownBtn>
   );
 };