Skip to content

Commit

Permalink
Merge pull request #280 from 10up/feature/content-search-with-searchc…
Browse files Browse the repository at this point in the history 
…ontrol-component

Replace `TextControl` with `SearchControl` in `ContentSearch` Component
  • Loading branch information
@fabiankaegy
fabiankaegy authored Jan 23, 2024
2 parents 31e3e7d + 81a8919 commit 1189822
Show file tree
Hide file tree
Showing 10 changed files with 95 additions and 5 deletions.
5 changes: 5 additions & 0 deletions components/content-picker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const ContentPickerWrapper = styled.div`
*
* @param {object} props React props
* @param {string} props.label label for the picker
* @param {boolean} props.hideLabelFromVision whether or not to hide the label from vision
* @param {string} props.mode mode of the picker
* @param {Array} props.contentTypes array of content types to filter by
* @param {string} props.placeholder placeholder text for the search input
Expand All @@ -57,6 +58,7 @@ const ContentPickerWrapper = styled.div`
*/
const ContentPicker = ({
label,
hideLabelFromVision,
mode,
contentTypes,
placeholder,
Expand Down Expand Up @@ -130,6 +132,7 @@ const ContentPicker = ({
<ContentSearch
placeholder={placeholder}
label={label}
hideLabelFromVision={hideLabelFromVision}
excludeItems={excludeItems}
onSelectItem={handleSelect}
contentTypes={contentTypes}
Expand Down Expand Up @@ -184,6 +187,7 @@ const ContentPicker = ({

ContentPicker.defaultProps = {
label: '',
hideLabelFromVision: true,
mode: 'post',
onPickChange: (ids) => {
console.log('Content picker list change', ids); // eslint-disable-line no-console
Expand All @@ -209,6 +213,7 @@ ContentPicker.propTypes = {
placeholder: PropTypes.string,
mode: PropTypes.oneOf(['post', 'user', 'term']),
label: PropTypes.string,
hideLabelFromVision: PropTypes.bool,
multiPickedLabel: PropTypes.string,
singlePickedLabel: PropTypes.string,
isOrderable: PropTypes.bool,
Expand Down
3 changes: 2 additions & 1 deletion components/content-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ function MyComponent( props ) {
|----------------------|------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `onPickChange` | `function` | `undefined` | Callback function the list of picked content gets changed |
| `queryFilter` | `function` | `undefined` | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter |
| `label` | `string` | `''` | Renders a label for the Search Field. |
| `label` | `string` | `''` | Renders a label for the Search Field.
| `hideLabelFromVision` | `bool` | `true` | Whether to hide the label |
| `mode` | `string` | `'post'` | One of: `post`, `user`, `term` |
| `placeholder` | `string` | `''` | Renders placeholder text inside the Search Field. |
| `contentTypes` | `array` | `[ 'post', 'page' ]` | Names of the post types or taxonomies that should get searched |
Expand Down
11 changes: 8 additions & 3 deletions components/content-search/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TextControl, Spinner, NavigableMenu, Button } from '@wordpress/components';
import { Spinner, NavigableMenu, Button, SearchControl } from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -43,6 +43,7 @@ const ContentSearch = ({
onSelectItem,
placeholder,
label,
hideLabelFromVision,
contentTypes,
mode,
perPage,
Expand Down Expand Up @@ -343,12 +344,14 @@ const ContentSearch = ({
return (
<StyledComponentContext cacheKey="tenup-component-content-search">
<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
<TextControl
label={label}
<SearchControl
__next40pxDefaultSize
value={searchString}
onChange={(newSearchString) => {
handleSearchStringChange(newSearchString, 1);
}}
label={label}
hideLabelFromVision={hideLabelFromVision}
placeholder={placeholder}
autoComplete="off"
onFocus={() => {
Expand Down Expand Up @@ -424,6 +427,7 @@ ContentSearch.defaultProps = {
placeholder: '',
perPage: 20,
label: '',
hideLabelFromVision: true,
mode: 'post',
excludeItems: [],
queryFilter: (query) => query,
Expand All @@ -442,6 +446,7 @@ ContentSearch.propTypes = {
placeholder: PropTypes.string,
excludeItems: PropTypes.array,
label: PropTypes.string,
hideLabelFromVision: PropTypes.bool,
perPage: PropTypes.number,
renderItemType: PropTypes.func,
fetchInitialResults: PropTypes.bool,
Expand Down
3 changes: 2 additions & 1 deletion components/content-search/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ function MyComponent( props ) {
|-----------------------|------------|--------------------------------------|----------------------------------------------------------------------------------------------------------------------------------|
| `onSelectItem` | `function` | `undefined` | Function called when a searched item is clicked |
| `queryFilter` | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before it's made. It's advisable to use `useCallback` to save this parameter |
| `label` | `string` | `''` | Renders a label for the Search Field. |
| `label` | `string` | `''` | Renders a label for the Search Field.
| `hideLabelFromVision` | `bool` | `true` | Whether to hide the label |
| `mode` | `string` | `'post'` | One of: `post`, `user`, `term` |
| `placeholder` | `string` | `''` | Renders placeholder text inside the Search Field. |
| `contentTypes` | `array` | `[ 'post', 'page' ]` | Names of the post types or taxonomies that should get searched |
Expand Down
19 changes: 19 additions & 0 deletions example/src/blocks/content-picker-example/block.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"apiVersion": 2,
"name": "example/content-picker",
"title": "Content Picker",
"description": "Example Block to show the Content Picker in usage",
"icon": "excerpt-view",
"category": "common",
"example": {},
"supports": {
"html": false
},
"attributes": {
"selectedPosts": {
"type": "array"
}
},
"variations": [],
"editorScript": "file:./index.js"
}
49 changes: 49 additions & 0 deletions example/src/blocks/content-picker-example/edit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, Placeholder } from '@wordpress/components';

import { ContentPicker } from '@10up/block-components';

export const BlockEdit = (props) => {
const {
attributes: {selectedPosts},
setAttributes
} = props;

function handlePostSelection(posts) {
setAttributes({ selectedPosts: posts })
}

const blockProps = useBlockProps();

return (
<>
<InspectorControls>
<PanelBody title={__('Content Picker', 'example')}>
<ContentPicker
label={__('Select a Post or Page', 'example')}
contentTypes={['page', 'post']}
onPickChange={handlePostSelection}
fetchInitialResults
value={selectedPosts}
content={selectedPosts}
maxContentItems={5}
/>
</PanelBody>
</InspectorControls>
<div {...blockProps}>
<Placeholder label={__('Content Picker', 'example')} instructions={__('Use the text field to search for a post', 'example')}>
<ContentPicker
label={__('Select a Post or Page', 'example')}
contentTypes={['page', 'post']}
onPickChange={handlePostSelection}
fetchInitialResults
value={selectedPosts}
content={selectedPosts}
maxContentItems={5}
/>
</Placeholder>
</div>
</>
)
}
8 changes: 8 additions & 0 deletions example/src/blocks/content-picker-example/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
import { BlockEdit } from './edit';

registerBlockType( metadata, {
edit: BlockEdit,
save: () => null
} );
Binary file modified images/content-picker.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
},
"homepage": "https://github.com/10up/block-components.git#readme",
"dependencies": {
"@10up/block-components": "^1.17.2",
"@dnd-kit/core": "^6.0.6",
"@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.1",
Expand Down

0 comments on commit 1189822

Please sign in to comment.