Add options to ContentSearch and ContentPicker which allow configuration of the debounced input delay.

Fix a few other lint issues.

Author: rleeson

components/content-picker/index.tsx

@@ -35,7 +35,11 @@ const ContentPickerWrapper = styled.div`
 	width: 100%;
 `;
 
-interface ContentPickerProps {
+export type ContentPickerOptions = {
+	inputDelay: number;
+};
+
+export interface ContentPickerProps {
 	label?: string;
 	hideLabelFromVision?: boolean;
 	mode?: ContentSearchMode;
@@ -55,6 +59,7 @@ interface ContentPickerProps {
 	renderItemType?: (props: NormalizedSuggestion) => string;
 	renderItem?: (props: RenderItemComponentProps) => JSX.Element;
 	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
+	options?: ContentPickerOptions;
 }
 
 export const ContentPicker: React.FC<ContentPickerProps> = ({
@@ -79,7 +84,10 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 	renderItemType = defaultRenderItemType,
 	renderItem = undefined,
 	PickedItemPreviewComponent = undefined,
+	options,
 }) => {
+	const searchOptions =
+		options && options.inputDelay ? { inputDelay: options.inputDelay } : undefined;
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
 	/**
@@ -147,6 +155,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 						fetchInitialResults={fetchInitialResults}
 						renderItemType={renderItemType}
 						renderItem={renderItem}
+						options={searchOptions}
 					/>
 				) : (
 					label && (

components/content-search/index.tsx

@@ -66,11 +66,9 @@ const StyledNoResults = styled.li`
 	padding-left: 3px;
 `;
 
-const ContentSearchNoResults: React.FC = () => (
-	<StyledNoResults className="tenup-content-search-list-item components-button">
-		{__('Nothing found.', '10up-block-components')}
-	</StyledNoResults>
-);
+export type ContentSearchOptions = {
+	inputDelay: number;
+};
 
 export interface ContentSearchProps {
 	onSelectItem: (item: NormalizedSuggestion) => void;
@@ -85,8 +83,15 @@ export interface ContentSearchProps {
 	renderItemType?: (props: NormalizedSuggestion) => string;
 	renderItem?: (props: RenderItemComponentProps) => JSX.Element;
 	fetchInitialResults?: boolean;
+	options?: ContentSearchOptions;
 }
 
+const ContentSearchNoResults: React.FC = () => (
+	<StyledNoResults className="tenup-content-search-list-item components-button">
+		{__('Nothing found.', '10up-block-components')}
+	</StyledNoResults>
+);
+
 const ContentSearch: React.FC<ContentSearchProps> = ({
 	onSelectItem = () => {
 		console.log('Select!'); // eslint-disable-line no-console
@@ -102,8 +107,11 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 	renderItemType = undefined,
 	renderItem: SearchResultItem = SearchItem,
 	fetchInitialResults,
+	options,
 }) => {
-	const [searchInput, setSearchString, searchString] = useDebouncedInput('');
+	const debounceOptions =
+		options && options.inputDelay ? { delay: options.inputDelay } : undefined;
+	const [searchInput, setSearchString, searchString] = useDebouncedInput('', debounceOptions);
 	const [isFocused, setIsFocused] = useState(false);
 	const searchContainer = useRef<HTMLDivElement>(null);
 

components/media-toolbar/index.tsx

@@ -72,19 +72,15 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 						name={mergedLabels.replace}
 					/>
 					{!!isOptional && (
-						<ToolbarButton onClick={onRemove}>
-							{mergedLabels.remove}
-						</ToolbarButton>
+						<ToolbarButton onClick={onRemove}>{mergedLabels.remove}</ToolbarButton>
 					)}
 				</>
 			) : (
 				<MediaUploadCheck>
 					<MediaUpload
 						onSelect={onSelect}
 						render={({ open }) => (
-							<ToolbarButton onClick={open}>
-								{mergedLabels.add}
-							</ToolbarButton>
+							<ToolbarButton onClick={open}>{mergedLabels.add}</ToolbarButton>
 						)}
 					/>
 				</MediaUploadCheck>

components/post-featured-image/index.tsx

@@ -2,7 +2,8 @@ import { useEntityProp } from '@wordpress/core-data';
 import { usePost } from '../../hooks';
 import { Image } from '../image';
 
-interface PostFeaturedImageProps extends Omit<React.ComponentProps<typeof Image>, 'id' | 'onSelect' | 'canEditImage'> {}
+interface PostFeaturedImageProps
+	extends Omit<React.ComponentProps<typeof Image>, 'id' | 'onSelect' | 'canEditImage'> {}
 
 export const PostFeaturedImage = (props: PostFeaturedImageProps) => {
 	const { postId, postType, isEditable } = usePost();

hooks/use-debounced-input/index.ts

@@ -15,7 +15,7 @@ type DebouncedInputOptions = {
  */
 export function useDebouncedInput(
 	defaultValue: string = '',
-	options: DebouncedInputOptions = { delay: 500 },
+	options: DebouncedInputOptions = { delay: 350 },
 ): [string, (value: string) => void, string] {
 	const [input, setInput] = useState<string>(defaultValue);
 	const [debouncedInput, setDebouncedState] = useState(defaultValue);