Update the mask's pattern if it changes

insin#8

Author: insin

demo/index.html

@@ -53,6 +53,13 @@
 <div id="app"></div>
 <script type="text/jsx;harmony=true">void function() { 'use strict';
 
+var PATTERNS = [
+  '1111 1111',
+  '111 111',
+  '11 11',
+  '1 1'
+]
+
 var App = React.createClass({
   getInitialState() {
     return {
@@ -61,7 +68,9 @@
       ccv: '',
       plate: '',
       escaped: '',
-      custom: ''
+      custom: '',
+      changing: '',
+      pattern: '1111 1111'
     }
   },
 
@@ -71,6 +80,10 @@
     this.setState(stateChange)
   },
 
+  _changePattern(e) {
+    this.setState({pattern: e.target.value})
+  },
+
   render() {
     return <div className="App">
       <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</a>/&gt;</code></h1>
@@ -97,6 +110,17 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
         <label htmlFor="escaped">Escaped:</label>
         <MaskedInput pattern="11 \* 11" name="escaped" id="escaped" onChange={this._onChange}/>
       </div>
+      <p>Changing patterns:</p>
+      <div className="form-field">
+        <label htmlFor="changing">Input:</label>
+        <MaskedInput pattern={this.state.pattern} name="changing" id="changing" onChange={this._onChange}/>
+      </div>
+      <div className="form-field">
+        <label htmlFor="pattern">Pattern:</label>
+        <select onChange={this._changePattern}>
+          {PATTERNS.map(pattern => <option value={pattern}>{pattern}</option>)}
+        </select>
+      </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>

src/index.jsx

@@ -42,6 +42,12 @@ var MaskedInput = React.createClass({
     this.mask = new InputMask(options)
   },
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.pattern !== nextProps.pattern) {
+      this.mask.setPattern(nextProps.pattern, {value: this.mask.getRawValue()})
+    }
+  },
+
   _updateMaskSelection() {
     this.mask.selection = getSelection(this.getDOMNode())
   },