Skip to content

Commit 6d05bf2

Browse files
udithvudithv
committed
first commit
0 parents  commit 6d05bf2

11 files changed

+9974
-0
lines changed

Diff for: ‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

Diff for: ‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# .gitignore
2+
3+
node_modules
4+
dist

Diff for: ‎.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
src
2+
examples
3+
.babelrc
4+
.gitignore
5+
webpack.config.js

Diff for: ‎examples/src/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!-- examples/src/index.html -->
2+
3+
<html>
4+
<head>
5+
<title>My Component Demo</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
</head>
10+
<body>
11+
<noscript>
12+
You need to enable JavaScript to run this app.
13+
</noscript>
14+
<div id="root"></div>
15+
</body>
16+
</html>

Diff for: ‎examples/src/index.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/*** examples/src/index.js ***/
2+
3+
import React, { Component } from 'react';
4+
import { render} from 'react-dom';
5+
import ReactJson from 'react-json-view'
6+
import PeopleSearchBar from '../../src/PeopleSearchBar';
7+
8+
import 'bootstrap/dist/css/bootstrap.css';
9+
import 'font-awesome/css/font-awesome.css';
10+
11+
class App extends Component {
12+
constructor(props){
13+
super(props);
14+
15+
this.state = {
16+
results: [],
17+
result: {}
18+
}
19+
}
20+
21+
handleClick(result) {
22+
this.setState({ result });
23+
}
24+
25+
handleEnter(result) {
26+
this.setState({ result });
27+
}
28+
29+
handleSubmit(results) {
30+
this.setState({ results });
31+
}
32+
33+
render(){
34+
return(
35+
<div className="container">
36+
<h1>People Search Bar</h1>
37+
<h4>Search for People using dbpedia database</h4>
38+
<br />
39+
<p>
40+
use: <em> npm install react-people-search-bar to install </em>
41+
<br/>
42+
<br/>
43+
<em> import PeopleSearchBar from 'react-people-search-bar'; </em>
44+
<br/>
45+
<br/>
46+
<b>Props:</b>
47+
<ol>
48+
<li>
49+
itemClick()
50+
params: item object of the entry selected.
51+
</li>
52+
<li>
53+
itemEnter()
54+
params: item object of the entry selected throw the use of up and down arrows and then enter is pressed.
55+
</li>
56+
<li>
57+
submit()
58+
params: Array of search results of the text entered when search button is pressed.
59+
</li>
60+
61+
</ol>
62+
</p>
63+
64+
<div className="col-md-6">
65+
<PeopleSearchBar
66+
itemClick={this.handleClick.bind(this)}
67+
itemEnter={this.handleEnter.bind(this)}
68+
submit={this.handleSubmit.bind(this)}
69+
/>
70+
</div>
71+
72+
<div className="row">
73+
<div className="col-md-6">
74+
<em> Click on any of the search entries or choose them using up and down arrow key then press Enter.</em>
75+
<ReactJson src={this.state.result} />
76+
</div>
77+
<div className="col-md-6">
78+
<em>
79+
Press <i className="fa fa-search" aria-hidden="true" /> to get Search results
80+
</em>
81+
<ReactJson src={this.state.results} />
82+
</div>
83+
84+
</div>
85+
</div>
86+
);
87+
}
88+
89+
}
90+
91+
92+
93+
render(<App />, document.getElementById("root"));

0 commit comments

Comments
 (0)