Skip to content
This repository was archived by the owner on Feb 29, 2024. It is now read-only.

Commit 00b55f2

Browse files
dsumerdsumer
committed
switched to react router and single page app for examples
1 parent f233e7a commit 00b55f2

File tree

11 files changed

+185
-46
lines changed

11 files changed

+185
-46
lines changed

‎README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,53 @@ Congratulations! Your search is over, because **`@cat-react/form`** offers you a
2525
</Form>
2626
```
2727

28+
## Example Custom TextInput
29+
Here you can see an example of an custom TextInput which shows how you can implement your own Inputs:
30+
```jsx
31+
import React from 'react';
32+
import Input from '@cat-react/form/Input'
33+
34+
@Input
35+
export default class TextInput extends React.Component {
36+
onChange(event) {
37+
this.props.setValue(event.target.value);
38+
}
39+
40+
renderErrors() {
41+
let errorMessages = [];
42+
if (!this.props.isPristine()) {
43+
errorMessages = this.props.getErrorMessages();
44+
}
45+
46+
if (!errorMessages || errorMessages.length <= 0) {
47+
return null;
48+
}
49+
50+
return <ul>{errorMessages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
51+
}
52+
53+
render() {
54+
let className = '';
55+
if (!this.props.isPristine()) {
56+
className = this.props.isValid() ? null : 'error';
57+
}
58+
59+
// TODO: remove onBlur
60+
return (
61+
<label>
62+
{this.props.label} {this.props.isRequired() ? '*' : null}
63+
<input className={className}
64+
type="text"
65+
value={this.props.getValue()}
66+
onChange={this.onChange.bind(this)}
67+
onBlur={this.props.onBlur}/>
68+
{this.renderErrors()}
69+
</label>
70+
);
71+
}
72+
}
73+
```
74+
2875
## Installation
2976

3077
## Contribution

‎examples/Home/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
export default class App extends React.Component {
4+
render() {
5+
return (
6+
<div>
7+
<h1>Home</h1>
8+
</div>
9+
);
10+
};
11+
}

‎examples/Login/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import Form from '@cat-react/form/Form';
3+
import TextInput from '../components/TextInput';
4+
5+
export default class App extends React.Component {
6+
render() {
7+
return (
8+
<Form>
9+
<h1>Login</h1>
10+
<div>
11+
<TextInput label="Username" name="username" value="" validations={{isRequired: true}}/>
12+
</div>
13+
<div>
14+
<TextInput label="Email" name="email" value="" validations={{isEmail: true}}/>
15+
</div>
16+
</Form>
17+
);
18+
};
19+
}

‎examples/index.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<title>@cat-react/form - examples</title>
66
</head>
77
<body>
8-
<h1><a href="https://github.com/cat-react/form">@cat-react/form</a> - examples</h1>
9-
<ul>
10-
<li><a href="login/index.html">Simple Login</a></li>
11-
</ul>
8+
<div id="root"></div>
9+
<script src="/build/vendor.bundle.js"></script>
10+
<script src="/build/index.js"></script>
1211
</body>
1312
</html>

‎examples/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {HashRouter, Switch, Route, Link} from 'react-router-dom';
4+
5+
import Home from './Home';
6+
import Login from './Login';
7+
8+
ReactDOM.render(
9+
<HashRouter>
10+
<div>
11+
<nav>
12+
<ul>
13+
<li><Link to='/'>Home</Link></li>
14+
<li><Link to='/login'>Login</Link></li>
15+
</ul>
16+
</nav>
17+
<main>
18+
<Switch>
19+
<Route exact path='/' component={Home}/>
20+
<Route path='/login' component={Login}/>
21+
</Switch>
22+
</main>
23+
</div>
24+
</HashRouter>,
25+
document.getElementById('root')
26+
);

‎examples/login/app.js

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

‎examples/login/index.html

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

‎examples/webpack.config.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,9 @@ var webpack = require('webpack');
44

55
module.exports = {
66
devtool: 'inline-source-map',
7-
entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
8-
const isDir = fs.lstatSync(path.join(__dirname, dir)).isDirectory();
9-
10-
if (isDir && dir !== 'components') {
11-
entries[dir] = path.join(__dirname, dir, 'app.js');
12-
}
13-
14-
return entries;
15-
}, {}),
7+
entry: {
8+
index: './examples/index.js'
9+
},
1610
output: {
1711
path: path.join(__dirname, 'build'),
1812
filename: '[name].js',

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@
2525
"babel-preset-es2015": "^6.24.1",
2626
"babel-preset-react": "^6.24.1",
2727
"babel-preset-stage-0": "^6.24.1",
28+
"bootstrap": "^3.3.7",
2829
"enzyme": "^2.9.1",
2930
"eslint": "^4.5.0",
3031
"eslint-plugin-react": "^7.3.0",
3132
"jest": "^20.0.4",
3233
"react": "^15.6.1",
3334
"react-dom": "^15.6.1",
35+
"react-router-dom": "^4.2.2",
3436
"react-test-renderer": "^15.6.1",
3537
"webpack": "^3.5.5",
3638
"webpack-dev-server": "^2.7.1"

‎src/validationRules.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
const rules = {
2+
matchRegexp: function (values, value, regexp) {
3+
return regexp.test(value);
4+
},
25
isRequired: (values, value) => {
36
return !!value;
47
},
8+
isEmail: function (values, value) {
9+
return rules.matchRegexp(values, value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i);
10+
},
511
maxLength: (values, value, maxLength) => {
612
return (!value || value.length <= maxLength);
713
},

0 commit comments

Comments
 (0)