Update syntax in component and examples

insin · insin · commit db7335be221f · 2018-01-26T12:41:20.000+10:00
diff --git a/README.md b/README.md
@@ -10,15 +10,13 @@ A [React](http://facebook.github.io/react/) component for `<input>` masking, bui
 
 ### npm
 
-`MaskedInput` can be used on the server, or bundled for the client using an npm-compatible packaging system such as [Browserify](http://browserify.org/) or [webpack](http://webpack.github.io/).
-
 ```
 npm install react-maskedinput --save
 ```
 
 ### Browser bundle
 
-The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with.
+The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` variable to work with.
 
 * [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)
 * [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)
@@ -28,21 +26,19 @@ The browser bundle exposes a global `MaskedInput` variable and expects to find a
 Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:
 
 ```javascript
-var React = require('react')
-var MaskedInput = require('react-maskedinput')
+import React from 'react'
+import MaskedInput from 'react-maskedinput'
 
-var CreditCardDetails = React.createClass({
-  state: {
+class CreditCardDetails extends React.Component {
+  state = {
     card: '',
     expiry: '',
     ccv: ''
-  },
+  }
 
-  _onChange(e) {
-    var stateChange = {}
-    stateChange[e.target.name] = e.target.value
-    this.setState(stateChange)
-  },
+  _onChange = (e) => {
+    this.setState({[e.target.name]: e.target.value})
+  }
 
   render() {
     return <div className="CreditCardDetails">
@@ -60,28 +56,26 @@ var CreditCardDetails = React.createClass({
       </label>
     </div>
   }
-})
+}
 ```
 
 Create some wrapper components if you have a masking configuration which will be reused:
 
 ```javascript
-var CustomInput = React.createClass({
-  render() {
-    return <MaskedInput
-      mask="1111-WW-11"
-      placeholder="1234-WW-12"
-      size="11"
-      {...this.props}
-      formatCharacters={{
-        'W': {
-          validate(char) { return /\w/.test(char ) },
-          transform(char) { return char.toUpperCase() }
-        }
+function CustomInput(props) {
+  return <MaskedInput
+    mask="1111-WW-11"
+    placeholder="1234-WW-12"
+    size="11"
+    {...props}
+    formatCharacters={{
+      'W': {
+        validate(char) { return /\w/.test(char ) },
+        transform(char) { return char.toUpperCase() }
       }
-    }/>
-  }
-})
+    }}
+  />
+}
 ```
 
 ## Props
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -27,9 +27,7 @@ class App extends React.Component {
   }
 
   _onChange = (e) => {
-    const stateChange = {}
-    stateChange[e.target.name] = e.target.value
-    this.setState(stateChange)
+    this.setState({[e.target.name]: e.target.value})
   }
 
   _changePattern = (e) => {
@@ -99,7 +97,7 @@ class App extends React.Component {
         <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>
+      <p>Custom format character (<code>W=[a-zA-Z0-9_]</code>, transformed to uppercase) and placeholder character (en space):</p>
       <div className="form-field">
         <label htmlFor="custom">Custom:</label>
         <CustomInput name="custom" id="custom" onChange={this._onChange}/>
@@ -112,7 +110,7 @@ class App extends React.Component {
   }
 }
 
-const CustomInput = (props) =>
+let CustomInput = (props) =>
   <MaskedInput
     mask="1111-WW-11"
     placeholder="1234-WW-12"
@@ -121,8 +119,8 @@ const CustomInput = (props) =>
     {...props}
     formatCharacters={{
       'W': {
-        validate(char) { return /\w/.test(char) },
-        transform(char) { return char.toUpperCase() }
+        validate: (char) => /\w/.test(char),
+        transform: (char) => char.toUpperCase()
       }
     }}
   />
diff --git a/src/index.js b/src/index.js
@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import InputMask from 'inputmask-core'
 
-var KEYCODE_Z = 90
-var KEYCODE_Y = 89
+let KEYCODE_Z = 90
+let KEYCODE_Y = 89
 
 function isUndo(e) {
   return (e.ctrlKey || e.metaKey) && e.keyCode === (e.shiftKey ? KEYCODE_Y : KEYCODE_Z)
@@ -14,17 +14,16 @@ function isRedo(e) {
 }
 
 function getSelection (el) {
-  var start, end, rangeEl, clone
-
+  let start, end
   if (el.selectionStart !== undefined) {
     start = el.selectionStart
     end = el.selectionEnd
   }
   else {
     try {
       el.focus()
-      rangeEl = el.createTextRange()
-      clone = rangeEl.duplicate()
+      let rangeEl = el.createTextRange()
+      let clone = rangeEl.duplicate()
 
       rangeEl.moveToBookmark(document.selection.createRange().getBookmark())
       clone.setEndPoint('EndToStart', rangeEl)
@@ -39,16 +38,14 @@ function getSelection (el) {
 }
 
 function setSelection(el, selection) {
-  var rangeEl
-
   try {
     if (el.selectionStart !== undefined) {
       el.focus()
       el.setSelectionRange(selection.start, selection.end)
     }
     else {
       el.focus()
-      rangeEl = el.createTextRange()
+      let rangeEl = el.createTextRange()
       rangeEl.collapse(true)
       rangeEl.moveStart('character', selection.start)
       rangeEl.moveEnd('character', selection.end - selection.start)
@@ -59,18 +56,19 @@ function setSelection(el, selection) {
 }
 
 class MaskedInput extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this._onChange = this._onChange.bind(this)
-    this._onKeyDown = this._onKeyDown.bind(this)
-    this._onPaste = this._onPaste.bind(this)
-    this._onKeyPress = this._onKeyPress.bind(this)
-    this._updateInputSelection = this._updateInputSelection.bind(this)
+  static propTypes = {
+    mask: PropTypes.string.isRequired,
+
+    formatCharacters: PropTypes.object,
+    placeholderChar: PropTypes.string
+  }
+
+  static defaultProps = {
+    value: ''
   }
 
   componentWillMount() {
-    var options = {
+    let options = {
       pattern: this.props.mask,
       value: this.props.value,
       formatCharacters: this.props.formatCharacters
@@ -129,11 +127,11 @@ class MaskedInput extends React.Component {
     setSelection(this.input, this.mask.selection)
   }
 
-  _onChange(e) {
+  _onChange = (e) => {
     // console.log('onChange', JSON.stringify(getSelection(this.input)), e.target.value)
 
-    var maskValue = this.mask.getValue()
-    var incomingValue = e.target.value
+    let maskValue = this.mask.getValue()
+    let incomingValue = e.target.value
     if (incomingValue !== maskValue) { // only modify mask if form contents actually changed
       this._updateMaskSelection()
       this.mask.setValue(incomingValue) // write the whole updated value into the mask
@@ -146,7 +144,7 @@ class MaskedInput extends React.Component {
     }
   }
 
-  _onKeyDown(e) {
+  _onKeyDown = (e) => {
     // console.log('onKeyDown', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
 
     if (isUndo(e)) {
@@ -176,7 +174,7 @@ class MaskedInput extends React.Component {
       e.preventDefault()
       this._updateMaskSelection()
       if (this.mask.backspace()) {
-        var value = this._getDisplayValue()
+        let value = this._getDisplayValue()
         e.target.value = value
         if (value) {
           this._updateInputSelection()
@@ -188,7 +186,7 @@ class MaskedInput extends React.Component {
     }
   }
 
-  _onKeyPress(e) {
+  _onKeyPress = (e) => {
     // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
 
     // Ignore modified key presses
@@ -206,7 +204,7 @@ class MaskedInput extends React.Component {
     }
   }
 
-  _onPaste(e) {
+  _onPaste = (e) => {
     // console.log('onPaste', JSON.stringify(getSelection(this.input)), e.clipboardData.getData('Text'), e.target.value)
 
     e.preventDefault()
@@ -215,15 +213,15 @@ class MaskedInput extends React.Component {
     if (this.mask.paste(e.clipboardData.getData('Text'))) {
       e.target.value = this.mask.getValue()
       // Timeout needed for IE
-      setTimeout(this._updateInputSelection.bind(this), 0)
+      setTimeout(() => this._updateInputSelection(), 0)
       if (this.props.onChange) {
         this.props.onChange(e)
       }
     }
   }
 
   _getDisplayValue() {
-    var value = this.mask.getValue()
+    let value = this.mask.getValue()
     return value === this.mask.emptyValue ? '' : value
   }
 
@@ -254,27 +252,16 @@ class MaskedInput extends React.Component {
   }
 
   render() {
-    var ref = r => { this.input = r }
-    var maxLength = this.mask.pattern.length
-    var value = this._getDisplayValue()
-    var eventHandlers = this._getEventHandlers()
-    var { size = maxLength, placeholder = this.mask.emptyValue } = this.props
-
-    var { placeholderChar, formatCharacters, ...cleanedProps } = this.props // eslint-disable-line
-    var inputProps = { ...cleanedProps, ...eventHandlers, ref, maxLength, value, size, placeholder }
+    let ref = r => { this.input = r }
+    let maxLength = this.mask.pattern.length
+    let value = this._getDisplayValue()
+    let eventHandlers = this._getEventHandlers()
+    let { size = maxLength, placeholder = this.mask.emptyValue } = this.props
+
+    let { placeholderChar, formatCharacters, ...cleanedProps } = this.props // eslint-disable-line no-unused-vars
+    let inputProps = { ...cleanedProps, ...eventHandlers, ref, maxLength, value, size, placeholder }
     return <input {...inputProps} />
   }
 }
 
-MaskedInput.propTypes = {
-  mask: PropTypes.string.isRequired,
-
-  formatCharacters: PropTypes.object,
-  placeholderChar: PropTypes.string
-}
-
-MaskedInput.defaultProps = {
-  value: ''
-}
-
 export default MaskedInput
