Merge pull request #294 from 10up/feature/allow-custom-search-result-…

…rendering
10up · Feb 27, 2024 · 9f1ec12 · 9f1ec12
2 parents f1c6e4e + 6a21307
commit 9f1ec12
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/components/content-picker/index.js b/components/content-picker/index.js
@@ -54,6 +54,7 @@ const ContentPickerWrapper = styled.div`
  * @param {number} props.perPage number of items to show per page
  * @param {boolean} props.fetchInitialResults whether or not to fetch initial results on mount
  * @param {Function} props.renderItemType callback to render the item type
+ * @param {Function} props.renderItem react component to render the search result item
  * @returns {*} React JSX
  */
 const ContentPicker = ({
@@ -74,6 +75,7 @@ const ContentPicker = ({
 	perPage,
 	fetchInitialResults,
 	renderItemType,
+	renderItem,
 }) => {
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
@@ -141,6 +143,7 @@ const ContentPicker = ({
 						perPage={perPage}
 						fetchInitialResults={fetchInitialResults}
 						renderItemType={renderItemType}
+						renderItem={renderItem}
 					/>
 				) : (
 					label && (
@@ -205,6 +208,7 @@ ContentPicker.defaultProps = {
 	singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
 	fetchInitialResults: false,
 	renderItemType: defaultRenderItemType,
+	renderItem: undefined,
 };
 
 ContentPicker.propTypes = {
@@ -225,6 +229,7 @@ ContentPicker.propTypes = {
 	perPage: PropTypes.number,
 	fetchInitialResults: PropTypes.bool,
 	renderItemType: PropTypes.func,
+	renderItem: PropTypes.func,
 };
 
 export { ContentPicker };
diff --git a/components/content-search/index.js b/components/content-search/index.js
@@ -1,6 +1,7 @@
 import { Spinner, NavigableMenu, Button, SearchControl } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import styled from '@emotion/styled';
@@ -50,6 +51,7 @@ const ContentSearch = ({
 	queryFilter,
 	excludeItems,
 	renderItemType,
+	renderItem: RenderItemComponent,
 	fetchInitialResults,
 }) => {
 	const [searchString, setSearchString] = useState('');
@@ -111,12 +113,20 @@ const ContentSearch = ({
 
 			switch (mode) {
 				case 'user':
-					searchQuery = `wp/v2/users/?search=${keyword}`;
+					searchQuery = addQueryArgs('wp/v2/users', {
+						search: keyword,
+					});
 					break;
 				default:
-					searchQuery = `wp/v2/search/?search=${keyword}&subtype=${contentTypes.join(
-						',',
-					)}&type=${mode}&_embed&per_page=${perPage}&page=${page}`;
+					searchQuery = addQueryArgs('wp/v2/search', {
+						search: keyword,
+						subtype: contentTypes.join(','),
+						type: mode,
+						_embed: true,
+						per_page: perPage,
+						page,
+					});
+
 					break;
 			}
 
@@ -385,6 +395,12 @@ const ContentSearch = ({
 										return null;
 									}
 
+									const isSelected = selectedItem === index + 1;
+
+									const selectItem = () => {
+										handleItemSelection(item);
+									};
+
 									return (
 										<li
 											key={item.id}
@@ -393,14 +409,25 @@ const ContentSearch = ({
 												marginBottom: '0',
 											}}
 										>
-											<SearchItem
-												onClick={() => handleItemSelection(item)}
-												searchTerm={searchString}
-												suggestion={item}
-												contentTypes={contentTypes}
-												isSelected={selectedItem === index + 1}
-												renderType={renderItemType}
-											/>
+											{RenderItemComponent ? (
+												<RenderItemComponent
+													item={item}
+													onSelect={selectItem}
+													searchTerm={searchString}
+													contentTypes={contentTypes}
+													isSelected={isSelected}
+													renderType={renderItemType}
+												/>
+											) : (
+												<SearchItem
+													onClick={selectItem}
+													searchTerm={searchString}
+													suggestion={item}
+													contentTypes={contentTypes}
+													isSelected={isSelected}
+													renderType={renderItemType}
+												/>
+											)}
 										</li>
 									);
 								})}
@@ -435,6 +462,7 @@ ContentSearch.defaultProps = {
 		console.log('Select!'); // eslint-disable-line no-console
 	},
 	renderItemType: defaultRenderItemType,
+	renderItem: undefined,
 	fetchInitialResults: false,
 };
 
@@ -449,6 +477,7 @@ ContentSearch.propTypes = {
 	hideLabelFromVision: PropTypes.bool,
 	perPage: PropTypes.number,
 	renderItemType: PropTypes.func,
+	renderItem: PropTypes.func,
 	fetchInitialResults: PropTypes.bool,
 };