-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
77 lines (67 loc) · 1.87 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { TodoApp } from "@/components/TodoApp";
import cx from "classnames";
import React, { useEffect, useRef } from "react";
import { SigForm } from "sigform";
const buttonClass = "px-2 py-1 rounded border";
export default function Index() {
const ref = useRef<HTMLDivElement>();
useEffect(() => {
// sigfield allows to use "forwardRef" also.
// console.log("ref", ref.current);
}, []);
return (
<div>
<SigForm
onChange={(data, helpers) => {
console.log("changed!", JSON.stringify(data, null, 2));
// Check first input data.
const specialCommand =
data.todos && data.todos[0] && data.todos[0].task;
// Form level validation example.
if (specialCommand === "invalid") {
helpers.setFormErrors({
todos: ["some error"],
});
return;
}
if (specialCommand === "clear") {
// Clear values.
helpers.setFieldValues({ todos: [] });
return;
}
helpers.clearFormErrors();
}}
onSubmit={(data, helpers) => {
console.log("save!", JSON.stringify(data, null, 2));
}}
>
{/* For usage with form */}
<TodoApp
ref={ref}
name="todos"
defaultValue={[
{ id: 1, task: "buy egg", done: false, dueDate: new Date() },
]}
/>
{/*
// Or use "Raw" component.
<TodoApp.Raw
onChange={(todos) => {
console.log(JSON.stringify(todos, null, 2));
}}
value={initialTodos}
/>
*/}
<button
className={cx(
buttonClass,
"mt-4 px-3 py-2 bg-blue-500 text-white font-bold",
)}
type="submit"
>
Save
</button>
</SigForm>
</div>
);
}