feat: add AutocompleteWithSuggestions to components demo

Automattic · May 14, 2021 · 881d816 · 881d816
1 parent 451f180
commit 881d816
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/assets/wizards/componentsDemo/index.js b/assets/wizards/componentsDemo/index.js
@@ -10,6 +10,9 @@ import '../../shared/js/public-path';
  * WordPress dependencies.
  */
 import { Component, Fragment, render } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { decodeEntities } from '@wordpress/html-entities';
+import { addQueryArgs } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -33,6 +36,7 @@ import {
 	Modal,
 	ToggleGroup,
 	WebPreview,
+	AutocompleteWithSuggestions,
 } from '../../components/src';
 
 class ComponentsDemo extends Component {
@@ -42,6 +46,7 @@ class ComponentsDemo extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
+			selectedPostForAutocompleteWithSuggestions: [],
 			inputTextValue1: 'Input value',
 			inputTextValue2: '',
 			inputNumValue: 0,
@@ -59,6 +64,7 @@ class ComponentsDemo extends Component {
 	 */
 	render() {
 		const {
+			selectedPostForAutocompleteWithSuggestions,
 			inputTextValue1,
 			inputTextValue2,
 			inputNumValue,
@@ -78,6 +84,52 @@ class ComponentsDemo extends Component {
 					</div>
 				</div>
 				<div className="newspack-wizard newspack-wizard__content">
+					<Card>
+						<AutocompleteWithSuggestions
+							label={ __( 'Search for a post', 'newspack' ) }
+							help={ __(
+								'Begin typing post title, click autocomplete result to select.',
+								'newspack'
+							) }
+							fetchSavedPosts={ async postIDs => {
+								const posts = await apiFetch( {
+									path: addQueryArgs( '/wp/v2/posts', {
+										per_page: 100,
+										include: postIDs.join( ',' ),
+										_fields: 'id,title',
+									} ),
+								} );
+
+								return posts.map( post => ( {
+									value: post.id,
+									label: decodeEntities( post.title ) || __( '(no title)', 'newspack' ),
+								} ) );
+							} }
+							fetchSuggestions={ async search => {
+								const posts = await apiFetch( {
+									path: addQueryArgs( '/wp/v2/posts', {
+										search,
+										per_page: 10,
+										_fields: 'id,title',
+									} ),
+								} );
+
+								// Format suggestions for FormTokenField display.
+								return posts.reduce( ( acc, post ) => {
+									acc.push( {
+										value: post.id,
+										label: decodeEntities( post.title.rendered ) || __( '(no title)', 'newspack' ),
+									} );
+
+									return acc;
+								}, [] );
+							} }
+							onChange={ value =>
+								this.setState( { selectedPostForAutocompleteWithSuggestions: parseInt( value ) } )
+							}
+							selectedPost={ selectedPostForAutocompleteWithSuggestions }
+						/>
+					</Card>
 					<Card>
 						<h2>{ __( 'Plugin toggles' ) }</h2>
 						<PluginToggle

diff --git a/includes/wizards/class-components-demo.php b/includes/wizards/class-components-demo.php
@@ -85,7 +85,7 @@ public function enqueue_scripts_and_styles() {
 		wp_enqueue_script(
 			'newspack-components-demo',
 			Newspack::plugin_url() . '/dist/componentsDemo.js',
-			$this->get_script_dependencies(),
+			$this->get_script_dependencies( [ 'wp-html-entities' ] ),
 			filemtime( dirname( NEWSPACK_PLUGIN_FILE ) . '/dist/componentsDemo.js' ),
 			true
 		);