Skip to content

Commit

Permalink
add number, slider, and search fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@zackify
zackify committed Feb 10, 2014
1 parent 37f4269 commit 30b9620
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 14 deletions.
3 changes: 0 additions & 3 deletions .gitignore
View file

This file was deleted.

58 changes: 53 additions & 5 deletions build/forms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var formjs = React.createClass({displayName: 'formjs',
var currentValues = this.state.values;
currentValues[element.id] = {name: element.name, value: element.value};
this.setState({values: currentValues});
console.log(this.state.values);
return false;
},
handleSubmit: function() {
Expand Down Expand Up @@ -33,7 +34,21 @@ var formjs = React.createClass({displayName: 'formjs',
{label: element.label,
name: element.name,
placeholder: element.placeholder,
value: element.value,
value: element.value,
required: element.required,
updateValues: updateValues,
id: id} );
}
else if(element.type == "number" || element.type == "range"){
return generateNumberField(
{label: element.label,
name: element.name,
type: element.type,
value: element.value,
min: element.min,
max: element.max,
step: element.step,
required: element.required,
updateValues: updateValues,
id: id} );
}
Expand All @@ -50,13 +65,14 @@ var formjs = React.createClass({displayName: 'formjs',
label: element.label,
name: element.name,
placeholder: element.placeholder,
value: element.value,
value: element.value,
required: element.required,
updateValues: updateValues,
id: id} );
}
});
return(
React.DOM.form( {ref:"form", onSubmit:this.handleSubmit},
React.DOM.form( {onSubmit:this.handleSubmit},
elements,
React.DOM.input( {type:"submit", value:this.state.form.submitText} )
)
Expand All @@ -79,7 +95,39 @@ var generateInputField = React.createClass({displayName: 'generateInputField',
return(
React.DOM.div( {className:"element textfield"},
React.DOM.label(null, this.props.label),
React.DOM.input( {type:this.props.type, placeholder:this.props.placeholder, value:this.state.value, onChange:this.handleChange})
React.DOM.input( {type: this.props.type,
placeholder: this.props.placeholder,
value: this.state.value,
required: this.props.required,
onChange: this.handleChange})
)
);
}
});

// number fields

var generateNumberField = React.createClass({displayName: 'generateNumberField',
getInitialState: function() {
return {value: this.props.value};
},
handleChange: function(e) {
var name = this.props.name;
var value = e.target.value;
this.props.updateValues({id: this.props.id, name: name, value: value});
this.setState({value: value});
},
render: function(){
return(
React.DOM.div( {className:"element number"},
React.DOM.label(null, this.props.label),
React.DOM.input(
{type: this.props.type, min:"0",
max: this.props.max,
step: this.props.step,
value: this.props.value,
required: this.props.required,
onChange: this.handleChange})
)
);
}
Expand All @@ -100,7 +148,7 @@ var generateTextarea = React.createClass({displayName: 'generateTextarea',
return(
React.DOM.div( {className:"element textarea"},
React.DOM.label(null, this.props.label),
React.DOM.textarea( {placeholder:this.props.placeholder, onChange:this.handleChange}, this.state.value)
React.DOM.textarea( {placeholder:this.props.placeholder, required:this.props.required, onChange:this.handleChange}, this.state.value)
)
);
}
Expand Down
5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
<script type="text/javascript">
var fields = [
{type: "text", name: "username", label: "new field", placeholder: "username", value: "test"},
{type: "password", name: "password", label: "password", placeholder: "password"},
{type: "radio", name: "password", label: "youre lame", placeholder: "password"},
{type: "number", name: "number", label: "choose one", min: 2,max: 25,step:3},
{type: "range", name: "number", label: "choose one", min: 4,max: 25,step:2},
{type: "search", name: "search", required: "required"},
{type: "textarea", name: "status", label: "new status", placeholder: "what's up"},
{type: "select", name: "select stuff", options: [{value: "hello", text: "this is the text"},{value: "hello2", text: "2nd text"}]}
];
Expand Down
58 changes: 53 additions & 5 deletions src/forms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var formjs = React.createClass({
var currentValues = this.state.values;
currentValues[element.id] = {name: element.name, value: element.value};
this.setState({values: currentValues});
console.log(this.state.values);
return false;
},
handleSubmit: function() {
Expand Down Expand Up @@ -33,7 +34,21 @@ var formjs = React.createClass({
label = {element.label}
name = {element.name}
placeholder = {element.placeholder}
value = {element.value}
value = {element.value}
required = {element.required}
updateValues = {updateValues}
id = {id} />;
}
else if(element.type == "number" || element.type == "range"){
return <generateNumberField
label = {element.label}
name = {element.name}
type = {element.type}
value = {element.value}
min = {element.min}
max = {element.max}
step = {element.step}
required = {element.required}
updateValues = {updateValues}
id = {id} />;
}
Expand All @@ -50,13 +65,14 @@ var formjs = React.createClass({
label = {element.label}
name = {element.name}
placeholder = {element.placeholder}
value = {element.value}
value = {element.value}
required = {element.required}
updateValues = {updateValues}
id = {id} />;
}
});
return(
<form ref="form" onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit}>
{elements}
<input type="submit" value={this.state.form.submitText} />
</form>
Expand All @@ -79,7 +95,39 @@ var generateInputField = React.createClass({
return(
<div className="element textfield">
<label>{this.props.label}</label>
<input type={this.props.type} placeholder={this.props.placeholder} value={this.state.value} onChange={this.handleChange}/>
<input type = {this.props.type}
placeholder = {this.props.placeholder}
value = {this.state.value}
required = {this.props.required}
onChange = {this.handleChange}/>
</div>
);
}
});

// number fields

var generateNumberField = React.createClass({
getInitialState: function() {
return {value: this.props.value};
},
handleChange: function(e) {
var name = this.props.name;
var value = e.target.value;
this.props.updateValues({id: this.props.id, name: name, value: value});
this.setState({value: value});
},
render: function(){
return(
<div className="element number">
<label>{this.props.label}</label>
<input
type = {this.props.type} min="0"
max = {this.props.max}
step = {this.props.step}
value = {this.props.value}
required = {this.props.required}
onChange = {this.handleChange}/>
</div>
);
}
Expand All @@ -100,7 +148,7 @@ var generateTextarea = React.createClass({
return(
<div className="element textarea">
<label>{this.props.label}</label>
<textarea placeholder={this.props.placeholder} onChange={this.handleChange}>{this.state.value}</textarea>
<textarea placeholder={this.props.placeholder} required={this.props.required} onChange={this.handleChange}>{this.state.value}</textarea>
</div>
);
}
Expand Down

0 comments on commit 30b9620

Please sign in to comment.