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; |
A found a final implementation without react-hooks.
https://medium.com/@lawrentiy/react-material-ui-vmasker-24d0940e3930#.kynhh6cda
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated with classes, react-dom and vanilla-masker (remove jquery \o/):
Add this to your components:
Then render (in example 'number' is the state we want to change):