Create Search Control

Spaghetti-Dojo · Nov 25, 2023 · 48a54d7 · 48a54d7
1 parent e8a0309
commit 48a54d7
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 46 deletions.
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -1,5 +1,5 @@
 import type { Set } from 'immutable';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { BaseEntityRecords, Context } from '@wordpress/core-data';
 
@@ -46,18 +46,26 @@ declare namespace EntitiesSearch {
 			onChange(values: PostsControl<V>['value']): void;
 		}> {}
 
+	interface Search<V>
+		extends Readonly<{
+			id?: string;
+			search(
+				phrase: string | React.ChangeEvent<HTMLInputElement>
+			): Promise<Set<ControlOption<V>>>;
+		}> {}
+
 	interface CompositePostsPostTypes<P, T>
 		extends Readonly<{
 			postType: PostTypeControl<T>;
-			// TODO When the `searchPosts` are given, the `posts` shouldn't get passed the `options` prop.
 			posts: PostsControl<P>;
-			searchPosts?: (
+			searchPosts: (
 				phrase: string,
 				postType: PostTypeControl<T>['value']
 			) => Promise<PostsControl<P>['options']>;
 			children(
 				posts: CompositePostsPostTypes<P, T>['posts'],
-				postType: CompositePostsPostTypes<P, T>['postType']
+				postType: CompositePostsPostTypes<P, T>['postType'],
+				search: Search<P>['search']
 			): React.ReactNode;
 		}> {}
 }
diff --git a/package.json b/package.json
@@ -33,8 +33,9 @@
   "dependencies": {
     "@wordpress/api-fetch": "~6.21.0",
     "@wordpress/components": "~23.1.0",
+    "@wordpress/compose": "^6.23.0",
     "@wordpress/core-data": "~6.12.0",
-    "@wordpress/element": "~5.1.0",
+    "@wordpress/element": "^5.23.0",
     "@wordpress/i18n": "~4.24.0",
     "classnames": "^2.3.2",
     "immutable": "~4.3.0",

diff --git a/sources/js/src/components/composite-posts-post-types.tsx b/sources/js/src/components/composite-posts-post-types.tsx
@@ -4,8 +4,6 @@ import React, { JSX } from 'react';
 
 import { useState, useEffect } from '@wordpress/element';
 
-import { isFunction } from '../utils/is-function';
-
 export function CompositePostsPostTypes<P, T>(
 	props: EntitiesSearch.CompositePostsPostTypes<P, T>
 ): JSX.Element {
@@ -30,10 +28,6 @@ export function CompositePostsPostTypes<P, T>(
 	};
 
 	const searchPostsByPostType = async (phrase: string, postType: T) => {
-		if (!isFunction(props.searchPosts)) {
-			return Promise.resolve(Set(props.posts.options));
-		}
-
 		return props
 			.searchPosts(phrase, postType)
 			.then((newOptions) => {
@@ -56,9 +50,7 @@ export function CompositePostsPostTypes<P, T>(
 	const posts: EntitiesSearch.PostsControl<P> = {
 		...props.posts,
 		value: state.posts,
-		options: isFunction(props.searchPosts)
-			? postsOptions
-			: props.posts.options,
+		options: postsOptions,
 		onChange: onChangePosts,
 	};
 
@@ -68,5 +60,12 @@ export function CompositePostsPostTypes<P, T>(
 		onChange: onChangePostType,
 	};
 
-	return <>{props.children(posts, postType)}</>;
+	// TODO Add debouncing to the `search` callback
+	const search: EntitiesSearch.Search<P>['search'] = (phrase) =>
+		searchPostsByPostType(
+			typeof phrase === 'string' ? phrase : phrase.target.value,
+			state.postType
+		);
+
+	return <>{props.children(posts, postType, search)}</>;
 }
diff --git a/sources/js/src/components/posts-select.tsx b/sources/js/src/components/posts-select.tsx
@@ -5,6 +5,8 @@ import React, { JSX } from 'react';
 
 import { NoOptionsMessage } from './no-options-message';
 
+// TODO Must accept string or number? because the value might be the ID of the posts.
+// TODO Add className property to the other related components
 export function PostsSelect(
 	props: EntitiesSearch.PostsControl<string>
 ): JSX.Element {

diff --git a/sources/js/src/components/search.tsx b/sources/js/src/components/search.tsx
@@ -0,0 +1,31 @@
+import EntitiesSearch from '@types';
+import React, { JSX } from 'react';
+
+export function Search<V>(props: EntitiesSearch.Search<V>): JSX.Element {
+	const [searchValue, setSearchValue] = React.useState<string>('');
+
+	const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setSearchValue(event.target.value);
+		props.search && props.search(event.target.value);
+	};
+
+	const inputProps = {
+		type: 'search',
+		value: searchValue,
+		onChange,
+	};
+
+	if (props.id) {
+		return (
+			<label htmlFor={props.id}>
+				<input id={props.id} {...inputProps} />
+			</label>
+		);
+	}
+
+	return (
+		<div className="wz-posts-control-with-search">
+			<input {...inputProps} />
+		</div>
+	);
+}
diff --git a/sources/js/src/index.ts b/sources/js/src/index.ts
@@ -3,6 +3,7 @@ export * from './components/post-type-select';
 export * from './components/post-type-radio';
 export * from './components/posts-select';
 export * from './components/posts-toggle';
+export * from './components/search';
 
 export * from './hooks/use-entity-records';
 export * from './hooks/use-query-viewable-post-types';

diff --git a/sources/js/src/utils/is-function.ts b/sources/js/src/utils/is-function.ts
diff --git a/sources/php/src/Modules/E2e/resources/js/post-types-example-block/index.js b/sources/php/src/Modules/E2e/resources/js/post-types-example-block/index.js
@@ -12,6 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		searchPosts,
 		PostTypeRadio,
 		PostsToggle,
+		Search,
 		CompositePostsPostTypes,
 		useQueryViewablePostTypes,
 		convertPostTypeEntitiesToControlOptions,
@@ -46,12 +47,6 @@ document.addEventListener('DOMContentLoaded', () => {
 						),
 					posts: {
 						value: Immutable.Set(props.attributes.posts),
-						// TODO Reintegrate the posts by posts type hook to pass the values at the first render
-						options: Immutable.Set([
-							{ label: 'Sample Option 1', value: 120 },
-							{ label: 'Entities Option 2', value: 3 },
-							{ label: 'Option 3', value: 4 },
-						]),
 						onChange: (posts) =>
 							props.setAttributes({ posts: posts?.toArray() }),
 					},
@@ -69,24 +64,17 @@ document.addEventListener('DOMContentLoaded', () => {
 							props.setAttributes({ postType }),
 					},
 				},
-				(posts, type) => {
+				(posts, type, search) => {
 					return [
-						createElement(
-							'div',
-							{
-								className: 'wz-post-types-control-wrapper',
-								key: 'post-type',
-							},
-							createElement(PostTypeRadio, type)
-						),
-						createElement(
-							'div',
-							{
-								className: 'wz-posts-control-wrapper',
-								key: 'posts',
-							},
-							createElement(PostsToggle, posts)
-						),
+						createElement(PostTypeRadio, {
+							...type,
+							key: 'post-type-radio',
+						}),
+						createElement(Search, { search, key: 'search' }),
+						createElement(PostsToggle, {
+							...posts,
+							key: 'posts-toggle',
+						}),
 					];
 				}
 			);

diff --git a/yarn.lock b/yarn.lock
@@ -3323,6 +3323,25 @@
     mousetrap "^1.6.5"
     use-memo-one "^1.1.1"
 
+"@wordpress/compose@^6.23.0":
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/compose/-/compose-6.23.0.tgz#3e95cf45ce92b911afeceef431fe41f1dfae61e4"
+  integrity sha512-MMWwYkbmA4IkdZQ/p3BMvgD9MvCGK2lJd8PjnftDw6NjRteXyA6CQjP1h+/mTlNJvHytqRu2cNPey0V0mnRx6A==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@types/mousetrap" "^1.6.8"
+    "@wordpress/deprecated" "^3.46.0"
+    "@wordpress/dom" "^3.46.0"
+    "@wordpress/element" "^5.23.0"
+    "@wordpress/is-shallow-equal" "^4.46.0"
+    "@wordpress/keycodes" "^3.46.0"
+    "@wordpress/priority-queue" "^2.46.0"
+    "@wordpress/undo-manager" "^0.6.0"
+    change-case "^4.1.2"
+    clipboard "^2.0.8"
+    mousetrap "^1.6.5"
+    use-memo-one "^1.1.1"
+
 "@wordpress/core-data@~6.12.0":
   version "6.12.14"
   resolved "https://registry.yarnpkg.com/@wordpress/core-data/-/core-data-6.12.14.tgz#02e6193f898f4307330240753ca4b4c471c63889"
@@ -3395,6 +3414,14 @@
     "@babel/runtime" "^7.16.0"
     "@wordpress/hooks" "^3.40.0"
 
+"@wordpress/deprecated@^3.46.0":
+  version "3.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/deprecated/-/deprecated-3.46.0.tgz#571c7a5a201cca27e48a98b585048a966278a1e7"
+  integrity sha512-i7stkwWr9vUc2A9ILb0qIUfqtyjaG9yNbqRcfWDjqhOn6R4Drm4edwdpZKdYHSTiiH2qPCWZGTc6KVZm5wc9/Q==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/hooks" "^3.46.0"
+
 "@wordpress/dom-ready@^3.40.0":
   version "3.40.0"
   resolved "https://registry.yarnpkg.com/@wordpress/dom-ready/-/dom-ready-3.40.0.tgz#1a47b03b263e4ad6eb0d9d9551f8df24a1a26735"
@@ -3410,6 +3437,14 @@
     "@babel/runtime" "^7.16.0"
     "@wordpress/deprecated" "^3.40.0"
 
+"@wordpress/dom@^3.46.0":
+  version "3.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/dom/-/dom-3.46.0.tgz#f653934041f63dc70210897f9a753514b81659e6"
+  integrity sha512-NiGBTpE7lzTAjkxw5HVp3EzyMxZA378/yed0id0krvEId4prmbIJWRwSNC+Yvn0nhuHczIl4wj9T9zYpksAcUg==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/deprecated" "^3.46.0"
+
 "@wordpress/element@^5.1.0", "@wordpress/element@^5.12.1", "@wordpress/element@^5.17.0":
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-5.17.0.tgz#31bd9323208edf57017fc5c919da6239a30fd252"
@@ -3424,15 +3459,15 @@
     react "^18.2.0"
     react-dom "^18.2.0"
 
-"@wordpress/element@~5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-5.1.0.tgz#d7081d5a89acb91d18ad3f8c16dfb8017d21a280"
-  integrity sha512-Q7kfxl2W6Ht1sfhFYlbVR0tIxDppoCrzpAC+UCYcu3uvw+sXzcTbh/Y2+nl2SaZBxF28eAFottoD3ek1fFJUsg==
+"@wordpress/element@^5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-5.23.0.tgz#d707350298b277c50f512a7f7d7ccaf2a8adc8da"
+  integrity sha512-6c1EG8UJDzJGX6yWJGIi78bgomWJ6rSkMRR9d0UBis9bm9YFBJDydsD9bNx6XItrMEXR7yykXblfGY2YUK3SAA==
   dependencies:
     "@babel/runtime" "^7.16.0"
     "@types/react" "^18.0.21"
     "@types/react-dom" "^18.0.6"
-    "@wordpress/escape-html" "^2.24.0"
+    "@wordpress/escape-html" "^2.46.0"
     change-case "^4.1.2"
     is-plain-object "^5.0.0"
     react "^18.2.0"
@@ -3463,6 +3498,13 @@
   dependencies:
     "@babel/runtime" "^7.16.0"
 
+"@wordpress/escape-html@^2.46.0":
+  version "2.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-2.46.0.tgz#29aa56a614b54057b81d6a4317b2769f17aebcaa"
+  integrity sha512-sPjBUMTSqjDF1niqb6NnKim8Ju7zWVlgZoifO3cC+4DGZcRsKF78eTeuEojQJN7h/FHCjpKX3dvnr+ihv7syEQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
 "@wordpress/eslint-plugin@^14.8.0":
   version "14.12.0"
   resolved "https://registry.yarnpkg.com/@wordpress/eslint-plugin/-/eslint-plugin-14.12.0.tgz#eb7cde92e361f25847beca7fbe5fed331d9950fe"
@@ -3514,6 +3556,13 @@
   dependencies:
     "@babel/runtime" "^7.16.0"
 
+"@wordpress/hooks@^3.46.0":
+  version "3.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/hooks/-/hooks-3.46.0.tgz#d29a192376812272688b203316b3f0e8bf6c5c44"
+  integrity sha512-TTYNZwMZeATpkWmvAoShP43UONd/WPNTtsy1czMSyiqPzFhzGJbKD75CdJtPp5DqIAiuWQEuDmcxRAPcZ/1Qgw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
 "@wordpress/html-entities@^3.35.1", "@wordpress/html-entities@^3.40.0":
   version "3.40.0"
   resolved "https://registry.yarnpkg.com/@wordpress/html-entities/-/html-entities-3.40.0.tgz#c9b1e31998bf2cd1a3473e6f6e9c645ccb46ab5e"
@@ -3533,6 +3582,18 @@
     sprintf-js "^1.1.1"
     tannin "^1.2.0"
 
+"@wordpress/i18n@^4.46.0":
+  version "4.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/i18n/-/i18n-4.46.0.tgz#ce3bcc3b8344be5c863f6fe978e1ac8358964cb1"
+  integrity sha512-5/61hd50KkqGgoQpf66DDft6sMTKfeGVdmZOt42GWymylxFSmbZLLnR8YafECQrmia/TdwIco5I4n0hIikYbNQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/hooks" "^3.46.0"
+    gettext-parser "^1.3.1"
+    memize "^2.1.0"
+    sprintf-js "^1.1.1"
+    tannin "^1.2.0"
+
 "@wordpress/i18n@~4.24.0":
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/@wordpress/i18n/-/i18n-4.24.0.tgz#128cca5ecb6e928a41f1d7d8b0c9a3c4ac8df0ee"
@@ -3561,6 +3622,13 @@
   dependencies:
     "@babel/runtime" "^7.16.0"
 
+"@wordpress/is-shallow-equal@^4.46.0":
+  version "4.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/is-shallow-equal/-/is-shallow-equal-4.46.0.tgz#195e4c3eae252619735aa1ad9db422e25dc1b5ae"
+  integrity sha512-1K5RTTi99ozF9vPKxoVl+RR6mSYy64DKYnijACDN9Sigzbe6OWeL6ky47r09G0JtDnRpzA0itIfFcV8iRNzpvA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
 "@wordpress/jest-console@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@wordpress/jest-console/-/jest-console-7.11.0.tgz#8520690fc91ffbd3ce5c6f1221633f08ee89d1e1"
@@ -3597,6 +3665,15 @@
     "@wordpress/i18n" "^4.40.0"
     change-case "^4.1.2"
 
+"@wordpress/keycodes@^3.46.0":
+  version "3.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/keycodes/-/keycodes-3.46.0.tgz#4fba5011368196b2b2cffe10d03bad3d6a0f2220"
+  integrity sha512-08ubCD321T85BZBUQuco2/vwIC5Pfzbw4CY7E2xR3rGzX3vb7SjDbKIqKeJL/UfYSmZF9GY+KaspSa1ywFtWiA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/i18n" "^4.46.0"
+    change-case "^4.1.2"
+
 "@wordpress/notices@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@wordpress/notices/-/notices-4.8.0.tgz#3258ff7afccda27ee80cc455f787b98175b608d0"
@@ -3655,6 +3732,14 @@
     "@babel/runtime" "^7.16.0"
     requestidlecallback "^0.3.0"
 
+"@wordpress/priority-queue@^2.46.0":
+  version "2.46.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/priority-queue/-/priority-queue-2.46.0.tgz#7000cef6d078909a4d8806ce7d61eea53399dc09"
+  integrity sha512-ElNF4ONApHwwkEvP3Ta6Wly2RCljXLZpfyahOziq3rlK8gaeU82qRt13KBE85Djz+90yHSyDlX9YpmJebV9oPw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    requestidlecallback "^0.3.0"
+
 "@wordpress/private-apis@^0.17.2":
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/@wordpress/private-apis/-/private-apis-0.17.2.tgz#7913479e4cd52e5cfbd4268fa98aad6cf10c79d2"
@@ -3789,6 +3874,14 @@
   dependencies:
     "@babel/runtime" "^7.16.0"
 
+"@wordpress/undo-manager@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/undo-manager/-/undo-manager-0.6.0.tgz#02aa3d7ebf990138dd2130a2edf0491dd4d61bdc"
+  integrity sha512-u/oW1LAx0yANHzFHz/H1Tnopa7r/8q1D/bV2fescjQ947LLOpaImh7hlLn6ryEt8qCj2YSL9Ry2dDE2R/U1gQQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/is-shallow-equal" "^4.46.0"
+
 "@wordpress/url@^3.25.0", "@wordpress/url@^3.36.1", "@wordpress/url@^3.41.0":
   version "3.41.0"
   resolved "https://registry.yarnpkg.com/@wordpress/url/-/url-3.41.0.tgz#a5a43a01b5c72e025c13354827137dc6abee57cd"