First step for Preset Post Types

Author: widoz

sources/client/src/components/preset-post-types.tsx

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import EntitiesSearch from '@types';
+import React, { JSX } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { CompositeEntitiesByKind } from './composite-entities-by-kind';
+import { SearchControl } from './search-control';
+import { Set } from '../models/set';
+
+type EntitiesValue = EntitiesSearch.Value;
+type Entities = EntitiesSearch.Entities< EntitiesValue >;
+type KindValue = EntitiesSearch.Kind< string > | string;
+
+type Props = {
+	entities: Entities;
+	onChangeEntities: ( values: Entities ) => void;
+	entitiesComponent: React.ComponentType<
+		EntitiesSearch.BaseControl< EntitiesValue >
+	>;
+	kind: KindValue;
+	kindOptions: EntitiesSearch.Options< string >;
+	onChangeKind: ( values: KindValue ) => void;
+	kindComponent: React.ComponentType<
+		EntitiesSearch.BaseControl< KindValue >
+	>;
+	search: EntitiesSearch.SearchEntitiesFunction< EntitiesValue, KindValue >;
+};
+
+export function PresetPostTypes( props: Props ): JSX.Element {
+	const kindValue = ensureKindValue( props.kind );
+
+	return (
+		<CompositeEntitiesByKind< EntitiesSearch.Value, string >
+			entities={ {
+				value: props.entities,
+				onChange: props.onChangeEntities,
+			} }
+			kind={ {
+				value: kindValue,
+				options: props.kindOptions,
+				onChange: props.onChangeKind,
+			} }
+			searchEntities={ props.search }
+		>
+			{ ( entities, kind, search ) => (
+				<>
+					<props.kindComponent { ...kind } />
+					<SearchControl onChange={ search } />
+					<props.entitiesComponent { ...entities } />
+				</>
+			) }
+		</CompositeEntitiesByKind>
+	);
+}
+
+function ensureKindValue( value: KindValue ): EntitiesSearch.Kind< string > {
+	return typeof value === 'string' ? new Set( [ value ] ) : value;
+}

sources/client/src/index.ts

@@ -2,6 +2,7 @@ export * from './api/search-entities';
 
 export * from './components/composite-entities-by-kind';
 export * from './components/plural-select-control';
+export * from './components/preset-post-types';
 export * from './components/radio-control';
 export * from './components/search-control';
 export * from './components/singular-select-control';

sources/server/src/Modules/E2e/resources/js/post-types-example-block/index.js

@@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		SingularSelectControl,
 		PluralSelectControl,
 		RadioControl,
+		PresetPostTypes,
 		ToggleControl,
 		SearchControl,
 		CompositeEntitiesByKind,
@@ -40,10 +41,32 @@ document.addEventListener('DOMContentLoaded', () => {
 			}
 
 			const PostPostTypesControllerElement = createElement(
-				CompositeEntitiesByKind,
+			  	PresetPostTypes,
 				{
+					entities: new Set(props.attributes.posts),
+					onChangeEntities: (posts) =>
+					  props.setAttributes({ posts: posts.toArray() }),
+					entitiesComponent: ToggleControl,
+
+					kind: new Set(props.attributes.postType),
+					kindOptions: convertEntitiesToControlOptions(
+					  postTypesEntities
+						.records()
+						.filter(
+						  (record) =>
+							!UNSUPPORTED_CPTS.includes(record.slug)
+						),
+					  'name',
+					  'slug'
+					),
+					onChangeKind: (postType) =>
+					  props.setAttributes({
+						  postType: postType.toArray(),
+					  }),
+					kindComponent: ToggleControl,
+
 					// TODO Wrap around a throttle or debounce function
-					searchEntities: async (
+					search: async (
 						phrase,
 						postType,
 						queryArguments
@@ -60,44 +83,6 @@ document.addEventListener('DOMContentLoaded', () => {
 							'id'
 						);
 					},
-					entities: {
-						value: new Set(props.attributes.posts),
-						onChange: (posts) =>
-							props.setAttributes({ posts: posts.toArray() }),
-					},
-					kind: {
-						value: new Set(props.attributes.postType),
-						options: convertEntitiesToControlOptions(
-							postTypesEntities
-								.records()
-								.filter(
-									(record) =>
-										!UNSUPPORTED_CPTS.includes(record.slug)
-								),
-							'name',
-							'slug'
-						),
-						onChange: (postType) =>
-							props.setAttributes({
-								postType: postType.toArray(),
-							}),
-					},
-				},
-				(posts, type, search) => {
-					return [
-						createElement(ToggleControl, {
-							...type,
-							key: 'post-type-radio',
-						}),
-						createElement(SearchControl, {
-							onChange: search,
-							key: 'search',
-						}),
-						createElement(ToggleControl, {
-							...posts,
-							key: 'posts-toggle',
-						}),
-					];
 				}
 			);