Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Commit a5ea0b7

Browse files
ryanflorenceryanflorence
committedAug 12, 2015
new API
·
v1.8.10.2.1
1 parent e72efff commit a5ea0b7

38 files changed

+801
-956
lines changed
 

‎.gitignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
examples/build
2-
node_modules
1+
examples/**/*-bundle.js
2+
node_modules/

‎.npmignore

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
example
2-
script
3-
webpack.config.js
4-
1+
**/.*
2+
**/__tests__
3+
examples
4+
CONTRIBUTING.md
5+
bower.json

‎.travis.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- "0.10"
4+
before_script:
5+
- export DISPLAY=:99.0
6+
- sh -e /etc/init.d/xvfb start

‎CHANGELOG

-12
This file was deleted.

‎CHANGELOG.md

Whitespace-only changes.

‎CONTRIBUTING.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
### Commit Subjects
2+
3+
If your patch **changes the API or fixes a bug** please use one of the
4+
following prefixes in your commit subject:
5+
6+
- `[fixed] ...`
7+
- `[changed] ...`
8+
- `[added] ...`
9+
- `[removed] ...`
10+
11+
That ensures the subject line of your commit makes it into the
12+
auto-generated changelog. Do not use these tags if your change doesn't
13+
fix a bug and doesn't change the public API.
14+
15+
Commits with changed, added, or removed, must be reviewed by another
16+
collaborator.
17+
18+
#### When using `[changed]` or `[removed]`...
19+
20+
Please include an upgrade path with example code in the commit message.
21+
If it doesn't make sense to do this, then it doesn't make sense to use
22+
`[changed]` or `[removed]` :)
23+
24+
### Docs
25+
26+
Please update the README with any API changes, the code and docs should
27+
always be in sync.
28+
29+
### Development
30+
31+
- `npm start` runs the dev server to run/develop examples
32+
- `npm test` will run the test.
33+
- `rackt test` same as `npm test` but keeps karma running and watches
34+
for changes
35+
36+
### Build
37+
38+
Please do not include the output of `scripts/build` in your commits, we
39+
only do this when we release. (Also, you probably don't need to build
40+
anyway unless you are fixing something around our global build.)
41+

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright (c) 2014 Ryan Florence
1+
Copyright (c) 2015 Ryan Florence
22

33
Permission is hereby granted, free of charge, to any person obtaining a copy of
44
this software and associated documentation files (the "Software"), to deal in

‎README.md

+4-77
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,7 @@
1-
react-autocomplete (combobox)
2-
=============================
1+
React Autocomplete
2+
==================
33

4-
[WAI-ARIA][wai-aria] accessible [React][react] autocomplete component (combobox).
4+
Accessible, extensible, Autocomplete for React.js.
55

6-
Installation
7-
------------
8-
9-
`npm install react-autocomplete`
10-
11-
WIP
12-
---
13-
14-
This is not production ready, but I welcome use-cases opened in the
15-
issues :)
16-
17-
Demo
18-
----
19-
20-
http://rackt.github.io/react-autocomplete/example/
21-
22-
Usage
23-
-----
24-
25-
```js
26-
var Autocomplete = require('react-autocomplete');
27-
28-
// its actually called a combobox, but noboby searches for that
29-
var Combobox = Autocomplete.Combobox;
30-
var Option = Autocomplete.Option;
31-
32-
var comboboxinItUp = (
33-
34-
// Just like <select><option/></select>, this component is a
35-
// composite component. This gives you complete control over
36-
// What is displayed inside the <Option>s as well as allowing
37-
// you to render whatever you want inside, like a "no results"
38-
// message that isn't interactive like the <Options> are.
39-
40-
// Start with the <Combobox/> and give it some handlers.
41-
42-
<Combobox
43-
onInput={handleInput}
44-
onSelect={handleSelect}
45-
autocomplete="both"
46-
>
47-
48-
// `onInput` is called when the user is typing, it gets passed the
49-
// value from the input. This is your chance to filter the Options
50-
// and redraw. More realistically, you'd make a request to get data
51-
// and then redraw when it lands.
52-
//
53-
// `onSelect` is called when the user makes a selection, you probably
54-
// want to reset the Options to your full dataset again, or maybe
55-
// deal with the value and then clear it out if this is used to
56-
// populate a list.
57-
//
58-
// `autocomplete` defaults to 'both'. 'inline' will autocomplete the
59-
// first matched Option into the input value, 'list' will display a
60-
// list of choices, and of course, both does both.
61-
62-
// When this option is selected, `onSelect` will be called with the
63-
// value `"foo"`.
64-
<Option value="foo">Foo</Option>
65-
66-
// `label` is the text to display in the input when the Option is
67-
// selected. It defaults to the content of the Option just like a
68-
// real <option>. (Maybe the value should too, now that I'm writing
69-
// this, but it doesn't yet)
70-
<Option value="bar" label="not bar at all">Bar</Option>
71-
</Combobox>
72-
);
73-
```
74-
75-
This is not realistic code, check out the examples directory for a real
76-
implementation.
77-
78-
[wai-aria]:http://www.w3.org/TR/wai-aria/roles#combobox
79-
[react]:http://facebook.github.io/react/
6+
Docs coming soon, for now just look at the `propTypes` and examples :)
807

‎UPGRADE_GUIDE.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Upgrade Guide
2+
=============
3+
4+
To see discussion around these API changes, please refer to the
5+
[changelog](/CHANGELOG.md) and visit the commits and issues they
6+
reference.

‎bower.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "react-autocomplete",
3+
"version": "0.0.2",
4+
"homepage": "",
5+
"authors": [
6+
"Ryan Florence <rpflorence@gmail.com>"
7+
],
8+
"description": "react component",
9+
"main": "dist/react-autocomplete.js",
10+
"keywords": [
11+
""
12+
],
13+
"license": "MIT",
14+
"ignore": [
15+
"**/.*",
16+
"**/__tests__",
17+
"build",
18+
"examples",
19+
"lib",
20+
"node_modules",
21+
"package.json",
22+
"CONTRIBUTIN.md"
23+
]
24+
}

‎examples/async-data/app.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
body {
2+
color: #333;
3+
font-family: "Helvetica Neue", Arial, sans-serif;
4+
font-weight: 200;
5+
}
6+
7+
.example {
8+
padding: 0 25px;
9+
}

‎examples/async-data/app.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
import Autocomplete from '../../lib/index'
3+
import { getStates, matchStateToTerm, sortStates, styles, fakeRequest } from '../utils'
4+
5+
let App = React.createClass({
6+
7+
getInitialState () {
8+
return {
9+
unitedStates: getStates(),
10+
loading: false
11+
}
12+
},
13+
14+
render () {
15+
return (
16+
<div>
17+
<h1>Async Data</h1>
18+
19+
<p>
20+
Autocomplete works great with async data by allowing you to pass in
21+
items. The <code>onChange</code> event provides you the value to make
22+
a server request with, then change state and pass in new items, it will
23+
attempt to autocomplete the first one.
24+
</p>
25+
26+
<Autocomplete
27+
ref="autocomplete"
28+
items={this.state.unitedStates}
29+
getItemValue={(item) => item.name}
30+
onSelect={(value, item) => {
31+
// set the menu to only the selected item
32+
this.setState({ unitedStates: [ item ] })
33+
// or you could reset it to a default list again
34+
// this.setState({ unitedStates: getStates() })
35+
}}
36+
onChange={(event, value) => {
37+
this.setState({loading: true})
38+
fakeRequest(value, (items) => {
39+
this.setState({ unitedStates: items, loading: false })
40+
})
41+
}}
42+
renderItem={(item, isHighlighted) => (
43+
<div
44+
style={isHighlighted ? styles.highlightedItem : styles.item}
45+
key={item.abbr}
46+
id={item.abbr}
47+
>{item.name}</div>
48+
)}
49+
/>
50+
</div>
51+
)
52+
}
53+
})
54+
55+
React.render(<App/>, document.getElementById('container'))
56+

‎examples/async-data/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<meta charset="utf-8"/>
3+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
4+
<title>react component</title>
5+
<link href="app.css" rel="stylesheet"/>
6+
<body>
7+
<div id="container"></div>
8+
<script src="../__build__/shared.js"></script>
9+
<script src="../__build__/async-data.js"></script>

‎examples/basic/index.html

-8
This file was deleted.

‎examples/basic/main.js

-95
This file was deleted.

‎examples/custom-menu/app.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
body {
2+
color: #333;
3+
font-family: "Helvetica Neue", Arial, sans-serif;
4+
font-weight: 200;
5+
}
6+
7+
.example {
8+
padding: 0 25px;
9+
}

0 commit comments

Comments
 (0)
This repository has been archived.