hello.js

// Generated by CoffeeScript 1.9.2
var AnswerMultipleChoiceQuestion, AnswerRadioInput, DoodleArea, IntervalMixin, MyForm, MyForm2, NeatComponent, NeatComponent2, NumberComponent, RichText, Since2014, Timer, done, log, num, page, rclass, rtypes, the_choices, uniqueId,
  slice = [].slice;

rclass = React.createClass;

rtypes = React.PropTypes;

log = function() {
  var s;
  s = 1 <= arguments.length ? slice.call(arguments, 0) : [];
  return console.log.apply(console, s);
};

uniqueId = function(s) {
  return "" + s + (Math.random());
};

AnswerRadioInput = rclass({
  propTypes: {
    id: rtypes.string,
    name: rtypes.string.isRequired,
    label: rtypes.string.isRequired,
    value: rtypes.string.isRequired,
    checked: rtypes.bool,
    onChanged: rtypes.func.isRequired
  },
  getDefaultProps: function() {
    return {
      id: null,
      checked: false
    };
  },
  componentWillReceiveProps: function(nextProps) {
    if (nextProps.checked != null) {
      return this.setState({
        checked: nextProps.checked
      });
    }
  },
  getInitialState: function() {
    var id;
    id = this.props.id ? this.props.id : uniqueId("radio-");
    return {
      checked: !!this.props.checked,
      id: id,
      name: id
    };
  },
  handleChanged: function(e) {
    var checked;
    checked = e.target.checked;
    this.setState({
      checked: checked
    });
    if (checked) {
      return this.props.onChanged(this.props.value);
    }
  },
  render: function() {
    return React.createElement("div", {
      "className": "radio"
    }, React.createElement("label", {
      "htmlFor": this.props.id
    }, React.createElement("input", {
      "type": "radio",
      "name": this.props.name,
      "id": this.props.id,
      "value": this.props.value,
      "checked": this.state.checked,
      "onChange": this.handleChanged
    }), "\u00a0\u00a0", this.props.label));
  }
});

AnswerMultipleChoiceQuestion = rclass({
  propTypes: {
    value: rtypes.string,
    choices: rtypes.array.isRequired,
    onCompleted: rtypes.func.isRequired
  },
  getInitialState: function() {
    return {
      id: uniqueId('multiple-choices-'),
      value: this.props.value
    };
  },
  handleChanged: function(value) {
    log("AnswerMultipleChoiceQuestion.handleChanged ", value);
    this.setState({
      value: value
    });
    return this.props.onCompleted(value);
  },
  renderChoices: function() {
    var choice, i, j, len, ref, results;
    ref = this.props.choices;
    results = [];
    for (i = j = 0, len = ref.length; j < len; i = ++j) {
      choice = ref[i];
      results.push(React.createElement(AnswerRadioInput, {
        "id": "choice-" + i,
        "key": "choice-" + i,
        "name": this.state.id,
        "label": choice,
        "value": choice,
        "checked": this.state.value === choice,
        "onChanged": this.handleChanged
      }));
    }
    return results;
  },
  render: function() {
    return React.createElement("div", {
      "className": "form-group"
    }, React.createElement(Timer, null), React.createElement("label", {
      "className": "survey-item-label",
      "htmlFor": this.state.id
    }, this.props.label), React.createElement("div", {
      "className": "survey-item-content"
    }, this.renderChoices()));
  }
});

NeatComponent = rclass({
  render: function() {
    var n;
    return React.createElement("div", {
      "className": "neat-component"
    }, (this.props.showTitle ? React.createElement("h1", null, "Showing this title") : void 0), React.createElement("hr", null), (function() {
      var j, results;
      results = [];
      for (n = j = 1; j <= 5; n = ++j) {
        results.push(React.createElement("p", {
          "key": n
        }, "This line has been printed ", n, " times"));
      }
      return results;
    })());
  }
});

NeatComponent2 = rclass({
  title: function() {
    if (this.props.showTitle) {
      return React.createElement("h1", null, "Showing this title");
    } else {
      return React.createElement("h2", null, "Instead, just a subtitle");
    }
  },
  loop0: function() {
    var j, n, results;
    results = [];
    for (n = j = 1; j <= 10; n = ++j) {
      results.push(React.createElement("div", {
        "key": n
      }, "Line ", n));
    }
    return results;
  },
  loop: function() {
    var j, n, results;
    results = [];
    for (n = j = 1; j <= 3; n = ++j) {
      results.push(React.createElement("div", {
        "key": n
      }, "Line ", n));
    }
    return results;
  },
  render: function() {
    return React.createElement("div", {
      "className": "neat-component"
    }, React.createElement(NeatComponent, null), this.title(), React.createElement("hr", null), this.loop());
  }
});

Timer = rclass({
  getInitialState: function() {
    return {
      secondsElapsed: 0
    };
  },
  tick: function() {
    return this.setState({
      secondsElapsed: this.state.secondsElapsed + 1
    });
  },
  componentDidMount: function() {
    return this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    return clearInterval(this.interval);
  },
  render: function() {
    return React.createElement("div", null, " Seconds Elapsed: ", this.state.secondsElapsed, " ");
  }
});

IntervalMixin = {
  setInterval: function(cb, interval) {
    var token;
    token = setInterval(cb, interval);
    this.__intervals.push(token);
    return token;
  },
  componentDidMount: function() {
    return this.__intervals = [];
  },
  componentWillUnmount: function() {
    var j, len, ref, results, token;
    ref = this.__intervals;
    results = [];
    for (j = 0, len = ref.length; j < len; j++) {
      token = ref[j];
      results.push(clearInterval(token));
    }
    return results;
  }
};

Since2014 = rclass({
  mixins: [IntervalMixin],
  componentDidMount: function() {
    return this.setInterval(this.forceUpdate.bind(this), 1000);
  },
  render: function() {
    var from, to;
    from = Number(new Date(2014, 0, 1));
    to = Date.now();
    return React.createElement("div", null, "Seconds since 2014: ", Math.round((to - from) / 1000));
  }
});

DoodleArea = rclass({
  render: function() {
    return React.createElement("div", null, "Describe your doodle: ", React.createElement(RichText, null), React.createElement("canvas", {
      "ref": "mainCanvas",
      "width": "200",
      "height": "100",
      "style": {
        border: '1px solid #000000'
      }
    }));
  },
  componentDidMount: function() {
    var canvasNode, ctx;
    canvasNode = this.refs.mainCanvas.getDOMNode();
    ctx = canvasNode.getContext("2d");
    ctx.fillStyle = "#0000ff";
    return ctx.fillRect(0, 0, 150, 75);
  }
});

RichText = rclass({
  render: function() {
    return React.createElement("div", {
      "ref": "editableDiv",
      "contentEditable": "true",
      "width": "200",
      "height": "100",
      "style": {
        border: '1px solid #000000'
      },
      "onKeyUp": this.handleKeyUp
    }, window.localStorage.doodle);
  },
  handleKeyUp: function() {
    var editor, html;
    editor = this.refs.editableDiv.getDOMNode();
    html = editor.innerHTML;
    window.localStorage.doodle = html;
    return console.log(html);
  }
});

MyForm = rclass({
  submitHandler: function(event) {
    var helloTo;
    event.preventDefault();
    helloTo = this.refs.helloTo.getDOMNode().value;
    return log(helloTo);
  },
  render: function() {
    return React.createElement("form", {
      "onSubmit": this.submitHandler
    }, React.createElement("input", {
      "ref": "helloTo",
      "type": "text",
      "defaultValue": "Hello World!"
    }), React.createElement("br", null), React.createElement("button", {
      "type": "submit"
    }, "Speak"));
  }
});

MyForm2 = rclass({
  getInitialState: function() {
    return {
      helloTo: 'Hello world!'
    };
  },
  handleChange: function(event) {
    return this.setState({
      helloTo: event.target.value.toUpperCase()
    });
  },
  submitHandler: function(event) {
    event.preventDefault();
    return log(this.state.helloTo);
  },
  render: function() {
    return React.createElement("form", {
      "onSubmit": this.submitHandler
    }, React.createElement("input", {
      "type": "text",
      "value": this.state.helloTo,
      "onChange": this.handleChange
    }), React.createElement("br", null), "(", this.state.helloTo.length, " characters)", React.createElement("button", {
      "type": 'submit'
    }, "Speak"));
  }
});

NumberComponent = rclass({
  render: function() {
    return React.createElement("div", null, this.props.number);
  }
});

num = Math.random();

console.log(React.renderToString(React.createElement(NumberComponent, {
  "number": num
})));

done = function(event) {
  return console.log("done", event);
};

the_choices = ['First', 'Next', 'Last', 'Final Option'];

page = function() {
  return React.createElement("div", null, React.createElement(MyForm, null), React.createElement(MyForm2, null), React.createElement(DoodleArea, null), React.createElement(Since2014, null), React.createElement("h1", null, "React Testbed"), React.createElement(Timer, null), React.createElement("hr", null), React.createElement(AnswerMultipleChoiceQuestion, {
    "choices": the_choices,
    "onCompleted": done
  }));
};

console.log(React.renderToString(page()));

console.log(React.renderToStaticMarkup(page()));

React.render(page(), document.getElementById('example'));