Skip to content

Commit fd4fd65

Browse files
authored
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
2 parents b369c7e + 49867b3 commit fd4fd65

File tree

4 files changed

+33
-6
lines changed

4 files changed

+33
-6
lines changed

components/content-picker/PickedItem.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,28 @@ interface PickedItemProps {
156156
setSize?: number;
157157
onMoveUp?: () => void;
158158
onMoveDown?: () => void;
159+
PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
159160
}
160161

162+
/**
163+
* Component to render a preview of a picked item.
164+
*
165+
* @component
166+
* @param {object} props - The component props.
167+
* @param {PickedItemType} props.item - The picked item to display.
168+
* @returns {*} React JSX
169+
*/
170+
const PickedItemPreview: React.FC<{ item: PickedItemType }> = ({ item }) => {
171+
return (
172+
<>
173+
<ItemTitle>
174+
<Truncate>{decodeEntities(item.title)}</Truncate>
175+
</ItemTitle>
176+
{item.url && <ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>}
177+
</>
178+
);
179+
};
180+
161181
/**
162182
* PickedItem
163183
*
@@ -174,6 +194,7 @@ const PickedItem: React.FC<PickedItemProps> = ({
174194
setSize = 1,
175195
onMoveUp,
176196
onMoveDown,
197+
PickedItemPreviewComponent,
177198
}) => {
178199
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
179200
id,
@@ -203,11 +224,10 @@ const PickedItem: React.FC<PickedItemProps> = ({
203224
</DragHandleWrapper>
204225
)}
205226
<ItemContent isDragging={isDragging}>
206-
<ItemTitle>
207-
<Truncate>{decodeEntities(item.title)}</Truncate>
208-
</ItemTitle>
209-
{item.url && (
210-
<ItemURL>{filterURLForDisplay(safeDecodeURI(item.url)) || ''}</ItemURL>
227+
{PickedItemPreviewComponent ? (
228+
<PickedItemPreviewComponent item={item} />
229+
) : (
230+
<PickedItemPreview item={item} />
211231
)}
212232
</ItemContent>
213233
<ButtonContainer>

components/content-picker/SortableList.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ interface SortableListProps {
3232
handleItemDelete: (post: PickedItemType) => void;
3333
mode: ContentSearchMode;
3434
setPosts: (posts: Array<PickedItemType>) => void;
35+
PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
3536
}
3637

3738
type Term = {
@@ -82,6 +83,7 @@ const SortableList: React.FC<SortableListProps> = ({
8283
handleItemDelete,
8384
mode = 'post',
8485
setPosts,
86+
PickedItemPreviewComponent,
8587
}) => {
8688
const hasMultiplePosts = posts.length > 1;
8789
const [activeId, setActiveId] = useState<string | null>(null);
@@ -212,6 +214,7 @@ const SortableList: React.FC<SortableListProps> = ({
212214
setSize={items.length}
213215
onMoveUp={handleMoveUp}
214216
onMoveDown={handleMoveDown}
217+
PickedItemPreviewComponent={PickedItemPreviewComponent}
215218
/>
216219
);
217220
});

components/content-picker/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ interface ContentPickerProps {
5454
fetchInitialResults?: boolean;
5555
renderItemType?: (props: NormalizedSuggestion) => string;
5656
renderItem?: (props: RenderItemComponentProps) => JSX.Element;
57+
PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
5758
}
5859

5960
export const ContentPicker: React.FC<ContentPickerProps> = ({
@@ -77,6 +78,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
7778
fetchInitialResults = false,
7879
renderItemType = defaultRenderItemType,
7980
renderItem = undefined,
81+
PickedItemPreviewComponent = undefined,
8082
}) => {
8183
const currentPostId = select('core/editor')?.getCurrentPostId();
8284

@@ -180,6 +182,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
180182
isOrderable={isOrderable}
181183
mode={mode}
182184
setPosts={onPickChange}
185+
PickedItemPreviewComponent={PickedItemPreviewComponent}
183186
/>
184187
</ul>
185188
</StyleWrapper>

components/content-picker/readme.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ function MyComponent( props ) {
3939
| `excludeCurrentPost` | `bool` | `true` | Don't allow user to pick the current post. Only applicable on the editor screen. |
4040
| `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. |
4141
| `perPage` | `number` | `50` | Number of items to show during search
42-
| `fetchInitialResults` | `bool` | `false` | Fetch initial results to present when focusing the search input | |
42+
| `fetchInitialResults` | `bool` | `false` | Fetch initial results to present when focusing the search input |
43+
| `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`). | |
4344
__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.
4445

4546
The `contentTypes` will get used in a Rest Request to the `search` endpoint as the `subtypes`:

0 commit comments

Comments
 (0)