Skip to content

Commit 5b53d93

Browse files
zombieJzombieJ
authored
Merge pull request #1 from react-component/init
feat: Support mentions
2 parents 3db4afd + 7ed9eb9 commit 5b53d93

24 files changed

+1369
-60
lines changed

‎.circleci/config.yml‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎.travis.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
language: node_js
2+
3+
sudo: false
4+
5+
notifications:
6+
email:
7+
- smith3816@gmail.com
8+
9+
node_js:
10+
- 10
11+
12+
before_install:
13+
- |
14+
if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
15+
then
16+
echo "Only docs were updated, stopping build process."
17+
exit
18+
fi
19+
script:
20+
- |
21+
if [ "$TEST_TYPE" = test ]; then
22+
npm test -- --coverage && \
23+
bash <(curl -s https://codecov.io/bash)
24+
else
25+
npm run $TEST_TYPE
26+
fi
27+
env:
28+
matrix:
29+
- TEST_TYPE=lint
30+
- TEST_TYPE=test

‎README.md‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ React Mentions
2525

2626
## Screenshots
2727

28-
<img src="https://user-images.githubusercontent.com/8186664/50768510-a8b30680-12bb-11e9-8251-0e0ed82c5076.png" />
28+
<img src="https://user-images.githubusercontent.com/5378891/57270992-2fd48780-70c0-11e9-91ae-c614d0b49a45.png" />
2929

3030
## Feature
3131

@@ -47,9 +47,14 @@ React Mentions
4747
```js
4848
import Mentions from 'rc-mentions';
4949

50-
// TODO: update
50+
const { Option } = Mentions;
5151

5252
var Demo = (
53+
<Mentions>
54+
<Option value="light">Light</Option>
55+
<Option value="bamboo">Bamboo</Option>
56+
<Option value="cat">Cat</Option>
57+
</Mentions>
5358
);
5459
React.render(<Demo />, container);
5560
```
@@ -60,13 +65,26 @@ React.render(<Demo />, container);
6065

6166
| name | description | type | default |
6267
|----------|----------------|----------|--------------|
63-
| | | | |
68+
| defaultValue | Default value | string | - |
69+
| value | Set value of mentions | string | - |
70+
| prefix | Set trigger prefix keyword | string \| string[] | '@' |
71+
| autoFocus | Auto get focus when component mounted | boolean | `false` |
72+
| split | Set split string before and after selected mention | string | ' ' |
73+
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
74+
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
75+
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
76+
| onChange | Trigger when value changed |(text: string) => void | - |
77+
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
78+
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
79+
| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
80+
| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
6481

6582
### Methods
6683

67-
| name | description | parameters | return |
68-
|----------|----------------|----------|--------------|
69-
| | | | |
84+
| name | description |
85+
|----------|----------------|
86+
| focus() | Component get focus |
87+
| blur() | Component lose focus |
7088

7189
## Development
7290

‎assets/index.less‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,94 @@
11
@mentionsPrefixCls: rc-mentions;
2+
3+
.@{mentionsPrefixCls} {
4+
display: inline-block;
5+
position: relative;
6+
white-space: pre-wrap;
7+
8+
// ================= Input Area =================
9+
> textarea, &-measure {
10+
font-size: inherit;
11+
font-size-adjust: inherit;
12+
font-style: inherit;
13+
font-variant: inherit;
14+
font-stretch: inherit;
15+
font-weight: inherit;
16+
font-family: inherit;
17+
18+
padding: 0;
19+
margin: 0;
20+
line-height: inherit;
21+
vertical-align: top;
22+
overflow: inherit;
23+
word-break: inherit;
24+
white-space: inherit;
25+
word-wrap: break-word;
26+
overflow-x: initial;
27+
overflow-y: auto;
28+
text-align: inherit;
29+
letter-spacing: inherit;
30+
white-space: inherit;
31+
tab-size: inherit;
32+
direction: inherit;
33+
}
34+
35+
> textarea {
36+
border: none;
37+
width: 100%;
38+
}
39+
40+
&-measure {
41+
position: absolute;
42+
left: 0;
43+
right: 0;
44+
top: 0;
45+
bottom: 0;
46+
pointer-events: none;
47+
// color: rgba(255, 0, 0, 0.3);
48+
color: transparent;
49+
z-index: -1;
50+
}
51+
52+
// ================== Dropdown ==================
53+
&-dropdown {
54+
position: absolute;
55+
56+
&-menu {
57+
list-style: none;
58+
margin: 0;
59+
padding: 0;
60+
61+
&-item {
62+
cursor: pointer;
63+
}
64+
}
65+
}
66+
}
67+
68+
// Customize style
69+
.@{mentionsPrefixCls} {
70+
font-size: 20px;
71+
border: 1px solid #999;
72+
border-radius: 3px;
73+
overflow: hidden;
74+
75+
&-dropdown {
76+
border: 1px solid #999;
77+
border-radius: 3px;
78+
background: #FFF;
79+
80+
&-menu {
81+
&-item {
82+
padding: 4px 8px;
83+
84+
&-active {
85+
background: #e6f7ff;
86+
}
87+
88+
&-disabled {
89+
opacity: 0.5;
90+
}
91+
}
92+
}
93+
}
94+
}

‎examples/basic.js‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,40 @@
11
/* eslint no-console: 0 */
22

33
import React from 'react';
4-
// import Mentions from '../src';
4+
import Mentions from '../src';
55
import '../assets/index.less';
66

7+
const { Option } = Mentions;
8+
79
class Demo extends React.Component {
10+
onSelect = (option, prefix) => {
11+
console.log('Select:', prefix, '-', option.value);
12+
};
13+
14+
onFocus = () => {
15+
console.log('onFocus');
16+
};
17+
18+
onBlur = () => {
19+
console.log('onBlur');
20+
};
21+
822
render() {
9-
return null;
23+
return (
24+
<div>
25+
<Mentions
26+
autoFocus
27+
defaultValue="Hello World"
28+
onSelect={this.onSelect}
29+
onFocus={this.onFocus}
30+
onBlur={this.onBlur}
31+
>
32+
<Option value="light">Light</Option>
33+
<Option value="bamboo">Bamboo</Option>
34+
<Option value="cat">Cat</Option>
35+
</Mentions>
36+
</div>
37+
);
1038
}
1139
}
1240

‎examples/dynamic.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/* eslint-disable no-console, no-undef */
2+
3+
import React from 'react';
4+
import debounce from 'lodash.debounce';
5+
import Mentions from '../src';
6+
import '../assets/index.less';
7+
import './dynamic.less';
8+
9+
const { Option } = Mentions;
10+
11+
class Demo extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
15+
this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
16+
}
17+
18+
state = {
19+
search: '',
20+
loading: false,
21+
users: [],
22+
};
23+
24+
onSearch = search => {
25+
this.setState({ search, loading: !!search, users: [] });
26+
console.log('Search:', search);
27+
this.loadGithubUsers(search);
28+
};
29+
30+
loadGithubUsers(key) {
31+
if (!key) {
32+
this.setState({
33+
users: [],
34+
});
35+
return;
36+
}
37+
38+
fetch(`https://api.github.com/search/users?q=${key}`)
39+
.then(res => res.json())
40+
.then(({ items = [] }) => {
41+
const { search } = this.state;
42+
if (search !== key) {
43+
console.log('Out Of Date >', key, items);
44+
return;
45+
}
46+
47+
console.log('Fetch Users >', items);
48+
this.setState({
49+
users: items.slice(0, 10),
50+
loading: false,
51+
});
52+
});
53+
}
54+
55+
render() {
56+
const { users, loading, search } = this.state;
57+
58+
let options;
59+
if (loading) {
60+
options = (
61+
<Option value={search} disabled>
62+
Searching {`'${search}'`}...
63+
</Option>
64+
);
65+
} else {
66+
options = users.map(({ login, avatar_url: avatar }) => (
67+
<Option key={login} value={login} className="dynamic-option">
68+
<img src={avatar} alt={login} />
69+
<span>{login}</span>
70+
</Option>
71+
));
72+
}
73+
74+
return (
75+
<div>
76+
<Mentions onSearch={this.onSearch} style={{ width: '100%' }} autoFocus>
77+
{options}
78+
</Mentions>
79+
search: <code>{search}</code>
80+
</div>
81+
);
82+
}
83+
}
84+
85+
export default Demo;

‎examples/dynamic.less‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.dynamic-option {
2+
font-size: 20px;
3+
4+
img {
5+
height: 20px;
6+
width: 20px;
7+
vertical-align: middle;
8+
margin-right: 4px;
9+
transition: all .3s;
10+
}
11+
12+
span {
13+
vertical-align: middle;
14+
display: inline-block;
15+
transition: all .3s;
16+
margin-right: 8px;
17+
}
18+
19+
&.rc-mentions-dropdown-menu-item-active {
20+
img {
21+
transform: scale(1.8);
22+
}
23+
24+
span {
25+
margin-left: 8px;
26+
margin-right: 0;
27+
}
28+
}
29+
}

0 commit comments

Comments
 (0)