diff --git a/packages/@sanity/desk-tool/src/DeskToolPanes.js b/packages/@sanity/desk-tool/src/DeskToolPanes.js index 24ba7db4c91..d20c61b9f33 100644 --- a/packages/@sanity/desk-tool/src/DeskToolPanes.js +++ b/packages/@sanity/desk-tool/src/DeskToolPanes.js @@ -1,35 +1,18 @@ import React from 'react' import PropTypes from 'prop-types' import {sumBy} from 'lodash' -import {Observable, merge, of} from 'rxjs' -import {map, mapTo, delay, share, debounceTime, distinctUntilChanged} from 'rxjs/operators' +import {merge, of} from 'rxjs' +import {mapTo, delay, distinctUntilChanged} from 'rxjs/operators' import SplitController from 'part:@sanity/components/panes/split-controller' import SplitPaneWrapper from 'part:@sanity/components/panes/split-pane-wrapper' import LoadingPane from './pane/LoadingPane' import Pane from './pane/Pane' +import windowWidth$ from './utils/windowWidth' import {PaneRouterContext, getPaneRouterContextFactory, LOADING_PANE} from './index' const COLLAPSED_WIDTH = 55 const BREAKPOINT_SCREEN_MEDIUM = 512 -const fromWindowEvent = eventName => - new Observable(subscriber => { - const handler = event => subscriber.next(event) - window.addEventListener(eventName, handler) - return () => { - window.removeEventListener(eventName, handler) - } - }) - -const orientationChange$ = fromWindowEvent('orientationchange') -const resize$ = fromWindowEvent('resize') - -const windowWidth$ = merge(orientationChange$, resize$).pipe( - share(), - debounceTime(50), - map(() => window.innerWidth) -) - function getPaneMinSize(pane) { return pane.type === 'document' ? 500 : 320 } diff --git a/packages/@sanity/desk-tool/src/pane/DocumentPane.js b/packages/@sanity/desk-tool/src/pane/DocumentPane.js index 5f82e879e00..17f46c6f8ce 100644 --- a/packages/@sanity/desk-tool/src/pane/DocumentPane.js +++ b/packages/@sanity/desk-tool/src/pane/DocumentPane.js @@ -5,7 +5,7 @@ import promiseLatest from 'promise-latest' import {omit, noop, get, throttle, debounce} from 'lodash' import {distanceInWordsToNow} from 'date-fns' import {from, merge, concat, timer, of as observableOf} from 'rxjs' -import {catchError, switchMap, map, mapTo, tap} from 'rxjs/operators' +import {catchError, switchMap, map, mapTo, tap, distinctUntilChanged} from 'rxjs/operators' import {resolveEnabledActions} from 'part:@sanity/base/util/document-action-utils' import schema from 'part:@sanity/base/schema' import Button from 'part:@sanity/components/buttons/default' @@ -30,10 +30,12 @@ import InspectHistory from '../components/InspectHistory' import DocTitle from '../components/DocTitle' import TimeAgo from '../components/TimeAgo' import DocumentStatusBar from '../components/DocumentStatusBar/index' +import windowWidth$ from '../utils/windowWidth' import History from './History' import documentPaneStyles from './styles/DocumentPane.css' import FormView from './Editor/FormView' import Actions from './Editor/Actions' +import {historyIsEnabled} from './Editor/history' import menuItemStyles from './styles/documentPaneMenuItems.css' import {getDocumentPaneFooterActions} from './documentPaneFooterActions' import {getProductionPreviewItem, getMenuItems} from './documentPaneMenuItems' @@ -79,6 +81,7 @@ const INITIAL_HISTORICAL_DOCUMENT_STATE = { } const INITIAL_HISTORY_STATE = { + isEnabled: historyIsEnabled(), isLoading: true, error: null, events: [] @@ -225,12 +228,12 @@ export default withInitialValue( patchChannel = FormBuilder.createPatchChannel() formRef = React.createRef() - constructor(props) { + constructor(props, context) { super(props) - this.setup(props.options.id) + this.setup(props.options.id, context) } - setup(documentId) { + setup(documentId, context) { this.dispose() const publishedId = getPublishedId(documentId) const draftId = getDraftId(documentId) @@ -241,7 +244,11 @@ export default withInitialValue( this.validateLatestDocument = debounce(promiseLatest(this.validateDocument, 300)) if (this.props.urlParams.rev) { - this.handleFetchHistoricalDocument() + if (historyIsEnabled()) { + this.handleFetchHistoricalDocument() + } else { + this.handleCloseHistory(context) + } } const published$ = this.published.events @@ -344,6 +351,10 @@ export default withInitialValue( documentsAreLoaded && !wasNotLoaded && historyEvents.length === 0 && selectedRev ) + if (prevState.historyState.isEnabled && !this.state.historyState.isEnabled) { + this.handleCloseHistory() + } + if (shouldLoadHistory) { debugHistory('Fetch history events') this.handleFetchHistoryEvents() @@ -407,6 +418,13 @@ export default withInitialValue( componentDidMount() { this._isMounted = true + + this.resizeSubscriber = windowWidth$.pipe(distinctUntilChanged()).subscribe(() => { + const historyEnabled = historyIsEnabled() + if (this.state.historyState.isEnabled !== historyEnabled) { + this.setHistoryState({isEnabled: historyEnabled}) + } + }) } componentWillUnmount() { @@ -422,6 +440,10 @@ export default withInitialValue( this.setSavingStatus.cancel() + if (this.resizeSubscriber) { + this.resizeSubscriber.unsubscribe() + } + this.dispose() } @@ -620,15 +642,16 @@ export default withInitialValue( ) } - handleCloseHistory = () => { + handleCloseHistory = ctx => { + const context = ctx || this.context if (this._historyEventsSubscription) { this._historyEventsSubscription.unsubscribe() } - const {rev, ...params} = this.context.params + const {rev, ...params} = context.params if (rev) { // If there is a revision in the URL, remove it and let componentDidUpdate handle closing transition - this.context.setParams(params, {recurseIfInherited: true}) + context.setParams(params, {recurseIfInherited: true}) } } @@ -1209,7 +1232,11 @@ export default withInitialValue( } canShowHistoryList() { - return this.context.siblingIndex === 0 && !this.props.isCollapsed + return ( + this.context.siblingIndex === 0 && + !this.props.isCollapsed && + this.state.historyState.isEnabled + ) } // eslint-disable-next-line complexity diff --git a/packages/@sanity/desk-tool/src/utils/windowWidth.js b/packages/@sanity/desk-tool/src/utils/windowWidth.js new file mode 100644 index 00000000000..ca92a0ffe90 --- /dev/null +++ b/packages/@sanity/desk-tool/src/utils/windowWidth.js @@ -0,0 +1,22 @@ +import {Observable, merge} from 'rxjs' +import {map, share, debounceTime} from 'rxjs/operators' + +const fromWindowEvent = eventName => + new Observable(subscriber => { + const handler = event => subscriber.next(event) + window.addEventListener(eventName, handler) + return () => { + window.removeEventListener(eventName, handler) + } + }) + +const orientationChange$ = fromWindowEvent('orientationchange') +const resize$ = fromWindowEvent('resize') + +const windowWidth$ = merge(orientationChange$, resize$).pipe( + share(), + debounceTime(50), + map(() => window.innerWidth) +) + +export default windowWidth$