Merge pull request #80 from back4app/analytics-report-event

Analytics report event

Author: paivaric

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -32,6 +32,31 @@ export default class ExplorerActiveChartButton extends React.Component {
     this.node = ReactDOM.findDOMNode(this);
   }
 
+  componentWillMount() {
+    // Used to close query picker
+    document.addEventListener('mousedown', this.handleClick.bind(this), false)
+  }
+
+  componentWillUnmount() {
+    // Used to close query picker
+    document.removeEventListener('mousedown', this.handleClick.bind(this), false)
+  }
+
+  // Intercept all click events
+  handleClick(e) {
+    // Verify if the click is outside the picker
+    if (this.state.open && this.parentNode && !this.parentNode.contains(e.target)) {
+      // Click target is not inside the configuration dropdown
+      if (e.target.parentNode && !e.target.parentNode.className.match('menu'))
+        this.handleClosePopover() // Close picker
+    }
+  }
+
+  // Set parent node
+  setParentNode(node) {
+    this.parentNode = node
+  }
+
   handleCheckbox() {
     let nextActiveState = !this.state.active;
     this.props.onToggle(nextActiveState);
@@ -40,16 +65,36 @@ export default class ExplorerActiveChartButton extends React.Component {
     });
   }
 
-  handleSave(query) {
+  handleSave(query, saveOnDatabase) {
     this.setState({ open: false });
-    this.props.onSave(query);
+    this.props.onSave(query, saveOnDatabase);
   }
 
   handleDismiss() {
     this.setState({ open: false });
     this.props.onDismiss();
   }
 
+  handleOpenPopover() {
+    let position = Position.inDocument(this.node);
+    let align = Directions.LEFT;
+    if (position.x > 700) {
+      position.x += this.node.clientWidth;
+      align = Directions.RIGHT;
+    }
+    // Add the button height to the picker appear on the bottom
+    position.y += this.node.clientHeight
+    this.setState({
+      open: !this.state.open,
+      position,
+      align
+    });
+  }
+
+  handleClosePopover() {
+    this.setState({ open: false });
+  }
+
   renderButton() {
     let checkMark = null;
     let color = '#343445';
@@ -63,19 +108,7 @@ export default class ExplorerActiveChartButton extends React.Component {
       dropdown = (
         <div
           className={[styles.rightArrow, verticalCenter].join(' ')}
-          onClick={() => {
-            let position = Position.inDocument(this.node);
-            let align = Directions.LEFT;
-            if (position.x > 700) {
-              position.x += this.node.clientWidth;
-              align = Directions.RIGHT;
-            }
-            this.setState({
-              open: !this.state.open,
-              position,
-              align
-            });
-          }} />
+          onClick={this.handleOpenPopover.bind(this)} />
       );
     }
 
@@ -90,7 +123,11 @@ export default class ExplorerActiveChartButton extends React.Component {
           }}>
           {checkMark}
         </div>
-        <div className={styles.label}>{this.props.query.name}</div>
+        <div
+          className={styles.label}
+          onClick={this.handleOpenPopover.bind(this)}>
+          {this.props.query.name}
+        </div>
         {dropdown}
       </div>
     );
@@ -110,12 +147,17 @@ export default class ExplorerActiveChartButton extends React.Component {
 
       popover = (
         <Popover
-          fixed={false}
+          fixed={true}
           position={this.state.position}>
-          <div className={classes.join(' ')}>
-            {content}
-            <div className={styles.callout} style={calloutStyle}></div>
+          <div
+            ref={this.setParentNode.bind(this)}
+            className={classes.join(' ')}>
+            <div
+              className={styles.callout}
+              style={calloutStyle}>
+            </div>
             <ExplorerQueryComposer
+              index={this.props.index || 0}
               isNew={false}
               query={this.props.query}
               isTimeSeries={this.props.isTimeSeries}

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss

@@ -45,7 +45,7 @@
   position: absolute;
   max-width: 200px;
   left: 30px;
-  top: 8px;
+  top: 4px;
 }
 
 .composerContainer {

src/components/ExplorerMenuButton/ExplorerMenuButton.react.js

@@ -24,12 +24,38 @@ export default class ExplorerMenuButton extends React.Component {
       position: null,
       align: Directions.LEFT
     };
+    this.parentNode = {}
   }
 
   componentDidMount() {
     this.node = ReactDOM.findDOMNode(this);
   }
 
+  componentWillMount() {
+    // Used to close query picker
+    document.addEventListener('mousedown', this.handleClick.bind(this), false)
+  }
+
+  componentWillUnmount() {
+    // Used to close query picker
+    document.removeEventListener('mousedown', this.handleClick.bind(this), false)
+  }
+
+  // Intercept all click events
+  handleClick(e) {
+    // Verify if the click is outside the picker
+    if (this.state.currentView && this.parentNode && !this.parentNode.contains(e.target)) {
+      // Click target is not inside the configuration dropdown
+      if (e.target.parentNode && !e.target.parentNode.className.match('menu'))
+        this.toggle() // Close picker
+    }
+  }
+
+  // Set parent node
+  setParentNode(node) {
+    this.parentNode = node
+  }
+
   toggle() {
     this.setState(() => {
       if (this.state.currentView) {
@@ -41,6 +67,8 @@ export default class ExplorerMenuButton extends React.Component {
         position.x += this.node.clientWidth;
         align = Directions.RIGHT;
       }
+      // Add the button height to the picker appear on the bottom
+      position.y += this.node.clientHeight
       return {
         currentView: 'picker',
         position,
@@ -102,17 +130,18 @@ export default class ExplorerMenuButton extends React.Component {
             <ExplorerQueryComposer
               isNew={true}
               isTimeSeries={this.props.isTimeSeries}
-              onSave={this.handleSave.bind(this)} />
+              onSave={this.handleSave.bind(this)}
+              index={this.props.index || 0}/>
           );
           break;
       }
 
       popover = (
         <Popover
-          fixed={false}
+          fixed={true}
           position={this.state.position}>
-          <div className={classes.join(' ')}>
-            {content}
+          <div ref={this.setParentNode.bind(this)}
+            className={classes.join(' ')}>
             <div className={styles.callout} style={calloutStyle}></div>
             {queryMenu}
           </div>