add customize filter demo

Author: zombieJ

examples/filter.js

@@ -0,0 +1,37 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+function filterOption(input, { id }) {
+  return id.indexOf(input) !== -1;
+}
+
+class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h1>Customize Filter</h1>
+        <p>Option has `id` and filter only hit by `id`</p>
+        <Mentions style={{ width: '100%', fontSize: 30 }} filterOption={filterOption} autoFocus>
+          <Option value="light" id="1128">
+            Light (ID: 1128)
+          </Option>
+          <Option value="bamboo" id="903">
+            Bamboo (ID: 903)
+          </Option>
+          <Option value="cat" id="1706">
+            Cat (ID: 1706)
+          </Option>
+        </Mentions>
+      </div>
+    );
+  }
+}
+
+export default Demo;

src/Mentions.tsx

@@ -8,6 +8,7 @@ import KeywordTrigger from './KeywordTrigger';
 import { MentionsContextProvider } from './MentionsContext';
 import Option, { OptionProps } from './Option';
 import {
+  filterOption as defaultFilterOption,
   getBeforeSelectionText,
   getLastMeasureIndex,
   replaceWithMeasure,
@@ -27,6 +28,7 @@ export interface MentionsProps {
   autoFocus?: boolean;
   split?: string;
   validateSearch?: typeof defaultValidateSearch;
+  filterOption?: false | typeof defaultFilterOption;
 }
 interface MentionsState {
   value: string;
@@ -44,6 +46,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     prefix: '@',
     split: ' ',
     validateSearch: defaultValidateSearch,
+    filterOption: defaultFilterOption,
   };
 
   public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
@@ -217,12 +220,16 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   };
 
   public getOptions = (measureText?: string): OptionProps[] => {
-    const targetMeasureText = (measureText || this.state.measureText || '').toLocaleLowerCase();
-    const { children } = this.props;
+    const targetMeasureText = measureText || this.state.measureText || '';
+    const { children, filterOption } = this.props;
     const list = toArray(children)
       .map(({ props }: { props: OptionProps }) => props)
-      .filter(({ value = '' }: OptionProps) => {
-        return value.toLowerCase().indexOf(targetMeasureText) !== -1;
+      .filter((option: OptionProps) => {
+        /** Return all result if `filterOption` is false. */
+        if (filterOption === false) {
+          return true;
+        }
+        return filterOption!(targetMeasureText, option);
       });
     return list;
   };

src/util.ts

@@ -1,4 +1,5 @@
 import { MentionsProps } from './Mentions';
+import { OptionProps } from './Option';
 
 /**
  * Cut input selection into 2 part and return text before selection start
@@ -116,3 +117,8 @@ export function validateSearch(text: string, props: MentionsProps) {
   const { split } = props;
   return !split || text.indexOf(split) === -1;
 }
+
+export function filterOption(input: string, { value = '' }: OptionProps): boolean {
+  const lowerCase = input.toLowerCase();
+  return value.toLowerCase().indexOf(lowerCase) !== -1;
+}

storybook/index.js

@@ -8,10 +8,12 @@ import { withViewport } from '@storybook/addon-viewport';
 import { withInfo } from '@storybook/addon-info';
 import BasicSource from 'rc-source-loader!../examples/basic';
 import DynamicSource from 'rc-source-loader!../examples/dynamic';
+import FilterSource from 'rc-source-loader!../examples/filter';
 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 Filter from '../examples/filter';
 import MultiplePrefix from '../examples/multiple-prefix';
 import Split from '../examples/split';
 import READMECode from '../README.md';
@@ -49,6 +51,11 @@ storiesOf('rc-mentions', module)
       code: DynamicSource,
     },
   })
+  .add('filter', () => <Filter />, {
+    source: {
+      code: FilterSource,
+    },
+  })
   .add('multiple-prefix', () => <MultiplePrefix />, {
     source: {
       code: MultiplePrefixSource,