Skip to content

Instantly share code, notes, and snippets.

@christhomas
Last active February 6, 2016 23:05
Show Gist options
  • Save christhomas/cd77f0f991b777e6fb24 to your computer and use it in GitHub Desktop.
Save christhomas/cd77f0f991b777e6fb24 to your computer and use it in GitHub Desktop.
class InputField extends React.Component<InputFieldProps, any>
{
componentDidMount()
{
// Manually trigger validation rules to test whether the values set are ok or not
this.props.onChange({
target:{
value:this.props.value
}
});
}
render() {
return (
<div className="input-field">
<Col md={12}>
<label className="control-label">{this.props.label}</label>
</Col>
<Col md={4}>
<Input type="text"
hasFeedback
bsStyle={this.props.valid ? "success" : "error"}
defaultValue={this.props.value}
onChange={this.props.onChange} />
</Col>
<Col md={8}>
{this.props.children}
</Col>
</div>
);
}
}
class Inventory extends React.Component<IInventoryProps, IInventoryState> {
//......lots of other code here
return _.map(this.props.mediationNetwork.networkParameters,(param,index:string) => {
if(!param || typeof(this.state.fields[param]) == "undefined"){
return;
}
let field:CpNetworkConfigField = this.state.fields[param];
let label = this.props.text[param];
let value = this.state.networkParameters[index];
let format = field.format || "none";
let enabled = this.state.supportedFormats[format] || false;
let valid = field.isValid;
let text = this.props.text[param+"_label"];
let cbChange = this.onChange.bind(this,field.validator,param);
let cbToggle = this.onToggleFormat.bind(this,format);
if(!param || !index || !field.type || !label){
console.log("skipping field",[param,index,field.type,label]);
return;
}
console.log("actual field[2] = ",field);
switch(field.type){
case "input":{
return (
<Row key={index}>
<InputField label={label} value={value}
valid={valid} onChange={cbChange}>
{text}
</InputField>
</Row>
);
}
case "toggle":{
return (
<Row key={index}>
<ToggleField label={label} enabled={enabled}
value={value} valid={valid}
onChange={cbChange} onToggle={cbToggle}>
{text}
</ToggleField>
</Row>
);
}
}
});
}
/// ..... other code
private onChange (validator:string, field:string, event:any)
{
let result = new RegExp(validator).test(event.target.value);
console.log("onChange["+field+"], expected isValid = ",result);
let t = Immutable.fromJS(this.state)
.mergeDeep({
fields: Immutable.Map().set(field, {
isValid: result
}).toJS()
})
.toJS();
this.setState(
t,
() => {
console.log("onChange["+field+"] actual field[1] = ",this.state.fields[field]);
}
);
console.log("requested state tree = ",t);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment