@chayns-components/emoji-input
Version:
Input field that supports HTML elements and emojis
97 lines (96 loc) • 3.62 kB
TypeScript
import React, { ChangeEvent, CSSProperties, FocusEventHandler, KeyboardEventHandler, ReactElement, ReactNode } from 'react';
import type { PopupAlignment } from '../../constants/alignment';
export type EmojiInputProps = {
/**
* Access token of the logged-in user. Is needed to load and save the history of the emojis.
*/
accessToken?: string;
/**
* Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.
*/
height?: CSSProperties['height'];
/**
* HTML id of the input element
*/
inputId?: string;
/**
* Disables the input so that it cannot be changed anymore
*/
isDisabled?: boolean;
/**
* Sets the maximum height of the input field.
*/
maxHeight?: CSSProperties['maxHeight'];
/**
* Function that is executed when the input field loses focus.
*/
onBlur?: FocusEventHandler<HTMLDivElement>;
/**
* Function that is executed when the input field gets the focus.
*/
onFocus?: FocusEventHandler<HTMLDivElement>;
/**
* Function that is executed when the text of the input changes. In addition to the original
* event, the original text is returned as second parameter, in which the internally used HTML
* elements have been converted back to BB codes.
*/
onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;
/**
* Function that is executed when a key is pressed down.
*/
onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
/**
* Function to be executed if the prefixElement is removed.
*/
onPrefixElementRemove?: () => void;
/**
* Function that is executed when the visibility of the popup changes.
* @param {boolean} isVisible - Whether the popup is visible or not
*/
onPopupVisibilityChange?: (isVisible: boolean) => void;
/**
* Person id of the logged-in user. Is needed to load and save the history of the emojis.
*/
personId?: string;
/**
* Placeholder for the input field
*/
placeholder?: string | ReactElement;
/**
* Sets the alignment of the popup to a fixed value. If this value is not set, the component
* calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this
* value.
*/
popupAlignment?: PopupAlignment;
/**
* Element that is rendered before the input field but the placeholder is still visible.
*/
prefixElement?: string;
/**
* Element that is rendered inside the EmojiInput on the right side.
*/
rightElement?: ReactNode;
/**
* Whether the placeholder should be shown after the input has focus.
*/
shouldHidePlaceholderOnFocus?: boolean;
/**
* Prevents the EmojiPickerPopup icon from being displayed
*/
shouldPreventEmojiPicker?: boolean;
/**
* The plain text value of the input field. Instead of HTML elements BB codes must be used at
* this point. These are then converted by the input field into corresponding HTML elements.
*/
value: string;
};
export type EmojiInputRef = {
insertTextAtCursorPosition: (text: string) => void;
replaceText: (searchText: string, replaceText: string) => void;
startProgress: (durationInSeconds: number) => void;
stopProgress: () => void;
focus: () => void;
blur: () => void;
};
declare const EmojiInput: React.ForwardRefExoticComponent<EmojiInputProps & React.RefAttributes<EmojiInputRef>>;
export default EmojiInput;