emoji-picker-react 4.13.2 → 4.14.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -15
- package/dist/DomUtils/elementPositionInRow.d.ts +1 -6
- package/dist/components/body/EmojiCategory.d.ts +2 -1
- package/dist/components/body/EmojiList.d.ts +3 -1
- package/dist/components/context/ElementRefContext.d.ts +1 -0
- package/dist/components/emoji/ClickableEmojiButton.d.ts +2 -1
- package/dist/components/emoji/Emoji.d.ts +3 -2
- package/dist/dataUtils/emojiSelectors.d.ts +1 -1
- package/dist/emoji-picker-react.cjs.development.js +540 -486
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +541 -487
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/hooks/useCategoryHeight.d.ts +5 -0
- package/dist/hooks/useOnScroll.d.ts +1 -1
- package/package.json +1 -1
- package/src/DomUtils/elementPositionInRow.ts +8 -131
- package/src/DomUtils/keyboardNavigation.ts +62 -48
- package/src/components/body/Body.tsx +2 -2
- package/src/components/body/EmojiCategory.tsx +7 -5
- package/src/components/body/EmojiList.tsx +126 -35
- package/src/components/context/ElementRefContext.tsx +8 -0
- package/src/components/emoji/ClickableEmojiButton.tsx +4 -1
- package/src/components/emoji/Emoji.tsx +4 -1
- package/src/components/header/Search/Search.tsx +1 -8
- package/src/components/main/PickerMain.tsx +8 -5
- package/src/dataUtils/emojiSelectors.ts +29 -3
- package/src/hooks/useCategoryHeight.ts +92 -0
- package/src/hooks/useOnScroll.ts +5 -1
- package/dist/components/body/Suggested.d.ts +0 -7
- package/dist/components/header/Search/CssSearch.d.ts +0 -4
- package/src/components/body/Suggested.tsx +0 -69
- package/src/components/header/Search/CssSearch.tsx +0 -45
package/README.md
CHANGED
|
@@ -60,14 +60,14 @@ function App() {
|
|
|
60
60
|
|
|
61
61
|
# Props
|
|
62
62
|
|
|
63
|
-
The following props are accepted by
|
|
63
|
+
The following props are accepted by the picker:
|
|
64
64
|
|
|
65
65
|
| Prop | Type | Default | Description |
|
|
66
66
|
| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
67
|
| open | boolean | `true` | Controls whether the picker is open or not. |
|
|
68
68
|
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
69
69
|
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
70
|
-
|
|
|
70
|
+
| theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
71
71
|
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
72
72
|
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
73
73
|
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
@@ -77,20 +77,20 @@ The following props are accepted by them picker:
|
|
|
77
77
|
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
78
78
|
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
|
|
79
79
|
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
|
|
80
|
-
| emojiVersion |
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
| getEmojiUrl |
|
|
86
|
-
| categories |
|
|
87
|
-
| customEmojis |
|
|
88
|
-
| hiddenEmojis |
|
|
89
|
-
| reactionsDefaultOpen |
|
|
80
|
+
| emojiVersion | string | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
81
|
+
| className | string | - | Adds a class name to the root element of the picker. |
|
|
82
|
+
| 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. |
|
|
83
|
+
| 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 height as string. |
|
|
84
|
+
| style | React.CSSProperties | `{}` | Adds inline style to the root element of the picker. |
|
|
85
|
+
| getEmojiUrl | Function | - | Allows to customize the emoji url and provide your own image host. |
|
|
86
|
+
| categories | Array | - | Allows full config over ordering, naming and display of categories. |
|
|
87
|
+
| customEmojis | Array<{names: string[], imgUrl: string, id: string}> | - | Allows adding custom emojis to the picker. |
|
|
88
|
+
| hiddenEmojis | string[] | - | Controls the emojis that are hidden from the picker. |
|
|
89
|
+
| reactionsDefaultOpen | boolean | `false` | Controls whether the reactions picker is on the initial mount instead of the main picker component. |
|
|
90
90
|
| reactions | string[] | - | Controls the reactions to display in the reactions picker. Takes unified emoji ids |
|
|
91
|
-
| onReactionClick |
|
|
92
|
-
| allowExpandReactions |
|
|
93
|
-
| onSkinToneChange |
|
|
91
|
+
| onReactionClick | Function | - | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
|
|
92
|
+
| allowExpandReactions | boolean | `true` | Controls whether the reactions picker can be expanded to the main picker. |
|
|
93
|
+
| onSkinToneChange | Function | - | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter. |
|
|
94
94
|
|
|
95
95
|
## Full details
|
|
96
96
|
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { NullableElement } from './selectors';
|
|
2
2
|
export declare function elementCountInRow(parent: NullableElement, element: NullableElement): number;
|
|
3
|
-
export declare function elementIndexInRow(parent: NullableElement, element: NullableElement): number;
|
|
4
|
-
export declare function rowNumber(parent: NullableElement, element: NullableElement): number;
|
|
5
|
-
export declare function hasNextRow(parent: NullableElement, element: NullableElement): boolean;
|
|
6
|
-
export declare function getElementInRow(elements: HTMLElement[], row: number, elementsInRow: number, indexInRow: number): NullableElement;
|
|
7
|
-
export declare function getElementInNextRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
|
|
8
|
-
export declare function getElementInPrevRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
|
|
9
3
|
export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[], maxVisibilityDiffThreshold?: number): NullableElement;
|
|
10
4
|
export declare function hasNextElementSibling(element: HTMLElement): boolean;
|
|
5
|
+
export declare function getLabelHeight(parentNode: NullableElement): number;
|
|
@@ -5,6 +5,7 @@ declare type Props = Readonly<{
|
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
hidden?: boolean;
|
|
7
7
|
hiddenOnSearch?: boolean;
|
|
8
|
+
height?: number;
|
|
8
9
|
}>;
|
|
9
|
-
export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch }: Props): JSX.Element;
|
|
10
|
+
export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch, height }: Props): JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -4,6 +4,7 @@ export declare function ElementRefContextProvider({ children }: {
|
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
}): JSX.Element;
|
|
6
6
|
export declare type ElementRef<E extends HTMLElement = HTMLElement> = React.MutableRefObject<E | null>;
|
|
7
|
+
export declare function useEmojiListRef(): ElementRef<HTMLUListElement>;
|
|
7
8
|
export declare function usePickerMainRef(): ElementRef<HTMLElement>;
|
|
8
9
|
export declare function useAnchoredEmojiRef(): ElementRef<HTMLElement>;
|
|
9
10
|
export declare function useSetAnchoredEmojiRef(): (target: NullableElement) => void;
|
|
@@ -9,6 +9,7 @@ declare type ClickableEmojiButtonProps = Readonly<{
|
|
|
9
9
|
unified?: string;
|
|
10
10
|
noBackground?: boolean;
|
|
11
11
|
className?: string;
|
|
12
|
+
style?: React.CSSProperties;
|
|
12
13
|
}>;
|
|
13
|
-
export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, noBackground }: ClickableEmojiButtonProps): JSX.Element;
|
|
14
|
+
export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, noBackground, style }: ClickableEmojiButtonProps): JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import { DataEmoji } from '../../dataUtils/DataTypes';
|
|
3
3
|
import { BaseEmojiProps } from './BaseEmojiProps';
|
|
4
4
|
declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
|
|
@@ -8,6 +8,7 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
|
|
|
8
8
|
emoji: DataEmoji;
|
|
9
9
|
className?: string;
|
|
10
10
|
noBackground?: boolean;
|
|
11
|
+
style?: React.CSSProperties;
|
|
11
12
|
}>;
|
|
12
|
-
export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground }: ClickableEmojiProps): JSX.Element;
|
|
13
|
+
export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground, style }: ClickableEmojiProps): JSX.Element;
|
|
13
14
|
export {};
|
|
@@ -7,7 +7,7 @@ export declare function addedIn(emoji: DataEmoji): number;
|
|
|
7
7
|
export declare function emojiName(emoji?: WithName): string;
|
|
8
8
|
export declare function unifiedWithoutSkinTone(unified: string): string;
|
|
9
9
|
export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
|
|
10
|
-
export declare function
|
|
10
|
+
export declare function useGetEmojisByCategory(): (Category: Categories) => DataEmojis;
|
|
11
11
|
export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
|
|
12
12
|
export declare function emojiVariations(emoji: DataEmoji): string[];
|
|
13
13
|
export declare function emojiHasVariations(emoji: DataEmoji): boolean;
|