Merge pull request #37 from plotly/stateful

Link and Location Components and Stateful Updates

Author: chriddyp

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.6.0] - 2017-07-18
+### Added
+- The `Slider` and the `RangeSlider` component can update when the user finishes dragging the slider rather than just while they drag. The default behaviour has remained the same (updates while dragging) but you can toggle that the updates only get fired on "mouse up" by setting `updatemode` to `'mouseup'` (`'drag'` is the default).
+- A `Link` and `Location` were added. `Location` represents the address bar of the web browser and `Link` provides a way to modify the address bar without refreshing the page. Combined, these two components can be used to create a "single page app" with multiple URLs. That is, apps that have mulitple URLs but surfing between the different pages doesn't trigger a full page refresh like it would with traditional links.
+- Previously, if callback functions weren't supplied to a component, it wouldn't update. This caused a lot of confusion: users would create a simple layout without any callbacks and then wonder why the sliders wouldn't slide or the text inputs wouldn't update. Now, all of the components manage their own state and their appearance will update regardless of whether Dash has assigned a callback to them.
+
 ## [0.5.3] - 2017-07-03
 ### Added
 - A `range` object is now included in the `selectedData` object that specifies

dash_core_components/metadata.json

@@ -566,6 +566,110 @@
       }
     }
   },
+  "src/components/Link.react.js": {
+    "description": "",
+    "methods": [
+      {
+        "name": "updateLocation",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      }
+    ],
+    "props": {
+      "href": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "refresh": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": ""
+      }
+    }
+  },
+  "src/components/Location.react.js": {
+    "description": "",
+    "methods": [
+      {
+        "name": "updateLocation",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "props",
+            "type": null
+          }
+        ],
+        "returns": null
+      }
+    ],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "pathname": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "refresh": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      }
+    }
+  },
   "src/components/Markdown.react.js": {
     "description": "A component that renders Markdown text as specified by the\nCommonMark spec.",
     "methods": [],
@@ -860,6 +964,27 @@
         "required": false,
         "description": "If true, the slider will be vertical"
       },
+      "updatemode": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'mouseup'",
+              "computed": false
+            },
+            {
+              "value": "'drag'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "Determines when the component should update\nits value. If `mouseup`, then the slider\nwill only trigger its value when the user has\nfinished dragging the slider. If `drag`, then\nthe slider will update its value continuously\nas it is being dragged.\nOnly use `drag` if your updates are fast.",
+        "defaultValue": {
+          "value": "'mouseup'",
+          "computed": false
+        }
+      },
       "fireEvent": {
         "type": {
           "name": "func"
@@ -890,7 +1015,7 @@
     }
   },
   "src/components/Slider.react.js": {
-    "description": "A numerical slider with a single handle.",
+    "description": "A slider component with a single handle.",
     "methods": [],
     "props": {
       "id": {
@@ -983,6 +1108,27 @@
         "required": false,
         "description": "If true, the slider will be vertical"
       },
+      "updatemode": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'mouseup'",
+              "computed": false
+            },
+            {
+              "value": "'drag'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "Determines when the component should update\nits value. If `mouseup`, then the slider\nwill only trigger its value when the user has\nfinished dragging the slider. If `drag`, then\nthe slider will update its value continuously\nas it is being dragged.\nOnly use `drag` if your updates are fast.",
+        "defaultValue": {
+          "value": "'mouseup'",
+          "computed": false
+        }
+      },
       "fireEvent": {
         "type": {
           "name": "func"

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.5.3'
+__version__ = '0.6.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/Checklist.react.js

@@ -1,56 +1,67 @@
 import {append, contains, without} from 'ramda';
-import React, {PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
  * The values and labels of the checklist is specified in the `options`
  * property and the checked items are specified with the `values` property.
  * Each checkbox is rendered as an input with a surrounding label.
  */
-export default function Checklist(props) {
-    const {
-        fireEvent,
-        id,
-        inputClassName,
-        inputStyle,
-        labelClassName,
-        labelStyle,
-        options,
-        values,
-        setProps
-    } = props;
-    return (
-        <div id={id}>
-            {options.map(option => (
-                <label
-                    key={option.value}
-                    style={labelStyle}
-                    className={labelClassName}
-                >
-                    <input
-                        checked={contains(option.value, values)}
-                        className={inputClassName}
-                        disabled={Boolean(option.disabled)}
-                        style={inputStyle}
-                        type="checkbox"
-                        onChange={() => {
-                            if (setProps) {
+export default class Checklist extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {values: props.values};
+    }
+
+    componentWillReceiveProps(newProps) {
+        this.setState({values: newProps.values});
+    }
+
+    render() {
+        const {
+            fireEvent,
+            id,
+            inputClassName,
+            inputStyle,
+            labelClassName,
+            labelStyle,
+            options,
+            setProps
+        } = this.props;
+        const {values} = this.state;
+
+        return (
+            <div id={id}>
+                {options.map(option => (
+                    <label
+                        key={option.value}
+                        style={labelStyle}
+                        className={labelClassName}
+                    >
+                        <input
+                            checked={contains(option.value, values)}
+                            className={inputClassName}
+                            disabled={Boolean(option.disabled)}
+                            style={inputStyle}
+                            type="checkbox"
+                            onChange={() => {
                                 let newValues;
                                 if (contains(option.value, values)) {
                                     newValues = without([option.value], values);
                                 } else {
                                     newValues = append(option.value, values);
                                 }
-                                setProps({values: newValues});
-                            }
-                            if (fireEvent) fireEvent({event: 'change'});
-                        }}
-                    />
-                    {option.label}
-                </label>
-            ))}
-        </div>
-    );
+                                this.setState({values: newValues});
+                                if (setProps) setProps({values: newValues});
+                                if (fireEvent) fireEvent({event: 'change'});
+                            }}
+                        />
+                        {option.label}
+                    </label>
+                ))}
+            </div>
+        );
+    }
 }
 
 Checklist.propTypes = {

src/components/Dropdown.react.js

@@ -15,8 +15,18 @@ const DELIMETER = ',';
  * which have the benefit of showing the users all of the items at once.
  */
 export default class Dropdown extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {value: props.value};
+    }
+
+    componentWillReceiveProps(newProps) {
+        this.setState({value: newProps.value});
+    }
+
     render() {
-        const {id, fireEvent, multi, options, value, setProps} = this.props;
+        const {id, fireEvent, multi, options, setProps} = this.props;
+        const {value} = this.state;
         let selectedValue;
         if (R.type(value) === 'array') {
             selectedValue = value.join(DELIMETER);
@@ -31,9 +41,11 @@ export default class Dropdown extends Component {
                     onChange={selectedOption => {
                         if (multi) {
                             const values = R.pluck('value', selectedOption);
-                            setProps({value: values});
+                            this.setState({value: values});
+                            if (setProps) setProps({value: values});
                         } else {
-                            setProps({value: selectedOption.value});
+                            this.setState({value: selectedOption.value});
+                            if (setProps) setProps({value: selectedOption.value});
                         }
                         if (fireEvent) fireEvent('change');
                     }}

src/components/Input.react.js

@@ -8,18 +8,26 @@ import React, {Component, PropTypes} from 'react';
  * are also supported through separate components.
  */
 export default class Input extends Component {
-    render() {
+    constructor(props) {
+        super(props);
+        this.state = {value: props.value};
+    }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({value: nextProps.value});
+    }
+
+    render() {
         const {
             className,
             id,
             fireEvent,
             placeholder,
             style,
-            value,
             type,
             setProps
         } = this.props;
+        const {value} = this.state;
 
         return (
             <input
@@ -30,6 +38,7 @@ export default class Input extends Component {
                 placeholder={placeholder}
                 style={style}
                 onChange={e => {
+                    this.setState({value: e.target.value});
                     if (setProps) setProps({value: e.target.value});
                     if (fireEvent) fireEvent({event: 'change'});
                 }}