React input formatting

formatted-input.jsx

/** @jsx React.DOM */
"use strict";

// An <input /> component that applies a format function to the value
// on initial render and when the element loses focus.
//
// Usage:
//
// <FormattedInput format={Math.round} valueLink={this.linkState("value")} />
//

var React = require("react");
var type = require("core-util-is");
var LinkedStateMixin = require("react/lib/LinkedStateMixin");

module.exports = React.createClass({
  mixins: [LinkedStateMixin],

  getInitialState: function() {
    var value = String(this.props.valueLink.value);
    return {
      value: this.applyFormat(value),
    };
  },

  componentWillReceiveProps: function(props) {
    var value = props.valueLink.value;
    this.setState({ value: this.applyFormat(value) });
  },

  applyFormat: function(value) {
    if (type.isFunction(this.props.format)) {
      return this.props.format.call(null, value);
    }
    return value;
  },

  setValue: function(value) {
    this.props.valueLink.requestChange(value);
  },

  format: function() {
    this.setValue(this.applyFormat(this.state.value));
  },

  render: function() {
    return this.transferPropsTo(
      <input onBlur={this.format} valueLink={this.linkState("value")} />
    );
  },
});