Skip to content

Commit 1e6b41c

Browse files
iswanjiswanj
authored
Merge pull request #18 from iswanj/port-CRA-demo
port CRA for demo
2 parents 997f4c4 + c14ef68 commit 1e6b41c

File tree

14 files changed

+100
-19718
lines changed

14 files changed

+100
-19718
lines changed

‎demo/.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log

‎demo/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
React Datalist Demo
2+
==============================
3+
4+
This is a runnable demo showing how to use `react-datalist`
5+
6+
## Running Example
7+
8+
**In the demo directory, run:**
9+
```
10+
$ npm install
11+
$ npm start
12+
```
13+
**Open [http://localhost:3000](http://localhost:3000) to view it in the browser.**

‎demo/bundle.js‎

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

‎demo/gulpfile.js‎

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

‎demo/index.html‎

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

‎demo/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "react-datalist-demo-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.6.1"
7+
},
8+
"dependencies": {
9+
"react": "^15.3.2",
10+
"react-datalist": "^3.0.0",
11+
"react-dom": "^15.3.2",
12+
"stylusify": "^2.1.0"
13+
},
14+
"scripts": {
15+
"compile-stylus": "stylus src/app.styl -p > public/bundle.css",
16+
"start": "npm run compile-stylus && react-scripts start",
17+
"build": "npm run compile-stylus && react-scripts build"
18+
}
19+
}

‎demo/bundle.css‎ renamed to ‎demo/public/bundle.css‎

File renamed without changes.

‎demo/public/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>React-Datalist Demo</title>
7+
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
8+
<link href='bundle.css' rel='stylesheet' type='text/css'>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<a href="https://github.com/asbjornenge/react-datalist"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
13+
</body>
14+
</html>

‎demo/app.js‎ renamed to ‎demo/src/App.js‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import ReactDataList from '../lib/ReactDataList'
2+
import ReactDataList from 'react-datalist'
43
import fruit from './fruit'
54

6-
var options = ['apple','orange','pear','pineapple','melon']
7-
85
class NativeSwitch extends React.Component {
96
constructor(props) {
107
super(props)
@@ -24,25 +21,25 @@ class NativeSwitch extends React.Component {
2421
)
2522
}
2623
toggleNative(event) {
27-
this.props.onChange(this.state.checked == '' ? true : false)
28-
this.setState({ checked : this.state.checked == '' ? 'checked' : '' })
24+
this.props.onChange(this.state.checked === '' ? true : false)
25+
this.setState({ checked : this.state.checked === '' ? 'checked' : '' })
2926
}
3027
}
3128

3229
class MessageBox extends React.Component {
3330
render() {
34-
var selectedOption, error, info_img;
35-
if (this.props.selectedOption != undefined) {
31+
var selectedOption, error;
32+
if (this.props.selectedOption !== undefined) {
3633
selectedOption = (
3734
<div className="info-message">
3835
<span className="intro">Your favorite is...</span>
3936
<span className="choice">{this.props.selectedOption}</span>
40-
<img src="http://gifs.joelglovier.com/thumbs-up/thumbs-up.gif" />
37+
<img alt="" src="http://gifs.joelglovier.com/thumbs-up/thumbs-up.gif" />
4138
<span className="advice">Good choice!</span>
4239
</div>
4340
)
4441
}
45-
if (this.props.error != undefined) error = <div className="error-message">{this.props.error}</div>
42+
if (this.props.error !== undefined) error = <div className="error-message">{this.props.error}</div>
4643
return (
4744
<div className="message-box">
4845
{selectedOption}
@@ -52,43 +49,45 @@ class MessageBox extends React.Component {
5249
}
5350
}
5451

55-
class Demo extends React.Component {
52+
class App extends React.Component {
5653
constructor(props) {
5754
super(props)
58-
this.state = {
55+
this.state = {
5956
forcePoly : true,
6057
support : !!('list' in document.createElement('input')) && !!(document.createElement('datalist') && window.HTMLDataListElement)
6158
}
6259
}
6360
render() {
61+
// eslint-disable-next-line
62+
let errorMessage = "";
6463
if (!this.state.support && !this.state.forcePoly) errorMessage = 'Your browser does not support the native datalist :-( No worries, react-datalist got your back.'
6564
return (
6665
<div>
6766
<NativeSwitch onChange={this.handleNativeRequest.bind(this)} />
6867
<h1 className="main-label">Find your favorite fruit!</h1>
69-
<ReactDataList
70-
list="fruit"
71-
options={fruit}
72-
forcePoly={this.state.forcePoly}
68+
<ReactDataList
69+
list="fruit"
70+
options={fruit}
71+
forcePoly={this.state.forcePoly}
7372
onOptionSelected={this.onOptionSelected.bind(this)} />
74-
<MessageBox
75-
selectedOption={this.state.selectedOption}
73+
<MessageBox
74+
selectedOption={this.state.selectedOption}
7675
conflicted={!this.state.support && !this.state.forcePoly} />
7776
</div>
7877
)
7978
}
8079
handleNativeRequest(native) {
81-
this.setState({
80+
this.setState({
8281
forcePoly : !native,
8382
filter : '',
8483
selectedOption : undefined
8584
})
8685
}
8786
onOptionSelected(option) {
88-
this.setState({
87+
this.setState({
8988
selectedOption : option
9089
})
9190
}
9291
}
9392

94-
ReactDOM.render(<Demo />, document.querySelectorAll('#container')[0])
93+
export default App;

‎demo/app.styl‎ renamed to ‎demo/src/app.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,13 @@ body
9191
border: 2px solid #999999; border-radius: 20px;
9292
position: absolute; top: 0; bottom: 0; right: 56px;
9393
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
94-
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
94+
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
9595
}
9696

9797
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
9898
margin-left: 0;
9999
}
100100

101101
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
102-
right: 0px;
102+
right: 0px;
103103
}

0 commit comments

Comments
 (0)