Merge pull request insin#94 from krvital/master

Use class instead React.createClass

Author: insin

demo/src/index.js

@@ -12,9 +12,11 @@ const PATTERNS = [
   '1 1'
 ]
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+    
+    this.state = {
       card: '',
       expiry: '',
       ccv: '',
@@ -26,25 +28,25 @@ const App = React.createClass({
       pattern: '1111 1111',
       cardPattern: '1111 1111 1111 1111'
     }
-  },
+  }
 
   _onChange(e) {
     const stateChange = {}
     stateChange[e.target.name] = e.target.value
     this.setState(stateChange)
-  },
+  }
 
   _changePattern(e) {
     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">
@@ -111,24 +113,21 @@ const App = React.createClass({
       <footer><a href="https://github.com/insin/react-maskedinput">Source on GitHub</a></footer>
     </div>
   }
-})
+}
 
-const CustomInput = React.createClass({
-  render() {
-    return <MaskedInput
-      mask="1111-WW-11"
-      placeholder="1234-WW-12"
-      placeholderChar=" "
-      size="11"
-      {...this.props}
-      formatCharacters={{
-        'W': {
-          validate(char) { return /\w/.test(char) },
-          transform(char) { return char.toUpperCase() }
-        }
+const CustomInput = (props) =>
+  <MaskedInput
+    mask="1111-WW-11"
+    placeholder="1234-WW-12"
+    placeholderChar=" "
+    size="11"
+    {...props}
+    formatCharacters={{
+      'W': {
+        validate(char) { return /\w/.test(char) },
+        transform(char) { return char.toUpperCase() }
       }
-    }/>
-  }
-})
+    }}
+  />
 
 render(<App/>, document.getElementById('demo'))

package.json

@@ -32,7 +32,8 @@
     "inputmask-core": "^2.1.1"
   },
   "peerDependencies": {
-    "react": "0.14.x || 15.x.x"
+    "react": "0.14.x || 15.x.x",
+    "prop-types": "^15.5.8"
   },
   "devDependencies": {
     "eslint-config-jonnybuchanan": "2.0.3",

src/index.js

@@ -1,5 +1,6 @@
-var React = require('react')
-var InputMask = require('inputmask-core')
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputMask from 'inputmask-core'
 
 var KEYCODE_Z = 90
 var KEYCODE_Y = 89
@@ -57,19 +58,15 @@ function setSelection(el, selection) {
   catch (e) { /* not focused or not visible */ }
 }
 
-var MaskedInput = React.createClass({
-  propTypes: {
-    mask: React.PropTypes.string.isRequired,
+class MaskedInput extends React.Component {
+  constructor(props) {
+    super(props)
 
-    formatCharacters: React.PropTypes.object,
-    placeholderChar: React.PropTypes.string
-  },
-
-  getDefaultProps() {
-    return {
-      value: ''
-    }
-  },
+    this._onChange = this._onChange.bind(this)
+    this._onKeyDown = this._onKeyDown.bind(this)
+    this._onPaste = this._onPaste.bind(this)
+    this._onKeyPress = this._onKeyPress.bind(this)
+  }
 
   componentWillMount() {
     var options = {
@@ -81,7 +78,7 @@ var MaskedInput = React.createClass({
       options.placeholderChar = this.props.placeholderChar
     }
     this.mask = new InputMask(options)
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.mask !== nextProps.mask && this.props.value !== nextProps.mask) {
@@ -102,34 +99,34 @@ var MaskedInput = React.createClass({
     else if (this.props.value !== nextProps.value) {
       this.mask.setValue(nextProps.value)
     }
-  },
+  }
 
   componentWillUpdate(nextProps, nextState) {
     if (nextProps.mask !== this.props.mask) {
       this._updatePattern(nextProps)
     }
-  },
+  }
 
   componentDidUpdate(prevProps) {
     if (prevProps.mask !== this.props.mask && this.mask.selection.start) {
       this._updateInputSelection()
     }
-  },
+  }
 
-  _updatePattern: function(props) {
+  _updatePattern(props) {
     this.mask.setPattern(props.mask, {
       value: this.mask.getRawValue(),
       selection: getSelection(this.input)
     })
-  },
+  }
 
   _updateMaskSelection() {
     this.mask.selection = getSelection(this.input)
-  },
+  }
 
   _updateInputSelection() {
     setSelection(this.input, this.mask.selection)
-  },
+  }
 
   _onChange(e) {
     // console.log('onChange', JSON.stringify(getSelection(this.input)), e.target.value)
@@ -152,7 +149,7 @@ var MaskedInput = React.createClass({
     if (this.props.onChange) {
       this.props.onChange(e)
     }
-  },
+  }
 
   _onKeyDown(e) {
     // console.log('onKeyDown', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
@@ -194,7 +191,7 @@ var MaskedInput = React.createClass({
         }
       }
     }
-  },
+  }
 
   _onKeyPress(e) {
     // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
@@ -212,7 +209,7 @@ var MaskedInput = React.createClass({
         this.props.onChange(e)
       }
     }
-  },
+  }
 
   _onPaste(e) {
     // console.log('onPaste', JSON.stringify(getSelection(this.input)), e.clipboardData.getData('Text'), e.target.value)
@@ -228,12 +225,12 @@ var MaskedInput = React.createClass({
         this.props.onChange(e)
       }
     }
-  },
+  }
 
   _getDisplayValue() {
     var value = this.mask.getValue()
     return value === this.mask.emptyValue ? '' : value
-  },
+  }
 
   _keyPressPropName() {
     if (typeof navigator !== 'undefined') {
@@ -242,7 +239,7 @@ var MaskedInput = React.createClass({
       : 'onKeyPress'
     }
     return 'onKeyPress'
-  },
+  }
 
   _getEventHandlers() {
     return {
@@ -251,27 +248,38 @@ var MaskedInput = React.createClass({
       onPaste: this._onPaste,
       [this._keyPressPropName()]: this._onKeyPress
     }
-  },
+  }
 
   focus() {
     this.input.focus()
-  },
+  }
 
   blur() {
     this.input.blur()
-  },
+  }
 
   render() {
-    var ref = r => this.input = r
+    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
+    var { placeholderChar, formatCharacters, ...cleanedProps } = this.props // eslint-disable-line
     var 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: ''
+}
 
-module.exports = MaskedInput
+export default MaskedInput