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>
   );
 };

test/domains/DomainSelector.test.tsx

@@ -4,7 +4,7 @@ import { DropdownItem, InputGroup } from 'reactstrap';
 import { DomainSelector } from '../../src/domains/DomainSelector';
 import { DomainsList } from '../../src/domains/reducers/domainsList';
 import { ShlinkDomain } from '../../src/api/types';
-import { Dropdown } from '../../src/utils/Dropdown';
+import { DropdownBtn } from '../../src/utils/DropdownBtn';
 
 describe('<DomainSelector />', () => {
   let wrapper: ShallowWrapper;
@@ -24,7 +24,7 @@ describe('<DomainSelector />', () => {
 
   it('shows dropdown by default', () => {
     const input = wrapper.find(InputGroup);
-    const dropdown = wrapper.find(Dropdown);
+    const dropdown = wrapper.find(DropdownBtn);
 
     expect(input).toHaveLength(0);
     expect(dropdown).toHaveLength(1);
@@ -34,10 +34,10 @@ describe('<DomainSelector />', () => {
   it('allows to toggle between dropdown and input', () => {
     wrapper.find(DropdownItem).last().simulate('click');
     expect(wrapper.find(InputGroup)).toHaveLength(1);
-    expect(wrapper.find(Dropdown)).toHaveLength(0);
+    expect(wrapper.find(DropdownBtn)).toHaveLength(0);
 
     wrapper.find('.domains-dropdown__back-btn').simulate('click');
     expect(wrapper.find(InputGroup)).toHaveLength(0);
-    expect(wrapper.find(Dropdown)).toHaveLength(1);
+    expect(wrapper.find(DropdownBtn)).toHaveLength(1);
   });
 });

test/utils/DropdownBtn.test.tsx

@@ -1,12 +1,12 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { DropdownMenu, DropdownToggle } from 'reactstrap';
 import { PropsWithChildren } from 'react';
-import { Dropdown, DropdownProps } from '../../src/utils/Dropdown';
+import { DropdownBtn, DropdownBtnProps } from '../../src/utils/DropdownBtn';
 
-describe('<Dropdown />', () => {
+describe('<DropdownBtn />', () => {
   let wrapper: ShallowWrapper;
-  const createWrapper = (props: PropsWithChildren<DropdownProps>) => {
+  const createWrapper = (props: PropsWithChildren<DropdownBtnProps>) => {
-    wrapper = shallow(<Dropdown {...props} />);
+    wrapper = shallow(<DropdownBtn {...props} />);
 
     return wrapper;
   };