@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 6.03 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/autosave-monitor/index.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { compose } from '@wordpress/compose';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nexport class AutosaveMonitor extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.needsAutosave = !! ( props.isDirty && props.isAutosaveable );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.props.disableIntervalChecks ) {\n\t\t\tthis.setAutosaveTimer();\n\t\t}\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( this.props.disableIntervalChecks ) {\n\t\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\t\tthis.props.autosave();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.interval !== prevProps.interval ) {\n\t\t\tclearTimeout( this.timerId );\n\t\t\tthis.setAutosaveTimer();\n\t\t}\n\n\t\tif ( ! this.props.isDirty ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.isAutosaving && ! prevProps.isAutosaving ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\tthis.needsAutosave = true;\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timerId );\n\t}\n\n\tsetAutosaveTimer( timeout = this.props.interval * 1000 ) {\n\t\tthis.timerId = setTimeout( () => {\n\t\t\tthis.autosaveTimerHandler();\n\t\t}, timeout );\n\t}\n\n\tautosaveTimerHandler() {\n\t\tif ( ! this.props.isAutosaveable ) {\n\t\t\tthis.setAutosaveTimer( 1000 );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.needsAutosave ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\tthis.props.autosave();\n\t\t}\n\n\t\tthis.setAutosaveTimer();\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\n/**\n * Monitors the changes made to the edited post and triggers autosave if necessary.\n *\n * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.\n * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as\n * the specific way of detecting changes.\n *\n * There are two caveats:\n * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.\n * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.\n *\n * @param {Object} props - The properties passed to the component.\n * @param {Function} props.autosave - The function to call when changes need to be saved.\n * @param {number} props.interval - The maximum time in seconds between an unsaved change and an autosave.\n * @param {boolean} props.isAutosaveable - If false, the check for changes is retried every second.\n * @param {boolean} props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.\n * @param {boolean} props.isDirty - Indicates if there are unsaved changes.\n *\n * @example\n * ```jsx\n * <AutosaveMonitor interval={30000} />\n * ```\n */\nexport default compose( [\n\twithSelect( ( select, ownProps ) => {\n\t\tconst { getReferenceByDistinctEdits } = select( coreStore );\n\n\t\tconst {\n\t\t\tisEditedPostDirty,\n\t\t\tisEditedPostAutosaveable,\n\t\t\tisAutosavingPost,\n\t\t\tgetEditorSettings,\n\t\t} = select( editorStore );\n\n\t\tconst { interval = getEditorSettings().autosaveInterval } = ownProps;\n\n\t\treturn {\n\t\t\teditsReference: getReferenceByDistinctEdits(),\n\t\t\tisDirty: isEditedPostDirty(),\n\t\t\tisAutosaveable: isEditedPostAutosaveable(),\n\t\t\tisAutosaving: isAutosavingPost(),\n\t\t\tinterval,\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => ( {\n\t\tautosave() {\n\t\t\tconst { autosave = dispatch( editorStore ).autosave } = ownProps;\n\t\t\tautosave();\n\t\t},\n\t} ) ),\n] )( AutosaveMonitor );\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0B;AAC1B,qBAAwB;AACxB,kBAAyC;AACzC,uBAAmC;AAKnC,mBAAqC;AAE9B,IAAM,kBAAN,cAA8B,yBAAU;AAAA,EAC9C,YAAa,OAAQ;AACpB,UAAO,KAAM;AACb,SAAK,gBAAgB,CAAC,EAAI,MAAM,WAAW,MAAM;AAAA,EAClD;AAAA,EAEA,oBAAoB;AACnB,QAAK,CAAE,KAAK,MAAM,uBAAwB;AACzC,WAAK,iBAAiB;AAAA,IACvB;AAAA,EACD;AAAA,EAEA,mBAAoB,WAAY;AAC/B,QAAK,KAAK,MAAM,uBAAwB;AACvC,UAAK,KAAK,MAAM,mBAAmB,UAAU,gBAAiB;AAC7D,aAAK,MAAM,SAAS;AAAA,MACrB;AACA;AAAA,IACD;AAEA,QAAK,KAAK,MAAM,aAAa,UAAU,UAAW;AACjD,mBAAc,KAAK,OAAQ;AAC3B,WAAK,iBAAiB;AAAA,IACvB;AAEA,QAAK,CAAE,KAAK,MAAM,SAAU;AAC3B,WAAK,gBAAgB;AACrB;AAAA,IACD;AAEA,QAAK,KAAK,MAAM,gBAAgB,CAAE,UAAU,cAAe;AAC1D,WAAK,gBAAgB;AACrB;AAAA,IACD;AAEA,QAAK,KAAK,MAAM,mBAAmB,UAAU,gBAAiB;AAC7D,WAAK,gBAAgB;AAAA,IACtB;AAAA,EACD;AAAA,EAEA,uBAAuB;AACtB,iBAAc,KAAK,OAAQ;AAAA,EAC5B;AAAA,EAEA,iBAAkB,UAAU,KAAK,MAAM,WAAW,KAAO;AACxD,SAAK,UAAU,WAAY,MAAM;AAChC,WAAK,qBAAqB;AAAA,IAC3B,GAAG,OAAQ;AAAA,EACZ;AAAA,EAEA,uBAAuB;AACtB,QAAK,CAAE,KAAK,MAAM,gBAAiB;AAClC,WAAK,iBAAkB,GAAK;AAC5B;AAAA,IACD;AAEA,QAAK,KAAK,eAAgB;AACzB,WAAK,gBAAgB;AACrB,WAAK,MAAM,SAAS;AAAA,IACrB;AAEA,SAAK,iBAAiB;AAAA,EACvB;AAAA,EAEA,SAAS;AACR,WAAO;AAAA,EACR;AACD;AAyBA,IAAO,+BAAQ,wBAAS;AAAA,MACvB,wBAAY,CAAE,QAAQ,aAAc;AACnC,UAAM,EAAE,4BAA4B,IAAI,OAAQ,iBAAAA,KAAU;AAE1D,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,OAAQ,aAAAC,KAAY;AAExB,UAAM,EAAE,WAAW,kBAAkB,EAAE,iBAAiB,IAAI;AAE5D,WAAO;AAAA,MACN,gBAAgB,4BAA4B;AAAA,MAC5C,SAAS,kBAAkB;AAAA,MAC3B,gBAAgB,yBAAyB;AAAA,MACzC,cAAc,iBAAiB;AAAA,MAC/B;AAAA,IACD;AAAA,EACD,CAAE;AAAA,MACF,0BAAc,CAAE,UAAU,cAAgB;AAAA,IACzC,WAAW;AACV,YAAM,EAAE,WAAW,SAAU,aAAAA,KAAY,EAAE,SAAS,IAAI;AACxD,eAAS;AAAA,IACV;AAAA,EACD,EAAI;AACL,CAAE,EAAG,eAAgB;",
"names": ["coreStore", "editorStore"]
}