Added max_intervals prop to Interval component

As per #222. With integration test.
plotly · Jul 4, 2018 · c885b8f · c885b8f
1 parent 16515bb
commit c885b8f
Show file tree

Hide file tree

Showing 4 changed files with 107,959 additions and 126 deletions.
diff --git a/dash_core_components/bundle.js b/dash_core_components/bundle.js
diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json
@@ -139,73 +139,6 @@
       }
     }
   },
-  "src/components/Confirm.react.js": {
-    "description": "Confirm wraps window.confirm",
-    "displayName": "Confirm",
-    "methods": [],
-    "props": {
-      "id": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "message": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "init": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "value": {
-              "name": "any",
-              "required": false
-            },
-            "ask": {
-              "name": "bool",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": ""
-      },
-      "result": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "timestamp": {
-              "name": "custom",
-              "raw": "PropTypes.integer",
-              "required": false
-            },
-            "value": {
-              "name": "any",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{\n    timestamp: -1\n}",
-          "computed": false
-        }
-      },
-      "setProps": {
-        "type": {
-          "name": "func"
-        },
-        "required": false,
-        "description": "Dash-assigned callback that gets fired when the value changes."
-      }
-    }
-  },
   "src/components/DatePickerRange.react.js": {
     "description": "DatePickerRange is a tailor made component designed for selecting\ntimespan across multiple days off of a calendar.\n\nThe DatePicker integrates well with the Python datetime module with the\nstartDate and endDate being returned in a string format suitable for\ncreating datetime objects.\n\nThis component is based off of Airbnb's react-dates react component\nwhich can be found here: https://github.com/airbnb/react-dates",
     "displayName": "DatePickerRange",
@@ -1687,6 +1620,17 @@
           "computed": false
         }
       },
+      "max_intervals": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "Number of times the interval will be fired",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
       "fireEvent": {
         "type": {
           "name": "func"

diff --git a/src/components/Interval.react.js b/src/components/Interval.react.js
@@ -35,15 +35,21 @@ export default class Interval extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if ((!this.props.fireEvent && nextProps.fireEvent) ||
-            (!this.props.setProps && nextProps.setProps)) {
-            this.setInterval(nextProps);
-        } else if (
-            this.props.interval !== nextProps.interval &&
-            this.state.intervalId
-        ) {
+        if(nextProps.n_intervals < this.props.max_intervals || this.props.max_intervals === 0) {
+            if ((!this.props.fireEvent && nextProps.fireEvent) ||
+                (!this.props.setProps && nextProps.setProps)
+            ) {
+                this.setInterval(nextProps);
+            } else if (
+                this.props.interval !== nextProps.interval &&
+                this.state.intervalId
+            ) {
+                window.clearInterval(this.state.intervalId);
+                this.setInterval(nextProps);
+            }
+        }
+        else {
             window.clearInterval(this.state.intervalId);
-            this.setInterval(nextProps);
         }
     }
 
@@ -75,6 +81,11 @@ Interval.propTypes = {
      */
     n_intervals: PropTypes.number,
 
+    /**
+     * Number of times the interval will be fired 
+     */
+    max_intervals: PropTypes.number,
+
     /**
      * Dash assigned callback
      */
@@ -90,5 +101,6 @@ Interval.propTypes = {
 
 Interval.defaultProps = {
     interval: 1000,
-    n_intervals: 0
+    n_intervals: 0,
+    max_intervals: 0
 };
diff --git a/test/test_integration.py b/test/test_integration.py
@@ -528,3 +528,22 @@ def update_graph(n_clicks):
         button.click()
         time.sleep(2)
         self.snapshot('candlestick - 2 click')
+
+    def test_interval(self):
+        app = dash.Dash(__name__)
+        app.layout = html.Div([
+            html.Div(id='output'),
+            dcc.Interval(id='interval', interval=1, max_intervals=2)
+        ])
+
+        @app.callback(Output('output', 'children'),
+                    [Input('interval', 'n_intervals')])
+        def update_text(n):
+            return "{}".format(n)
+
+        self.startServer(app=app)
+
+        time.sleep(2) # wait for interval to finish
+
+        output = self.wait_for_element_by_css_selector('#output')
+        self.assertEqual(output.text, '2')