support customize trigger validate

Author: zombieJ

examples/split.js

@@ -0,0 +1,36 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+function validateSearch(text) {
+  return text.length <= 5;
+}
+
+class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h1>Customize Split Logic</h1>
+        <p>Only validate string length less than 5</p>
+        <Mentions
+          style={{ width: '100%', fontSize: 50 }}
+          split=""
+          validateSearch={validateSearch}
+          autoFocus
+        >
+          <Option value="light">Light</Option>
+          <Option value="bamboo">Bamboo</Option>
+          <Option value="cat">Cat</Option>
+        </Mentions>
+      </div>
+    );
+  }
+}
+
+export default Demo;

src/Mentions.tsx

@@ -12,9 +12,10 @@ import {
   getLastMeasureIndex,
   replaceWithMeasure,
   setInputSelection,
+  validateSearch as defaultValidateSearch,
 } from './util';
 
-interface MentionsProps {
+export interface MentionsProps {
   defaultValue?: string;
   value?: string;
   onChange?: (text: string) => void;
@@ -24,6 +25,8 @@ interface MentionsProps {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
+  split?: string;
+  validateSearch?: typeof defaultValidateSearch;
 }
 interface MentionsState {
   value: string;
@@ -39,6 +42,8 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public static defaultProps = {
     prefixCls: 'rc-mentions',
     prefix: '@',
+    split: ' ',
+    validateSearch: defaultValidateSearch,
   };
 
   public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
@@ -135,21 +140,27 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '', onSearch } = this.props;
-    const selectionStartText = getBeforeSelectionText(event.target as HTMLTextAreaElement);
+    const { prefix = '', split = ' ', onSearch, validateSearch } = this.props;
+    const target = event.target as HTMLTextAreaElement;
+    const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
       selectionStartText,
       prefix,
     );
 
     // Skip if match the white key list
-    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN].indexOf(which) !== -1) {
+    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
+      return;
+    }
+
+    // Skip if is the last one
+    if (KeyCode.RIGHT === which && target.selectionStart === target.value.length) {
       return;
     }
 
     if (measureIndex !== -1) {
       const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
-      const validateMeasure = measureText.indexOf(' ') === -1;
+      const validateMeasure: boolean = validateSearch!(measureText, this.props);
       const matchOption: boolean = !!this.getOptions(measureText).length;
 
       if (key === measurePrefix || measuring || (measureText !== prevMeasureText && matchOption)) {
@@ -175,13 +186,15 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
   public selectOption = (option: OptionProps) => {
     const { value, measureLocation, measurePrefix } = this.state;
+    const { split } = this.props;
 
     const { value: mentionValue = '' } = option;
     const { text, selectionLocation } = replaceWithMeasure(value, {
       measureLocation,
       targetText: mentionValue,
       prefix: measurePrefix,
       selectionStart: this.textarea!.selectionStart,
+      split: split!,
     });
     this.triggerChange(text);
     this.stopMeasure(() => {

src/util.ts

@@ -1,3 +1,5 @@
+import { MentionsProps } from './Mentions';
+
 /**
  * Cut input selection into 2 part and return text before selection start
  */
@@ -35,15 +37,16 @@ interface MeasureConfig {
   prefix: string;
   targetText: string;
   selectionStart: number;
+  split: string;
 }
 
 function lower(char: string | undefined): string {
   return (char || '').toLowerCase();
 }
 
-function reduceText(text: string, targetText: string) {
+function reduceText(text: string, targetText: string, split: string) {
   const firstChar = text[0];
-  if (!firstChar || firstChar === ' ') {
+  if (!firstChar || firstChar === split) {
     return text;
   }
 
@@ -69,24 +72,31 @@ function reduceText(text: string, targetText: string) {
  *  => little @light test
  */
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
-  const { measureLocation, prefix, targetText, selectionStart } = measureConfig;
+  const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig;
 
   // Before text will append one space if have other text
-  let beforeMeasureText = text.slice(0, measureLocation).replace(/ $/, '');
+  let beforeMeasureText = text.slice(0, measureLocation);
+  if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
+    beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length);
+  }
   if (beforeMeasureText) {
-    beforeMeasureText = `${beforeMeasureText} `;
+    beforeMeasureText = `${beforeMeasureText}${split}`;
   }
 
   // Cut duplicate string with current targetText
-  const restText = reduceText(
+  let restText = reduceText(
     text.slice(selectionStart),
     targetText.slice(selectionStart - measureLocation - prefix.length),
+    split,
   );
+  if (restText.slice(0, split.length) === split) {
+    restText = restText.slice(split.length);
+  }
 
-  const connectedStartText = `${beforeMeasureText}${prefix}${targetText} `;
+  const connectedStartText = `${beforeMeasureText}${prefix}${targetText}${split}`;
 
   return {
-    text: `${connectedStartText}${restText.replace(/^ /, '')}`,
+    text: `${connectedStartText}${restText}`,
     selectionLocation: connectedStartText.length,
   };
 }
@@ -101,3 +111,8 @@ export function setInputSelection(input: HTMLTextAreaElement, location: number)
   input.blur();
   input.focus();
 }
+
+export function validateSearch(text: string, props: MentionsProps) {
+  const { split } = props;
+  return !split || text.indexOf(split) === -1;
+}

storybook/index.js

@@ -9,9 +9,11 @@ import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import DynamicSource from 'rc-source-loader!../examples/dynamic';
 import MultiplePrefixSource from 'rc-source-loader!../examples/multiple-prefix';
+import SplitSource from 'rc-source-loader!../examples/split';
 import Basic from '../examples/basic';
 import Dynamic from '../examples/dynamic';
 import MultiplePrefix from '../examples/multiple-prefix';
+import Split from '../examples/split';
 import READMECode from '../README.md';
 
 storiesOf('rc-mentions', module)
@@ -51,4 +53,9 @@ storiesOf('rc-mentions', module)
     source: {
       code: MultiplePrefixSource,
     },
+  })
+  .add('split', () => <Split />, {
+    source: {
+      code: SplitSource,
+    },
   });