Refactored all the classNames into common file to avoid import loops

src/components/Carousel.js

@@ -18,6 +18,7 @@ import { type ModalProps } from './Modal/Modal';
 import { className, isTouch } from '../utils';
 import formatters from '../formatters';
 import { type ViewsType } from '../types';
+import componentBaseClassNames from './componentBaseClassNames';
 
 type SpringConfig = { [key: string]: number };
 export type fn = any => void;
@@ -87,14 +88,7 @@ const defaultProps = {
  },
 };
 
-/**
- * Used to get the className to select the track (area above and below the
- * carousel) in other components.
- * 
- * This className is we call `className()` in utils with to get the full
- * className.
- */
-export const trackBaseClassName = 'track';
+export const trackBaseClassName = componentBaseClassNames.Track;
 
 class Carousel extends Component<CarouselProps, CarouselState> {
  commonProps: any; // TODO

src/components/Footer.js

@@ -7,6 +7,7 @@ import { smallDevice } from './css-helpers';
 import { Div, Span } from '../primitives';
 import type { PropsWithStyles, ViewType } from '../types';
 import { className } from '../utils';
+import componentBaseClassNames from './componentBaseClassNames';
 
 type State = { isModal: boolean, interactionIsIdle: boolean };
 type Props = State &
@@ -42,12 +43,7 @@ export const footerCSS = ({ isModal, interactionIsIdle }: State) => ({
  },
 });
 
-/**
- * Used to get the className to select the footer in other components.
- * This className is we call `className()` in utils with to get the full
- * className.
- */
-export const footerBaseClassName = 'footer';
+const footerBaseClassName = componentBaseClassNames.Footer;
 
 const Footer = (props: Props) => {
  const { components, getStyles, innerProps, isFullscreen, isModal } = props;

src/components/Header.js

@@ -7,6 +7,7 @@ import { Button, Div } from '../primitives';
 import { className } from '../utils';
 import type { PropsWithStyles } from '../types';
 import { Close, FullscreenEnter, FullscreenExit } from './svg';
+import componentBaseClassNames from './componentBaseClassNames';
 
 type State = { interactionIsIdle: boolean };
 type Props = PropsWithStyles &
@@ -36,12 +37,7 @@ export const headerCSS = ({ interactionIsIdle }: State) => ({
  zIndex: 1,
 });
 
-/**
- * Used to get the className to select the header in other components.
- * This className is we call `className()` in utils with to get the full
- * className.
- */
-export const headerBaseClassName = 'header';
+export const headerBaseClassName = componentBaseClassNames.Header;
 
 const Header = (props: Props) => {
  const {

src/components/Modal/Modal.js

@@ -10,12 +10,10 @@ import {
  type ModalComponents,
 } from '../defaultComponents';
 import { Fade, SlideUp } from './Animation';
-import { type CarouselType, trackBaseClassName } from '../Carousel';
+import { type CarouselType } from '../Carousel';
 import { defaultModalStyles, type ModalStylesConfig } from '../../styles';
 import { isTouch, className } from '../../utils';
-import { headerBaseClassName } from '../Header';
-import { footerBaseClassName } from '../Footer';
-import { viewBaseClassName } from '../View';
+import componentBaseClassNames from '../componentBaseClassNames';
 
 type MouseOrKeyboardEvent = MouseEvent | KeyboardEvent;
 export type CloseType = (event: MouseOrKeyboardEvent) => void;
@@ -62,10 +60,10 @@ const defaultProps = {
 /** Classes that when clicked on, close the backdrop */
 const backdropClassNames = new Set(
  [
- viewBaseClassName,
- headerBaseClassName,
- footerBaseClassName,
- trackBaseClassName,
+ componentBaseClassNames.View,
+ componentBaseClassNames.Header,
+ componentBaseClassNames.Footer,
+ componentBaseClassNames.Track,
  ].map(className),
 );
 

src/components/View.js

@@ -7,6 +7,7 @@ import { Div, Img } from '../primitives';
 import { type PropsWithStyles } from '../types';
 import { className } from '../utils';
 import { getSource } from './component-helpers';
+import componentBaseClassNames from './componentBaseClassNames';
 
 type Props = PropsWithStyles & {
  data: Object,
@@ -20,12 +21,7 @@ export const viewCSS = () => ({
  textAlign: 'center',
 });
 
-/**
- * Used to get the className to select the view in other components.
- * This className is we call `className()` in utils with to get the full
- * className.
- */
-export const viewBaseClassName = 'view';
+export const viewBaseClassName = componentBaseClassNames.View;
 
 const View = (props: Props) => {
  const { data, formatters, getStyles, index, isFullscreen, isModal } = props;

src/components/componentBaseClassNames.js

@@ -0,0 +1,13 @@
+/**
+ * Used to get the HTML class to select specific components.
+ * We call `className()` in utils with each of these to get the full className,
+ * with prefixes.
+ */
+const componentBaseClassNames = {
+ Header: 'header',
+ Footer: 'footer',
+ View: 'view',
+ Track: 'track',
+};
+
+export default componentBaseClassNames;