diff --git a/README.md b/README.md index 1dbc332..2922f8a 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,8 @@ React.render(, container); | onChange | Trigger when value changed |(text: string) => void | - | | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | +| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent, payload: { measuring: boolean }) => void; | - | +| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, payload: { measuring: boolean }) => void; | - | | onFocus | Trigger when mentions get focus | React.FocusEventHandler | - | | onBlur | Trigger when mentions lose focus | React.FocusEventHandler | - | | getPopupContainer | DOM Container for suggestions | () => HTMLElement | - | diff --git a/src/Mentions.tsx b/src/Mentions.tsx index bef7e7c..7107021 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -17,11 +17,24 @@ import { validateSearch as defaultValidateSearch, } from './util'; -type BaseTextareaAttrs = Omit; +type BaseTextareaAttrs = Omit; export type Placement = 'top' | 'bottom'; export type Direction = 'ltr' | 'rtl'; +export interface MentionKeyBoardEventPayload { + measuring: boolean; +} + +export type MentionKeyBoardEventHandler = ( + event: React.KeyboardEvent, + payload: MentionKeyBoardEventPayload, +) => void; + +export interface MentionKeyBoardEventPayload { + measuring: boolean; +} + export interface MentionsProps extends BaseTextareaAttrs { autoFocus?: boolean; className?: string; @@ -40,6 +53,8 @@ export interface MentionsProps extends BaseTextareaAttrs { onChange?: (text: string) => void; onSelect?: (option: OptionProps, prefix: string) => void; onSearch?: (text: string, prefix: string) => void; + onKeyDown?: MentionKeyBoardEventHandler; + onKeyUp?: MentionKeyBoardEventHandler; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; getPopupContainer?: () => HTMLElement; @@ -123,6 +138,11 @@ class Mentions extends React.Component { public onKeyDown: React.KeyboardEventHandler = (event) => { const { which } = event; const { activeIndex, measuring } = this.state; + const { onKeyDown } = this.props; + + if (onKeyDown) { + onKeyDown(event, { measuring }); + } // Skip if not measuring if (!measuring) { @@ -168,7 +188,7 @@ class Mentions extends React.Component { public onKeyUp: React.KeyboardEventHandler = (event) => { const { key, which } = event; const { measureText: prevMeasureText, measuring } = this.state; - const { prefix = '', onSearch, validateSearch } = this.props; + const { prefix = '', onSearch, validateSearch, onKeyUp } = this.props; const target = event.target as HTMLTextAreaElement; const selectionStartText = getBeforeSelectionText(target); const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex( @@ -176,6 +196,10 @@ class Mentions extends React.Component { prefix, ); + if (onKeyUp) { + onKeyUp(event, { measuring }); + } + // Skip if match the white key list if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) { return;