diff --git a/src/components/dialogManagement/dialogManagement.tsx b/src/components/dialogManagement/dialogManagement.tsx index 2f0d127..30d2fa9 100644 --- a/src/components/dialogManagement/dialogManagement.tsx +++ b/src/components/dialogManagement/dialogManagement.tsx @@ -14,7 +14,7 @@ import { } from "../../states/projectSlice"; import store, { ApplicationState } from "../../states/store"; import FileInput, { FileType } from "../fileInput/fileInput"; -import ModalDialog from "../modalDialog/modalDialog"; +import ModalDialog, { DialogAction } from "../modalDialog/modalDialog"; interface PropsFromState { type: DialogType; @@ -71,8 +71,13 @@ class DialogManagement extends Component { return ( this.props.closedDialog() + }, { label: "Save", onClick: () => { @@ -84,9 +89,7 @@ class DialogManagement extends Component { } } ]} - > -

Save Transcription

-
+ > ); default: return null; @@ -100,18 +103,27 @@ const NewDialog: FunctionComponent<{ }> = props => { const [fileUrl, setFileUrl] = useState(""); const [title, setTitle] = useState(""); + const actions: () => DialogAction[] = () => { + return [ + { + label: "Cancel", + onClick: () => props.onCancel() + }, + { + label: "Create", + onClick: () => props.onSubmit(title, fileUrl), + disabled: fileUrl === "" || title === "" + } + ]; + }; const handleTitleChange = (event: any) => setTitle(event.target.value); return ( props.onSubmit(title, fileUrl) - } - ]} + subTitle="Please add a project title and select an audio file from your hard disk below." + actions={actions()} onCancel={props.onCancel} > @@ -143,19 +155,28 @@ const OpenDialog: FunctionComponent<{ }> = props => { const [fileUrl, setFileUrl] = useState(""); const [file, setFile] = useState(); + const actions: () => DialogAction[] = () => { + return [ + { + label: "Cancel", + onClick: () => props.onCancel() + }, + { + label: "Open", + onClick: () => props.onSubmit(file!, fileUrl), + disabled: fileUrl === "" + } + ]; + }; return ( props.onSubmit(file!, fileUrl) - } - ]} + actions={actions()} > - + void; + disabled?: boolean; } interface ModalDialogProps { title: string; + subTitle?: string; onCancel: () => void; actions?: DialogAction[]; } @@ -26,10 +32,18 @@ class ModalDialog extends Component { maxWidth={"sm"} > {this.props.title} - {this.props.children} + + {this.props.subTitle} + {this.props.children} + {this.props.actions?.map((value, index) => ( - ))}