Merge pull request #361 from aatanasovdev/feature/content-picker-item-container-component

ContentPicker: Allow the preview of the selected items to be adjusted via a prop

Author: fabiankaegy

components/content-picker/PickedItem.tsx

@@ -156,8 +156,28 @@ interface PickedItemProps {
 	setSize?: number;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
+	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
 }
 
+/**
+ * Component to render a preview of a picked item.
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {PickedItemType} props.item - The picked item to display.
+ * @returns {*} React JSX
+ */
+const PickedItemPreview: React.FC<{ item: PickedItemType }> = ({ item }) => {
+	return (
+		<>
+			<ItemTitle>
+				<Truncate>{decodeEntities(item.title)}</Truncate>
+			</ItemTitle>
+			{item.url && <ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>}
+		</>
+	);
+};
+
 /**
  * PickedItem
  *
@@ -174,6 +194,7 @@ const PickedItem: React.FC<PickedItemProps> = ({
 	setSize = 1,
 	onMoveUp,
 	onMoveDown,
+	PickedItemPreviewComponent,
 }) => {
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id,
@@ -203,11 +224,10 @@ const PickedItem: React.FC<PickedItemProps> = ({
 					</DragHandleWrapper>
 				)}
 				<ItemContent isDragging={isDragging}>
-					<ItemTitle>
-						<Truncate>{decodeEntities(item.title)}</Truncate>
-					</ItemTitle>
-					{item.url && (
-						<ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>
+					{PickedItemPreviewComponent ? (
+						<PickedItemPreviewComponent item={item} />
+					) : (
+						<PickedItemPreview item={item} />
 					)}
 				</ItemContent>
 				<ButtonContainer>

components/content-picker/SortableList.tsx

@@ -32,6 +32,7 @@ interface SortableListProps {
 	handleItemDelete: (post: PickedItemType) => void;
 	mode: ContentSearchMode;
 	setPosts: (posts: Array<PickedItemType>) => void;
+	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
 }
 
 type Term = {
@@ -82,6 +83,7 @@ const SortableList: React.FC<SortableListProps> = ({
 	handleItemDelete,
 	mode = 'post',
 	setPosts,
+	PickedItemPreviewComponent,
 }) => {
 	const hasMultiplePosts = posts.length > 1;
 	const [activeId, setActiveId] = useState<string | null>(null);
@@ -212,6 +214,7 @@ const SortableList: React.FC<SortableListProps> = ({
 					setSize={items.length}
 					onMoveUp={handleMoveUp}
 					onMoveDown={handleMoveDown}
+					PickedItemPreviewComponent={PickedItemPreviewComponent}
 				/>
 			);
 		});

components/content-picker/index.tsx

@@ -54,6 +54,7 @@ interface ContentPickerProps {
 	fetchInitialResults?: boolean;
 	renderItemType?: (props: NormalizedSuggestion) => string;
 	renderItem?: (props: RenderItemComponentProps) => JSX.Element;
+	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
 }
 
 export const ContentPicker: React.FC<ContentPickerProps> = ({
@@ -77,6 +78,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 	fetchInitialResults = false,
 	renderItemType = defaultRenderItemType,
 	renderItem = undefined,
+	PickedItemPreviewComponent = undefined,
 }) => {
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
@@ -180,6 +182,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 								isOrderable={isOrderable}
 								mode={mode}
 								setPosts={onPickChange}
+								PickedItemPreviewComponent={PickedItemPreviewComponent}
 							/>
 						</ul>
 					</StyleWrapper>

components/content-picker/readme.md

@@ -39,7 +39,8 @@ function MyComponent( props ) {
 | `excludeCurrentPost`  | `bool`     | `true`               | Don't allow user to pick the current post. Only applicable on the editor screen.                                                                                                                                                                                                                                                                                                                                       |
 | `content`             | `array`    | `[]`                 | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
 | `perPage`             | `number`   | `50`                 | Number of items to show during search
-| `fetchInitialResults` | `bool`     | `false`               | Fetch initial results to present when focusing the search input                                                                                          |                                                                                                                                                                                                                                                                                                                                                                                  |
+| `fetchInitialResults` | `bool`     | `false`               | Fetch initial results to present when focusing the search input                                                                                          |
+| `PickedItemPreviewComponent` | `React.ComponentType<item>`     | `undefined`               | Allow replacing the default picked item preview. The `item` prop includes information about the selected entry (please check the `PickedItemType` interface in `./PickedItem.tsx`). |                                                                                                                                                                                                                                                                                                                                                                                  |
 __NOTE:__ Content picker cannot validate that posts you pass it via `content` prop actually exist. If a post does not exist, it will not render as one of the picked items but will still be passed back as picked items if new items are picked/sorted. Therefore, on save you need to validate that all the picked posts/terms actually exist.
 
 The `contentTypes` will get used in a Rest Request to the `search` endpoint as the `subtypes`: