Skip to content

Commit 643e7ee

Browse files
aesopwolfaesopwolf
committed
Merge remote-tracking branch 'upstream/master' into fix-paste-autofill
2 parents c093bf1 + 8f3701d commit 643e7ee

File tree

17 files changed

+589
-1570
lines changed

17 files changed

+589
-1570
lines changed

‎.eslintrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": ["standard", "standard-react"],
3+
"rules": {
4+
"brace-style": [2, "stroustrup", {"allowSingleLine": true}],
5+
"eqeqeq": [2, "smart"],
6+
"jsx-quotes": [2, "prefer-double"],
7+
"react/prop-types": 0,
8+
"react/self-closing-comp": 0,
9+
"react/wrap-multilines": 0,
10+
"space-before-function-paren": 0
11+
},
12+
"parser": "babel-eslint"
13+
}

‎.gitignore‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
lib/
2-
node_modules/
1+
/coverage
2+
/demo/dist
3+
/es6
4+
/lib
5+
/node_modules
6+
/umd
7+
npm-debug.log

‎.jshintrc‎

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

‎.npmignore‎

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

‎.travis.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- "4"
4+
- "5"
5+
script: npm test

‎CHANGES.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
1-
## 3.1.0 / 2015-10-23
1+
## 3.3.2 / 2016-12-01
2+
3+
* Fix for both Android and MS Edge input entering
4+
5+
## 3.2.0 / 2016-05-24
6+
7+
* Allow dynamic pattern updating [[martyphee][martyphee]]
8+
9+
## 3.1.3 / 2016-05-02
10+
11+
* Don’t call `onChange` function if undefined.
12+
* Update nwb to 0.9.x
13+
14+
## 3.1.2 / 2016-04-11
15+
16+
* Support for React 15.x.x
17+
18+
## 3.1.1 / 2016-03-09
19+
20+
* Convert tooling to use [nwb](https://github.com/insin/nwb/) [[bpugh]][[bpugh]]
21+
* Publish `dist` files
22+
23+
## 3.1.0 / 2016-02-11
224

325
* Added support for `value` behaving as a controlled component.
426

@@ -46,3 +68,4 @@ Initial release features:
4668

4769
[jquense]: https://github.com/jquense
4870
[muffinresearch]: https://github.com/muffinresearch
71+
[martyphee]: https://github.com/martyphee

‎CONTRIBUTING.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Prerequisites
2+
3+
[Node.js](http://nodejs.org/) must be installed.
4+
5+
## Installation
6+
7+
* Running `npm install` in the components's root directory will install everything you need for development.
8+
9+
## Demo Development Server
10+
11+
* `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12+
13+
## Running Tests
14+
15+
* `npm test` will run the tests once.
16+
* `npm run test:watch` will run the tests on every change.
17+
18+
## Building
19+
20+
* `npm run build` will build the component for publishing to npm and also bundle the demo app.
21+
22+
* `npm run clean` will delete built resources.

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ npm install react-maskedinput --save
2020

2121
The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with.
2222

23-
You can find it in the [/dist directory](https://github.com/insin/react-maskedinput/tree/master/dist).
23+
* [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)
24+
* [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)
2425

2526
## Usage
2627

‎demo/index.html‎ renamed to ‎demo/src/index.js‎

Lines changed: 31 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,18 @@
1-
<!DOCTYPE html>
2-
<head>
3-
<meta charset="UTF-8">
4-
<title>react-maskedinput Demo</title>
5-
<script src="http://fb.me/react-0.14.0.js"></script>
6-
<script src="http://fb.me/react-dom-0.14.0.js"></script>
7-
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
8-
<script src="../dist/react-maskedinput.js"></script>
9-
<style>
10-
body {
11-
box-sizing: border-box;
12-
width: 550px;
13-
margin: 1em auto;
14-
padding: 0 1em;
15-
font-family: sans-serif;
16-
}
17-
code {
18-
font-size: 1.3em;
19-
}
20-
h1 {
21-
font-size: 3em;
22-
text-align: center;
23-
margin-top: 0;
24-
}
25-
p.lead {
26-
font-weight: bold;
27-
text-align: center;
28-
}
29-
hr {
30-
margin-top: 20px;
31-
margin-bottom: 20px;
32-
border: 0;
33-
border-top: 1px solid #222;
34-
}
35-
.form-field {
36-
margin-bottom: .5em;
37-
}
38-
label {
39-
display: inline-block;
40-
width: 7em;
41-
text-align: right;
42-
margin-right: .75em;
43-
}
44-
input {
45-
border: none;
46-
font-size: 1.5em;
47-
}
48-
footer {
49-
text-align: center;
50-
}
51-
</style>
52-
</head>
53-
<body>
54-
<div id="app"></div>
55-
<script type="text/jsx;harmony=true">void function() { 'use strict'
1+
import './style.css'
562

57-
var PATTERNS = [
3+
import React from 'react'
4+
import {render} from 'react-dom'
5+
6+
import MaskedInput from '../../src'
7+
8+
const PATTERNS = [
589
'1111 1111',
5910
'111 111',
6011
'11 11',
6112
'1 1'
6213
]
6314

64-
var App = React.createClass({
15+
const App = React.createClass({
6516
getInitialState() {
6617
return {
6718
card: '',
@@ -73,12 +24,13 @@
7324
custom: '',
7425
changing: '',
7526
phone: '',
76-
pattern: '1111 1111'
27+
pattern: '1111 1111',
28+
cardPattern: '1111 1111 1111 1111'
7729
}
7830
},
7931

8032
_onChange(e) {
81-
var stateChange = {}
33+
const stateChange = {}
8234
stateChange[e.target.name] = e.target.value
8335
this.setState(stateChange)
8436
},
@@ -87,9 +39,19 @@
8739
this.setState({pattern: e.target.value})
8840
},
8941

42+
_onCardChange(e) {
43+
if(/^3[47]/.test(e.target.value)) {
44+
this.setState({cardPattern: "1111 111111 11111"})
45+
} else {
46+
this.setState({cardPattern: '1111 1111 1111 1111'})
47+
}
48+
},
49+
9050
render() {
9151
return <div className="App">
92-
<h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</a>/&gt;</code></h1>
52+
<h1>
53+
<code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</a>/&gt;</code>
54+
</h1>
9355
<p className="lead">A React component which creates a masked <code>&lt;input/&gt;</code></p>
9456
<div className="form-field">
9557
<label htmlFor="card">Card Number:</label>
@@ -135,9 +97,14 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
13597
<div className="form-field">
13698
<label htmlFor="pattern">Pattern:</label>
13799
<select onChange={this._changePattern}>
138-
{PATTERNS.map(pattern => <option value={pattern}>{pattern}</option>)}
100+
{PATTERNS.map(pattern => <option value={pattern} key={pattern}>{pattern}</option>)}
139101
</select>
140102
</div>
103+
<p>Dynamically changing the pattern as the user types:</p>
104+
<div className="form-field">
105+
<label htmlFor="changing">Credit Card:</label>
106+
<MaskedInput mask={this.state.cardPattern} name="creditCard" id="creditCard" onChange={this._onCardChange}/>
107+
</div>
141108
<p>Custom format character (W=[a-zA-Z0-9_], transformed to uppercase) and placeholder character (en space):</p>
142109
<div className="form-field">
143110
<label htmlFor="custom">Custom:</label>
@@ -151,7 +118,7 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
151118
}
152119
})
153120

154-
var CustomInput = React.createClass({
121+
const CustomInput = React.createClass({
155122
render() {
156123
return <MaskedInput
157124
mask="1111-WW-11"
@@ -161,15 +128,12 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
161128
{...this.props}
162129
formatCharacters={{
163130
'W': {
164-
validate(char) { return /\w/.test(char ) },
131+
validate(char) { return /\w/.test(char) },
165132
transform(char) { return char.toUpperCase() }
166133
}
167134
}
168135
}/>
169136
}
170137
})
171138

172-
ReactDOM.render(<App/>, document.getElementById('app'))
173-
174-
}()</script>
175-
</body>
139+
render(<App/>, document.getElementById('demo'))

‎demo/src/style.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
box-sizing: border-box;
3+
width: 550px;
4+
margin: 1em auto;
5+
padding: 0 1em;
6+
font-family: sans-serif;
7+
}
8+
code {
9+
font-size: 1.3em;
10+
}
11+
h1 {
12+
font-size: 3em;
13+
text-align: center;
14+
margin-top: 0;
15+
}
16+
p.lead {
17+
font-weight: bold;
18+
text-align: center;
19+
}
20+
hr {
21+
margin-top: 20px;
22+
margin-bottom: 20px;
23+
border: 0;
24+
border-top: 1px solid #222;
25+
}
26+
.form-field {
27+
margin-bottom: .5em;
28+
}
29+
label {
30+
display: inline-block;
31+
width: 7em;
32+
text-align: right;
33+
margin-right: .75em;
34+
}
35+
input {
36+
border: none;
37+
font-size: 1.5em;
38+
}
39+
footer {
40+
text-align: center;
41+
}

0 commit comments

Comments
 (0)