Merge pull request #357 from hsource/dismiss-backdrop-click

Made clicking on more parts of the backdrop dismiss modal

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,6 +88,8 @@ const defaultProps = {
  },
 };
 
+const trackBaseClassName = componentBaseClassNames.Track;
+
 class Carousel extends Component<CarouselProps, CarouselState> {
  commonProps: any; // TODO
  components: CarouselComponents;
@@ -381,7 +384,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

@@ -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,6 +43,8 @@ export const footerCSS = ({ isModal, interactionIsIdle }: State) => ({
  },
 });
 
+const footerBaseClassName = componentBaseClassNames.Footer;
+
 const Footer = (props: Props) => {
  const { components, getStyles, innerProps, isFullscreen, isModal } = props;
 
@@ -51,12 +54,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

@@ -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,6 +37,8 @@ export const headerCSS = ({ interactionIsIdle }: State) => ({
  zIndex: 1,
 });
 
+const headerBaseClassName = componentBaseClassNames.Header;
+
 const Header = (props: Props) => {
  const {
  components,
@@ -61,8 +64,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

@@ -13,6 +13,7 @@ import { Fade, SlideUp } from './Animation';
 import { type CarouselType } from '../Carousel';
 import { defaultModalStyles, type ModalStylesConfig } from '../../styles';
 import { isTouch, className } from '../../utils';
+import componentBaseClassNames from '../componentBaseClassNames';
 
 type MouseOrKeyboardEvent = MouseEvent | KeyboardEvent;
 export type CloseType = (event: MouseOrKeyboardEvent) => void;
@@ -55,6 +56,17 @@ const defaultProps = {
  preventScroll: true,
  styles: {},
 };
+
+/** Classes that when clicked on, close the backdrop */
+const backdropClassNames = new Set(
+ [
+ componentBaseClassNames.View,
+ componentBaseClassNames.Header,
+ componentBaseClassNames.Footer,
+ componentBaseClassNames.Track,
+ ].map(className),
+);
+
 class Modal extends Component<Props, State> {
  commonProps: any; // TODO
  components: ModalComponents;
@@ -106,10 +118,14 @@ class Modal extends Component<Props, State> {
  if (allowClose) this.handleClose(event);
  };
  handleBackdropClick = (event: MouseEvent) => {
- if (
- !event.target.classList.contains(className('view')) ||
- !this.props.closeOnBackdropClick
- ) {
+ let hasBackdropClassName = false;
+ for (const targetClass of event.target.classList) {
+ if (backdropClassNames.has(targetClass)) {
+ hasBackdropClassName = true;
+ }
+ }
+
+ if (!hasBackdropClassName || !this.props.closeOnBackdropClick) {
  return;
  }
 

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,6 +21,8 @@ export const viewCSS = () => ({
  textAlign: 'center',
 });
 
+const viewBaseClassName = componentBaseClassNames.View;
+
 const View = (props: Props) => {
  const { data, formatters, getStyles, index, isFullscreen, isModal } = props;
  const innerProps = {
@@ -29,8 +32,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}

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;