Skip to content

Commit

Permalink
Merge pull request alibaba-fusion#663 from jdkahn/issue/form-648
Browse files Browse the repository at this point in the history 
 fix(Field): no react key props for errors
  • Loading branch information
@youluna
youluna authored May 16, 2019
2 parents 034d01d + 4d65cff commit 2284d05
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 65 deletions.
64 changes: 64 additions & 0 deletions docs/form/demo/validate-custom-error.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# 校验

- order: 9

基本的表单校验例子。

:::lang=en-us
# Validate

- order: 9

Basic usage of validation.
:::

---

````jsx
import { Form, Input, Field } from '@alifd/next';


const FormItem = Form.Item;

const formItemLayout = {
labelCol: {
span: 6
},
wrapperCol: {
span: 14
}
};

class BasicDemo extends React.Component {
field = new Field(this);

render() {
const {
field,
field: {
init,
}
} = this;
return (
<Form {...formItemLayout} field={field} >

<Form.Item label="test" key="test2">
<Input {...init('input', {
rules: [{
validator(_rule, value, callback) {
callback(<span>This is a <em>CUSTOM</em> error</span>);
}
}]
})} />
</Form.Item>
<FormItem wrapperCol={{ offset: 6 }} >
<Form.Submit validate type="primary">Submit</Form.Submit>
<Form.Reset >Reset</Form.Reset>
</FormItem>
</Form>
);
}
}

ReactDOM.render(<BasicDemo />, mountNode);
````
2 changes: 1 addition & 1 deletion src/field/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ class Field {
// update error in every Field
Object.keys(errorsGroup).forEach(i => {
const field = this._get(i);
field.errors = errorsGroup[i].errors;
field.errors = getErrorStrs(errorsGroup[i].errors);
field.state = 'error';
});
}
Expand Down
20 changes: 10 additions & 10 deletions src/field/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@ export function getValueFromEvent(e) {
return target.value;
}

function cloneAndAddKey(element) {
if (element && isValidElement(element)) {
return cloneElement(element, { key: 'error' });
}
return element;
}

export function getErrorStrs(errors) {
if (errors) {
return errors.map(e => {
if ('message' in e) {
const message = e.message;
// add key for jsx to ignore key warning
if (message && isValidElement(message) && !message.props.key) {
return cloneElement(message, { key: 'error' });
}
return message;
}
return e;
return errors.map(function(e) {
const message = e.message || e;
return cloneAndAddKey(message);
});
}
return errors;
Expand Down
66 changes: 34 additions & 32 deletions test/field/index-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ Enzyme.configure({ adapter: new Adapter() });

const FormItem = Form.Item;

/* eslint-disable react/jsx-filename-extension */
/*global describe it */
describe('field', () => {
describe('render', () => {
it('should support Form', done => {
it('should support Form', function(done) {
class Demo extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -64,7 +66,7 @@ describe('field', () => {

done();
});
it('should support PureComponent', done => {
it('should support PureComponent', function(done) {
class Demo extends React.PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -95,7 +97,7 @@ describe('field', () => {
done();
});

it('should support origin input/checkbox/radio', done => {
it('should support origin input/checkbox/radio', function(done) {
class Demo extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -155,8 +157,8 @@ describe('field', () => {
});
});
describe('init', () => {
it('init(input)', done => {
let field = new Field();
it('init(input)', function(done) {
let field = new Field(this);
let inited = field.init('input');

assert(typeof inited['ref'] === 'function');
Expand All @@ -177,8 +179,8 @@ describe('field', () => {

done();
});
it('initValue', done => {
let field = new Field();
it('initValue', function(done) {
let field = new Field(this);
let inited = field.init('input', { initValue: 2 });

assert(inited.value === 2);
Expand All @@ -189,8 +191,8 @@ describe('field', () => {

done();
});
it('valueName', done => {
let field = new Field();
it('valueName', function(done) {
let field = new Field(this);
let inited = field.init('input', {
initValue: true,
valueName: 'checked',
Expand All @@ -200,8 +202,8 @@ describe('field', () => {
done();
});

it('props', done => {
let field = new Field();
it('props', function(done) {
let field = new Field(this);
let inited = field.init('input', {
initValue: true,
valueName: 'checked',
Expand All @@ -216,9 +218,9 @@ describe('field', () => {
done();
});

it('custom Event: onChange', done => {
it('custom Event: onChange', function(done) {
const onChange = sinon.spy();
let field = new Field(null, { onChange });
let field = new Field(this, { onChange });
let inited = field.init('input', {
props: {
onChange,
Expand All @@ -234,7 +236,7 @@ describe('field', () => {
assert(field.getValue('input') === 'test');
assert(onChange.callCount === 2);

let field2 = new Field(null, {
let field2 = new Field(this, {
onChange: (name, value) => {
assert(value === 'test');
},
Expand All @@ -260,8 +262,8 @@ describe('field', () => {
done();
});

it('getValueFromEvent', done => {
let field = new Field(null, {
it('getValueFromEvent', function(done) {
let field = new Field(this, {
onChange: (name, value) => {
assert(value === 'test!');
},
Expand All @@ -286,8 +288,8 @@ describe('field', () => {
done();
});

it('rules', done => {
let field = new Field();
it('rules', function(done) {
let field = new Field(this);
field.init('input', {
rules: [
{
Expand All @@ -311,8 +313,8 @@ describe('field', () => {
});

describe('behaviour', () => {
it('getValue & getValues & setValue & setValues', done => {
let field = new Field();
it('getValue & getValues & setValue & setValues', function(done) {
let field = new Field(this);
field.init('input', { initValue: 1 });
field.init('input2', { initValue: 2 });
field.init('input3.name', { initValue: 3 });
Expand All @@ -331,8 +333,8 @@ describe('field', () => {
done();
});

it('setError & setErrors & getError & getErrors', done => {
let field = new Field();
it('setError & setErrors & getError & getErrors', function(done) {
let field = new Field(this);
field.setError('input', 'error1');

field.init('input');
Expand All @@ -356,8 +358,8 @@ describe('field', () => {

done();
});
it('getState', done => {
let field = new Field();
it('getState', function(done) {
let field = new Field(this);

field.init('input');

Expand All @@ -369,8 +371,8 @@ describe('field', () => {
done();
});

it('validate', done => {
let field = new Field();
it('validate', function(done) {
let field = new Field(this);
let inited = field.init('input', {
rules: [{ required: true, message: 'cant be null' }],
});
Expand Down Expand Up @@ -413,8 +415,8 @@ describe('field', () => {
done();
});

it('reset', done => {
let field = new Field();
it('reset', function(done) {
let field = new Field(this);
field.init('input', { initValue: '1' });

field.reset();
Expand All @@ -428,8 +430,8 @@ describe('field', () => {

done();
});
it('remove', done => {
let field = new Field();
it('remove', function(done) {
let field = new Field(this);
field.init('input', { initValue: 1 });
field.init('input2', { initValue: 1 });
field.init('input3', { initValue: 1 });
Expand All @@ -444,8 +446,8 @@ describe('field', () => {

done();
});
it('spliceArray', done => {
let field = new Field();
it('spliceArray', function(done) {
let field = new Field(this);
field.init('input.0', { initValue: 0 });
field.init('input.1', { initValue: 1 });
field.init('input.2', { initValue: 2 });
Expand Down
Loading

0 comments on commit 2284d05

Please sign in to comment.