Skip to content

Commit

Permalink
Inserter: PR scrolling the inserter when opening a panel (#7076)
Browse files Browse the repository at this point in the history 
* Inserter: PR scrolling the inserter when opening a panel

* Fix unit tests
  • Loading branch information
@youknowriad
youknowriad committed Jun 1, 2018
1 parent 0b32451 commit 9e2be18
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
28 changes: 25 additions & 3 deletions editor/components/inserter/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@ import {
without,
includes,
} from 'lodash';
import scrollIntoView from 'dom-scroll-into-view';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, compose } from '@wordpress/element';
import { Component, compose, findDOMNode, createRef } from '@wordpress/element';
import {
withInstanceId,
withSpokenMessages,
PanelBody,
withSafeTimeout,
} from '@wordpress/components';
import { getCategories, isSharedBlock } from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
Expand Down Expand Up @@ -69,6 +71,8 @@ export class InserterMenu extends Component {
};
this.onChangeSearchInput = this.onChangeSearchInput.bind( this );
this.onHover = this.onHover.bind( this );
this.panels = {};
this.inserterResults = createRef();
}

componentDidMount() {
Expand All @@ -93,6 +97,12 @@ export class InserterMenu extends Component {
} );
}

bindPanel( name ) {
return ( ref ) => {
this.panels[ name ] = ref;
};
}

onTogglePanel( panel ) {
return () => {
const isOpened = this.state.openPanels.indexOf( panel ) !== -1;
Expand All @@ -107,6 +117,14 @@ export class InserterMenu extends Component {
panel,
],
} );

this.props.setTimeout( () => {
// We need a generic way to access the panel's container
// eslint-disable-next-line react/no-find-dom-node
scrollIntoView( findDOMNode( this.panels[ panel ] ), this.inserterResults.current, {
alignWithTop: true,
} );
} );
}
};
}
Expand Down Expand Up @@ -182,7 +200,7 @@ export class InserterMenu extends Component {
onChange={ this.onChangeSearchInput }
/>

<div className="editor-inserter__results">
<div className="editor-inserter__results" ref={ this.inserterResults }>
<ChildBlocks
rootUID={ rootUID }
items={ childItems }
Expand All @@ -195,6 +213,7 @@ export class InserterMenu extends Component {
title={ __( 'Most Used' ) }
opened={ isPanelOpen( 'suggested' ) }
onToggle={ this.onTogglePanel( 'suggested' ) }
ref={ this.bindPanel( 'suggested' ) }
>
<ItemList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
Expand All @@ -210,6 +229,7 @@ export class InserterMenu extends Component {
title={ category.title }
opened={ isSearching || isPanelOpen( category.slug ) }
onToggle={ this.onTogglePanel( category.slug ) }
ref={ this.bindPanel( category.slug ) }
>
<ItemList items={ categoryItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
Expand All @@ -221,6 +241,7 @@ export class InserterMenu extends Component {
opened={ isPanelOpen( 'shared' ) }
onToggle={ this.onTogglePanel( 'shared' ) }
icon="controls-repeat"
ref={ this.bindPanel( 'shared' ) }
>
<ItemList items={ sharedItems } onSelect={ onSelect } onHover={ this.onHover } />
</PanelBody>
Expand Down Expand Up @@ -256,5 +277,6 @@ export default compose(
fetchSharedBlocks: dispatch( 'core/editor' ).fetchSharedBlocks,
} ) ),
withSpokenMessages,
withInstanceId
withInstanceId,
withSafeTimeout
)( InserterMenu );
10 changes: 10 additions & 0 deletions editor/components/inserter/test/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);

Expand All @@ -118,6 +119,7 @@ describe( 'InserterMenu', () => {
items={ [] }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);

Expand All @@ -136,6 +138,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);

Expand All @@ -155,6 +158,7 @@ describe( 'InserterMenu', () => {
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
maxSuggestedItems={ 2 }
setTimeout={ noop }
/>
);

Expand All @@ -170,6 +174,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);
const activeTabs = wrapper.find( '.components-panel__body.is-opened button.components-panel__body-toggle' );
Expand Down Expand Up @@ -199,6 +204,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);
const activeTabs = wrapper.find( '.components-panel__body.is-opened button.components-panel__body-toggle' );
Expand Down Expand Up @@ -227,6 +233,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);
const activeTabs = wrapper.find( '.components-panel__body.is-opened button.components-panel__body-toggle' );
Expand Down Expand Up @@ -257,6 +264,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);

Expand All @@ -277,6 +285,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);
wrapper.find( '.editor-inserter__search' ).simulate( 'change', { target: { value: 'text' } } );
Expand Down Expand Up @@ -310,6 +319,7 @@ describe( 'InserterMenu', () => {
items={ items }
debouncedSpeak={ noop }
fetchSharedBlocks={ noop }
setTimeout={ noop }
/>
);
wrapper.find( '.editor-inserter__search' ).simulate( 'change', { target: { value: ' text' } } );
Expand Down

0 comments on commit 9e2be18

Please sign in to comment.