Added searchPlaceholder prop to config, as an alternative to `searc…

…hPlaceHolder`.
ealush · Aug 29, 2023 · 5cc46f4 · 5cc46f4
1 parent 626b827
commit 5cc46f4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
- "version": "4.4.11",
+ "version": "4.4.12",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -17,6 +17,8 @@ import {
 
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
+export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+
 export function mergeConfig(
  userConfig: PickerConfig = {}
 ): PickerConfigInternal {
@@ -66,7 +68,8 @@ export function basePickerConfig(): PickerConfigInternal {
  ...basePreviewConfig
  },
  searchDisabled: false,
- searchPlaceHolder: 'Search',
+ searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
+ searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
  skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
  skinTonesDisabled: false,
  suggestedEmojisMode: SuggestionMode.FREQUENT,
@@ -79,6 +82,7 @@ export function basePickerConfig(): PickerConfigInternal {
 export type PickerConfigInternal = {
  emojiVersion: string | null;
  searchPlaceHolder: string;
+ searchPlaceholder: string;
  defaultSkinTone: SkinTones;
  skinTonesDisabled: boolean;
  autoFocusSearch: boolean;

diff --git a/src/config/useConfig.ts b/src/config/useConfig.ts
@@ -10,11 +10,19 @@ import {
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
-import { PickerDimensions, PreviewConfig } from './config';
+import {
+ DEFAULT_SEARCH_PLACEHOLDER,
+ PickerDimensions,
+ PreviewConfig,
+} from './config';
 
 export function useSearchPlaceHolderConfig(): string {
- const { searchPlaceHolder } = usePickerConfig();
- return searchPlaceHolder;
+ const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
+ return (
+ [searchPlaceHolder, searchPlaceholder].find(
+ (p) => p !== DEFAULT_SEARCH_PLACEHOLDER
+ ) ?? DEFAULT_SEARCH_PLACEHOLDER
+ );
 }
 
 export function useDefaultSkinToneConfig(): SkinTones {

diff --git a/stories/picker.stories.tsx b/stories/picker.stories.tsx
@@ -87,7 +87,7 @@ export const EmojiImageTwitter = (args: Props) => (
  <Template {...args} emojiStyle={EmojiStyle.TWITTER} />
 );
 export const CustomSearchPlaceholder = (args: Props) => (
- <Template searchPlaceHolder="👀 Find" />
+ <Template searchPlaceholder="👀 Find" />
 );
 export const SkinTonesDisabled = (args: Props) => (
  <Template {...args} skinTonesDisabled />
@@ -172,16 +172,18 @@ export const StandaloneEmojiNative = () => {
  return <Emoji unified="1f60a" emojiStyle={EmojiStyle.NATIVE} size={35} />;
 };
 export const CustomUnifiedEmojiImage = () => {
- const [unified, setUnified] = useState("1f9d1-1f3ff-200d-1f4bc");
+ const [unified, setUnified] = useState('1f9d1-1f3ff-200d-1f4bc');
 
- return <>
- <Emoji unified={unified} size={35} />
- <input onChange={(e) => setUnified(e.target.value)} value={unified} />
- </>
-}
+ return (
+ <>
+ <Emoji unified={unified} size={35} />
+ <input onChange={e => setUnified(e.target.value)} value={unified} />
+ </>
+ );
+};
 
 export const HideEmojisByUnicode = (args: Props) => (
- <Template {...args} emojiStyle={EmojiStyle.NATIVE}  />
+ <Template {...args} emojiStyle={EmojiStyle.NATIVE} />
 );
 
 function TemplateDark(args) {