-
Notifications
You must be signed in to change notification settings - Fork 196
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
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 | ||
|
@@ -57,20 +58,7 @@ function setSelection(el, selection) { | |
catch (e) { /* not focused or not visible */ } | ||
} | ||
|
||
var MaskedInput = React.createClass({ | ||
propTypes: { | ||
mask: React.PropTypes.string.isRequired, | ||
|
||
formatCharacters: React.PropTypes.object, | ||
placeholderChar: React.PropTypes.string | ||
}, | ||
|
||
getDefaultProps() { | ||
return { | ||
value: '' | ||
} | ||
}, | ||
|
||
class MaskedInput extends React.Component { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should probably add babel to the build pipeline? Pretty sure shipping pure ES6 will break everyone's builds. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isn't nwb generating a UMD and a modules build? Doesn't this already get transformed in the UMD build? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure, |
||
componentWillMount() { | ||
var options = { | ||
pattern: this.props.mask, | ||
|
@@ -81,7 +69,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 +90,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 +140,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 +182,7 @@ var MaskedInput = React.createClass({ | |
} | ||
} | ||
} | ||
}, | ||
} | ||
|
||
_onKeyPress(e) { | ||
// console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value) | ||
|
@@ -212,7 +200,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 +216,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 +230,7 @@ var MaskedInput = React.createClass({ | |
: 'onKeyPress' | ||
} | ||
return 'onKeyPress' | ||
}, | ||
} | ||
|
||
_getEventHandlers() { | ||
return { | ||
|
@@ -251,27 +239,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 } | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should get all the There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop-types
requiresReact ^0.14.9
orReact ^15.3.0