Skip to content

Commit 3db4afd

Browse files
zombieJzombieJ
committed
update readme
1 parent e3fe014 commit 3db4afd

File tree

3 files changed

+61
-105
lines changed

3 files changed

+61
-105
lines changed

‎README.md‎

Lines changed: 26 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
# rc-select
1+
# rc-mentions
22
---
33

4-
React Select
4+
React Mentions
55

66
[![NPM version][npm-image]][npm-url]
77
[![build status][travis-image]][travis-url]
88
[![Test coverage][coveralls-image]][coveralls-url]
9-
[![Dependencies](https://img.shields.io/david/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select)
10-
[![DevDependencies](https://img.shields.io/david/dev/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select?type=dev)
9+
[![Dependencies](https://img.shields.io/david/react-component/mentions.svg?style=flat-square)](https://david-dm.org/react-component/mentions)
10+
[![DevDependencies](https://img.shields.io/david/dev/react-component/mentions.svg?style=flat-square)](https://david-dm.org/react-component/mentions?type=dev)
1111
[![npm download][download-image]][download-url]
12-
[![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/select)
12+
[![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/mentions)
1313

1414
[Storybook]: https://github.com/storybooks/press/blob/master/badges/storybook.svg
15-
[npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
16-
[npm-url]: http://npmjs.org/package/rc-select
17-
[travis-image]: https://img.shields.io/travis/react-component/select.svg?style=flat-square
18-
[travis-url]: https://travis-ci.org/react-component/select
19-
[coveralls-image]: https://img.shields.io/coveralls/react-component/select.svg?style=flat-square
20-
[coveralls-url]: https://coveralls.io/r/react-component/select?branch=maste
15+
[npm-image]: http://img.shields.io/npm/v/rc-mentions.svg?style=flat-square
16+
[npm-url]: http://npmjs.org/package/rc-mentions
17+
[travis-image]: https://img.shields.io/travis/react-component/mentions.svg?style=flat-square
18+
[travis-url]: https://travis-ci.org/react-component/mentions
19+
[coveralls-image]: https://img.shields.io/coveralls/react-component/mentions.svg?style=flat-square
20+
[coveralls-url]: https://coveralls.io/r/react-component/mentions?branch=maste
2121
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
2222
[node-url]: http://nodejs.org/download/
23-
[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
24-
[download-url]: https://npmjs.org/package/rc-select
23+
[download-image]: https://img.shields.io/npm/dm/rc-mentions.svg?style=flat-square
24+
[download-url]: https://npmjs.org/package/rc-mentions
2525

2626
## Screenshots
2727

@@ -33,118 +33,40 @@ React Select
3333

3434
### Keyboard
3535

36-
* Open select (focus input || focus and click)
36+
* Open mentions (focus input || focus and click)
3737
* KeyDown/KeyUp/Enter to navigate menu
3838

3939
## install
4040

41-
[![rc-select](https://nodei.co/npm/rc-select.png)](https://npmjs.org/package/rc-select)
41+
[![rc-mentions](https://nodei.co/npm/rc-mentions.png)](https://npmjs.org/package/rc-mentions)
4242

4343
## Usage
4444

4545
### basic use
4646

4747
```js
48-
import Select, {Option, OptGroup} from 'rc-select';
49-
50-
var c = (
51-
<Select>
52-
<Option value="jack">jack</Option>
53-
<Option value="lucy">lucy</Option>
54-
<Option value="yiminghe">yiminghe</Option>
55-
</Select>
48+
import Mentions from 'rc-mentions';
49+
50+
// TODO: update
51+
52+
var Demo = (
5653
);
57-
React.render(c, container);
54+
React.render(<Demo />, container);
5855
```
5956

6057
## API
6158

62-
### Select props
59+
### Mentions props
6360

6461
| name | description | type | default |
6562
|----------|----------------|----------|--------------|
66-
|id | html id to set on the component wrapper | String | '' |
67-
|className | additional css class of root dom node | String | '' |
68-
|data-\* | html data attributes to set on the component wrapper | String | '' |
69-
|prefixCls | prefix class | String | '' |
70-
|animation | dropdown animation name. only support slide-up now | String | '' |
71-
|transitionName | dropdown css animation name | String | '' |
72-
|choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
73-
|dropdownMatchSelectWidth | whether dropdown's with is same with select | bool | true |
74-
|dropdownClassName | additional className applied to dropdown | String | - |
75-
|dropdownStyle | additional style applied to dropdown | Object | {} |
76-
|dropdownAlign | additional align applied to dropdown | Object | {} |
77-
|dropdownMenuStyle | additional style applied to dropdown menu | Object | {} |
78-
|notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
79-
|tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | |
80-
|open | control select open | bool | |
81-
|defaultOpen | control select default open | bool | |
82-
|placeholder | select placeholder | React Node | |
83-
|showSearch | whether show search input in single mode | bool | true |
84-
|showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
85-
|allowClear | whether allowClear | bool | false |
86-
|tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
87-
|maxTagTextLength | max tag text length to show | number | - |
88-
|maxTagCount | max tag count to show | number | - |
89-
|maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
90-
|combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
91-
|multiple | whether multiple select | bool | false |
92-
|disabled | whether disabled select | bool | false |
93-
|filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
94-
|optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
95-
|optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
96-
|defaultValue | initial selected option(s) | String/Array<String> | - |
97-
|value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |
98-
|firstActiveValue | first active value when there is no value | String/Array<String> | - |
99-
|labelInValue| whether to embed label in value, see above value type | Bool | false |
100-
|backfill| whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
101-
|onChange | called when select an option or input value change(combobox) | function(value, option:Option/Array<Option>) | - |
102-
|onSearch | called when input changed | function | - |
103-
|onBlur | called when blur | function | - |
104-
|onFocus | called when focus | function | - |
105-
|onPopupScroll | called when menu is scrolled | function | - |
106-
|onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
107-
|onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
108-
|onInputKeyDown | called when key down on input | Function(event) | - |
109-
|defaultActiveFirstOption | whether active first option by default | bool | true |
110-
|getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
111-
|getInputElement| customize input element | function(): Element | - |
112-
|showAction| actions trigger the dropdown to show | String[]? | - |
113-
|autoFocus| focus select after mount | Bool | - |
114-
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
115-
| inputIcon | specify the select arrow icon | ReactNode | - |
116-
| clearIcon | specify the clear icon | ReactNode | - |
117-
| removeIcon | specify the remove icon | ReactNode | - |
118-
| menuItemSelectedIcon | specify the remove icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
119-
| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
120-
| loading | show loading icon in arrow | Boolean | false |
63+
| | | | |
12164

12265
### Methods
12366

12467
| name | description | parameters | return |
12568
|----------|----------------|----------|--------------|
126-
|focus | focus select programmably | - | - |
127-
|blur | blur select programmably | - | - |
128-
129-
### Option props
130-
131-
| name | description | type | default |
132-
|----------|----------------|----------|--------------|
133-
|className | additional class to option | String | '' |
134-
|disabled | no effect for click or keydown for this item | bool | false |
135-
|key | if react want you to set key, then key is same as value, you can omit value | String/number | - |
136-
|value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |
137-
|title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |
138-
139-
140-
### OptGroup props
141-
142-
| name | description | type | default |
143-
|----------|----------------|----------|--------------|
144-
|label | group label | String/React.Element | - |
145-
|key | - | String | - |
146-
|value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
147-
69+
| | | | |
14870

14971
## Development
15072

@@ -157,7 +79,7 @@ npm start
15779

15880
http://localhost:9001/
15981

160-
online example: http://react-component.github.io/select/
82+
online example: http://react-component.github.io/mentions/
16183

16284
## Test Case
16385

@@ -174,4 +96,4 @@ npm run coverage
17496

17597
## License
17698

177-
rc-select is released under the MIT license.
99+
rc-mentions is released under the MIT license.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"typescript": "^3.2.2"
6565
},
6666
"dependencies": {
67-
"babel-runtime": "^6.23.0",
67+
"babel-runtime": "^6.23.0"
6868
},
6969
"pre-commit": [
7070
"lint-staged"

‎storybook/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* eslint-disable import/no-webpack-loader-syntax */
2+
import React from 'react';
3+
import Markdown from 'react-markdown';
4+
import { checkA11y } from '@storybook/addon-a11y';
5+
import { storiesOf } from '@storybook/react';
6+
import { withConsole } from '@storybook/addon-console';
7+
import { withViewport } from '@storybook/addon-viewport';
8+
import { withInfo } from '@storybook/addon-info';
9+
10+
import READMECode from '../README.md';
11+
12+
storiesOf('rc-mentions', module)
13+
.addDecorator(checkA11y)
14+
.addDecorator(withInfo)
15+
.addDecorator((storyFn, context) => withConsole()(storyFn)(context))
16+
.addDecorator(withViewport())
17+
.add(
18+
'readMe',
19+
() => (
20+
<div
21+
className="markdown-body entry-content"
22+
style={{
23+
padding: 24,
24+
}}
25+
>
26+
<Markdown escapeHtml={false} source={READMECode} />
27+
</div>
28+
),
29+
{
30+
source: {
31+
code: READMECode,
32+
},
33+
},
34+
);

0 commit comments

Comments
 (0)