Skip to content

Commit 46236f0

Browse files
unageekunageek
committed
Use forms in dialogs
1 parent a08d62c commit 46236f0

File tree

3 files changed

+20
-52
lines changed

3 files changed

+20
-52
lines changed

‎src/renderer/ExportImageDialog.tsx‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
ScreenWidthMinSmall,
1414
Stack,
1515
Text,
16+
TextField,
1617
} from "@fluentui/react";
1718
import { debounce } from "lodash";
1819
import * as React from "react";
@@ -26,7 +27,6 @@ import {
2627
} from "../common/exportImage";
2728
import { tryParseBignum, tryParseIntegerInRange } from "../common/parse";
2829
import { useSelector } from "./models/app";
29-
import { SendableTextField } from "./SendableTextField";
3030

3131
export interface ExportImageDialogProps {
3232
abort: () => void;
@@ -135,7 +135,7 @@ export const ExportImageDialog = (
135135
[errors]
136136
);
137137

138-
const send = useCallback(async () => {
138+
const submit = useCallback(async () => {
139139
if (errors.size > 0) return;
140140
setState(State.Exporting);
141141
props.saveOpts(opts);
@@ -293,7 +293,7 @@ export const ExportImageDialog = (
293293
switch (state) {
294294
case State.Initial:
295295
return (
296-
<>
296+
<form onSubmit={submit}>
297297
<div
298298
style={{
299299
alignItems: "baseline",
@@ -306,49 +306,45 @@ export const ExportImageDialog = (
306306
<Label style={{ gridColumn: "3", padding: 0 }}>Maximum</Label>
307307

308308
<Label style={{ textAlign: "right" }}>x:</Label>
309-
<SendableTextField
309+
<TextField
310310
errorMessage={xMinErrorMessage}
311311
onChange={(_, value) => {
312312
if (value === undefined) return;
313313
setXMin(value);
314314
validateXMin(value);
315315
}}
316-
onSend={send}
317316
styles={decimalInputStyles}
318317
value={xMin}
319318
/>
320-
<SendableTextField
319+
<TextField
321320
errorMessage={xMaxErrorMessage}
322321
onChange={(_, value) => {
323322
if (value === undefined) return;
324323
setXMax(value);
325324
validateXMax(value);
326325
}}
327-
onSend={send}
328326
styles={decimalInputStyles}
329327
value={xMax}
330328
/>
331329

332330
<Label style={{ textAlign: "right" }}>y:</Label>
333-
<SendableTextField
331+
<TextField
334332
errorMessage={yMinErrorMessage}
335333
onChange={(_, value) => {
336334
if (value === undefined) return;
337335
setYMin(value);
338336
validateYMin(value);
339337
}}
340-
onSend={send}
341338
styles={decimalInputStyles}
342339
value={yMin}
343340
/>
344-
<SendableTextField
341+
<TextField
345342
errorMessage={yMaxErrorMessage}
346343
onChange={(_, value) => {
347344
if (value === undefined) return;
348345
setYMax(value);
349346
validateYMax(value);
350347
}}
351-
onSend={send}
352348
styles={decimalInputStyles}
353349
value={yMax}
354350
/>
@@ -364,14 +360,13 @@ export const ExportImageDialog = (
364360
tokens={{ childrenGap: "4px" }}
365361
verticalAlign="baseline"
366362
>
367-
<SendableTextField
363+
<TextField
368364
errorMessage={widthErrorMessage}
369365
onChange={(_, value) => {
370366
if (value === undefined) return;
371367
setWidth(value);
372368
validateWidth(value);
373369
}}
374-
onSend={send}
375370
styles={integerInputStyles}
376371
value={width}
377372
/>
@@ -387,14 +382,13 @@ export const ExportImageDialog = (
387382
tokens={{ childrenGap: "4px" }}
388383
verticalAlign="baseline"
389384
>
390-
<SendableTextField
385+
<TextField
391386
errorMessage={heightErrorMessage}
392387
onChange={(_, value) => {
393388
if (value === undefined) return;
394389
setHeight(value);
395390
validateHeight(value);
396391
}}
397-
onSend={send}
398392
styles={integerInputStyles}
399393
value={height}
400394
/>
@@ -460,14 +454,13 @@ export const ExportImageDialog = (
460454
tokens={{ childrenGap: "4px" }}
461455
verticalAlign="baseline"
462456
>
463-
<SendableTextField
457+
<TextField
464458
errorMessage={timeoutErrorMessage}
465459
onChange={(_, value) => {
466460
if (value === undefined) return;
467461
setTimeout(value);
468462
validateTimeout(value);
469463
}}
470-
onSend={send}
471464
styles={integerInputStyles}
472465
value={timeout}
473466
/>
@@ -514,11 +507,11 @@ export const ExportImageDialog = (
514507
<DefaultButton onClick={props.dismiss} text="Cancel" />
515508
<PrimaryButton
516509
disabled={errors.size > 0}
517-
onClick={send}
518510
text="Export"
511+
type="submit"
519512
/>
520513
</DialogFooter>
521-
</>
514+
</form>
522515
);
523516

524517
case State.Exporting:

‎src/renderer/GoToDialog.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import {
44
DialogFooter,
55
Label,
66
PrimaryButton,
7+
TextField,
78
} from "@fluentui/react";
89
import { debounce } from "lodash";
910
import * as React from "react";
1011
import { useCallback, useMemo, useState } from "react";
1112
import { BASE_ZOOM_LEVEL } from "../common/constants";
1213
import { tryParseIntegerInRange, tryParseNumber } from "../common/parse";
13-
import { SendableTextField } from "./SendableTextField";
1414

1515
export interface GoToDialogProps {
1616
dismiss: () => void;
@@ -58,7 +58,7 @@ export const GoToDialog = (props: GoToDialogProps): JSX.Element => {
5858
[errors]
5959
);
6060

61-
const send = useCallback(() => {
61+
const submit = useCallback(() => {
6262
if (errors.size > 0) return;
6363
props.goTo(
6464
[Number.parseFloat(x), Number.parseFloat(y)],
@@ -105,7 +105,7 @@ export const GoToDialog = (props: GoToDialogProps): JSX.Element => {
105105
hidden={false}
106106
onDismiss={props.dismiss}
107107
>
108-
<>
108+
<form onSubmit={submit}>
109109
<div
110110
style={{
111111
alignItems: "baseline",
@@ -115,48 +115,45 @@ export const GoToDialog = (props: GoToDialogProps): JSX.Element => {
115115
}}
116116
>
117117
<Label style={{ textAlign: "right" }}>x:</Label>
118-
<SendableTextField
118+
<TextField
119119
errorMessage={xErrorMessage}
120120
onChange={(_, value) => {
121121
if (value === undefined) return;
122122
setX(value);
123123
validateX(value);
124124
}}
125-
onSend={send}
126125
styles={decimalInputStyles}
127126
value={x.toString()}
128127
/>
129128
<Label style={{ textAlign: "right" }}>y:</Label>
130-
<SendableTextField
129+
<TextField
131130
errorMessage={yErrorMessage}
132131
onChange={(_, value) => {
133132
if (value === undefined) return;
134133
setY(value);
135134
validateY(value);
136135
}}
137-
onSend={send}
138136
styles={decimalInputStyles}
139137
value={y.toString()}
140138
/>
141139
<Label style={{ textAlign: "right" }}>Zoom level:</Label>
142-
<SendableTextField
140+
<TextField
143141
errorMessage={zoomLevelErrorMessage}
144142
onChange={(_, value) => {
145143
if (value === undefined) return;
146144
setZoomLevel(value);
147145
validateZoomLevel(value);
148146
}}
149-
onSend={send}
150147
styles={integerInputStyles}
151148
value={zoomLevel.toString()}
152149
/>
153150
</div>
154151

155152
<DialogFooter>
156153
<DefaultButton onClick={props.dismiss} text="Cancel" />
157-
<PrimaryButton disabled={errors.size > 0} onClick={send} text="Go" />
154+
<PrimaryButton disabled={errors.size > 0} text="Go" type="submit" />
158155
</DialogFooter>
159-
</>
156+
</form>
160157
</Dialog>
161158
);
162159
};

‎src/renderer/SendableTextField.tsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)