Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use class instead React.createClass #94

Merged
merged 3 commits into from
Jul 4, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions demo/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand All @@ -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">
Expand Down Expand Up @@ -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'))
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"inputmask-core": "^2.1.1"
},
"peerDependencies": {
"react": "0.14.x || 15.x.x"
"react": "0.14.x || 15.x.x",
Copy link

@MichaelDeBoey MichaelDeBoey May 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prop-types requires React ^0.14.9 or React ^15.3.0

"prop-types": "^15.5.8"
},
"devDependencies": {
"eslint-config-jonnybuchanan": "2.0.3",
Expand Down
78 changes: 43 additions & 35 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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 = {
Expand All @@ -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) {
Expand All @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -194,7 +191,7 @@ var MaskedInput = React.createClass({
}
}
}
},
}

_onKeyPress(e) {
// console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
Expand All @@ -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)
Expand All @@ -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') {
Expand All @@ -242,7 +239,7 @@ var MaskedInput = React.createClass({
: 'onKeyPress'
}
return 'onKeyPress'
},
}

_getEventHandlers() {
return {
Expand All @@ -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 }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should get all the var's to const and let as appropriate while you're at it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

es5 to es6 was not my purpose, I just wanted to avoid React warnings. I think it will be better to do these things in other PR, cause this PR relates to React.createClass only

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