Skip to content

Commit

Permalink
Fix demo lint problems, react-component/react-component.github.io#8
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Dec 1, 2015
1 parent 4926344 commit 4637966
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 95 deletions.
90 changes: 42 additions & 48 deletions examples/form.js
View file
@@ -1,36 +1,31 @@
'use strict';

import 'bootstrap/dist/css/bootstrap.css';
import 'rc-calendar/assets/bootstrap.css';

import Validation, {Validator} from 'rc-form-validation';
import React from 'react';
import ReactDOM from 'react-dom';
import Calendar, {Picker as DatePicker} from 'rc-calendar';
import DateTimeFormat from 'gregorian-calendar-format';
var formatter = new DateTimeFormat('yyyy-MM-dd');
import assign from 'object-assign';
import GregorianCalendar from 'gregorian-calendar';

function toNumber(v) {
if (!v || !v.trim()) {
return undefined;
}
var num = Number(v);
let num = Number(v);
// num === ' '
if (!isNaN(num)) {
num = parseInt(v);
num = parseInt(v, 10);
}
return isNaN(num) ? v : num;
}

var Form = React.createClass({
const Form = React.createClass({
mixins: [Validation.FieldMixin],

getInitialState() {
var start = new GregorianCalendar();
const start = new GregorianCalendar();
start.setTime(Date.now());
var end = start.clone();
const end = start.clone();
start.addDayOfMonth(-3);
return {
status: {
Expand All @@ -43,7 +38,7 @@ var Form = React.createClass({
email: {},
startDate: {},
endDate: {},
must: {}
must: {},
},
formData: {
number: 0,
Expand All @@ -56,8 +51,8 @@ var Form = React.createClass({
email: undefined,
optional: undefined,
startDate: start,
endDate: end
}
endDate: end,
},
};
},

Expand All @@ -69,24 +64,22 @@ var Form = React.createClass({

handleSubmit(e) {
e.preventDefault();
var validation = this.refs.validation;
const validation = this.refs.validation;
validation.validate((valid) => {
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log('submit');
console.log(this.state.formData);
});
},

userExists(rule, value, callback) {
setTimeout(function () {
setTimeout(function() {
if (value === '1') {
callback([new Error('are you kidding?')]);
}
else if (value === 'yiminghe') {
} else if (value === 'yiminghe') {
callback([new Error('forbid yiminghe')]);
} else {
callback();
Expand Down Expand Up @@ -115,8 +108,8 @@ var Form = React.createClass({
},

checkNow(rule, value, callback) {
var errors;
var now = new GregorianCalendar();
let errors;
const now = new GregorianCalendar();
now.setTime(Date.now());
if (value.getMonth() !== now.getMonth()) {
errors = [new Error('can only select current month')];
Expand All @@ -125,42 +118,43 @@ var Form = React.createClass({
},

validateEndDate(rule, value, callback) {
var errors = [];
const errors = [];
if (this.state.formData.startDate.getTime() > value.getTime()) {
errors.push(new Error('start date can not be larger than end date'));
}
callback(errors.length ? errors : undefined);
},

render() {
var formData = this.state.formData;
var status = this.state.status;
var field;
var errorStyle = {color: 'red', fontWeight: 'bold'};
const formData = this.state.formData;
const status = this.state.status;
const props = this.props;
let field;
const errorStyle = {color: 'red', fontWeight: 'bold'};
if (!this.state.remove) {
field = <div className="form-group">
field = (<div className="form-group">
<label className="col-sm-2 control-label">email(validate on blur):</label>

<div className="col-sm-10">
<Validator rules={{type: 'email', message: '错误的 email 格式'}}
trigger="onBlur"
>
<input name='email' className="form-control" value={formData.email}
<input name="email" className="form-control" value={formData.email}
onChange={this.setField.bind(this, 'email')}
/>
</Validator>
{status.email.errors ? <span style={errorStyle}> {status.email.errors.join(', ')}</span> : null}
</div>
</div>;
</div>);
}
return <form onSubmit={this.handleSubmit} className="form-horizontal">
<Validation ref='validation' onValidate={this.onValidate}>
return (<form onSubmit={this.handleSubmit} className="form-horizontal">
<Validation ref="validation" onValidate={this.onValidate}>
<div className="form-group">
<label className="col-sm-2 control-label">name:</label>

<div className="col-sm-10">
<Validator rules={[{required: true, min: 5}, {validator: this.userExists}]}>
<input name='name' className="form-control" value={formData.name}/>
<input name="name" className="form-control" value={formData.name}/>
</Validator>
{status.name.isValidating ? <span style={{color: 'green'}}> isValidating </span> : null}
{status.name.errors ? <span style={errorStyle}> {status.name.errors.join(', ')}</span> : null}
Expand All @@ -172,7 +166,7 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator trigger="onBlur" rules={[{required: true, whitespace: true}, {validator: this.checkPass}]}>
<input name='pass' className="form-control" value={formData.pass}/>
<input name="pass" className="form-control" value={formData.pass}/>
</Validator>
{status.pass.errors ? <span style={errorStyle}> {status.pass.errors.join(', ')}</span> : null}
</div>
Expand All @@ -185,9 +179,9 @@ var Form = React.createClass({
<Validator trigger="onBlur" rules={[{
required: true,
whitespace: true,
message: 'retry pass is required'
message: 'retry pass is required',
}, {validator: this.checkPass2}]}>
<input name='pass2' className="form-control" value={formData.pass2}/>
<input name="pass2" className="form-control" value={formData.pass2}/>
</Validator>
{status.pass2.errors ? <span style={errorStyle}> {status.pass2.errors.join(', ')}</span> : null}
</div>
Expand All @@ -199,8 +193,8 @@ var Form = React.createClass({
<label className="col-sm-2 control-label">required number (validate on blur):</label>

<div className="col-sm-10">
<Validator trigger="onBlur" rules={[{required: true,message:'不是数字',pattern:/^\d+(\.\d+)?$/}]}>
<input name='blurNumber' className="form-control" value={formData.blurNumber}/>
<Validator trigger="onBlur" rules={[{required: true, message: '不是数字', pattern: /^\d+(\.\d+)?$/}]}>
<input name="blurNumber" className="form-control" value={formData.blurNumber}/>
</Validator>
{status.blurNumber.errors ? <span style={errorStyle}> {status.blurNumber.errors.join(', ')}</span> : null}
</div>
Expand All @@ -211,7 +205,7 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator rules={[{required: true, type: 'number', transform: toNumber}]}>
<input name='number' className="form-control" value={formData.number}/>
<input name="number" className="form-control" value={formData.number}/>
</Validator>
{status.number.errors ? <span style={errorStyle}> {status.number.errors.join(', ')}</span> : null}
</div>
Expand All @@ -222,7 +216,7 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator rules={[{type: 'number', transform: toNumber}]}>
<input name='optionalNumber' className="form-control" value={formData.optionalNumber}/>
<input name="optionalNumber" className="form-control" value={formData.optionalNumber}/>
</Validator>
{status.optionalNumber.errors ?
<span style={errorStyle}> {status.optionalNumber.errors.join(', ')}</span> : null}
Expand All @@ -233,7 +227,7 @@ var Form = React.createClass({
<label className="col-sm-2 control-label">optional:</label>

<div className="col-sm-10">
<input name='optional' className="form-control" value={formData.optional}
<input name="optional" className="form-control" value={formData.optional}
onChange={this.setField.bind(this, 'optional')}/>
</div>
</div>
Expand All @@ -243,7 +237,7 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator rules={{required: true}}>
<input name='must' className="form-control" value={formData.must} placeholder="必须"/>
<input name="must" className="form-control" value={formData.must} placeholder="必须"/>
</Validator>
{status.must.errors ? <span style={errorStyle}> {status.must.errors.join(', ')}</span> : null}
</div>
Expand All @@ -254,12 +248,12 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator rules={[{validator: this.checkNow}, {validator: this.validateStartDate}]}>
<DatePicker name='startDate' formatter={this.props.formatter} calendar={<Calendar showTime={false}/>}
<DatePicker name="startDate" formatter={props.formatter} calendar={<Calendar showTime={false}/>}
value={formData.startDate}>
<input type="text" className="form-control" style={{
background: 'white',
color: 'black',
cursor: 'pointer'
cursor: 'pointer',
}}/>
</DatePicker>
</Validator>
Expand All @@ -272,12 +266,12 @@ var Form = React.createClass({

<div className="col-sm-10">
<Validator rules={[{validator: this.checkNow}, {validator: this.validateEndDate}]}>
<DatePicker name='endDate' formatter={this.props.formatter} calendar={<Calendar />}
<DatePicker name="endDate" formatter={props.formatter} calendar={<Calendar />}
value={formData.endDate}>
<input type="text" className="form-control" style={{
background: 'white',
color: 'black',
cursor: 'pointer'
cursor: 'pointer',
}}/>
</DatePicker>
</Validator>
Expand All @@ -289,12 +283,12 @@ var Form = React.createClass({
<div className="col-sm-offset-2 col-sm-10">
<button type="submit" className="btn btn-default">submit</button>
&nbsp;&nbsp;&nbsp;
<a href='#' className="btn btn-default" onClick={this.handleReset}>reset</a>
<a href="#" className="btn btn-default" onClick={this.handleReset}>reset</a>
</div>
</div>
</Validation>
</form>;
}
</form>);
},
});

ReactDOM.render(<div>
Expand Down
2 changes: 0 additions & 2 deletions tests/index.spec.js
View file
@@ -1,3 +1 @@
'use strict';

require('./validation.spec');

0 comments on commit 4637966

Please sign in to comment.