Merge pull request plotly#2 from plotly/single-callback

Components receive a single callback prop `valueChanged`
AnnMarieW · Jun 30, 2016 · ea789bc · ea789bc
1 parent 4da2167
commit ea789bc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/packages/dash-core-components/src/components/EditableDiv.react.js b/packages/dash-core-components/src/components/EditableDiv.react.js
@@ -18,12 +18,21 @@ const baseStyles = {
 export default class EditableDiv extends Component {
 
     constructor(props) {
-        super(props)
-        this.state = {inEditMode: false}
+        super(props);
+
+        this.state = {
+            inEditMode: false
+        };
     }
 
     componentDidUpdate() {
-        if (this.state.inEditMode) ReactDOM.findDOMNode(this.refs.input).focus()
+        if (this.state.inEditMode) {
+            ReactDOM.findDOMNode(this.refs.input).focus();
+        }
+    }
+
+    handleChange(text) {
+        this.props.valueChanged({text});
     }
 
     render() {
@@ -39,7 +48,7 @@ export default class EditableDiv extends Component {
                             this.props.style
                         ])}
                         value={this.props.text}
-                        onChange={(e) => this.props.updateProps({text: e.target.value})}
+                        onChange={(e) => this.handleChange(e.target.value)}
                         onBlur={() => this.setState({inEditMode: false})}
                     />
                 </div>
@@ -80,12 +89,12 @@ EditableDiv.propTypes = {
 
     /**
      * Function that updates the state tree.
-     * Passed in from renderer.
      */
-    updateProps: PropTypes.func.isRequired
+    valueChanged: PropTypes.func
 };
 
 EditableDiv.defaultProps = {
     style: {},
-    editable: false
+    editable: false,
+    valueChanged: () => {}
 };
diff --git a/packages/dash-core-components/src/components/InputControl.react.js b/packages/dash-core-components/src/components/InputControl.react.js
@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 
 /*
- * A controlled input that calls `notifyObservers` on changes.
+ * A controlled input that calls `valueChanged` on changes.
  */
 export default class InputControl extends Component {
     constructor() {
@@ -12,14 +12,8 @@ export default class InputControl extends Component {
     }
 
     handleChange(value) {
-        this.setState({value})
-        /**
-         * TODO (#22): Remove conditional. Always pass a callback function
-         * to components that can change value.
-         */
-        if (this.props.notifyObservers) {
-            this.props.notifyObservers({value})
-        }
+        this.setState({value});
+        this.props.valueChanged({value});
     }
 
     render() {
@@ -37,9 +31,10 @@ InputControl.propTypes = {
 
     /**
      * Function that updates the state tree.
-     * Passed in from renderer IF the component has observers.
-     * TODO (#22): Always pass a callback function to components that can change
-     * value.
      */
-    notifyObservers: PropTypes.func
+    valueChanged: PropTypes.func
+};
+
+InputControl.defaultProps = {
+    valueChanged: () => {}
 };