PersistenceTransforms for date in datePickerRange and datePickerSingle

@plotly/dash-test-components/src/components/MyPersistedComponent.js

@@ -0,0 +1,166 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+const isEquivalent = (v1, v2) => v1 === v2 || (isNaN(v1) && isNaN(v2));
+
+const omit = (key, obj) => {
+    const { [key]: omitted, ...rest } = obj;
+    return rest;
+  }
+
+/**
+ * Adapted dcc input component for persistence tests.
+ *
+ * Note that unnecessary props have been removed.
+ */
+export default class MyPersistedComponent extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.input = React.createRef();
+        this.onChange = this.onChange.bind(this);
+        this.onEvent = this.onEvent.bind(this);
+        this.onKeyPress = this.onKeyPress.bind(this);
+        this.setInputValue = this.setInputValue.bind(this);
+        this.setPropValue = this.setPropValue.bind(this);
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const {value} = this.input.current;
+        this.setInputValue(
+            value,
+            nextProps.value
+        );
+        this.setState({value: nextProps.value});
+    }
+
+    componentDidMount() {
+        const {value} = this.input.current;
+        this.setInputValue(
+            value,
+            this.props.value
+        );
+    }
+
+    UNSAFE_componentWillMount() {
+        this.setState({value: this.props.value})
+    }
+
+    render() {
+        const valprops = {value: this.state.value}
+        return (
+            <input
+                ref={this.input}
+                onChange={this.onChange}
+                onKeyPress={this.onKeyPress}
+                {...valprops}
+                {...omit(
+                    [
+                        'value',
+                        'setProps',
+                    ],
+                    this.props
+                )}
+            />
+        );
+    }
+
+    setInputValue(base, value) {
+        base = NaN;
+
+        if (!isEquivalent(base, value)) {
+            this.input.current.value = value
+        }
+    }
+
+    setPropValue(base, value) {
+        if (!isEquivalent(base, value)) {
+            this.props.setProps({value});
+        }
+    }
+
+    onEvent() {
+        const {value} = this.input.current;
+        this.props.setProps({value})
+    }
+
+    onKeyPress(e) {
+        return this.onEvent();
+    }
+
+    onChange() {
+        this.onEvent()
+    }
+}
+
+MyPersistedComponent.defaultProps = {
+    persisted_props: ['value'],
+    persistence_type: 'local',
+};
+
+MyPersistedComponent.propTypes = {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
+    /**
+     * The value of the input
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    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']),
+};
+
+MyPersistedComponent.persistenceTransforms = {
+          value: {
+
+            extract: propValue => {
+                if (!(propValue === null || propValue === undefined)) {
+                    return propValue.toUpperCase();
+                }
+                return propValue;
+            },
+            apply: storedValue => storedValue,
+
+        },
+    };

@plotly/dash-test-components/src/components/MyPersistedComponentNested.js

@@ -0,0 +1,169 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+const isEquivalent = (v1, v2) => v1 === v2 || (isNaN(v1) && isNaN(v2));
+
+const omit = (key, obj) => {
+    const { [key]: omitted, ...rest } = obj;
+    return rest;
+  }
+
+/**
+ * Adapted dcc input component for persistence tests.
+ *
+ * Note that unnecessary props have been removed.
+ */
+export default class MyPersistedComponentNested extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.input = React.createRef();
+        this.onChange = this.onChange.bind(this);
+        this.onEvent = this.onEvent.bind(this);
+        this.onKeyPress = this.onKeyPress.bind(this);
+        this.setInputValue = this.setInputValue.bind(this);
+        this.setPropValue = this.setPropValue.bind(this);
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const {value} = this.input.current;
+        this.setInputValue(
+            value,
+            nextProps.value
+        );
+        this.setState({value: nextProps.value});
+    }
+
+    componentDidMount() {
+        const {value} = this.input.current;
+        this.setInputValue(
+            value,
+            this.props.value
+        );
+    }
+
+    UNSAFE_componentWillMount() {
+        this.setState({value: this.props.value})
+    }
+
+    render() {
+        const valprops = {value: this.state.value}
+        return (
+            <input
+                ref={this.input}
+                onChange={this.onChange}
+                onKeyPress={this.onKeyPress}
+                {...valprops}
+                {...omit(
+                    [
+                        'value',
+                        'setProps',
+                    ],
+                    this.props
+                )}
+            />
+        );
+    }
+
+    setInputValue(base, value) {
+        base = NaN;
+
+        if (!isEquivalent(base, value)) {
+            this.input.current.value = value
+        }
+    }
+
+    setPropValue(base, value) {
+        if (!isEquivalent(base, value)) {
+            this.props.setProps({value});
+        }
+    }
+
+    onEvent() {
+        const {value} = this.input.current;
+        this.props.setProps({value})
+    }
+
+    onKeyPress(e) {
+        return this.onEvent();
+    }
+
+    onChange() {
+        this.onEvent()
+    }
+}
+
+MyPersistedComponentNested.defaultProps = {
+    persisted_props: ['value.nested_value'],
+    persistence_type: 'local',
+};
+
+MyPersistedComponentNested.propTypes = {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
+    /**
+     * The value of the input
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    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.nested_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']),
+};
+
+MyPersistedComponentNested.persistenceTransforms = {
+    value: {
+
+      nested_value: {
+
+          extract: propValue => {
+              if (!(propValue === null || propValue === undefined)) {
+                  return propValue.toUpperCase();
+              }
+              return propValue;
+          },
+          apply: storedValue => storedValue,
+
+      }
+  },
+};

@plotly/dash-test-components/src/index.js

@@ -1,5 +1,8 @@
 import StyledComponent from './components/StyledComponent';
+import MyPersistedComponent from './components/MyPersistedComponent';
+import MyPersistedComponentNested from './components/MyPersistedComponentNested';
+
 
 export {
-    StyledComponent,
+    StyledComponent, MyPersistedComponent, MyPersistedComponentNested
 };

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [UNRELEASED]
+### Changed
+- [#1376](https://github.com/plotly/dash/pull/1376) Extends the `getTransform` logic in the renderer to handle `persistenceTransforms` for both nested and non-nested persisted props. This was used to to fix [dcc#700](https://github.com/plotly/dash-core-components/issues/700) in conjunction with [dcc#854](https://github.com/plotly/dash-core-components/pull/854) by using persistenceTransforms to strip the time part of the datetime so that datepickers can persist when defined in callbacks.
+
 ## [1.16.0] - 2020-09-03
 ### Added
 - [#1371](https://github.com/plotly/dash/pull/1371) You can now get [CSP `script-src` hashes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) of all added inline scripts by calling `app.csp_hashes()` (both Dash internal inline scripts, and those added with `app.clientside_callback`) .

dash-renderer/src/persistence.js

@@ -265,10 +265,18 @@ const noopTransform = {
     apply: (storedValue, _propValue) => storedValue
 };
 
-const getTransform = (element, propName, propPart) =>
-    propPart
-        ? element.persistenceTransforms[propName][propPart]
-        : noopTransform;
+const getTransform = (element, propName, propPart) => {
+    if (
+        element.persistenceTransforms &&
+        element.persistenceTransforms[propName]
+    ) {
+        if (propPart) {
+            return element.persistenceTransforms[propName][propPart];
+        }
+        return element.persistenceTransforms[propName];
+    }
+    return noopTransform;
+};
 
 const getValsKey = (id, persistedProp, persistence) =>
     `${stringifyId(id)}.${persistedProp}.${JSON.stringify(persistence)}`;