Made clicking on more parts of the backdrop dismiss it

Author: hsource

src/components/Carousel.js

@@ -87,6 +87,15 @@ 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';
+
 class Carousel extends Component<CarouselProps, CarouselState> {
   commonProps: any; // TODO
   components: CarouselComponents;
@@ -381,7 +390,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
               {...this.getTrackProps(this.props)}
               style={{ display: 'flex', alignItems: 'center' }}
               currentView={currentIndex}
-              className={className('track')}
+              className={className(trackBaseClassName)}
               onViewChange={this.handleViewChange}
               ref={this.getTrack}
             >

src/components/Footer.js

@@ -42,6 +42,13 @@ 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 Footer = (props: Props) => {
   const { components, getStyles, innerProps, isFullscreen, isModal } = props;
 
@@ -51,12 +58,12 @@ const Footer = (props: Props) => {
 
   const state = { isFullscreen, isModal };
   const cn = {
-    container: className('footer', state),
+    container: className(footerBaseClassName, state),
     caption: className('footer__caption', state),
     count: className('footer__count', state),
   };
   const css = {
-    container: getStyles('footer', props),
+    container: getStyles(footerBaseClassName, props),
     caption: getStyles('footerCaption', props),
     count: getStyles('footerCount', props),
   };

src/components/Header.js

@@ -36,6 +36,13 @@ 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';
+
 const Header = (props: Props) => {
   const {
     components,
@@ -61,8 +68,8 @@ const Header = (props: Props) => {
 
   return (
     <Div
-      css={getStyles('header', props)}
-      className={className('header', state)}
+      css={getStyles(headerBaseClassName, props)}
+      className={className(headerBaseClassName, state)}
       // TODO glam prefixer fails on gradients
       // https://github.com/threepointone/glam/issues/35
       style={{

src/components/Modal/Modal.js

@@ -10,9 +10,12 @@ import {
   type ModalComponents,
 } from '../defaultComponents';
 import { Fade, SlideUp } from './Animation';
-import { type CarouselType } from '../Carousel';
+import { type CarouselType, trackBaseClassName } 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';
 
 type MouseOrKeyboardEvent = MouseEvent | KeyboardEvent;
 export type CloseType = (event: MouseOrKeyboardEvent) => void;
@@ -55,6 +58,17 @@ const defaultProps = {
   preventScroll: true,
   styles: {},
 };
+
+/** Classes that when clicked on, close the backdrop */
+const backdropClassNames = new Set(
+  [
+    viewBaseClassName,
+    headerBaseClassName,
+    footerBaseClassName,
+    trackBaseClassName,
+  ].map(className),
+);
+
 class Modal extends Component<Props, State> {
   commonProps: any; // TODO
   components: ModalComponents;
@@ -106,10 +120,11 @@ class Modal extends Component<Props, State> {
     if (allowClose) this.handleClose(event);
   };
   handleBackdropClick = (event: MouseEvent) => {
-    if (
-      !event.target.classList.contains(className('view')) ||
-      !this.props.closeOnBackdropClick
-    ) {
+    const hasBackdropClassName = event.target.classList.some(className =>
+      backdropClassNames.has(className),
+    );
+
+    if (!hasBackdropClassName || !this.props.closeOnBackdropClick) {
       return;
     }
 

src/components/View.js

@@ -20,6 +20,13 @@ 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';
+
 const View = (props: Props) => {
   const { data, formatters, getStyles, index, isFullscreen, isModal } = props;
   const innerProps = {
@@ -29,8 +36,8 @@ const View = (props: Props) => {
 
   return (
     <Div
-      css={getStyles('view', props)}
-      className={className('view', { isFullscreen, isModal })}
+      css={getStyles(viewBaseClassName, props)}
+      className={className(viewBaseClassName, { isFullscreen, isModal })}
     >
       <Img
         {...innerProps}