Ads Modal component

This is same as v0.7.7, but without PWA-changes that can be dangerous
for the current community-app version.

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Topcoder React Utils Changelog
 
+### v0.7.7
+- Adds [**`Modal`**](docs/modal.md) component.
+
 ### v0.7.2
 Fix of `<Link>` and `<NavLink>` logic.
 

README.md

@@ -43,53 +43,54 @@ $ ./node_modules/.bin/topcoder-lib-setup
 
 ## Reference
 ### Configurations
-- [**Babel Configurations**](docs/babel-config.md) — Standard
+- [**Babel Configurations**](docs/babel-config.md) – Standard
   configurations for [Babel](https://babeljs.io/);
-- [**ESLint Configurations**](docs/eslint-config.md) — Standard
+- [**ESLint Configurations**](docs/eslint-config.md) – Standard
   configurations for [ESLint](https://eslint.org/);
-- [**Jest Configurations**](docs/jest-config.md) — Standard configurations
+- [**Jest Configurations**](docs/jest-config.md) – Standard configurations
   for [Jest](https://facebook.github.io/jest/);
-- [**Stylelint Configurations**](docs/stylelint-config.md) — Standard
+- [**Stylelint Configurations**](docs/stylelint-config.md) – Standard
   configurations for [Stylelint](https://stylelint.io)
-- [**Webpack Configurations**](docs/webpack-config.md) — Standard
+- [**Webpack Configurations**](docs/webpack-config.md) – Standard
   configurations for [Webpack](https://webpack.js.org/).
 
 ### Components
-- [**`Avatar`**](docs/avatar.md) — The standard component for user avatars;
-- [**`Button`**](docs/button.md) — Handles buttons and button-like links
+- [**`Avatar`**](docs/avatar.md) – The standard component for user avatars;
+- [**`Button`**](docs/button.md) – Handles buttons and button-like links
   (components that look like regular buttons, but behave as links) in the same
   uniform manner;
-- [**`Link` and `NavLink`**](docs/link-and-navlink.md) — Auxiliary wrappers
+- [**`Link` and `NavLink`**](docs/link-and-navlink.md) – Auxiliary wrappers
   around [React Router](https://github.com/ReactTraining/react-router)'s `<Link>`
   and `<NavLink>` components; they help to handle external and internal links in
   the same uniform manner;
-- [**`ScalableRect`**](docs/scalable-rect.md) &mdash; Container that keeps
+- [**`Modal`**](docs/modal.md) &ndash; Themeable modal component;
+- [**`ScalableRect`**](docs/scalable-rect.md) &ndash; Container that keeps
   the specified aspect ratio regardless the width you set.
 
 ### NodeJS Scripts
-- [**topcoder-lib-setup**](docs/topcoder-lib-setup-script.md) &mdash; Helps to
+- [**topcoder-lib-setup**](docs/topcoder-lib-setup-script.md) &ndash; Helps to
   install and upgrade **topcoder-react-utils** and other similar libraries.
 
 ### Redux Templates
-- [**Item**](docs/redux-item.md) &mdash; An async piece of data in Redux store.
+- [**Item**](docs/redux-item.md) &ndash; An async piece of data in Redux store.
 
 ### Utilities
-- [**Client**](docs/client.md) &mdash; Client-side initialization code.
-- [**Config**](docs/config.md) &mdash; Isomorphic app config;
-- [**Global Styles**](docs/global-styles.md) &mdash; Global styles necessary for
+- [**Client**](docs/client.md) &ndash; Client-side initialization code.
+- [**Config**](docs/config.md) &ndash; Isomorphic app config;
+- [**Global Styles**](docs/global-styles.md) &ndash; Global styles necessary for
   a generic application;
-- [**Isomorphy**](docs/isomorphy-utils.md) &mdash; Collection of helpers to deal
+- [**Isomorphy**](docs/isomorphy-utils.md) &ndash; Collection of helpers to deal
   with isomorphic aspects of the code;
-- [**Jest utils**](docs/jest-utils.md) &mdash; Collection of helpers to be used
+- [**Jest utils**](docs/jest-utils.md) &ndash; Collection of helpers to be used
   in Jest tests code;
-- [**Redux utils**](docs/redux-utils.md) &mdash; *TO BE DOCUMENTED*
-- [**SCSS Mixins**](docs/scss-mixins.md) &mdash; Collection of useful style
+- [**Redux utils**](docs/redux-utils.md) &ndash; *TO BE DOCUMENTED*
+- [**SCSS Mixins**](docs/scss-mixins.md) &ndash; Collection of useful style
   mixins;
-- [**Server**](docs/server.md) &mdash; Easy creation and launch of web-server
+- [**Server**](docs/server.md) &ndash; Easy creation and launch of web-server
   with standard configuration, that serves a ReactJS application with or without
   server-side rendering, supports development tools (Hop Module Reloading), and
   can be further configured for the needs of specific projects.
-- [**Webpack**](docs/webpack-utils.md) &mdash; Various utils related to the
+- [**Webpack**](docs/webpack-utils.md) &ndash; Various utils related to the
   Webpack bundling process.
 
 ## Development

__tests__/__snapshots__/index.js.snap

@@ -4,11 +4,13 @@ exports[`Export at client side 1`] = `
 Object {
   "AppChunk": [Function],
   "Avatar": [Function],
+  "BaseModal": [Function],
   "Button": [Function],
   "DevTools": [Function],
   "JU": null,
   "Link": [Function],
   "MetaTags": [Function],
+  "Modal": [Function],
   "NavLink": [Function],
   "ScalableRect": [Function],
   "actions": Object {
@@ -64,6 +66,7 @@ exports[`Export at server side 1`] = `
 Object {
   "AppChunk": [Function],
   "Avatar": [Function],
+  "BaseModal": [Function],
   "Button": [Function],
   "DevTools": [Function],
   "JU": Object {
@@ -162,6 +165,7 @@ Object {
   },
   "Link": [Function],
   "MetaTags": [Function],
+  "Modal": [Function],
   "NavLink": [Function],
   "ScalableRect": [Function],
   "actions": Object {

docs/modal.md

@@ -0,0 +1,27 @@
+# Modal
+
+Implements a simple themeable modal window.
+
+*TODO: This is a raw description of the component, should be improved*
+
+**topcoder-react-utils** exports two versions of the modal component,
+`BaseModal` implements a non-themed version, and `Modal` is its version
+wrapped into a default style, using `react-css-super-themr` lib.
+
+### Props
+
+Both **BaseModal** and **Modal** components accept:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| children | ReactJS Node | `null` | Modal content to render.|
+| onCancel | `Function` | `noop` | Callback to trigger when the modal is closed. |
+
+**BaseModal** accepts additionally _theme_ prop, which should be an object,
+and defaults to `{}`. Theme object may have the following fields:
+
+| Field | Description |
+| --- | --- |
+| container | CSS class to apply to the **BaseModal** root container. |
+| overlay | CSS class to apply to the overlay opened behind the **BaseModal** |
+

package-lock.json

@@ -121,5 +121,5 @@
     "mkDistDir:prod": "mkdir -p dist/prod/shared/utils && mkdir -p dist/prod/client",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.7.5"
+  "version": "0.7.5.1"
 }

package.json

@@ -8,6 +8,7 @@ import client from 'client';
 import DevTools from 'components/DevTools';
 import Link from 'components/Link';
 import MetaTags from 'components/MetaTags';
+import Modal, { BaseModal } from 'components/Modal';
 import NavLink from 'components/NavLink';
 import reducers from 'reducers';
 import ScalableRect from 'components/ScalableRect';
@@ -24,12 +25,14 @@ module.exports = {
   actions,
   AppChunk,
   Avatar,
+  BaseModal,
   Button,
   client,
   DevTools,
   Link,
   NavLink,
   MetaTags,
+  Modal,
   ScalableRect,
   reducers,
   server,

src/index.js

@@ -0,0 +1,80 @@
+/**
+ * This generic component will implement the semi-transparent background
+ * and the white window in the center, which wraps the content provided as
+ * children.
+ *
+ * When semi-transparent background is clicked, it should trigger the onCancel()
+ * callback passed from the parent.
+ */
+
+/* global document */
+
+import _ from 'lodash';
+import React from 'react';
+import ReactDom from 'react-dom';
+import PT from 'prop-types';
+import { themr } from 'react-css-super-themr';
+
+import defaultStyle from './style.scss';
+
+/* NOTE: Modal component is implemented as class, as it demands advanced
+ * interaction with DOM upon mount and unmount. */
+class Modal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.portal = document.createElement('div');
+  }
+
+  componentDidMount() {
+    document.body.classList.add('scrolling-disabled-by-modal');
+    document.body.appendChild(this.portal);
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove('scrolling-disabled-by-modal');
+    document.body.removeChild(this.portal);
+  }
+
+  render() {
+    const {
+      children,
+      onCancel,
+      theme,
+    } = this.props;
+    return ReactDom.createPortal(
+      (
+        <React.Fragment>
+          <div
+            className={theme.container}
+            onWheel={event => event.stopPropagation()}
+          >
+            {children}
+          </div>
+          <button
+            onClick={() => onCancel()}
+            className={theme.overlay}
+            type="button"
+          />
+        </React.Fragment>
+      ),
+      this.portal,
+    );
+  }
+}
+
+Modal.defaultProps = {
+  onCancel: _.noop,
+  children: null,
+  theme: {},
+};
+
+Modal.propTypes = {
+  onCancel: PT.func,
+  children: PT.node,
+  theme: PT.shape(),
+};
+
+/* Non-themed version of the Modal. */
+export const BaseModal = Modal;
+
+export default themr('Modal', defaultStyle)(Modal);

src/shared/components/Modal/index.jsx

@@ -0,0 +1,44 @@
+@import '~styles/mixins';
+
+:global {
+  body.scrolling-disabled-by-modal {
+    overflow: hidden;
+  }
+}
+
+.overlay {
+  background: #ebebeb;
+  border: none;
+  height: 100%;
+  left: 0;
+  opacity: 0.8;
+  outline: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 998;
+}
+
+.container {
+  background: #fff;
+  box-shadow: 0 0 14px 1px rgba(38, 38, 40, 0.15);
+  border-radius: 4;
+  max-height: 95vh;
+  max-width: $screen-md;
+  overflow: hidden;
+  padding: 40;
+  width: 480px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+
+  @include xs-to-lg {
+    max-width: 95vw;
+  }
+
+  @include xs-to-sm {
+    padding: 40px 10px;
+  }
+}