From 2493232c8491b51c26e3841f99ae5a18d23f8560 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 17 Nov 2020 17:31:42 +0800 Subject: ... --- FrontEnd/src/app/views/common/OperationDialog.tsx | 31 ++++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) (limited to 'FrontEnd/src/app/views/common/OperationDialog.tsx') diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx index e32e9277..08baf93a 100644 --- a/FrontEnd/src/app/views/common/OperationDialog.tsx +++ b/FrontEnd/src/app/views/common/OperationDialog.tsx @@ -77,11 +77,6 @@ type MapOperationInputInfoValueTypeList< [Index in keyof Tuple]: MapOperationInputInfoValueType; } & { length: Tuple["length"] }; -interface OperationResult { - type: "success" | "failure"; - data: unknown; -} - export type OperationInputError = | { [index: number]: I18nText | null | undefined; @@ -98,6 +93,7 @@ const isNoError = (error: OperationInputError): boolean => { }; export interface OperationDialogProps< + TData, OperationInputInfoList extends readonly OperationInputInfo[] > { open: boolean; @@ -106,28 +102,39 @@ export interface OperationDialogProps< titleColor?: "default" | "dangerous" | "create" | string; onProcess: ( inputs: MapOperationInputInfoValueTypeList - ) => Promise; + ) => Promise; inputScheme?: OperationInputInfoList; inputValidator?: ( inputs: MapOperationInputInfoValueTypeList ) => OperationInputError; inputPrompt?: I18nText | (() => React.ReactNode); processPrompt?: () => React.ReactNode; - successPrompt?: (data: unknown) => React.ReactNode; + successPrompt?: (data: TData) => React.ReactNode; failurePrompt?: (error: unknown) => React.ReactNode; - onSuccessAndClose?: () => void; + onSuccessAndClose?: (data: TData) => void; } const OperationDialog = < + TData, OperationInputInfoList extends readonly OperationInputInfo[] >( - props: OperationDialogProps + props: OperationDialogProps ): React.ReactElement => { const inputScheme = props.inputScheme as readonly OperationInputInfo[]; const { t } = useTranslation(); - type Step = "input" | "process" | OperationResult; + type Step = + | "input" + | "process" + | { + type: "success"; + data: TData; + } + | { + type: "failure"; + data: unknown; + }; const [step, setStep] = useState("input"); const [values, setValues] = useState<(boolean | string)[]>( inputScheme.map((i) => { @@ -153,7 +160,7 @@ const OperationDialog = < step.type === "success" && props.onSuccessAndClose ) { - props.onSuccessAndClose(); + props.onSuccessAndClose(step.data); } } else { console.log("Attempt to close modal when processing."); @@ -169,7 +176,7 @@ const OperationDialog = < > ) .then( - (d: unknown) => { + (d) => { setStep({ type: "success", data: d, -- cgit v1.2.3