diff --git a/README.md b/README.md index 80dd12c..dd0e57a 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ The following props are accepted by the picker: | width | `number / string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. | height | `number / string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. | categoryHeight | `number / string` | `100` | Controls the height of the home page reaction category. You can provide a number that will be treated as pixel size, or your any accepted css width as string. +| initialSearchTerm | `string` | | Sets the initial search term when the picker is opened. ### TenorImage diff --git a/src/GifPickerReact.tsx b/src/GifPickerReact.tsx index 8523a19..fd85348 100644 --- a/src/GifPickerReact.tsx +++ b/src/GifPickerReact.tsx @@ -16,6 +16,7 @@ export interface GifPickerReactProps { onGifClick?: (gif: TenorImage) => void; autoFocusSearch?: boolean; contentFilter?: ContentFilter; + initialSearchTerm?: string; clientKey?: string; country?: string; locale?: string; @@ -27,7 +28,7 @@ export interface GifPickerReactProps { function GifPickerReact(props: GifPickerReactProps): JSX.Element { const settings = useSettings(props); - const pickerContext = usePickerContext(); + const pickerContext = usePickerContext(settings.initialSearchTerm); const tenorManager: TenorManager = useMemo(() => ( new TenorManager(settings.tenorApiKey, settings.clientKey, settings.country, settings.locale, settings.contentFilter) diff --git a/src/hooks/usePickerContext.ts b/src/hooks/usePickerContext.ts index 52a1bdb..c690e80 100644 --- a/src/hooks/usePickerContext.ts +++ b/src/hooks/usePickerContext.ts @@ -5,9 +5,9 @@ export interface PickerContextType { showTrending: boolean } -function usePickerContext(): [PickerContextType, Dispatch>] { +function usePickerContext(initialSearchTerm: string): [PickerContextType, Dispatch>] { const DEFAULT_SETTINGS: PickerContextType = { - searchTerm: '', + searchTerm: initialSearchTerm, showTrending: false }; diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index eae8bb6..0d6d871 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -16,6 +16,7 @@ export type GifPickerSettings = { width: string; categoryHeight: string; theme: Theme; + initialSearchTerm: string; } function useSettings(props: GifPickerReactProps): GifPickerSettings { @@ -33,7 +34,8 @@ function useSettings(props: GifPickerReactProps): GifPickerSettings { height: praseDimension(props.height ?? 450), width: praseDimension(props.width ?? 350), categoryHeight: praseDimension(props.categoryHeight ?? 100), - theme: getTheme(props.theme) + theme: getTheme(props.theme), + initialSearchTerm: props.initialSearchTerm ?? '' }; } diff --git a/src/stories/GifPicker.stories.tsx b/src/stories/GifPicker.stories.tsx index 4c426c5..e9415a9 100644 --- a/src/stories/GifPicker.stories.tsx +++ b/src/stories/GifPicker.stories.tsx @@ -1,11 +1,32 @@ +import React, { useEffect, useState } from 'react'; import { expect } from '@storybook/jest'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { userEvent, waitFor, within } from '@storybook/testing-library'; import GifPicker, { Theme } from '..'; +const useDebounce = (value: string, delay: number) => { + const [ debouncedValue, setDebouncedValue ] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [ value, delay ]); + + return debouncedValue; +}; + export default { title: 'Library/GifPicker', - component: GifPicker, + component: (props: any) => { + const debouncedSearchTerm = useDebounce(props.initialSearchTerm, 500); + + return ; + }, argTypes: { tenorApiKey: { type: { name: 'string' } @@ -36,6 +57,9 @@ export default { }, categoryHeight: { type: { name: 'string' } + }, + initialSearchTerm: { + type: { name: 'string' } } } } as Meta; @@ -56,10 +80,9 @@ export const DarkTheme = { export const Search = { ...Home, - play: async ({ canvasElement }: any) => { - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByTestId('gpr-search-input'), 'patrick bateman'); + args: { + ...Home.args, + initialSearchTerm: 'patrick bateman' } };