feat: Support mentions

.travis.yml

@@ -0,0 +1,30 @@
+language: node_js
+
+sudo: false
+
+notifications:
+  email:
+  - smith3816@gmail.com
+
+node_js:
+- 10
+
+before_install:
+- |
+    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
+      echo "Only docs were updated, stopping build process."
+      exit
+    fi
+script:
+- |
+    if [ "$TEST_TYPE" = test ]; then
+      npm test -- --coverage && \
+      bash <(curl -s https://codecov.io/bash)
+    else
+      npm run $TEST_TYPE
+    fi
+env:
+  matrix:
+  - TEST_TYPE=lint
+  - TEST_TYPE=test

README.md

@@ -25,7 +25,7 @@ React Mentions
 
 ## Screenshots
 
-<img src="https://user-images.githubusercontent.com/8186664/50768510-a8b30680-12bb-11e9-8251-0e0ed82c5076.png" />
+<img src="https://user-images.githubusercontent.com/5378891/57270992-2fd48780-70c0-11e9-91ae-c614d0b49a45.png" />
 
 ## Feature
 
@@ -47,9 +47,14 @@ React Mentions
 ```js
 import Mentions from 'rc-mentions';
 
-// TODO: update
+const { Option } = Mentions;
 
 var Demo = (
+  <Mentions>
+    <Option value="light">Light</Option>
+    <Option value="bamboo">Bamboo</Option>
+    <Option value="cat">Cat</Option>
+  </Mentions>
 );
 React.render(<Demo />, container);
 ```
@@ -60,13 +65,26 @@ React.render(<Demo />, container);
 
 | name     | description    | type     | default      |
 |----------|----------------|----------|--------------|
-| | | | |
+| defaultValue | Default value | string | - |
+| value | Set value of mentions | string | - |
+| prefix | Set trigger prefix keyword | string \| string[] | '@' |
+| autoFocus | Auto get focus when component mounted | boolean | `false` |
+| split | Set split string before and after selected mention | string | ' ' |
+| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
+| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
+| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
+| 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 | - |
+| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
+| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 
 ### Methods
 
-| name     | description    | parameters | return      |
-|----------|----------------|----------|--------------|
-| | | | |
+| name     | description    |
+|----------|----------------|
+| focus() | Component get focus |
+| blur() | Component lose focus |
 
 ## Development
 

assets/index.less

@@ -1 +1,94 @@
 @mentionsPrefixCls: rc-mentions;
+
+.@{mentionsPrefixCls} {
+  display: inline-block;
+  position: relative;
+  white-space: pre-wrap;
+
+  // ================= Input Area =================
+  > textarea, &-measure {
+    font-size: inherit;
+    font-size-adjust: inherit;
+    font-style: inherit;
+    font-variant: inherit;
+    font-stretch: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+    vertical-align: top;
+    overflow: inherit;
+    word-break: inherit;
+    white-space: inherit;
+    word-wrap: break-word;
+    overflow-x: initial;
+    overflow-y: auto;
+    text-align: inherit;
+    letter-spacing: inherit;
+    white-space: inherit;
+    tab-size: inherit;
+    direction: inherit;
+  }
+
+  > textarea {
+    border: none;
+    width: 100%;
+  }
+
+  &-measure {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    // color: rgba(255, 0, 0, 0.3);
+    color: transparent;
+    z-index: -1;
+  }
+
+  // ================== Dropdown ==================
+  &-dropdown {
+    position: absolute;
+
+    &-menu {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      &-item {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// Customize style
+.@{mentionsPrefixCls} {
+  font-size: 20px;
+  border: 1px solid #999;
+  border-radius: 3px;
+  overflow: hidden;
+
+  &-dropdown {
+    border: 1px solid #999;
+    border-radius: 3px;
+    background: #FFF;
+
+    &-menu {
+      &-item {
+        padding: 4px 8px;
+
+        &-active {
+          background: #e6f7ff;
+        }
+
+        &-disabled {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}

examples/basic.js

@@ -1,12 +1,40 @@
 /* eslint no-console: 0 */
 
 import React from 'react';
-// import Mentions from '../src';
+import Mentions from '../src';
 import '../assets/index.less';
 
+const { Option } = Mentions;
+
 class Demo extends React.Component {
+  onSelect = (option, prefix) => {
+    console.log('Select:', prefix, '-', option.value);
+  };
+
+  onFocus = () => {
+    console.log('onFocus');
+  };
+
+  onBlur = () => {
+    console.log('onBlur');
+  };
+
   render() {
-    return null;
+    return (
+      <div>
+        <Mentions
+          autoFocus
+          defaultValue="Hello World"
+          onSelect={this.onSelect}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        >
+          <Option value="light">Light</Option>
+          <Option value="bamboo">Bamboo</Option>
+          <Option value="cat">Cat</Option>
+        </Mentions>
+      </div>
+    );
   }
 }
 

examples/dynamic.js

@@ -0,0 +1,85 @@
+/* eslint-disable no-console, no-undef */
+
+import React from 'react';
+import debounce from 'lodash.debounce';
+import Mentions from '../src';
+import '../assets/index.less';
+import './dynamic.less';
+
+const { Option } = Mentions;
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
+  }
+
+  state = {
+    search: '',
+    loading: false,
+    users: [],
+  };
+
+  onSearch = search => {
+    this.setState({ search, loading: !!search, users: [] });
+    console.log('Search:', search);
+    this.loadGithubUsers(search);
+  };
+
+  loadGithubUsers(key) {
+    if (!key) {
+      this.setState({
+        users: [],
+      });
+      return;
+    }
+
+    fetch(`https://api.github.com/search/users?q=${key}`)
+      .then(res => res.json())
+      .then(({ items = [] }) => {
+        const { search } = this.state;
+        if (search !== key) {
+          console.log('Out Of Date >', key, items);
+          return;
+        }
+
+        console.log('Fetch Users >', items);
+        this.setState({
+          users: items.slice(0, 10),
+          loading: false,
+        });
+      });
+  }
+
+  render() {
+    const { users, loading, search } = this.state;
+
+    let options;
+    if (loading) {
+      options = (
+        <Option value={search} disabled>
+          Searching {`'${search}'`}...
+        </Option>
+      );
+    } else {
+      options = users.map(({ login, avatar_url: avatar }) => (
+        <Option key={login} value={login} className="dynamic-option">
+          <img src={avatar} alt={login} />
+          <span>{login}</span>
+        </Option>
+      ));
+    }
+
+    return (
+      <div>
+        <Mentions onSearch={this.onSearch} style={{ width: '100%' }} autoFocus>
+          {options}
+        </Mentions>
+        search: <code>{search}</code>
+      </div>
+    );
+  }
+}
+
+export default Demo;

examples/dynamic.less

@@ -0,0 +1,29 @@
+.dynamic-option {
+  font-size: 20px;
+
+  img {
+    height: 20px;
+    width: 20px;
+    vertical-align: middle;
+    margin-right: 4px;
+    transition: all .3s;
+  }
+
+  span {
+    vertical-align: middle;
+    display: inline-block;
+    transition: all .3s;
+    margin-right: 8px;
+  }
+
+  &.rc-mentions-dropdown-menu-item-active {
+    img {
+      transform: scale(1.8);
+    }
+
+    span {
+      margin-left: 8px;
+      margin-right: 0;
+    }
+  }
+}