Last active
May 27, 2017 18:18
-
-
Save coderberry/33acdb9e9a59446594b2 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
A found a final implementation without react-hooks.
https://medium.com/@lawrentiy/react-material-ui-vmasker-24d0940e3930#.kynhh6cda