Skip to content

Commit a677a8e

Browse files
WIP.
1 parent a6c102a commit a677a8e

File tree

2 files changed

+24
-7
lines changed

2 files changed

+24
-7
lines changed

src/app.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,20 @@ body,
4343
.store,
4444
.store-result {
4545
padding: 10px;
46+
border: 1px solid lightgrey;
4647
}
4748

4849
.forms {
4950
flex: 1 0 auto;
5051
font-family: "Open Sans", sans-serif;
5152
font-size: 16px;
53+
padding: 10px 20px;
54+
width: 15%;
55+
56+
label,
57+
label > * {
58+
display: block;
59+
}
5260

5361
input {
5462
font-size: 16px;
@@ -74,17 +82,13 @@ body,
7482
}
7583

7684
.store {
77-
flex: ą 0 auto;
85+
width: 35%;
7886
font-family: "Source Code Pro", monospace;
7987
font-size: 14px;
8088
}
8189

8290
.store-result {
83-
flex: 3 0 auto;
91+
width: 40%;
8492
font-family: "Source Code Pro", monospace;
8593
font-size: 14px;
8694
}
87-
88-
label > * {
89-
display: block;
90-
}

src/components/text-field.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ function useFieldId(props: Pick<TextFieldProps, "name">): string {
2323
return `${groupId}${SEPARATOR}${props.name}`;
2424
}
2525

26-
function useRegisterField(fieldId: string, props: TextFieldProps): void {
26+
function useRegisterField(
27+
fieldId: string,
28+
props: TextFieldProps,
29+
updateHandler: () => void
30+
): void {
2731
useEffect(() => {
2832
const { store } = useContext(GroupContext);
2933

@@ -37,6 +41,15 @@ function useRegisterField(fieldId: string, props: TextFieldProps): void {
3741
}
3842

3943
store.registerField(fieldId, props.name, defaultValue, initialValue);
44+
45+
store.addListener(updateHandler);
46+
47+
return () => {
48+
// First, remove listener to not get any more updates.
49+
store.removeListener(updateHandler);
50+
// Then, unregister field.
51+
store.unregisterField(fieldId);
52+
};
4053
}, []);
4154
}
4255

0 commit comments

Comments
 (0)