Skip to content

Instantly share code, notes, and snippets.

@coderberry
Created February 6, 2015 21:34
Show Gist options
  • Save coderberry/3308adf1bb27b7e9ced3 to your computer and use it in GitHub Desktop.
Save coderberry/3308adf1bb27b7e9ced3 to your computer and use it in GitHub Desktop.
/** @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;
@willalberton
Copy link

Hello there,
its seems that is missing the TextField class. Its not working here. Do you have any idea why? Thank you.

@coderberry
Copy link
Author

@willalberton The TextField class comes from mui

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment