update modal provider to accept props

Author: aulneau

.gitignore

@@ -16,6 +16,5 @@ lib
 !src/lib
 
 accessTokens.js
-
 yarn.lock
 package-lock.json

src/components/containers/Modal.js

@@ -19,33 +19,27 @@ const ModalHeader = ({title, handleClose}) => (
 class Modal extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      isAnimatingOut: false,
-    };
   }
 
-  handleClose() {
-    this.setState({isAnimatingOut: true});
-    const {closeModal} = this.context;
-    const animationDuration = 600;
-    setTimeout(() => {
-      this.setState({isAnimatingOut: false});
-      closeModal();
-    }, animationDuration);
-  }
   render() {
     const {children, title} = this.props;
     let classes = 'modal';
-    if (this.state.isAnimatingOut) {
+    if (this.context.isAnimatingOut) {
       classes += ' modal--animate-out';
     }
     return (
       <div className={classes}>
         <div className="modal__card">
-          <ModalHeader title={title} handleClose={() => this.handleClose()} />
+          <ModalHeader
+            title={title}
+            handleClose={() => this.context.handleClose()}
+          />
           {children}
         </div>
-        <div className="modal__backdrop" onClick={() => this.handleClose()} />
+        <div
+          className="modal__backdrop"
+          onClick={() => this.context.handleClose()}
+        />
       </div>
     );
   }
@@ -70,7 +64,8 @@ Modal.propTypes = {
 };
 
 Modal.contextTypes = {
-  closeModal: PropTypes.func,
+  handleClose: PropTypes.func,
+  isAnimatingOut: PropTypes.bool,
 };
 
 export default Modal;

src/components/containers/ModalProvider.js

@@ -6,9 +6,12 @@ class ModalProvider extends React.Component {
     super(props);
     this.state = {
       component: null,
+      componentProps: {},
       open: false,
+      isAnimatingOut: false,
     };
   }
+
   componentDidUpdate() {
     const body = document.body;
     const {open} = this.state;
@@ -24,16 +27,16 @@ class ModalProvider extends React.Component {
     }
   }
 
-  openModal(component) {
+  openModal(component, props) {
     if (!component) {
       throw Error('You need to provide a component for the modal to open!');
     }
-
     const {open} = this.state;
 
     if (!open) {
       this.setState({
         component: component,
+        componentProps: props,
         open: true,
       });
     }
@@ -48,20 +51,32 @@ class ModalProvider extends React.Component {
       });
     }
   }
+  handleClose() {
+    this.setState({isAnimatingOut: true});
+    const animationDuration = 600;
+    setTimeout(() => {
+      this.setState({isAnimatingOut: false});
+      this.closeModal();
+    }, animationDuration);
+  }
 
   getChildContext() {
     return {
-      openModal: c => this.openModal(c),
+      openModal: (c, p) => this.openModal(c, p),
       closeModal: () => this.closeModal(),
+      handleClose: () => this.handleClose(),
+      isAnimatingOut: this.state.isAnimatingOut,
     };
   }
 
   render() {
-    const {component: Component} = this.state;
+    const {component: Component, componentProps, isAnimatingOut} = this.state;
     return (
       <Fragment>
         {this.props.children}
-        {this.state.open ? Component : null}
+        {this.state.open ? (
+          <Component isAnimatingOut={isAnimatingOut} {...componentProps} />
+        ) : null}
       </Fragment>
     );
   }
@@ -73,6 +88,8 @@ ModalProvider.propTypes = {
 ModalProvider.childContextTypes = {
   openModal: PropTypes.func,
   closeModal: PropTypes.func,
+  handleClose: PropTypes.func,
+  isAnimatingOut: PropTypes.bool,
 };
 
 export default ModalProvider;

src/components/fields/TraceSelector.js

@@ -140,6 +140,7 @@ class TraceSelector extends Component {
   }
 
   updatePlot(value) {
+
     const {updateContainer} = this.props;
     if (updateContainer) {
       updateContainer(traceTypeToPlotlyInitFigure(value));
@@ -160,7 +161,7 @@ class TraceSelector extends Component {
         <div
           className="trace-type-select-dropdown__wrapper"
           onClick={() =>
-            this.context.openModal(<TraceTypeSelector {...props} />)
+            this.context.openModal(TraceTypeSelector, props)
           }
         >
           <UnconnectedDropdown {...props} />

src/components/widgets/TraceTypeSelector.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
 import Modal, {ModalContent} from 'components/containers/Modal';
+import {traceTypeToPlotlyInitFigure} from 'lib';
 
 // to be removed when icons are converted to svg
 function slugify(text) {
@@ -15,7 +16,7 @@ function slugify(text) {
     .replace(/-+$/, ''); // Trim - from end of text
 }
 
-const Item = ({item, active, columnLength, columnIndex}) => {
+const Item = ({item, active, columnLength, columnIndex, handleClick}) => {
   const isEven = value => value % 2 === 0;
   const middle = Math.floor(columnLength / 2);
 
@@ -41,7 +42,10 @@ const Item = ({item, active, columnLength, columnIndex}) => {
   }
   const {label, type} = item;
   return (
-    <div className={`trace-item${active ? ' trace-item--active' : ''}`}>
+    <div
+      className={`trace-item${active ? ' trace-item--active' : ''}`}
+      onClick={() => handleClick()}
+    >
       <div className="trace-item__actions">
         <a
           className="trace-item__actions__item"
@@ -79,6 +83,10 @@ const Item = ({item, active, columnLength, columnIndex}) => {
 };
 
 class TraceTypeSelector extends Component {
+  selectAndClose(value) {
+    this.props.updateContainer(traceTypeToPlotlyInitFigure(value));
+    this.context.handleClose();
+  }
   renderCategories() {
     const {fullValue} = this.props;
     const {traces: TRACE_TYPES, categories} = this.context.traceSelectorConfig;
@@ -99,6 +107,7 @@ class TraceTypeSelector extends Component {
                 key={key}
                 active={fullValue === key}
                 item={value.meta}
+                handleClick={() => this.selectAndClose(value.meta.type)}
               />
             ))}
           </div>
@@ -117,9 +126,12 @@ class TraceTypeSelector extends Component {
     );
   }
 }
-
+TraceTypeSelector.propTypes = {
+  updateContainer: PropTypes.func,
+};
 TraceTypeSelector.contextTypes = {
   traceSelectorConfig: PropTypes.object,
+  handleClose: PropTypes.func,
 };
 Item.propTypes = {
   item: PropTypes.object,

yarn.lock

@@ -1673,10 +1673,6 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chain-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
 chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -2611,10 +2607,6 @@ [email protected]:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.6.7.tgz#6858138efb6b77405ce99146d0be5e4f7282813f"
 
-dom-helpers@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
-
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -7943,21 +7935,6 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-transition-group@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
-  dependencies:
-    chain-function "^1.0.0"
-    classnames "^2.2.5"
-    dom-helpers "^3.2.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.5.8"
-    warning "^3.0.0"
-
-react-tunnels@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-tunnels/-/react-tunnels-1.0.2.tgz#cd03aaaeb47305e38d471303e5569dd2427a01b9"
-
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"