fuelpagan · fuelpagan · Oct 10, 2015 · Jan 22, 2016 · Feb 11, 2016 · Feb 11, 2016
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,13 @@
+{
+  "extends": ["standard", "standard-react"],
+  "rules": {
+    "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
+    "eqeqeq": [2, "smart"],
+    "jsx-quotes": [2, "prefer-double"],
+    "react/prop-types": 0,
+    "react/self-closing-comp": 0,
+    "react/wrap-multilines": 0,
+    "space-before-function-paren": 0
+  },
+  "parser": "babel-eslint"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,7 @@
-lib/
-node_modules/
+/coverage
+/demo/dist
+/es6
+/lib
+/node_modules
+/umd
+npm-debug.log
diff --git a/.jshintrc b/.jshintrc
diff --git a/.npmignore b/.npmignore
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+    - "4"
+    - "5"
+script: npm test
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,25 @@
+## 3.2.0 / 2016-05-24
+
+* Allow dynamic pattern updating [[martyphee][martyphee]]
+
+## 3.1.3 / 2016-05-02
+
+* Don’t call `onChange` function if undefined.
+* Update nwb to 0.9.x
+s
+## 3.1.2 / 2016-04-11
+
+* Support for React 15.x.x
+
+## 3.1.1 / 2016-03-09
+
+* Convert tooling to use [nwb](https://github.com/insin/nwb/) [[bpugh]][[bpugh]]
+* Publish `dist` files
+
+## 3.1.0 / 2016-02-11
+
+* Added support for `value` behaving as a controlled component.
+
 ## 3.0.0 / 2015-10-23
 
 **Breaking change:** Now uses a `mask` prop to define the input mask instead of `pattern`, to avoid preventing use of the the HTML5 `pattern` attribute in conjunction with the input mask.
@@ -42,3 +64,4 @@ Initial release features:
 
 [jquense]: https://github.com/jquense
 [muffinresearch]: https://github.com/muffinresearch
+[martyphee]: https://github.com/martyphee
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) must be installed.
+
+## Installation
+
+* Running `npm install` in the components's root directory will install everything you need for development.
+
+## Demo Development Server
+
+* `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+* `npm test` will run the tests once.
+* `npm run test:watch` will run the tests on every change.
+
+## Building
+
+* `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+* `npm run clean` will delete built resources.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 A [React](http://facebook.github.io/react/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core).
 
+![This project has never been used by its author, other than while making it.](https://img.shields.io/badge/author--usage-never-red.png "This project has never been used by its author, other than while making it")
+
 ## [Live Demo](http://insin.github.io/react-maskedinput/)
 
 ## Install
@@ -18,7 +20,8 @@ npm install react-maskedinput --save
 
 The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with.
 
-You can find it in the [/dist directory](https://github.com/insin/react-maskedinput/tree/master/dist).
+* [react-maskedinput.js](https://npmcdn.com/react-maskedinput/umd/react-maskedinput.js) (development version)
+* [react-maskedinput.min.js](https://npmcdn.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)
 
 ## Usage
 

diff --git a/demo/index.html → demo/src/index.js b/demo/index.html → demo/src/index.js
@@ -1,67 +1,18 @@
-<!DOCTYPE html>
-<head>
-  <meta charset="UTF-8">
-  <title>react-maskedinput Demo</title>
-  <script src="http://fb.me/react-0.14.0.js"></script>
-  <script src="http://fb.me/react-dom-0.14.0.js"></script>
-  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
-  <script src="../dist/react-maskedinput.js"></script>
-  <style>
-  body {
-    box-sizing: border-box;
-    width: 550px;
-    margin: 1em auto;
-    padding: 0 1em;
-    font-family: sans-serif;
-  }
-  code {
-    font-size: 1.3em;
-  }
-  h1 {
-    font-size: 3em;
-    text-align: center;
-    margin-top: 0;
-  }
-  p.lead {
-    font-weight: bold;
-    text-align: center;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #222;
-  }
-  .form-field {
-    margin-bottom: .5em;
-  }
-  label {
-    display: inline-block;
-    width: 7em;
-    text-align: right;
-    margin-right: .75em;
-  }
-  input {
-    border: none;
-    font-size: 1.5em;
-  }
-  footer {
-    text-align: center;
-  }
-  </style>
-</head>
-<body>
-<div id="app"></div>
-<script type="text/jsx;harmony=true">void function() { 'use strict'
+import './style.css'
+
+import React from 'react'
+import {render} from 'react-dom'
 
-var PATTERNS = [
+import MaskedInput from '../../src'
+
+const PATTERNS = [
   '1111 1111',
   '111 111',
   '11 11',
   '1 1'
 ]
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       card: '',
@@ -72,12 +23,13 @@
       leading: '',
       custom: '',
       changing: '',
-      pattern: '1111 1111'
+      pattern: '1111 1111',
+      cardPattern: '1111 1111 1111 1111'
     }
   },
 
   _onChange(e) {
-    var stateChange = {}
+    const stateChange = {}
     stateChange[e.target.name] = e.target.value
     this.setState(stateChange)
   },
@@ -86,13 +38,28 @@
     this.setState({pattern: e.target.value})
   },
 
+  _onCardChange(e) {
+    if(/^3[47]/.test(e.target.value)) {
+      this.setState({cardPattern: "1111 111111 11111"})
+    } else {
+      this.setState({cardPattern: '1111 1111 1111 1111'})
+    }
+  },
+
   render() {
     return <div className="App">
-      <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</a>/&gt;</code></h1>
+      <h1>
+        <code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</a>/&gt;</code>
+      </h1>
       <p className="lead">A React component which creates a masked <code>&lt;input/&gt;</code></p>
       <div className="form-field">
         <label htmlFor="card">Card Number:</label>
-        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" onChange={this._onChange}/>
+        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" value={this.state.card} onChange={this._onChange}/>
+      </div>
+      <p>You can even externally update the card state like a standard input element:</p>
+      <div className="form-field">
+        <label htmlFor="card">Externally Update:</label>
+        <input onChange={this._onChange} name="card" maxLength="16" style={{borderBottom: '1px solid #999'}} />
       </div>
       <p>Placeholders are automatically generated but can be overridden with your own:</p>
       <div className="form-field">
@@ -125,9 +92,14 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
       <div className="form-field">
         <label htmlFor="pattern">Pattern:</label>
         <select onChange={this._changePattern}>
-          {PATTERNS.map(pattern => <option value={pattern}>{pattern}</option>)}
+          {PATTERNS.map(pattern => <option value={pattern} key={pattern}>{pattern}</option>)}
         </select>
       </div>
+      <p>Dynamically changing the pattern as the user types:</p>
+      <div className="form-field">
+        <label htmlFor="changing">Credit Card:</label>
+        <MaskedInput mask={this.state.cardPattern} name="creditCard" id="creditCard" onChange={this._onCardChange}/>
+      </div>
       <p>Custom format character (W=[a-zA-Z0-9_], transformed to uppercase) and placeholder character (en space):</p>
       <div className="form-field">
         <label htmlFor="custom">Custom:</label>
@@ -141,7 +113,7 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
   }
 })
 
-var CustomInput = React.createClass({
+const CustomInput = React.createClass({
   render() {
     return <MaskedInput
       mask="1111-WW-11"
@@ -151,15 +123,12 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
       {...this.props}
       formatCharacters={{
         'W': {
-          validate(char) { return /\w/.test(char ) },
+          validate(char) { return /\w/.test(char) },
           transform(char) { return char.toUpperCase() }
         }
       }
     }/>
   }
 })
 
-ReactDOM.render(<App/>, document.getElementById('app'))
-
-}()</script>
-</body>
+render(<App/>, document.getElementById('demo'))
diff --git a/demo/src/style.css b/demo/src/style.css
@@ -0,0 +1,41 @@
+body {
+  box-sizing: border-box;
+  width: 550px;
+  margin: 1em auto;
+  padding: 0 1em;
+  font-family: sans-serif;
+}
+code {
+  font-size: 1.3em;
+}
+h1 {
+  font-size: 3em;
+  text-align: center;
+  margin-top: 0;
+}
+p.lead {
+  font-weight: bold;
+  text-align: center;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #222;
+}
+.form-field {
+  margin-bottom: .5em;
+}
+label {
+  display: inline-block;
+  width: 7em;
+  text-align: right;
+  margin-right: .75em;
+}
+input {
+  border: none;
+  font-size: 1.5em;
+}
+footer {
+  text-align: center;
+}