Hierarchical terms sorted by name and filterable (#10138)

packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -6,7 +6,7 @@ import { get, unescape as unescapeString, without, find, some, invoke } from 'lo
 /**
  * WordPress dependencies
  */
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -24,8 +24,8 @@ import { buildTermsTree } from '../../utils/terms';
  */
 const DEFAULT_QUERY = {
  per_page: -1,
- orderby: 'count',
- order: 'desc',
+ orderby: 'name',
+ order: 'asc',
  _fields: 'id,name,parent',
 };
 
@@ -38,6 +38,8 @@ class HierarchicalTermSelector extends Component {
  this.onChangeFormParent = this.onChangeFormParent.bind( this );
  this.onAddTerm = this.onAddTerm.bind( this );
  this.onToggleForm = this.onToggleForm.bind( this );
+ this.setFilterValue = this.setFilterValue.bind( this );
+ this.sortBySelected = this.sortBySelected.bind( this );
  this.state = {
  loading: true,
  availableTermsTree: [],
@@ -46,6 +48,8 @@ class HierarchicalTermSelector extends Component {
  formName: '',
  formParent: '',
  showForm: false,
+ filterValue: '',
+ filteredTermsTree: [],
  };
  }
 
@@ -152,7 +156,7 @@ class HierarchicalTermSelector extends Component {
  formName: '',
  formParent: '',
  availableTerms: newAvailableTerms,
- availableTermsTree: buildTermsTree( newAvailableTerms ),
+ availableTermsTree: this.sortBySelected( buildTermsTree( newAvailableTerms ) ),
  } );
  onUpdateTerms( [ ...terms, term.id ], taxonomy.rest_base );
  }, ( xhr ) => {
@@ -191,7 +195,7 @@ class HierarchicalTermSelector extends Component {
  } );
  this.fetchRequest.then(
  ( terms ) => { // resolve
- const availableTermsTree = buildTermsTree( terms );
+ const availableTermsTree = this.sortBySelected( buildTermsTree( terms ) );
 
  this.fetchRequest = null;
  this.setState( {
@@ -212,6 +216,101 @@ class HierarchicalTermSelector extends Component {
  );
  }
 
+ sortBySelected( termsTree ) {
+ const { terms } = this.props;
+ const treeHasSelection = ( termTree ) => {
+ if ( terms.indexOf( termTree.id ) !== -1 ) {
+ return true;
+ }
+ if ( undefined === termTree.children ) {
+ return false;
+ }
+ const anyChildIsSelected = termTree.children.map( treeHasSelection ).filter( ( child ) => child ).length > 0;
+ if ( anyChildIsSelected ) {
+ return true;
+ }
+ return false;
+ };
+ const termOrChildIsSelected = ( termA, termB ) => {
+ const termASelected = treeHasSelection( termA );
+ const termBSelected = treeHasSelection( termB );
+
+ if ( termASelected === termBSelected ) {
+ return 0;
+ }
+
+ if ( termASelected && ! termBSelected ) {
+ return -1;
+ }
+
+ if ( ! termASelected && termBSelected ) {
+ return 1;
+ }
+
+ return 0;
+ };
+ termsTree.sort( termOrChildIsSelected );
+ return termsTree;
+ }
+
+ setFilterValue( event ) {
+ const { availableTermsTree } = this.state;
+ const filterValue = event.target.value;
+ const filteredTermsTree = availableTermsTree.map( this.getFilterMatcher( filterValue ) ).filter( ( term ) => term );
+ const getResultCount = ( terms ) => {
+ let count = 0;
+ for ( let i = 0; i < terms.length; i++ ) {
+ count++;
+ if ( undefined !== terms[ i ].children ) {
+ count += getResultCount( terms[ i ].children );
+ }
+ }
+ return count;
+ };
+ this.setState(
+ {
+ filterValue,
+ filteredTermsTree,
+ }
+ );
+
+ const resultCount = getResultCount( filteredTermsTree );
+ const resultsFoundMessage = sprintf(
+ _n( '%d result found.', '%d results found.', resultCount, 'term' ),
+ resultCount
+ );
+ this.props.debouncedSpeak( resultsFoundMessage, 'assertive' );
+ }
+
+ getFilterMatcher( filterValue ) {
+ const matchTermsForFilter = ( originalTerm ) => {
+ if ( '' === filterValue ) {
+ return originalTerm;
+ }
+
+ // Shallow clone, because we'll be filtering the term's children and
+ // don't want to modify the original term.
+ const term = { ...originalTerm };
+
+ // Map and filter the children, recursive so we deal with grandchildren
+ // and any deeper levels.
+ if ( term.children.length > 0 ) {
+ term.children = term.children.map( matchTermsForFilter ).filter( ( child ) => child );
+ }
+
+ // If the term's name contains the filterValue, or it has children
+ // (i.e. some child matched at some point in the tree) then return it.
+ if ( -1 !== term.name.toLowerCase().indexOf( filterValue ) || term.children.length > 0 ) {
+ return term;
+ }
+
+ // Otherwise, return false. After mapping, the list of terms will need
+ // to have false values filtered out.
+ return false;
+ };
+ return matchTermsForFilter;
+ }
+
  renderTerms( renderedTerms ) {
  const { terms = [] } = this.props;
  return renderedTerms.map( ( term ) => {
@@ -244,7 +343,7 @@ class HierarchicalTermSelector extends Component {
  return null;
  }
 
- const { availableTermsTree, availableTerms, formName, formParent, loading, showForm } = this.state;
+ const { availableTermsTree, availableTerms, filteredTermsTree, formName, formParent, loading, showForm, filterValue } = this.state;
  const labelWithFallback = ( labelProperty, fallbackIsCategory, fallbackIsNotCategory ) => get(
  taxonomy,
  [ 'data', 'labels', labelProperty ],
@@ -268,10 +367,47 @@ class HierarchicalTermSelector extends Component {
  const noParentOption = `— ${ parentSelectLabel } —`;
  const newTermSubmitLabel = newTermButtonLabel;
  const inputId = `editor-post-taxonomies__hierarchical-terms-input-${ instanceId }`;
+ const filterInputId = `editor-post-taxonomies__hierarchical-terms-filter-${ instanceId }`;
+ const filterLabel = sprintf(
+ _x( 'Search %s', 'term' ),
+ get(
+ this.props.taxonomy,
+ [ 'name' ],
+ slug === 'category' ? __( 'Categories' ) : __( 'Terms' )
+ )
+ );
+ const groupLabel = sprintf(
+ _x( 'Available %s', 'term' ),
+ get(
+ this.props.taxonomy,
+ [ 'name' ],
+ slug === 'category' ? __( 'Categories' ) : __( 'Terms' )
+ )
+ );
 
- /* eslint-disable jsx-a11y/no-onchange */
  return [
- ...this.renderTerms( availableTermsTree ),
+ <label
+ key="filter-label"
+ htmlFor={ filterInputId }>
+ { filterLabel }
+ </label>,
+ <input
+ type="search"
+ id={ filterInputId }
+ value={ filterValue }
+ onChange={ this.setFilterValue }
+ className="editor-post-taxonomies__hierarchical-terms-filter"
+ key="term-filter-input"
+ />,
+ <div
+ className="editor-post-taxonomies__hierarchical-terms-list"
+ key="term-list"
+ tabIndex="0"
+ role="group"
+ aria-label={ groupLabel }
+ >
+ { this.renderTerms( '' !== filterValue ? filteredTermsTree : availableTermsTree ) }
+ </div>,
  ! loading && hasCreateAction && (
  <Button
  key="term-add-button"

packages/editor/src/components/post-taxonomies/style.scss

@@ -1,3 +1,8 @@
+.editor-post-taxonomies__hierarchical-terms-list {
+ max-height: 14em;
+ overflow: auto;
+}
+
 .editor-post-taxonomies__hierarchical-terms-choice {
  margin-bottom: 8px;
 }
@@ -25,3 +30,7 @@
  margin-top: 8px;
  width: 100%;
 }
+.editor-post-taxonomies__hierarchical-terms-filter {
+ margin-bottom: 8px;
+ width: 100%;
+}