diff --git a/dash/dash-renderer/src/TreeContainer.js b/dash/dash-renderer/src/TreeContainer.js index 25b51bc493..3d08aaa24a 100644 --- a/dash/dash-renderer/src/TreeContainer.js +++ b/dash/dash-renderer/src/TreeContainer.js @@ -26,7 +26,6 @@ import { } from 'ramda'; import {notifyObservers, updateProps, onError} from './actions'; import isSimpleComponent from './isSimpleComponent'; -import {recordUiEdit} from './persistence'; import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react'; import checkPropTypes from './checkPropTypes'; import {getWatchedKeys, stringifyId} from './actions/dependencies'; @@ -132,8 +131,7 @@ class BaseTreeContainer extends Component { } setProps(newProps) { - const {_dashprivate_dispatch, _dashprivate_path, _dashprivate_layout} = - this.props; + const {_dashprivate_dispatch, _dashprivate_path} = this.props; const oldProps = this.getLayoutProps(); const {id} = oldProps; @@ -163,10 +161,6 @@ class BaseTreeContainer extends Component { ); batch(() => { - // setProps here is triggered by the UI - record these changes - // for persistence - recordUiEdit(_dashprivate_layout, newProps, dispatch); - // Only dispatch changes to Dash if a watched prop changed if (watchedKeys.length) { dispatch( diff --git a/dash/dash-renderer/src/actions/index.js b/dash/dash-renderer/src/actions/index.js index 2b1dd51324..0f0db0d6b2 100644 --- a/dash/dash-renderer/src/actions/index.js +++ b/dash/dash-renderer/src/actions/index.js @@ -1,4 +1,4 @@ -import {once} from 'ramda'; +import {once, path} from 'ramda'; import {createAction} from 'redux-actions'; import {addRequestedCallbacks} from './callbacks'; import {getAppState} from '../reducers/constants'; @@ -7,6 +7,7 @@ import cookie from 'cookie'; import {validateCallbacksToLayout} from './dependencies'; import {includeObservers, getLayoutCallbacks} from './dependencies_ts'; import {getPath} from './paths'; +import {recordUiEdit} from '../persistence'; export const onError = createAction(getAction('ON_ERROR')); export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE')); @@ -17,7 +18,17 @@ export const setHooks = createAction(getAction('SET_HOOKS')); export const setLayout = createAction(getAction('SET_LAYOUT')); export const setPaths = createAction(getAction('SET_PATHS')); export const setRequestQueue = createAction(getAction('SET_REQUEST_QUEUE')); -export const updateProps = createAction(getAction('ON_PROP_CHANGE')); + +// Change the variable name of the action +export const onPropChange = createAction(getAction('ON_PROP_CHANGE')); + +export function updateProps(payload) { + return (dispatch, getState) => { + const component = path(payload.itempath, getState().layout); + recordUiEdit(component, payload.props, dispatch); + dispatch(onPropChange(payload)); + }; +} export const dispatchError = dispatch => (message, lines) => dispatch( diff --git a/dash/dash-renderer/src/observers/executedCallbacks.ts b/dash/dash-renderer/src/observers/executedCallbacks.ts index 1249252704..00799ea0d7 100644 --- a/dash/dash-renderer/src/observers/executedCallbacks.ts +++ b/dash/dash-renderer/src/observers/executedCallbacks.ts @@ -11,6 +11,9 @@ import { pathOr } from 'ramda'; +import {ThunkDispatch} from 'redux-thunk'; +import {AnyAction} from 'redux'; + import {IStoreState} from '../store'; import { @@ -50,21 +53,24 @@ const observer: IStoreObserverDefinition = { if (!itempath) { return false; } - // This is a callback-generated update. - // Check if this invalidates existing persisted prop values, - // or if persistence changed, whether this updates other props. - updatedProps = prunePersistence( - path(itempath, layout), - updatedProps, - dispatch - ); + let props = updatedProps; + + if (id === '_pages_content') { + // Check if this invalidates existing persisted prop values, + // or if persistence changed, whether this updates other props. + updatedProps = prunePersistence( + path(itempath, layout), + updatedProps, + dispatch + ); - // In case the update contains whole components, see if any of - // those components have props to update to persist user edits. - const {props} = applyPersistence({props: updatedProps}, dispatch); + // In case the update contains whole components, see if any of + // those components have props to update to persist user edits. + props = applyPersistence({props: updatedProps}, dispatch).props; + } - dispatch( + (dispatch as ThunkDispatch)( updateProps({ itempath, props, diff --git a/dash/dash-renderer/src/persistence.js b/dash/dash-renderer/src/persistence.js index b7bc2719ba..d66b9e336f 100644 --- a/dash/dash-renderer/src/persistence.js +++ b/dash/dash-renderer/src/persistence.js @@ -307,6 +307,10 @@ const getProps = layout => { }; export function recordUiEdit(layout, newProps, dispatch) { + if (newProps === undefined) { + return; + } + const { canPersist, id, @@ -316,35 +320,47 @@ export function recordUiEdit(layout, newProps, dispatch) { persisted_props, persistence_type } = getProps(layout); - if (!canPersist || !persistence) { - return; - } - forEach(persistedProp => { - const [propName, propPart] = persistedProp.split('.'); - if (newProps[propName] !== undefined) { - const storage = getStore(persistence_type, dispatch); - const {extract} = getTransform(element, propName, propPart); - - const valsKey = getValsKey(id, persistedProp, persistence); - let originalVal = extract(props[propName]); - const newVal = extract(newProps[propName]); - - // mainly for nested props with multiple persisted parts, it's - // possible to have the same value as before - should not store - // in this case. - if (originalVal !== newVal) { - if (storage.hasItem(valsKey)) { - originalVal = storage.getItem(valsKey)[1]; - } + if (canPersist && persistence) { + forEach(persistedProp => { + const [propName, propPart] = persistedProp.split('.'); + if (newProps[propName] !== undefined) { + const storage = getStore(persistence_type, dispatch); + const {extract} = getTransform(element, propName, propPart); + const valsKey = getValsKey(id, persistedProp, persistence); + + let originalVal = storage.hasItem(valsKey) + ? storage.getItem(valsKey)[1] + : extract(props[propName]); + let newVal = extract(newProps[propName]); + const vals = originalVal === undefined ? [newVal] : [newVal, originalVal]; + storage.setItem(valsKey, vals, dispatch); } + }, persisted_props); + } + + // Recursively record UI edits for children + const {children} = props; + if (!newProps?.children) { + return; + } + if (Array.isArray(children)) { + if (children.length !== newProps['children'].length) { + return; } - }, persisted_props); + children.forEach((child, i) => { + if (type(child) === 'Object' && child.props) { + recordUiEdit(child, newProps['children'][i]['props'], dispatch); + } + }); + } else if (type(children) === 'Object' && children.props) { + recordUiEdit(children, newProps['children']['props'], dispatch); + } } /*