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'
2+
3+ import React from 'react'
4+ import { render } from 'react-dom'
565
57- var PATTERNS = [
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 : '' ,
7223 leading : '' ,
7324 custom : '' ,
7425 changing : '' ,
75- pattern : '1111 1111'
26+ phone : '' ,
27+ pattern : '1111 1111' ,
28+ cardPattern : '1111 1111 1111 1111'
7629 }
7730 } ,
7831
7932 _onChange ( e ) {
80- var stateChange = { }
33+ const stateChange = { }
8134 stateChange [ e . target . name ] = e . target . value
8235 this . setState ( stateChange )
8336 } ,
8639 this . setState ( { pattern : e . target . value } )
8740 } ,
8841
42+ _onCardChange ( e ) {
43+ if ( / ^ 3 [ 4 7 ] / . test ( e . target . value ) ) {
44+ this . setState ( { cardPattern : "1111 111111 11111" } )
45+ } else {
46+ this . setState ( { cardPattern : '1111 1111 1111 1111' } )
47+ }
48+ } ,
49+
8950 render ( ) {
9051 return < div className = "App" >
91- < h1 > < code > << a href = "https://github.com/insin/react-maskedinput" > MaskedInput</ a > /></ code > </ h1 >
52+ < h1 >
53+ < code > << a href = "https://github.com/insin/react-maskedinput" > MaskedInput</ a > /></ code >
54+ </ h1 >
9255 < p className = "lead" > A React component which creates a masked < code > <input/></ code > </ p >
9356 < div className = "form-field" >
9457 < label htmlFor = "card" > Card Number:</ label >
@@ -112,6 +75,10 @@ <h1><code><<a href="https://github.com/insin/react-maskedinput">MaskedInput</
11275 < label htmlFor = "plate" > License Plate:</ label >
11376 < MaskedInput mask = "AAA 1111" name = "plate" id = "plate" onChange = { this . _onChange } placeholder = "ABC 1234" />
11477 </ div >
78+ < div className = "form-field" >
79+ < label htmlFor = "phone" > Phone Number:</ label >
80+ < MaskedInput mask = "(111) 111-1111" name = "phone" id = "phone" onChange = { this . _onChange } placeholder = "(999) 999-9999" />
81+ </ div >
11582 < p > Mask placeholder characters can be escaped with a leading < code > \</ code > to use them as static contents:</ p >
11683 < div className = "form-field" >
11784 < label htmlFor = "escaped" > Escaped:</ label >
@@ -130,9 +97,14 @@ <h1><code><<a href="https://github.com/insin/react-maskedinput">MaskedInput</
13097 < div className = "form-field" >
13198 < label htmlFor = "pattern" > Pattern:</ label >
13299 < select onChange = { this . _changePattern } >
133- { PATTERNS . map ( pattern => < option value = { pattern } > { pattern } </ option > ) }
100+ { PATTERNS . map ( pattern => < option value = { pattern } key = { pattern } > { pattern } </ option > ) }
134101 </ select >
135102 </ 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 >
136108 < p > Custom format character (W=[a-zA-Z0-9_], transformed to uppercase) and placeholder character (en space):</ p >
137109 < div className = "form-field" >
138110 < label htmlFor = "custom" > Custom:</ label >
@@ -146,7 +118,7 @@ <h1><code><<a href="https://github.com/insin/react-maskedinput">MaskedInput</
146118 }
147119} )
148120
149- var CustomInput = React . createClass ( {
121+ const CustomInput = React . createClass ( {
150122 render ( ) {
151123 return < MaskedInput
152124 mask = "1111-WW-11"
@@ -156,15 +128,12 @@ <h1><code><<a href="https://github.com/insin/react-maskedinput">MaskedInput</
156128 { ...this . props }
157129 formatCharacters = { {
158130 'W' : {
159- validate ( char ) { return / \w / . test ( char ) } ,
131+ validate ( char ) { return / \w / . test ( char ) } ,
160132 transform ( char ) { return char . toUpperCase ( ) }
161133 }
162134 }
163135 } />
164136 }
165137} )
166138
167- ReactDOM . render ( < App /> , document . getElementById ( 'app' ) )
168-
169- } ( ) </ script >
170- </ body >
139+ render ( < App /> , document . getElementById ( 'demo' ) )
0 commit comments