-
-
Save fnnzzz/d03389415a6b0a328a39c11d1aa44cc5 to your computer and use it in GitHub Desktop.
MaskedTextField with material-ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx React.DOM */ | |
var React = require('react') | |
, mui = require('material-ui') | |
, { TextField } = mui | |
, $ = require('jquery'); | |
require('jquery.inputmask'); | |
var MaskedTextField = React.createClass({ | |
getInitialState() { | |
return { | |
value: '1234567890' | |
} | |
}, | |
propTypes: { | |
mask: React.PropTypes.string, | |
errorText: React.PropTypes.string, | |
floatingLabelText: React.PropTypes.string, | |
hintText: React.PropTypes.string, | |
id: React.PropTypes.string, | |
multiLine: React.PropTypes.bool, | |
onBlur: React.PropTypes.func, | |
onChange: React.PropTypes.func, | |
onFocus: React.PropTypes.func, | |
type: React.PropTypes.string | |
}, | |
render() { | |
// don't render anything, this is where we open the portal | |
return <div/>; | |
}, | |
componentDidMount: function() { | |
var node = this.getDOMNode(); | |
var textField = ( | |
<TextField | |
floatingLabelText={this.props.floatingLabelText} | |
id={this.props.id} | |
value={this.state.value} | |
multiLine={this.props.multiLine} | |
onBlur={this.props.onBlur} | |
onChange={this.props.onChange} | |
onFocus={this.props.onFocus} | |
type={this.props.type} /> | |
); | |
// start a new React render tree with our node and the children | |
// passed in from above, this is the other side of the portal. | |
var portal = React.render(textField, node); | |
var $input = $(portal._getInputNode()); | |
$input.inputmask({ | |
mask: this.props.mask, | |
showMaskOnHover: false, | |
isComplete: function(buffer, opts) { | |
var val = buffer.join('').replace(/\D/g, ''); | |
this.setState({ value: val }); | |
}.bind(this) | |
}); | |
}, | |
componentWillUnmount: function() { | |
var node = this.getDOMNode(); | |
React.unmountComponentAtNode(node); | |
} | |
}); | |
module.exports = MaskedTextField; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment