Post author selector: try downshift

editor/components/post-author/index.js

@@ -5,45 +5,107 @@ import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
 
+/**
+ * External dependencies
+ */
+import Downshift from 'downshift';
+import { debounce } from 'underscore';
+
 export class PostAuthor extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.setAuthorId = this.setAuthorId.bind( this );
+		this.suggestAuthors = this.suggestAuthors.bind( this );
 	}
 
-	setAuthorId( event ) {
+	setAuthorId( selected ) {
 		const { onUpdateAuthor } = this.props;
-		const { value } = event.target;
-		onUpdateAuthor( Number( value ) );
+		const { id } = selected;
+		onUpdateAuthor( Number( id ) );
+	}
+
+	suggestAuthors( query, args ) {
+		if ( ! args.isOpen ) {
+			return;
+		}
+		const payload = '?search=' + encodeURIComponent( query );
+		this.setState( { searching: true } );
+		apiRequest( { path: '/wp/v2/users' + payload } ).done( ( results ) => {
+			this.setState( { searching: false } );
+			this.setState( { authors: results.map( ( author ) => ( { id: author.id, name: author.name } ) ) } );
+		} );
 	}
 
 	render() {
-		const { postAuthor, instanceId, authors } = this.props;
+		const { instanceId, authors, postAuthor } = this.props;
 		const selectId = 'post-author-selector-' + instanceId;
-
-		// Disable reason: A select with an onchange throws a warning
+		const currentPostAuthor = postAuthor.length > 0 ? postAuthor[ 0 ].name : '';
+		const allAuthors = this.state && this.state.authors ? this.state.authors : authors;
+		const isSearching = this.state && this.state.searching;
 
 		/* eslint-disable jsx-a11y/no-onchange */
 		return (
+			currentPostAuthor && allAuthors &&
 			<PostAuthorCheck>
-				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
-				<select
-					id={ selectId }
-					value={ postAuthor }
+				<Downshift
 					onChange={ this.setAuthorId }
-					className="editor-post-author__select"
+					itemToString={ ( author ) => ( author ? author.value : '' ) }
+					defaultInputValue={ currentPostAuthor }
+					onInputValueChange={ debounce( this.suggestAuthors, 300 ) }
 				>
-					{ authors.map( ( author ) => (
-						<option key={ author.id } value={ author.id }>{ author.name }</option>
-					) ) }
-				</select>
+					{ ( {
+						getInputProps,
+						getItemProps,
+						getLabelProps,
+						getMenuProps,
+						isOpen,
+						inputValue,
+						highlightedIndex,
+						selectedItem,
+					} ) => (
+						<div>
+							<label { ...getLabelProps() }>{ __( 'Author' ) }</label>
+							<input { ...getInputProps() } />
+							<span
+								className={ 'spinner' + ( isSearching ? ' is-active' : '' ) }
+								style={ { position: 'absolute', right: '10px' } }
+							/>
+							<ul { ...getMenuProps() } >
+								{ isOpen ?
+									allAuthors
+										.map( ( author ) => ( { id: author.id, value: author.name } ) )
+										.filter( ( author ) =>
+											! inputValue ||
+											author.value.toLowerCase().includes( inputValue.toLowerCase() ) )
+										.map( ( author, index ) => (
+											<li
+												{ ...getItemProps( {
+													key: author.id,
+													index,
+													item: author,
+													style: {
+														backgroundColor:
+															highlightedIndex === index ? 'lightgray' : 'white',
+														fontWeight: selectedItem === author ? 'bold' : 'normal',
+													},
+												} ) }
+											>
+												{ author.value }
+											</li>
+										) ) :
+									null }
+							</ul>
+						</div>
+					) }
+				</Downshift>
 			</PostAuthorCheck>
 		);
 		/* eslint-enable jsx-a11y/no-onchange */
@@ -53,7 +115,7 @@ export class PostAuthor extends Component {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			postAuthor: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
+			postAuthor: select( 'core' ).getAuthor( select( 'core/editor' ).getEditedPostAttribute( 'author' ) ),
 			authors: select( 'core' ).getAuthors(),
 		};
 	} ),

package.json

@@ -80,6 +80,7 @@
 		"cross-env": "3.2.4",
 		"deep-freeze": "0.0.1",
 		"doctrine": "2.1.0",
+		"downshift": "2.0.7",
 		"eslint": "4.16.0",
 		"eslint-config-wordpress": "2.0.0",
 		"eslint-plugin-jest": "21.5.0",

packages/core-data/src/resolvers.js

@@ -32,10 +32,21 @@ export async function* getCategories() {
  * Requests authors from the REST API.
  */
 export async function* getAuthors() {
-	const users = await apiRequest( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
+	const users = await apiRequest( { path: '/wp/v2/users/?who=authors&per_page=100' } );
 	yield receiveUserQuery( 'authors', users );
 }
 
+/**
+ * Requests author details from the REST API.
+ *
+ * @param {Object} state  State tree
+ * @param {number} id Author id.
+ */
+export async function* getAuthor( state, id ) {
+	const author = await apiRequest( { path: `/wp/v2/users/${ id }` } );
+	yield receiveUserQuery( 'author', author );
+}
+
 /**
  * Requests an entity's record from the REST API.
  *

packages/core-data/src/selectors.js

@@ -86,6 +86,17 @@ export function getAuthors( state ) {
 	return getUserQueryResults( state, 'authors' );
 }
 
+/**
+ * Returns all the post author.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {Array} Authors list.
+ */
+export function getAuthor( state ) {
+	return getUserQueryResults( state, 'author' );
+}
+
 /**
  * Returns all the users returned by a query ID.
  *