Created
February 6, 2015 21:34
-
-
Save coderberry/3308adf1bb27b7e9ced3 to your computer and use it in GitHub Desktop.
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: this.props.value | |
} | |
}, | |
propTypes: { | |
mask: React.PropTypes.string, | |
value: 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() { | |
console.log("NEW VAL: ", this.state.value); | |
// 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
Hello there,
its seems that is missing the TextField class. Its not working here. Do you have any idea why? Thank you.