From 4209d8c927058416f2da3d82c13816dfa9021825 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 29 May 2019 15:11:55 +0800 Subject: [PATCH 01/10] feat: dispatch keyUp/keyDown event feat: support textAreaStyle --- README.md | 3 +++ src/Mentions.tsx | 22 +++++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 08a3db0..6ac3c02 100644 --- a/README.md +++ b/README.md @@ -75,9 +75,12 @@ React.render(, container); | split | Set split string before and after selected mention | string | ' ' | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | value | Set value of mentions | string | - | +| textAreaStyle | textarea style | React.CSSProperties | - | | 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, measuring?: boolean) => void; | - | +| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, measuring?: boolean) => void; | - | | onFocus | Trigger when mentions get focus | React.FocusEventHandler | - | | onBlur | Trigger when mentions lose focus | React.FocusEventHandler | - | diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 5a9f451..164cbfd 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -41,8 +41,11 @@ export interface MentionsProps extends BaseTextareaAttrs { onChange?: (text: string) => void; onSelect?: (option: OptionProps, prefix: string) => void; onSearch?: (text: string, prefix: string) => void; + onKeyDown?: (event: React.KeyboardEvent, measuring?: boolean) => void; + onKeyUp?: (event: React.KeyboardEvent, measuring?: boolean) => void; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; + textAreaStyle?: React.CSSProperties; } interface MentionsState { value: string; @@ -121,6 +124,15 @@ class Mentions extends React.Component { public onKeyDown: React.KeyboardEventHandler = event => { const { which } = event; const { activeIndex, measuring } = this.state; + const { onKeyDown } = this.props; + + try { + if (onKeyDown) { + onKeyDown(event, measuring); + } + } catch (e) { + // do nothing + } // Skip if not measuring if (!measuring) { @@ -162,7 +174,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( @@ -170,6 +182,14 @@ class Mentions extends React.Component { prefix, ); + try { + if (onKeyUp) { + onKeyUp(event, measuring); + } + } catch (err) { + // do nothing + } + // Skip if match the white key list if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) { return; From 5e7975539cf36cc2a1786319a5e063916650b8b6 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 29 May 2019 15:50:12 +0800 Subject: [PATCH 02/10] fix textAreaStyle --- src/Mentions.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 164cbfd..d22b399 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -349,6 +349,7 @@ class Mentions extends React.Component { style, autoFocus, notFoundContent, + textAreaStyle, ...restProps } = this.props; @@ -374,6 +375,7 @@ class Mentions extends React.Component { ref={this.setTextAreaRef} value={value} {...inputProps} + style={textAreaStyle} onChange={this.onChange} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} From 904e42ab54eceb861720cab96dbd5ac634e90821 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 12 Jun 2019 18:33:44 +0800 Subject: [PATCH 03/10] feat: remove textAreaStyle prop. feat: use an object to wrap related states in keyUp/keyDown event handler --- README.md | 5 ++--- src/Mentions.tsx | 32 +++++++++++++++----------------- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 6ac3c02..b495527 100644 --- a/README.md +++ b/README.md @@ -75,12 +75,11 @@ React.render(, container); | split | Set split string before and after selected mention | string | ' ' | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | value | Set value of mentions | string | - | -| textAreaStyle | textarea style | React.CSSProperties | - | | 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, measuring?: boolean) => void; | - | -| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, measuring?: boolean) => 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 | - | diff --git a/src/Mentions.tsx b/src/Mentions.tsx index d22b399..4c31ca4 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -24,6 +24,15 @@ type BaseTextareaAttrs = Omit< export type Placement = 'top' | 'bottom'; +export interface MentionKeyBoardEventPayload { + measuring: MentionsState['measuring']; +} + +export type MentionKeyBoardEventHandler = ( + event: React.KeyboardEvent, + payload?: MentionKeyBoardEventPayload, +) => void; + export interface MentionsProps extends BaseTextareaAttrs { autoFocus?: boolean; className?: string; @@ -41,11 +50,10 @@ export interface MentionsProps extends BaseTextareaAttrs { onChange?: (text: string) => void; onSelect?: (option: OptionProps, prefix: string) => void; onSearch?: (text: string, prefix: string) => void; - onKeyDown?: (event: React.KeyboardEvent, measuring?: boolean) => void; - onKeyUp?: (event: React.KeyboardEvent, measuring?: boolean) => void; + onKeyDown?: MentionKeyBoardEventHandler; + onKeyUp?: MentionKeyBoardEventHandler; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; - textAreaStyle?: React.CSSProperties; } interface MentionsState { value: string; @@ -126,12 +134,8 @@ class Mentions extends React.Component { const { activeIndex, measuring } = this.state; const { onKeyDown } = this.props; - try { - if (onKeyDown) { - onKeyDown(event, measuring); - } - } catch (e) { - // do nothing + if (onKeyDown) { + onKeyDown(event, { measuring }); } // Skip if not measuring @@ -182,12 +186,8 @@ class Mentions extends React.Component { prefix, ); - try { - if (onKeyUp) { - onKeyUp(event, measuring); - } - } catch (err) { - // do nothing + if (onKeyUp) { + onKeyUp(event, { measuring }); } // Skip if match the white key list @@ -349,7 +349,6 @@ class Mentions extends React.Component { style, autoFocus, notFoundContent, - textAreaStyle, ...restProps } = this.props; @@ -375,7 +374,6 @@ class Mentions extends React.Component { ref={this.setTextAreaRef} value={value} {...inputProps} - style={textAreaStyle} onChange={this.onChange} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} From b7298d5e78719678c9da0d842629fdab86c89616 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 26 Jun 2019 15:45:19 +0800 Subject: [PATCH 04/10] remove optional flag. --- README.md | 4 ++-- src/Mentions.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b495527..5e7b6f8 100644 --- a/README.md +++ b/README.md @@ -78,8 +78,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; | - | +| 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 | - | diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 4c31ca4..edb3d25 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -19,18 +19,18 @@ import { type BaseTextareaAttrs = Omit< React.TextareaHTMLAttributes, - 'prefix' | 'onChange' | 'onSelect' + 'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp' >; export type Placement = 'top' | 'bottom'; export interface MentionKeyBoardEventPayload { - measuring: MentionsState['measuring']; + measuring: boolean; } export type MentionKeyBoardEventHandler = ( event: React.KeyboardEvent, - payload?: MentionKeyBoardEventPayload, + payload: MentionKeyBoardEventPayload, ) => void; export interface MentionsProps extends BaseTextareaAttrs { From 8e76aeec633f47a37bbae682e9a3326a7e9335d1 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 29 May 2019 15:11:55 +0800 Subject: [PATCH 05/10] feat: dispatch keyUp/keyDown event feat: support textAreaStyle --- README.md | 3 +++ src/Mentions.tsx | 21 ++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1dbc332..b30c577 100644 --- a/README.md +++ b/README.md @@ -76,9 +76,12 @@ React.render(, container); | split | Set split string before and after selected mention | string | ' ' | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | value | Set value of mentions | string | - | +| textAreaStyle | textarea style | React.CSSProperties | - | | 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, measuring?: boolean) => void; | - | +| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, 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..d502a3e 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -40,6 +40,8 @@ export interface MentionsProps extends BaseTextareaAttrs { onChange?: (text: string) => void; onSelect?: (option: OptionProps, prefix: string) => void; onSearch?: (text: string, prefix: string) => void; + onKeyDown?: (event: React.KeyboardEvent, measuring?: boolean) => void; + onKeyUp?: (event: React.KeyboardEvent, measuring?: boolean) => void; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; getPopupContainer?: () => HTMLElement; @@ -123,6 +125,15 @@ class Mentions extends React.Component { public onKeyDown: React.KeyboardEventHandler = (event) => { const { which } = event; const { activeIndex, measuring } = this.state; + const { onKeyDown } = this.props; + + try { + if (onKeyDown) { + onKeyDown(event, measuring); + } + } catch (e) { + // do nothing + } // Skip if not measuring if (!measuring) { @@ -168,7 +179,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 +187,14 @@ class Mentions extends React.Component { prefix, ); + try { + if (onKeyUp) { + onKeyUp(event, measuring); + } + } catch (err) { + // do nothing + } + // Skip if match the white key list if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) { return; From 1d06e84ee6855f243ad1d11b1902210121c984b3 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 29 May 2019 15:50:12 +0800 Subject: [PATCH 06/10] fix textAreaStyle --- src/Mentions.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index d502a3e..38c574a 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -397,6 +397,7 @@ class Mentions extends React.Component { ref={this.setTextAreaRef} value={value} {...inputProps} + style={textAreaStyle} onChange={this.onChange} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} From ab96dbc13e33542a9e3a1964cc357498138ef1c7 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 12 Jun 2019 18:33:44 +0800 Subject: [PATCH 07/10] feat: remove textAreaStyle prop. feat: use an object to wrap related states in keyUp/keyDown event handler --- README.md | 5 ++--- src/Mentions.tsx | 30 +++++++++++++++--------------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index b30c577..4424e50 100644 --- a/README.md +++ b/README.md @@ -76,12 +76,11 @@ React.render(, container); | split | Set split string before and after selected mention | string | ' ' | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | value | Set value of mentions | string | - | -| textAreaStyle | textarea style | React.CSSProperties | - | | 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, measuring?: boolean) => void; | - | -| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent, measuring?: boolean) => 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 38c574a..f301da5 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -22,6 +22,15 @@ type BaseTextareaAttrs = Omit export type Placement = 'top' | 'bottom'; export type Direction = 'ltr' | 'rtl'; +export interface MentionKeyBoardEventPayload { + measuring: MentionsState['measuring']; +} + +export type MentionKeyBoardEventHandler = ( + event: React.KeyboardEvent, + payload?: MentionKeyBoardEventPayload, +) => void; + export interface MentionsProps extends BaseTextareaAttrs { autoFocus?: boolean; className?: string; @@ -40,8 +49,8 @@ export interface MentionsProps extends BaseTextareaAttrs { onChange?: (text: string) => void; onSelect?: (option: OptionProps, prefix: string) => void; onSearch?: (text: string, prefix: string) => void; - onKeyDown?: (event: React.KeyboardEvent, measuring?: boolean) => void; - onKeyUp?: (event: React.KeyboardEvent, measuring?: boolean) => void; + onKeyDown?: MentionKeyBoardEventHandler; + onKeyUp?: MentionKeyBoardEventHandler; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; getPopupContainer?: () => HTMLElement; @@ -127,12 +136,8 @@ class Mentions extends React.Component { const { activeIndex, measuring } = this.state; const { onKeyDown } = this.props; - try { - if (onKeyDown) { - onKeyDown(event, measuring); - } - } catch (e) { - // do nothing + if (onKeyDown) { + onKeyDown(event, { measuring }); } // Skip if not measuring @@ -187,12 +192,8 @@ class Mentions extends React.Component { prefix, ); - try { - if (onKeyUp) { - onKeyUp(event, measuring); - } - } catch (err) { - // do nothing + if (onKeyUp) { + onKeyUp(event, { measuring }); } // Skip if match the white key list @@ -397,7 +398,6 @@ class Mentions extends React.Component { ref={this.setTextAreaRef} value={value} {...inputProps} - style={textAreaStyle} onChange={this.onChange} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} From 24134a30f5b17d5a26917f6b3356789af6e9a627 Mon Sep 17 00:00:00 2001 From: FlowerDb Date: Wed, 26 Jun 2019 15:45:19 +0800 Subject: [PATCH 08/10] remove optional flag. --- README.md | 4 ++-- src/Mentions.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4424e50..2922f8a 100644 --- a/README.md +++ b/README.md @@ -79,8 +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; | - | +| 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 f301da5..9e446d8 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -17,18 +17,21 @@ import { validateSearch as defaultValidateSearch, } from './util'; -type BaseTextareaAttrs = Omit; +type BaseTextareaAttrs = Omit< + React.TextareaHTMLAttributes, + 'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp' +>; export type Placement = 'top' | 'bottom'; export type Direction = 'ltr' | 'rtl'; export interface MentionKeyBoardEventPayload { - measuring: MentionsState['measuring']; + measuring: boolean; } export type MentionKeyBoardEventHandler = ( event: React.KeyboardEvent, - payload?: MentionKeyBoardEventPayload, + payload: MentionKeyBoardEventPayload, ) => void; export interface MentionsProps extends BaseTextareaAttrs { From 3d4324e74283a25a4fa8079b6244b1ad98f33dcc Mon Sep 17 00:00:00 2001 From: zhuxiuqin Date: Mon, 21 Dec 2020 20:50:00 +0800 Subject: [PATCH 09/10] fix: align types with latest master --- src/Mentions.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 3d8b020..5167019 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -17,10 +17,7 @@ import { validateSearch as defaultValidateSearch, } from './util'; -type BaseTextareaAttrs = Omit< - React.TextareaHTMLAttributes, - 'prefix' | 'onChange' | 'onSelect' | 'onKeyDown' | 'onKeyUp' ->; +type BaseTextareaAttrs = Omit; export type Placement = 'top' | 'bottom'; export type Direction = 'ltr' | 'rtl'; From bcc20205f7a2ef115b83a83d1ead87ebf89ea597 Mon Sep 17 00:00:00 2001 From: zhuxiuqin Date: Mon, 21 Dec 2020 20:51:13 +0800 Subject: [PATCH 10/10] fix: remove duplicated type defination --- src/Mentions.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 5167019..7107021 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -35,11 +35,6 @@ export interface MentionKeyBoardEventPayload { measuring: boolean; } -export type MentionKeyBoardEventHandler = ( - event: React.KeyboardEvent, - payload: MentionKeyBoardEventPayload, -) => void; - export interface MentionsProps extends BaseTextareaAttrs { autoFocus?: boolean; className?: string;