Merge pull request #105 from stlehmann/persistence

Add persistence to DAQ components

Author: alexcjohnson

CHANGELOG.md

@@ -7,6 +7,11 @@ Changelog](http://keepachangelog.com/en/1.0.0/) and this project
 adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- [#105](https://github.com/plotly/dash-daq/pull/105) Added [persistence](https://dash.plotly.com/persistence) for
+components BooleanSwitch, ColorPicker, Knob, NumericInput, PowerButton, PrecisionInput, Slider and ToggleSwitch
+
+### Changed
 - [#92](https://github.com/plotly/dash-daq/pull/92) Update from React 16.8.6 to 16.13.0
 
 ## [0.4.0] - 2020-03-04

src/components/BooleanSwitch.react.js

@@ -47,7 +47,9 @@ BooleanSwitch.defaultProps = {
   on: false,
   vertical: false,
   theme: light,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['on'],
+  persistence_type: 'local'
 };
 
 BooleanSwitch.propTypes = {
@@ -120,7 +122,34 @@ BooleanSwitch.propTypes = {
    * Dash-assigned callback that gets fired when
    * switch is toggled.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `on` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['on'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(BooleanSwitch);
+const ThemedBooleanSwitch = withTheme(BooleanSwitch);
+ThemedBooleanSwitch.defaultProps = BooleanSwitch.defaultProps;
+export default ThemedBooleanSwitch;

src/components/ColorPicker.react.js

@@ -22,7 +22,9 @@ export default class ColorPicker extends Component {
 ColorPicker.defaultProps = {
   size: 225,
   theme: light,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 ColorPicker.propTypes = {
@@ -104,7 +106,32 @@ ColorPicker.propTypes = {
   /**
    * Style to apply to the root component element
    */
-  style: PropTypes.object
+  style: PropTypes.object,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
 export const defaultProps = ColorPicker.defaultProps;

src/components/Knob.react.js

@@ -161,7 +161,9 @@ Knob.defaultProps = {
   min: 0,
   max: 10,
   theme: light,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 Knob.propTypes = {
@@ -317,7 +319,34 @@ Knob.propTypes = {
    * Dash-assigned callback that gets fired when selected
    * value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(Knob);
+const ThemedKnob = withTheme(Knob);
+ThemedKnob.defaultProps = Knob.defaultProps;
+export default ThemedKnob;

src/components/NumericInput.react.js

@@ -100,7 +100,9 @@ NumericInput.defaultProps = {
   min: 0,
   max: 10,
   theme: light,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 NumericInput.propTypes = {
@@ -177,7 +179,34 @@ NumericInput.propTypes = {
    * Dash-assigned callback that gets fired when selected
    * value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(NumericInput);
+const ThemedNumericInput = withTheme(NumericInput);
+ThemedNumericInput.defaultProps = NumericInput.defaultProps;
+export default ThemedNumericInput;

src/components/PowerButton.react.js

@@ -75,7 +75,9 @@ PowerButton.defaultProps = {
   on: false,
   theme: light,
   size: 48,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['on'],
+  persistence_type: 'local'
 };
 
 PowerButton.propTypes = {
@@ -146,7 +148,34 @@ PowerButton.propTypes = {
    * Dash-assigned callback that gets fired when
    * button is clicked.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `on` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['on'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(PowerButton);
+const ThemedPowerButton = withTheme(PowerButton);
+ThemedPowerButton.defaultProps = PowerButton.defaultProps;
+export default ThemedPowerButton;

src/components/PrecisionInput.react.js

@@ -211,7 +211,9 @@ PrecisionInput.defaultProps = {
   max: Number.MAX_SAFE_INTEGER,
   theme: light,
   labelPosition: 'top',
-  precision: 2
+  precision: 2,
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 PrecisionInput.propTypes = {
@@ -293,7 +295,34 @@ PrecisionInput.propTypes = {
    * Dash-assigned callback that gets fired when selected
    * value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(PrecisionInput);
+const ThemedPrecisionInput = withTheme(PrecisionInput);
+ThemedPrecisionInput.defaultProps = PrecisionInput.defaultProps;
+export default ThemedPrecisionInput;

src/components/Slider.react.js

@@ -26,7 +26,9 @@ Slider.defaultProps = {
   color: colors.DARKER_PRIMARY,
   min: 0,
   size: 265,
-  labelPosition: 'bottom'
+  labelPosition: 'bottom',
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 Slider.propTypes = {
@@ -222,7 +224,31 @@ Slider.propTypes = {
   /**
    * Dash-assigned callback that gets fired when the value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
 export const defaultProps = Slider.defaultProps;

src/components/ToggleSwitch.react.js

@@ -160,7 +160,9 @@ ToggleSwitch.defaultProps = {
   value: false,
   vertical: false,
   theme: light,
-  labelPosition: 'top'
+  labelPosition: 'top',
+  persisted_props: ['value'],
+  persistence_type: 'local'
 };
 
 ToggleSwitch.propTypes = {
@@ -259,7 +261,34 @@ ToggleSwitch.propTypes = {
    * Dash-assigned callback that gets fired when
    * switch is toggled.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+  persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Properties whose user interactions will persist after refreshing the
+   * component or the page. Since only `value` is allowed this prop can
+   * normally be ignored.
+   */
+  persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+  /**
+   * Where persisted user changes will be stored:
+   * memory: only kept in memory, reset on page refresh.
+   * local: window.localStorage, data is kept after the browser quit.
+   * session: window.sessionStorage, data is cleared once the browser quit.
+   */
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
 };
 
-export default withTheme(ToggleSwitch);
+const ThemedToggleSwitch = withTheme(ToggleSwitch);
+ThemedToggleSwitch.defaultProps = ToggleSwitch.defaultProps;
+export default ThemedToggleSwitch;