<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="react@*" data-semver="0.12.2" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script data-require="react-bootstrap@0.13.0" data-semver="0.13.0" src="//github.com/react-bootstrap/react-bootstrap/releases/download/v0.13.0/react-bootstrap.js"></script>
<script src="https://rawgit.com/rsamec/react-binding/master/dist/react-binding.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="script.js"></script>
</body>
</html>
var Binder = Binder.default
var Hobby = React.createClass({
handleClick: function (e) {
e.preventDefault();
return this.props.onDelete(this.props.model.value);
},
frequencyName: function () {
return "frequency" + this.props.index;
},
hobbyName:function(){
return (this.props.index + 1) + ". hobby name";
},
render: function () {
return (
<div>
<ReactBootstrap.Input type='text' label={this.hobbyName()} valueLink={Binder.bindTo(this.props.model, "HobbyName")}
buttonAfter={<ReactBootstrap.Button onClick={this.handleClick}>Delete</ReactBootstrap.Button>} />
<label>Frequency:</label>
<RadioGroup
name={this.frequencyName()}
valueLink={Binder.bindTo(this.props.model, "Frequency")}
>
<div>
<ReactBootstrap.Input label="Daily" groupClassName="radio inline" wrapperClassName="radio inline" type="radio" value="Daily" />
<ReactBootstrap.Input label="Weekly" groupClassName="radio inline" type="radio" value="Weekly" />
<ReactBootstrap.Input label="Monthly" groupClassName="radio inline" type="radio" value="Monthly" />
</div>
</RadioGroup>
<CheckBoxInput type='checkbox' label="Is this a paid hobby?" model={Binder.bindTo(this.props.model, "Paid")} />
<CheckBoxInput type='checkbox' label="Would you recommend this hobby to a friend?" model={Binder.bindTo(this.props.model, "Recommendation")} />
</div>
);
}
});
var HobbyForm = React.createClass({
getInitialState: function () {
return {data: {}};
},
addHobby: function (e) {
if (this.state.data.Hobbies === undefined)
this.state.data.Hobbies = []
this.state.data.Hobbies.push({});
this.setState({data: this.state.data})
},
render: function () {
return (
<div>
<ReactBootstrap.Panel header="Hobby form" bsStyle="primary">
<div >
<PersonComponent personModel={Binder.bindToState(this,"data", "Person")} />
<ReactBootstrap.Button onClick={this.addHobby}>Add hobby</ReactBootstrap.Button>
<HobbyList model={Binder.bindArrayToState(this,"data", "Hobbies")} />
</div>
</ReactBootstrap.Panel>
<div>
<PrettyJson json={this.state.data} />
</div>
</div>
);
}
});
var HobbyList = React.createClass({
handleDelete: function (hobby) {
return this.props.model.remove(hobby);
},
render: function () {
if (this.props.model.items === undefined) return <span>There are no hobbies.</span>;
var hobbyNodes = this.props.model.items.map(function (hobby, index) {
return (
<Hobby model={hobby} key={index} index={index} onDelete={this.handleDelete} />
);
}, this);
return (
<div className="commentList">
{hobbyNodes}
</div>
);
}
});
var PersonComponent = React.createClass({
render: function () {
return (
<div>
<ReactBootstrap.Input label="First name" type="text" valueLink={Binder.bindTo(this.props.personModel, "FirstName")} />
<ReactBootstrap.Input label="Last name" type="text" valueLink={Binder.bindTo(this.props.personModel, "LastName")} />
<ReactBootstrap.Input label="Email" type="text" valueLink={Binder.bindTo(this.props.personModel, "Contact.Email")} />
</div>
);
}
});
var TextBoxInput = React.createClass({
render: function () {
var valueModel = this.props.model;
var handleChange = function (e) {
valueModel.value = e.target.value;
}
return (
<input type='text' onChange={handleChange} value={valueModel.value} />
)
}
});
var CheckBoxInput = React.createClass({
render: function () {
var valueModel = this.props.model;
var handleChange = function (e) {
valueModel.value = e.target.checked;
}
return (
<ReactBootstrap.Input type='checkbox' label={this.props.label} onChange={handleChange} checked={valueModel.value} />
)
}
});
var PrettyJson = React.createClass({
replacer: function (match, pIndent, pKey, pVal, pEnd) {
var key = '<span class=json-key>';
var val = '<span class=json-value>';
var str = '<span class=json-string>';
var r = pIndent || '';
if (pKey)
r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
if (pVal)
r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
return r + (pEnd || '');
},
prettyPrint: function (obj) {
var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
return JSON.stringify(obj, null, 3)
.replace(/&/g, '&').replace(/\\"/g, '"')
.replace(/</g, '<').replace(/>/g, '>')
.replace(jsonLine, this.replacer);
},
render: function () {
return (<pre dangerouslySetInnerHTML={{__html: this.prettyPrint(this.props.json)}}></pre>);
}
})
var RadioGroup = React.createClass({
displayName: 'RadioGroup',
getInitialState: function () {
// check the first block of comment in `setCheckedRadio`
return {defaultValue: this.props.defaultValue};
},
componentDidMount: function () {
this.setRadioNames();
this.setCheckedRadio();
},
componentDidUpdate: function () {
this.setRadioNames();
this.setCheckedRadio();
},
render: function () {
return (
React.DOM.div({onChange: this.props.onChange},
this.props.children
)
);
},
setRadioNames: function () {
// stay DRY and don't put the same `name` on all radios manually. Put it on
// the tag and it'll be done here
var $radios = this.getRadios();
for (var i = 0, length = $radios.length; i < length; i++) {
$radios[i].setAttribute('name', this.props.name);
}
},
getRadios: function () {
return this.getDOMNode().querySelectorAll('input[type="radio"]');
},
setCheckedRadio: function () {
var $radios = this.getRadios();
// if `value` is passed from parent, always use that value. This is similar
// to React's controlled component. If `defaultValue` is used instead,
// subsequent updates to defaultValue are ignored. Note: when `defaultValue`
// and `value` are both passed, the latter takes precedence, just like in
// a controlled component
var destinationValue = this.props.value != null
? this.props.value
: this.state.defaultValue;
for (var i = 0, length = $radios.length; i < length; i++) {
var $radio = $radios[i];
// intentionally use implicit conversion for those who accidentally used,
// say, `valueToChange` of 1 (integer) to compare it with `value` of "1"
// (auto conversion to valid html value from React)
if ($radio.value == destinationValue) {
$radio.checked = true;
}
}
},
getCheckedValue: function () {
var $radios = this.getRadios();
for (var i = 0, length = $radios.length; i < length; i++) {
if ($radios[i].checked) {
return $radios[i].value;
}
}
return null;
}
});
React.render(
<HobbyForm />,
document.getElementById('content')
);