Skip to content

Commit

Permalink
Fix: Inserter impossible to collapse panels while searching. (#13884)
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta authored and youknowriad committed Mar 20, 2019
1 parent 21f60e4 commit 5d01a5a
Showing 1 changed file with 34 additions and 16 deletions.
50 changes: 34 additions & 16 deletions packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,25 @@ export class InserterMenu extends Component {
};
}

filterOpenPanels( filterValue, itemsPerCategory, filteredItems, reusableItems ) {
if ( filterValue === this.state.filterValue ) {
return this.state.openPanels;
}
if ( ! filterValue ) {
return [ 'suggested' ];
}
let openPanels = [];
if ( reusableItems.length > 0 ) {
openPanels.push( 'reusable' );
}
if ( filteredItems.length > 0 ) {
openPanels = openPanels.concat(
Object.keys( itemsPerCategory )
);
}
return openPanels;
}

filter( filterValue = '' ) {
const { debouncedSpeak, items, rootChildBlocks } = this.props;
const filteredItems = searchItems( items, filterValue );
Expand All @@ -193,26 +212,19 @@ export class InserterMenu extends Component {
( itemList ) => groupBy( itemList, 'category' )
)( filteredItems );

let openPanels = this.state.openPanels;
if ( filterValue !== this.state.filterValue ) {
if ( ! filterValue ) {
openPanels = [ 'suggested' ];
} else if ( reusableItems.length ) {
openPanels = [ 'reusable' ];
} else if ( filteredItems.length ) {
const firstCategory = find( getCategories(), ( { slug } ) => itemsPerCategory[ slug ] && itemsPerCategory[ slug ].length );
openPanels = [ firstCategory.slug ];
}
}

this.setState( {
hoveredItem: null,
childItems,
filterValue,
suggestedItems,
reusableItems,
itemsPerCategory,
openPanels,
openPanels: this.filterOpenPanels(
filterValue,
itemsPerCategory,
filteredItems,
reusableItems
),
} );

const resultCount = Object.keys( itemsPerCategory ).reduce( ( accumulator, currentCategorySlug ) => {
Expand All @@ -236,9 +248,15 @@ export class InserterMenu extends Component {

render() {
const { instanceId, onSelect, rootClientId } = this.props;
const { childItems, filterValue, hoveredItem, suggestedItems, reusableItems, itemsPerCategory, openPanels } = this.state;
const {
childItems,
hoveredItem,
itemsPerCategory,
openPanels,
reusableItems,
suggestedItems,
} = this.state;
const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
const isSearching = !! filterValue;

// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
// is always visible, and one which already incurs this behavior of autoFocus via
Expand Down Expand Up @@ -300,7 +318,7 @@ export class InserterMenu extends Component {
key={ category.slug }
title={ category.title }
icon={ category.icon }
opened={ isSearching || isPanelOpen( category.slug ) }
opened={ isPanelOpen( category.slug ) }
onToggle={ this.onTogglePanel( category.slug ) }
ref={ this.bindPanel( category.slug ) }
>
Expand Down

0 comments on commit 5d01a5a

Please sign in to comment.