Skip to content

Commit

Permalink
added input format, requried field, form disabled state for std-compo…
Browse files Browse the repository at this point in the history 
…nents
  • Loading branch information
@denisskin
denisskin committed Aug 4, 2015
1 parent 98d9dfe commit 4fc978f
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 24 deletions.
11 changes: 11 additions & 0 deletions lib/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,17 @@ a:hover {
padding: 0 1px;
}

input.inp-error {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
input.inp-error:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}

.datetime {
color: #ccc;
font-size: 80%;
Expand Down
18 changes: 17 additions & 1 deletion lib/components/Form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var Form = $class({
for(var param in this.defaultValues)
this.setDefault(param, this.defaultValues[param]);
}
setTimeout(this.refreshForm.bind(this));
return {};
},

Expand All @@ -23,7 +24,7 @@ var Form = $class({
var e = this.element();
var type = options.type || "line";
return (
<Input name={param} ref={param} key={param+e.key} type={type} element={e} options={options} />
<Input form={this} name={param} ref={param} key={param+e.key} type={type} element={e} options={options} />
)
},

Expand Down Expand Up @@ -75,6 +76,21 @@ var Form = $class({
return vals;
},

refreshForm: function(){
var dsbl = false, inp;
if(this.refs)
for(var i in this.refs)
if((inp = this.refs[i]) && inp.value) {
var val = inp.value();
if(typeof val === "string") val=val.trim();
if(inp.props.options.required && !val || !inp.isValid()) {
dsbl = true;
break;
}
}
if(this.state.disabled !== dsbl) this.setState({ disabled: dsbl });
},

close: function() {
this.reset();
this.props.onClose && this.props.onClose();
Expand Down
25 changes: 20 additions & 5 deletions lib/components/Input.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,29 @@ var Input = $class({
return {}
},

isValid: function() {
var fmt = this.props.options.format;
return !fmt || (fmt instanceof RegExp && fmt || {
title: /^\S/,
name: /^[a-z0-9A-Z\-]+$/,
int: /^\d+$/,
number: /^\d+\.?\d*$/,
float: /^\d+\.?\d*$/,
email: /^[a-z0-9A-Z\.\-_\+]+@[a-z0-9A-Z\.\-_\+]+$/
}[fmt] || /.*/).test(this.value()||"");
},

render: function () {
var type = this.props.type;
var options = this.props.options || {};
var value = this.value();
var err = !value || this.isValid()? "" : " inp-error";

switch(type) {
default:
case "line":
return (
<input type="text" onChange={this.onChangeInput} className="form-control" defaultValue={value} placeholder={transl(options.placeholder)} />
<input type="text" onChange={this.onChangeInput} className={"form-control"+err} defaultValue={value} placeholder={transl(options.placeholder)} />
);

case "tel":
Expand All @@ -53,12 +67,12 @@ var Input = $class({
case "color":
case "hidden":
return (
<input type={type} onChange={this.onChangeInput} className={"form-control input-"+type} defaultValue={value} placeholder={transl(options.placeholder)} />
<input type={type} onChange={this.onChangeInput} className={"form-control input-"+type+err} defaultValue={value} placeholder={transl(options.placeholder)} />
);

case "checkbox":
return(
<div className="checkbox">
<div className={"checkbox"+(err? "" : " has-error")}>
<label>
<input type="checkbox" onChange={this.onChangeCheckbox} defaultChecked={value} placeholder={transl(options.placeholder)} />
{transl(options.label)}
Expand All @@ -68,12 +82,12 @@ var Input = $class({

case "text":
return(
<textarea onChange={this.onChangeInput} className="form-control" defaultValue={value} placeholder={transl(options.placeholder)} />
<textarea onChange={this.onChangeInput} className={"form-control"+err} defaultValue={value} placeholder={transl(options.placeholder)} />
);

case "select":
return (
<select onChange={this.onChangeInput} className="form-control" defaultValue={value} placeholder={transl(options.placeholder)}>
<select onChange={this.onChangeInput} className={"form-control"+err} defaultValue={value} placeholder={transl(options.placeholder)}>
{(options.values||[]).map(function(val, i){
if(typeof val === "string") val = {value: val, label: val, icon: null};
// set default value
Expand Down Expand Up @@ -142,6 +156,7 @@ var Input = $class({
if(arguments.length) { // set
this.setValue(value);
this.setState({});
this.props.form && this.props.form.refreshForm();
} else { // get
return this.getValue();
}
Expand Down
12 changes: 6 additions & 6 deletions lib/pages/Blog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ var ArticleEdit = $class(Form, {
</div>
<div className="col-md-5">
<label>{transl("title")}</label>
{this.$input("title", { placeholder: "title" })}
{this.$input("title", { placeholder: "title", required: true })}

<label>{transl("description")}</label>
{this.$inputText("description", { placeholder: "description" })}
{this.$inputText("description", { placeholder: "description", required:true })}

<label>{transl("content")}</label>
{this.$inputText("body", { placeholder: "content" })}
Expand All @@ -26,7 +26,7 @@ var ArticleEdit = $class(Form, {
]})}
<br/>
<br/>
<button type="submit" className="btn btn-primary">{transl("Save")}</button>
<button type="submit" className="btn btn-primary" disabled={this.state.disabled}>{transl("Save")}</button>
&nbsp;
<button type="button" className="btn btn-default" onClick={this.close}>{transl("Close")}</button>
</div>
Expand Down Expand Up @@ -118,13 +118,13 @@ var ArticleNew = $class(Form, {
{this.$inputFile("image", {placeholder: "Article image"})}
</div>
<div className="form-group col-sm-6">
{this.$input("title", {placeholder: "Title"})}
{this.$input("title", {placeholder: "Title", required: true})}
</div>
<div className="form-group col-sm-6">
{this.$inputText("description", {placeholder: "Description"})}
{this.$inputText("description", {placeholder: "Description", required: true})}
</div>
<div className="form-group col-sm-6">
<button type="submit" className="btn btn-primary">{transl("Add article")}</button>
<button type="submit" className="btn btn-primary" disabled={this.state.disabled}>{transl("Add article")}</button>
</div>

</form>
Expand Down
4 changes: 2 additions & 2 deletions lib/pages/Comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ var CommentNew = $class(Form, {
</div>
<div className="comment-body">
<div className="form-group">
{this.$inputText("text", {placeholder: "New comment"})}
{this.$inputText("text", {placeholder: "New comment", required: true})}
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Add comment</button>
<button type="submit" disabled={this.state.disabled} className="btn btn-primary">Add comment</button>
</div>
</div>
</form>
Expand Down
6 changes: 3 additions & 3 deletions lib/pages/MainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ var SiteSectionNew = $class(Form, {
render: function() {
return (
<form onSubmit={this.submit} className="form-group">
<h4>{transl("New Plugin")}</h4>
<h4>{transl("New section")}</h4>
<div className="form-group">
{this.$inputSelect("type", {
placeholder: "type of page",
Expand All @@ -36,10 +36,10 @@ var SiteSectionNew = $class(Form, {
})}
</div>
<div className="form-group">
{this.$input("name", { placeholder: "name" })}
{this.$input("name", { placeholder: "name", format:"name", required: true })}
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">{transl("Add Plugin")}</button>
<button type="submit" disabled={this.state.disabled} className="btn btn-primary">{transl("Add section")}</button>
</div>
</form>
);
Expand Down
8 changes: 4 additions & 4 deletions lib/pages/Photos.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var PhotoEdit = $class(Form, {
<div className="form-group row">
<div className="col-md-1">
<label>file</label>
{this.$inputFile("photo", { placeholder: "photo" })}
{this.$inputFile("photo", { placeholder: "photo", required:true })}
</div>
<div className="col-md-4">
<label>title</label>
Expand All @@ -24,7 +24,7 @@ var PhotoEdit = $class(Form, {

<br/>
<br/>
<button type="submit" className="btn btn-primary">{transl("Save")}</button>
<button type="submit" className="btn btn-primary" disabled={this.state.disabled}>{transl("Save")}</button>
&nbsp;
<button type="button" className="btn btn-default" onClick={this.close}>{transl("Close")}</button>
</div>
Expand Down Expand Up @@ -98,13 +98,13 @@ var PhotoNew = $class(Form, {
return (
<form onSubmit={this.submit} className="row form-group">
<div className="col-sm-2">
{this.$inputFile("photo", {placeholder: "File"})}
{this.$inputFile("photo", {placeholder: "File", required: true})}
</div>
<div className="col-sm-4">
<div className="input-group">
{this.$input("title", {placeholder: "Title"})}
<span className="input-group-btn">
<button type="submit" className="btn btn-primary">Add photo</button>
<button type="submit" className="btn btn-primary" disabled={this.state.disabled}>Add photo</button>
</span>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions lib/pages/Videos.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var VideoEdit = $class(Form, {
<div className="form-group row">
<div className="col-md-1">
<label>{transl("file")}</label>
{this.$inputFile("video", { placeholder: "video" })}
{this.$inputFile("video", { placeholder: "video", required:true })}
</div>
<div className="col-md-4">
<label>{transl("title")}</label>
Expand Down Expand Up @@ -98,13 +98,13 @@ var VideoNew = $class(Form, {
return (
<form onSubmit={this.submit} className="row form-group">
<div className="col-sm-2">
{this.$inputFile("video", {placeholder: "File"})}
{this.$inputFile("video", {placeholder: "File", required: true})}
</div>
<div className="col-sm-4">
<div className="input-group">
{this.$input("title", {placeholder: "Title"})}
<span className="input-group-btn">
<button type="submit" className="btn btn-primary">Add video</button>
<button type="submit" className="btn btn-primary" disabled={this.state.disabled}>Add video</button>
</span>
</div>
</div>
Expand Down

0 comments on commit 4fc978f

Please sign in to comment.