react-input-emoji 5.6.2 → 5.6.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,21 @@
1
+ export default EmojiPickerButton;
2
+ export type Props = {
3
+ showPicker: boolean;
4
+ toggleShowPicker: (event: React.MouseEvent) => void;
5
+ buttonElement?: HTMLDivElement | undefined;
6
+ buttonRef?: React.MutableRefObject<any> | undefined;
7
+ };
8
+ /**
9
+ * @typedef {object} Props
10
+ * @property {boolean} showPicker
11
+ * @property {(event: React.MouseEvent) => void} toggleShowPicker
12
+ * @property {HTMLDivElement=} buttonElement
13
+ * @property {React.MutableRefObject=} buttonRef
14
+ */
15
+ /**
16
+ * Emoji Picker Button Component
17
+ * @param {Props} props
18
+ * @return {JSX.Element}
19
+ */
20
+ declare function EmojiPickerButton({ showPicker, toggleShowPicker, buttonElement, buttonRef }: Props): JSX.Element;
21
+ import React from "react";
@@ -0,0 +1,26 @@
1
+ export default EmojiPickerContainer;
2
+ export type Props = {
3
+ showPicker: boolean;
4
+ theme: 'light' | 'dark' | 'auto';
5
+ handleSelectEmoji: (emoji: import("../types/types").EmojiMartItem) => void;
6
+ disableRecent: boolean;
7
+ customEmojis?: any[] | undefined;
8
+ position?: ('above' | 'below') | undefined;
9
+ language?: import('../types/types').Languages | undefined;
10
+ };
11
+ /**
12
+ * @typedef {object} Props
13
+ * @property {boolean} showPicker
14
+ * @property {'light' | 'dark' | 'auto'} theme
15
+ * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
16
+ * @property {boolean} disableRecent
17
+ * @property {any[]=} customEmojis
18
+ * @property {('above' | 'below')=} position
19
+ * @property {import('../types/types').Languages=} language
20
+ */
21
+ /**
22
+ * Emoji Picker Button Component
23
+ * @param {Props} props
24
+ * @return {JSX.Element}
25
+ */
26
+ declare function EmojiPickerContainer({ showPicker, theme, handleSelectEmoji, disableRecent, customEmojis, position, language }: Props): JSX.Element;
@@ -0,0 +1,37 @@
1
+ export default EmojiPickerWrapper;
2
+ export type SanitizeFn = import('../types/types').SanitizeFn;
3
+ export type PolluteFn = import('../types/types').PolluteFn;
4
+ export type Props = {
5
+ theme: 'light' | 'dark' | 'auto';
6
+ keepOpened: boolean;
7
+ disableRecent: boolean;
8
+ customEmojis?: any[] | undefined;
9
+ addSanitizeFn: (fn: SanitizeFn) => void;
10
+ addPolluteFn: (fn: PolluteFn) => void;
11
+ appendContent: (html: string) => void;
12
+ buttonElement?: HTMLDivElement | undefined;
13
+ buttonRef?: React.MutableRefObject<any> | undefined;
14
+ language?: import('../types/types').Languages | undefined;
15
+ };
16
+ /**
17
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
18
+ */
19
+ /**
20
+ * @typedef {import('../types/types').PolluteFn} PolluteFn
21
+ */
22
+ /**
23
+ * @typedef {Object} Props
24
+ * @property {'light' | 'dark' | 'auto'} theme
25
+ * @property {boolean} keepOpened
26
+ * @property {boolean} disableRecent
27
+ * @property {any[]=} customEmojis
28
+ * @property {(fn: SanitizeFn) => void} addSanitizeFn
29
+ * @property {(fn: PolluteFn) => void} addPolluteFn
30
+ * @property {(html: string) => void} appendContent
31
+ * @property {HTMLDivElement=} buttonElement
32
+ * @property {React.MutableRefObject=} buttonRef
33
+ * @property {import('../types/types').Languages=} language
34
+ */
35
+ /** @type {React.FC<Props>} */
36
+ declare const EmojiPickerWrapper: React.FC<Props>;
37
+ import React from "react";
@@ -0,0 +1,23 @@
1
+ declare const _default: React.MemoExoticComponent<typeof EmojiPicker>;
2
+ export default _default;
3
+ export type Props = {
4
+ theme: 'light' | 'dark' | 'auto';
5
+ onSelectEmoji: (arg0: import("../types/types").EmojiMartItem) => void;
6
+ disableRecent: boolean;
7
+ customEmojis?: any[] | undefined;
8
+ language?: import('../types/types').Languages | undefined;
9
+ };
10
+ /**
11
+ * @typedef {object} Props
12
+ * @property {'light' | 'dark' | 'auto'} theme
13
+ * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
14
+ * @property {boolean} disableRecent
15
+ * @property {any[]=} customEmojis
16
+ * @property {import('../types/types').Languages=} language
17
+ */
18
+ /**
19
+ * Emoji Picker Component
20
+ * @param {Props} props
21
+ */
22
+ declare function EmojiPicker(props: Props): JSX.Element;
23
+ import React from "react";
@@ -0,0 +1,15 @@
1
+ export default MentionUserListWithRef;
2
+ export type MentionUser = import('../types/types').MentionUser;
3
+ export type TextInputListeners = import('../types/types').TextInputListeners;
4
+ export type Props = {
5
+ users: MentionUser[];
6
+ mentionSearchText: string | null;
7
+ onSelect: (user: MentionUser) => void;
8
+ addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
9
+ };
10
+ export type Ref = {
11
+ prevUser: () => void;
12
+ nextUser: () => void;
13
+ };
14
+ declare const MentionUserListWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>;
15
+ import React from "react";
@@ -0,0 +1,29 @@
1
+ export default MentionWrapper;
2
+ export type MetionUser = import('../types/types').MentionUser;
3
+ export type TextInputListeners = import('../types/types').TextInputListeners;
4
+ export type SanitizeFn = import('../types/types').SanitizeFn;
5
+ export type Props = {
6
+ searchMention?: (text: string) => Promise<MetionUser[]>;
7
+ addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
8
+ appendContent: (html: string) => void;
9
+ addSanitizeFn: (fn: SanitizeFn) => void;
10
+ };
11
+ /**
12
+ * @typedef {import('../types/types').MentionUser} MetionUser
13
+ */
14
+ /**
15
+ * @typedef {import('../types/types').TextInputListeners} TextInputListeners
16
+ */
17
+ /**
18
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
19
+ */
20
+ /**
21
+ * @typedef {Object} Props
22
+ * @property {(text: string) => Promise<MetionUser[]>=} searchMention
23
+ * @property {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void} addEventListener
24
+ * @property {(html: string) => void} appendContent
25
+ * @property {(fn: SanitizeFn) => void} addSanitizeFn
26
+ */
27
+ /** @type {React.FC<Props>} */
28
+ declare const MentionWrapper: React.FC<Props>;
29
+ import React from "react";
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,10 @@
1
+ /**
2
+ * useEmit
3
+ * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
4
+ * @param {(size: {width: number, height: number}) => void} onResize
5
+ * @param {(text: string) => void} onChange
6
+ */
7
+ export function useEmit(textInputRef: React.MutableRefObject<import('../text-input').Ref | null>, onResize: (size: {
8
+ width: number;
9
+ height: number;
10
+ }) => void, onChange: (text: string) => void): (sanitizedText: any) => void;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @typedef {import('../types/types').TextInputListeners} TextInputListeners
3
+ */
4
+ /** */
5
+ export function useEventListeners(): {
6
+ addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
7
+ listeners: import("../types/types").TextInputListeners;
8
+ };
9
+ export type TextInputListeners = import('../types/types').TextInputListeners;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,18 @@
1
+ /**
2
+ * @typedef {Object} Props
3
+ * @property {React.Ref<any>} ref
4
+ * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
5
+ * @property {(value: string) => void} setValue
6
+ * @property {() => void} emitChange
7
+ */
8
+ /**
9
+ *
10
+ * @param {Props} props
11
+ */
12
+ export function useExpose({ ref, textInputRef, setValue, emitChange }: Props): void;
13
+ export type Props = {
14
+ ref: React.Ref<any>;
15
+ textInputRef: React.MutableRefObject<import('../text-input').Ref | null>;
16
+ setValue: (value: string) => void;
17
+ emitChange: () => void;
18
+ };
@@ -0,0 +1,17 @@
1
+ /**
2
+ * @typedef {import('../types/types').MentionUser} MentionUser
3
+ */
4
+ /**
5
+ *
6
+ * @param {(text: string) => Promise<MentionUser[]>=} searchMention
7
+ * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
8
+ */
9
+ export function useMention(searchMention?: (text: string) => Promise<MentionUser[]>): {
10
+ mentionSearchText: string | null;
11
+ mentionUsers: MentionUser[];
12
+ onKeyUp: (event: React.KeyboardEvent) => void;
13
+ onFocus: () => void;
14
+ onSelectUser: () => void;
15
+ loading: boolean;
16
+ };
17
+ export type MentionUser = import('../types/types').MentionUser;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
3
+ */
4
+ /**
5
+ * @param {boolean} shouldReturn
6
+ */
7
+ export function useSanitize(shouldReturn: boolean): {
8
+ addSanitizeFn: (fn: SanitizeFn) => void;
9
+ sanitize: (html: string) => string;
10
+ sanitizedTextRef: import("react").MutableRefObject<string>;
11
+ };
12
+ /**
13
+ *
14
+ * @param {string} html
15
+ * @param {boolean} shouldReturn
16
+ * @return {string}
17
+ */
18
+ export function replaceAllHtmlToString(html: string, shouldReturn: boolean): string;
19
+ export type SanitizeFn = import('../types/types').SanitizeFn;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @typedef {import('../types/types').PolluteFn} PolluteFn
3
+ */
4
+ /** */
5
+ export function usePollute(): {
6
+ addPolluteFn: (fn: PolluteFn) => void;
7
+ pollute: (html: string) => string;
8
+ };
9
+ export type PolluteFn = import('../types/types').PolluteFn;
@@ -0,0 +1,48 @@
1
+ export default InputEmojiWithRef;
2
+ export type MetionUser = import('./types/types').MentionUser;
3
+ export type ListenerObj = import('./types/types').ListenerObj<any>;
4
+ export type Props = {
5
+ value: string;
6
+ onChange: (value: string) => void;
7
+ theme?: ("light" | "dark" | "auto") | undefined;
8
+ cleanOnEnter?: boolean | undefined;
9
+ onEnter?: (text: string) => void;
10
+ placeholder?: string | undefined;
11
+ onResize?: (size: {
12
+ width: number;
13
+ height: number;
14
+ }) => void;
15
+ onClick?: (() => void) | undefined;
16
+ onFocus?: (() => void) | undefined;
17
+ onBlur?: (() => void) | undefined;
18
+ shouldReturn?: boolean | undefined;
19
+ maxLength?: number | undefined;
20
+ keepOpened?: boolean | undefined;
21
+ onKeyDown?: (event: KeyboardEvent) => void;
22
+ inputClass?: string | undefined;
23
+ disableRecent?: boolean | undefined;
24
+ tabIndex?: number | undefined;
25
+ height?: number | undefined;
26
+ borderRadius?: number | undefined;
27
+ borderColor?: string | undefined;
28
+ fontSize?: number | undefined;
29
+ fontFamily?: string | undefined;
30
+ customEmojis?: {
31
+ id: string;
32
+ name: string;
33
+ emojis: {
34
+ id: string;
35
+ name: string;
36
+ keywords: string[];
37
+ skins: {
38
+ src: string;
39
+ }[];
40
+ };
41
+ }[] | undefined;
42
+ language?: import('./types/types').Languages | undefined;
43
+ searchMention?: (text: string) => Promise<MetionUser[]>;
44
+ buttonElement?: HTMLDivElement | undefined;
45
+ buttonRef?: React.MutableRefObject<any> | undefined;
46
+ };
47
+ declare const InputEmojiWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
48
+ import React from "react";
@@ -0,0 +1,30 @@
1
+ export default TextInputWithRef;
2
+ export type Props = {
3
+ onKeyDown: (event: React.KeyboardEvent) => void;
4
+ onKeyUp: (event: React.KeyboardEvent) => void;
5
+ onFocus: () => void;
6
+ onBlur: () => void;
7
+ onChange?: (sanitizedText: string) => void;
8
+ onArrowUp: (event: React.KeyboardEvent) => void;
9
+ onArrowDown: (event: React.KeyboardEvent) => void;
10
+ onEnter: (event: React.KeyboardEvent) => void;
11
+ shouldReturn: boolean;
12
+ onCopy: (event: React.ClipboardEvent) => void;
13
+ onPaste: (event: React.ClipboardEvent) => void;
14
+ placeholder: string;
15
+ style: React.CSSProperties;
16
+ tabIndex: number;
17
+ className: string;
18
+ };
19
+ export type Ref = {
20
+ appendContent: (html: string) => void;
21
+ html: string;
22
+ text: string;
23
+ size: {
24
+ width: number;
25
+ height: number;
26
+ };
27
+ focus: () => void;
28
+ };
29
+ declare const TextInputWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>;
30
+ import React from "react";
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Replace all text with emoji with an image html tag
3
+ * @param {string} text
4
+ * @return {string}
5
+ */
6
+ export function replaceAllTextEmojis(text: string): string;
7
+ /**
8
+ *
9
+ * @param { import("../types/types").EmojiMartItem } emoji
10
+ * @return {string}
11
+ */
12
+ export function getImageEmoji(emoji: import("../types/types").EmojiMartItem): string;
13
+ /**
14
+ *
15
+ * @param {string} html
16
+ * @return {string}
17
+ */
18
+ export function replaceAllTextEmojiToString(html: string): string;
19
+ export const TRANSPARENT_GIF: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
20
+ export const EMOJI_STYLE: "";
@@ -0,0 +1,95 @@
1
+ /**
2
+ * Handle copy of current selected text
3
+ * @param {React.ClipboardEvent} event
4
+ */
5
+ export function handleCopy(event: React.ClipboardEvent): void;
6
+ /**
7
+ *
8
+ * @param {string} html
9
+ */
10
+ export function handlePasteHtmlAtCaret(html: string): void;
11
+ /**
12
+ * Handle past on input
13
+ * @param {React.ClipboardEvent} event
14
+ */
15
+ export function handlePaste(event: React.ClipboardEvent): void;
16
+ /**
17
+ * @typedef {object} HandleKeyDownOptions
18
+ * @property {HTMLDivElement} placeholderEl
19
+ * @property {number} maxLength
20
+ * @property {HTMLDivElement} inputEl
21
+ * @property {React.MutableRefObject<string>} cleanedTextRef
22
+ * @property {React.MutableRefObject<HTMLDivElement>} textInputRef
23
+ * @property {boolean} cleanOnEnter
24
+ * @property {function(): void} emitChange
25
+ * @property {(function(string): void)=} onEnter
26
+ * @property {(function(KeyboardEvent): void)=} onKeyDown
27
+ * @property {(function(string): void)} updateHTML
28
+ */
29
+ /**
30
+ * @typedef {Object} HandleSelectEmojiProps
31
+ * @property {import("../types/types").EmojiMartItem} emoji
32
+ * @property {React.MutableRefObject<import('../text-input').Ref>} textInputRef
33
+ * @property {boolean} keepOpened
34
+ * @property {() => void} toggleShowPicker
35
+ * @property {number=} maxLength
36
+ */
37
+ /**
38
+ *
39
+ * @param {HandleSelectEmojiProps} props
40
+ */
41
+ export function handleSelectEmoji({ emoji, textInputRef, keepOpened, toggleShowPicker, maxLength }: HandleSelectEmojiProps): void;
42
+ /**
43
+ *
44
+ * @param {{text: string, html: string}} props
45
+ * @return {number}
46
+ */
47
+ export function totalCharacters({ text, html }: {
48
+ text: string;
49
+ html: string;
50
+ }): number;
51
+ /**
52
+ * Handle keyup event
53
+ * @param {() => void} emitChange
54
+ * @param {(event: KeyboardEvent) => void} onKeyDownMention
55
+ * @param {React.MutableRefObject<string>} cleanedTextRef
56
+ * @param {React.MutableRefObject<HTMLDivElement>} textInputRef
57
+ * @return {(event: KeyboardEvent) => void}
58
+ */
59
+ export function handleKeyup(emitChange: () => void, onKeyDownMention: (event: KeyboardEvent) => void, cleanedTextRef: React.MutableRefObject<string>, textInputRef: React.MutableRefObject<HTMLDivElement>): (event: KeyboardEvent) => void;
60
+ /**
61
+ * Handle focus event
62
+ * @param {function(FocusEvent): void} onFocus
63
+ * @return {function(FocusEvent): void}
64
+ */
65
+ export function handleFocus(onFocus: (arg0: FocusEvent) => void): (arg0: FocusEvent) => void;
66
+ /**
67
+ * Set caret to the end of text value
68
+ * @param {React.MutableRefObject<HTMLDivElement| null>} input
69
+ */
70
+ export function moveCaretToEnd(input: React.MutableRefObject<HTMLDivElement | null>): void;
71
+ /**
72
+ *
73
+ * @param {HTMLDivElement} inputDiv
74
+ * @return {string}
75
+ */
76
+ export function removeHtmlExceptBr(inputDiv: HTMLDivElement): string;
77
+ export type HandleKeyDownOptions = {
78
+ placeholderEl: HTMLDivElement;
79
+ maxLength: number;
80
+ inputEl: HTMLDivElement;
81
+ cleanedTextRef: React.MutableRefObject<string>;
82
+ textInputRef: React.MutableRefObject<HTMLDivElement>;
83
+ cleanOnEnter: boolean;
84
+ emitChange: () => void;
85
+ onEnter?: ((arg0: string) => void) | undefined;
86
+ onKeyDown?: ((arg0: KeyboardEvent) => void) | undefined;
87
+ updateHTML: ((arg0: string) => void);
88
+ };
89
+ export type HandleSelectEmojiProps = {
90
+ emoji: import("../types/types").EmojiMartItem;
91
+ textInputRef: React.MutableRefObject<import('../text-input').Ref>;
92
+ keepOpened: boolean;
93
+ toggleShowPicker: () => void;
94
+ maxLength?: number | undefined;
95
+ };
@@ -0,0 +1,15 @@
1
+ /**
2
+ *
3
+ * @return {string | null}
4
+ */
5
+ export function getTextFromAtToCaret(): string | null;
6
+ /** */
7
+ export function deleteTextFromAtToCaret(): void;
8
+ /**
9
+ *
10
+ * @return {{element: Node, caretOffset: number}}
11
+ */
12
+ export function getElementWithFocus(): {
13
+ element: Node;
14
+ caretOffset: number;
15
+ };
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @template T
3
+ * @returns {import('../types/types').ListenerObj<T>}
4
+ */
5
+ export function createObserver<T>(): import("../types/types").ListenerObj<T>;
@@ -0,0 +1 @@
1
+ export default function useDebounce(callback: any, delay: any): ((...args: any[]) => void)[];
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "react-input-emoji",
3
- "version": "5.6.2",
3
+ "version": "5.6.4",
4
4
  "description": "A React input with an option to add an emoji with language support.",
5
5
  "homepage": "https://cesarwbr.github.io/react-input-emoji/",
6
6
  "author": "cesarwbr",
7
7
  "license": "MIT",
8
8
  "repository": "cesarwbr/react-input-emoji",
9
9
  "main": "dist/index.js",
10
- "types": "dist/index.d.ts",
10
+ "types": "dist/src/index.d.ts",
11
11
  "keywords": [
12
12
  "emoji",
13
13
  "react",
@@ -23,14 +23,14 @@
23
23
  "scripts": {
24
24
  "test": "jest",
25
25
  "test:watch": "jest --watch",
26
- "build": "rollup -c",
26
+ "build": "tsc && rollup -c",
27
27
  "start": "rollup -c -w",
28
28
  "prepare": "yarn run build",
29
29
  "predeploy": "cd example && yarn install && yarn run build",
30
- "deploy": "gh-pages -d example/build"
30
+ "deploy": "gh-pages -d example/build",
31
+ "gen:types": "tsc"
31
32
  },
32
33
  "peerDependencies": {
33
- "prop-types": ">=15.7.2",
34
34
  "react": ">=17.0.x",
35
35
  "react-dom": ">=17.0.x"
36
36
  },