Skip to content

Commit 42d7553

Browse files
zombieJzombieJ
committed
chore: Prettier code
1 parent bd9598d commit 42d7553

18 files changed

+262
-348
lines changed

‎.eslintrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,12 @@ module.exports = {
99
'prefer-promise-reject-errors': 0,
1010
'react/no-array-index-key': 0,
1111
'react/sort-comp': 0,
12+
'import/no-named-as-default-member': 0,
13+
'jsx-a11y/label-has-for': 0,
14+
'jsx-a11y/label-has-associated-control': 0,
15+
'import/no-extraneous-dependencies': [
16+
'error',
17+
{ devDependencies: true, optionalDependencies: true, peerDependencies: true },
18+
],
1219
},
1320
};

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"semi": true,
44
"singleQuote": true,
55
"tabWidth": 2,
6-
"trailingComma": "all"
6+
"trailingComma": "all",
7+
"printWidth": 100
78
}

‎examples/StateForm-list-draggable.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,11 @@ const Demo = () => {
6868
<div style={{ position: 'relative' }}>
6969
<Input {...DisableDraggable} {...control} />
7070
<a
71-
style={{ position: 'absolute', top: 12, right: -300 }}
71+
style={{
72+
position: 'absolute',
73+
top: 12,
74+
right: -300,
75+
}}
7276
onClick={() => {
7377
remove(index);
7478
}}

‎examples/basic.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import Form, { Field } from '../src';
33
import Input from './components/Input';
44

5-
65
const list = new Array(1111).fill(() => null);
76

87
export default class Demo extends React.Component {

‎examples/component.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@ import React from 'react';
22
import Form, { Field, useForm } from '../src';
33
import Input from './components/Input';
44

5-
65
export default () => {
76
const [form] = useForm();
87
return (
9-
<form onSubmit={event => {
10-
event.preventDefault();
11-
event.stopPropagation();
12-
form.validateFields().then(function (values) {
13-
console.log(values);
14-
}) // Do nothing about submit catch
15-
.catch(function (e) {
16-
return e;
17-
});
18-
}}>
8+
<form
9+
onSubmit={event => {
10+
event.preventDefault();
11+
event.stopPropagation();
12+
form
13+
.validateFields()
14+
.then(values => {
15+
console.log(values);
16+
}) // Do nothing about submit catch
17+
.catch(e => e);
18+
}}
19+
>
1920
<Form component={false} form={form}>
2021
<Field name="username">
2122
<Input placeholder="Username" />
@@ -27,4 +28,4 @@ export default () => {
2728
<button type="submit">submit</button>
2829
</form>
2930
);
30-
}
31+
};

‎examples/components/LabelField.tsx‎

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import Form, { FormInstance } from '../../src/';
2+
import Form from '../../src';
33
import { FieldProps } from '../../src/Field';
44

55
const { Field } = Form;
@@ -12,14 +12,19 @@ const Error = ({ children }) => (
1212
</ul>
1313
);
1414

15-
const FieldState = ({ touched, validating }: { touched: boolean; validating: boolean }) => {
16-
return (
17-
<div style={{ color: 'green', position: 'absolute', marginTop: -35, left: 300 }}>
18-
{touched ? <span>Touched!</span> : null}
19-
{validating ? <span>Validating!</span> : null}
20-
</div>
21-
);
22-
};
15+
const FieldState = ({ touched, validating }: { touched: boolean; validating: boolean }) => (
16+
<div
17+
style={{
18+
color: 'green',
19+
position: 'absolute',
20+
marginTop: -35,
21+
left: 300,
22+
}}
23+
>
24+
{touched ? <span>Touched!</span> : null}
25+
{validating ? <span>Validating!</span> : null}
26+
</div>
27+
);
2328

2429
interface LabelFieldProps extends FieldProps {
2530
label?: React.ReactNode;
@@ -30,30 +35,30 @@ const LabelField: React.FunctionComponent<LabelFieldProps> = ({
3035
label,
3136
children,
3237
...restProps
33-
}) => {
34-
return (
35-
<Field name={name} {...restProps}>
36-
{(control, meta, form) => {
37-
const childNode =
38-
typeof children === 'function'
39-
? children(control, meta, form)
40-
: React.cloneElement(children as React.ReactElement, { ...control });
41-
42-
return (
43-
<div style={{ position: 'relative' }}>
44-
<div style={{ display: 'flex', alignItems: 'center' }}>
45-
<label style={{ flex: 'none', width: 100 }}>{label || name}</label>
46-
47-
{childNode}
48-
</div>
49-
50-
<FieldState {...meta} />
51-
<Error>{meta.errors}</Error>
38+
}) => (
39+
<Field name={name} {...restProps}>
40+
{(control, meta, form) => {
41+
const childNode =
42+
typeof children === 'function'
43+
? children(control, meta, form)
44+
: React.cloneElement(children as React.ReactElement, {
45+
...control,
46+
});
47+
48+
return (
49+
<div style={{ position: 'relative' }}>
50+
<div style={{ display: 'flex', alignItems: 'center' }}>
51+
<label style={{ flex: 'none', width: 100 }}>{label || name}</label>
52+
53+
{childNode}
5254
</div>
53-
);
54-
}}
55-
</Field>
56-
);
57-
};
55+
56+
<FieldState {...meta} />
57+
<Error>{meta.errors}</Error>
58+
</div>
59+
);
60+
}}
61+
</Field>
62+
);
5863

5964
export default LabelField;

‎examples/components/useDraggable.ts‎

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,80 @@ import { useRef } from 'react';
22
import { DragObjectWithType, useDrag, useDrop } from 'react-dnd';
33

44
type DragWithIndex = DragObjectWithType & {
5-
index : number,
5+
index: number;
66
};
7-
export default function useDraggable(type : string,
8-
id : string|number,
9-
index : number, move : (from : number, to : number)=>void) {
10-
const ref = useRef(null);
11-
const [, drop] = useDrop({
12-
accept: type,
13-
hover(item : DragWithIndex, monitor) {
14-
if (!ref.current) {
15-
return;
16-
}
17-
const dragIndex = item.index;
18-
if (dragIndex === undefined || dragIndex === null) return;
19-
const hoverIndex = index;
7+
export default function useDraggable(
8+
type: string,
9+
id: string | number,
10+
index: number,
11+
move: (from: number, to: number) => void,
12+
) {
13+
const ref = useRef(null);
14+
const [, drop] = useDrop({
15+
accept: type,
16+
hover(item: DragWithIndex, monitor) {
17+
if (!ref.current) {
18+
return;
19+
}
20+
const dragIndex = item.index;
21+
if (dragIndex === undefined || dragIndex === null) return;
22+
const hoverIndex = index;
2023

21-
// Don't replace items with themselves
22-
if (dragIndex === hoverIndex) {
23-
return;
24-
}
24+
// Don't replace items with themselves
25+
if (dragIndex === hoverIndex) {
26+
return;
27+
}
2528

26-
// Determine rectangle on screen
27-
const hoverBoundingRect = ref.current.getBoundingClientRect();
29+
// Determine rectangle on screen
30+
const hoverBoundingRect = ref.current.getBoundingClientRect();
2831

29-
// Get vertical middle
30-
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
31-
const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
32+
// Get vertical middle
33+
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
34+
const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
3235

33-
// Determine mouse position
34-
const clientOffset = monitor.getClientOffset();
36+
// Determine mouse position
37+
const clientOffset = monitor.getClientOffset();
3538

36-
// Get pixels to the top
37-
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
38-
const hoverClientX = clientOffset.x - hoverBoundingRect.left;
39+
// Get pixels to the top
40+
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
41+
const hoverClientX = clientOffset.x - hoverBoundingRect.left;
3942

40-
// console.log(hoverBoundingRect,hoverMiddleY,clientOffset,hoverClientY,
41-
// dragIndex,hoverIndex
42-
// );
43-
// Only perform the move when the mouse has crossed half of the items height
44-
// When dragging downwards, only move when the cursor is below 50%
45-
// When dragging upwards, only move when the cursor is above 50%
43+
// console.log(hoverBoundingRect,hoverMiddleY,clientOffset,hoverClientY,
44+
// dragIndex,hoverIndex
45+
// );
46+
// Only perform the move when the mouse has crossed half of the items height
47+
// When dragging downwards, only move when the cursor is below 50%
48+
// When dragging upwards, only move when the cursor is above 50%
4649

47-
// Dragging downwards
48-
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY
49-
&& hoverClientX < hoverMiddleX
50-
) {
51-
return;
52-
}
50+
// Dragging downwards
51+
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY && hoverClientX < hoverMiddleX) {
52+
return;
53+
}
5354

54-
// Dragging upwards
55-
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY
56-
&& hoverClientX > hoverMiddleX
57-
) {
58-
return;
59-
}
55+
// Dragging upwards
56+
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY && hoverClientX > hoverMiddleX) {
57+
return;
58+
}
6059

61-
// Time to actually perform the action
62-
move(dragIndex, hoverIndex);
60+
// Time to actually perform the action
61+
move(dragIndex, hoverIndex);
6362

64-
// Note: we're mutating the monitor item here!
65-
// Generally it's better to avoid mutations,
66-
// but it's good here for the sake of performance
67-
// to avoid expensive index searches.
68-
item.index = hoverIndex;
69-
},
70-
});
71-
const [{ isDragging }, drag] = useDrag({
72-
item: { type, id, index },
73-
collect: monitor => ({
74-
isDragging: monitor.isDragging(),
75-
}),
76-
});
77-
drag(drop(ref));
78-
return {
79-
ref, isDragging,
80-
};
63+
// Note: we're mutating the monitor item here!
64+
// Generally it's better to avoid mutations,
65+
// but it's good here for the sake of performance
66+
// to avoid expensive index searches.
67+
item.index = hoverIndex;
68+
},
69+
});
70+
const [{ isDragging }, drag] = useDrag({
71+
item: { type, id, index },
72+
collect: monitor => ({
73+
isDragging: monitor.isDragging(),
74+
}),
75+
});
76+
drag(drop(ref));
77+
return {
78+
ref,
79+
isDragging,
80+
};
8181
}

‎examples/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default class Demo extends React.Component {
2121
<LabelField name="password">
2222
<Input placeholder="Password" />
2323
</LabelField>
24-
<LabelField name={['path1', 'path2']} label="Nest Path" rules={[ { required: true } ]}>
24+
<LabelField name={['path1', 'path2']} label="Nest Path" rules={[{ required: true }]}>
2525
<Input placeholder="nest" />
2626
</LabelField>
2727
</Form>

‎examples/list.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,12 @@ const Demo = () => {
3333
{control => (
3434
<div style={{ position: 'relative' }}>
3535
<Input {...control} />
36-
<a style={{ position: 'absolute', top: 12, right: -300 }} onClick={() => {
37-
remove(index);
38-
}}>
36+
<a
37+
style={{ position: 'absolute', top: 12, right: -300 }}
38+
onClick={() => {
39+
remove(index);
40+
}}
41+
>
3942
Remove
4043
</a>
4144
</div>
@@ -68,6 +71,7 @@ const Demo = () => {
6871
<div style={{ border: '1px solid #000', padding: 15 }}>
6972
<h4>Out Of Form</h4>
7073
<button
74+
type="button"
7175
onClick={() => {
7276
form.setFieldsValue({
7377
users: ['light', 'bamboo'],

0 commit comments

Comments
 (0)