radix dialog update

edrlab · Jan 5, 2024 · 6e3e97c · 6e3e97c
1 parent 0a83df2
commit 6e3e97c
Showing 1 changed file with 63 additions and 55 deletions.
diff --git a/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx b/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx
@@ -6,11 +6,12 @@
 // ==LICENSE-END==
 
 import * as React from "react";
-// import { DialogType, DialogTypeName } from "readium-desktop/common/models/dialog";
-// import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
+import * as Dialog from "@radix-ui/react-dialog";
 import * as stylesInputs from "readium-desktop/renderer/assets/styles/components/inputs.css";
 import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css";
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
+import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
+import SVG from "readium-desktop/renderer/common/components/SVG";
 import {
     TranslatorProps, withTranslator,
 } from "readium-desktop/renderer/common/components/hoc/translator";
@@ -47,61 +48,68 @@ class OpdsFeedUpdateForm extends React.Component<IProps, IState> {
 
         const { __ } = this.props;
         const { title, url } = this.state;
-        return <DialogWithRadix>
-            <DialogWithRadixTrigger asChild>
+        return <Dialog.Root>
+            <Dialog.Trigger asChild>
                 {this.props.trigger}
-            </DialogWithRadixTrigger>
-            <DialogWithRadixContent>
-                <DialogHeader>
-                    <DialogTitle>
-                        {__("opds.updateForm.title")}
-                    </DialogTitle>
-                    <div>
-                        <DialogCloseButton />
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <div className={stylesModals.modal_dialog_overlay}></div>
+                <Dialog.Content className={stylesModals.modal_dialog}>
+                    <div className={stylesModals.modal_dialog_header}>
+                        <Dialog.Title>
+                            {__("opds.updateForm.title")}
+                        </Dialog.Title>
+                        <div>
+                            <Dialog.Close asChild>
+                                <button className={stylesButtons.button_transparency_icon} aria-label="Close">
+                                    <SVG ariaHidden={true} svg={QuitIcon} />
+                                </button>
+                            </Dialog.Close>
+                        </div>
                     </div>
-                </DialogHeader>
-                <form className={stylesModals.modal_dialog_body}>
-                    <div className={stylesInputs.form_group}>
-                        <label htmlFor="title">{__("opds.updateForm.name")}</label>
-                        <input
-                            id="title"
-                            value={title}
-                            onChange={(e) => this.setState({
-                                title: e.target.value,
-                                // url: this.state.url || this.props.feed.url,
-                            })}
-                            type="text"
-                            aria-label={__("opds.updateForm.name")}
-                            defaultValue={title}
-                            required
-                        />
-                    </div>
-                    <div className={stylesInputs.form_group}>
-                        <label htmlFor="url">{__("opds.updateForm.url")}</label>
-                        <input
-                            id="url"
-                            value={url}
-                            onChange={(e) => this.setState({
-                                // name: this.state.name || this.props.feed.title,
-                                url: e.target.value,
-                            })}
-                            type="text"
-                            aria-label={__("opds.updateForm.url")}
-                            defaultValue={url}
-                            required
-                        />
-                    </div>
-                    <DialogFooter>
-                        <DialogClose asChild>
-                            <button className={stylesButtons.button_primary}>{__("dialog.cancel")}</button>
-                        </DialogClose>
-                        <DialogClose asChild>
-                            <button type="submit" disabled={!title || !url} className={stylesButtons.button_secondary} onClick={() => this.update()}>{__("opds.updateForm.updateButton")}</button>
-                        </DialogClose>
-                    </DialogFooter>
-                </form>
-            </DialogWithRadixContent>
-        </DialogWithRadix>;
+                    <form className={stylesModals.modal_dialog_body}>
+                        <div className={stylesInputs.form_group}>
+                            <label htmlFor="title">{__("opds.updateForm.name")}</label>
+                            <input
+                                id="title"
+                                value={title}
+                                onChange={(e) => this.setState({
+                                    title: e.target.value,
+                                    // url: this.state.url || this.props.feed.url,
+                                })}
+                                type="text"
+                                aria-label={__("opds.updateForm.name")}
+                                defaultValue={title}
+                                required
+                            />
+                        </div>
+                        <div className={stylesInputs.form_group}>
+                            <label htmlFor="url">{__("opds.updateForm.url")}</label>
+                            <input
+                                id="url"
+                                value={url}
+                                onChange={(e) => this.setState({
+                                    // name: this.state.name || this.props.feed.title,
+                                    url: e.target.value,
+                                })}
+                                type="text"
+                                aria-label={__("opds.updateForm.url")}
+                                defaultValue={url}
+                                required
+                            />
+                        </div>
+                        <div className={stylesModals.modal_dialog_footer}>
+                            <Dialog.Close asChild>
+                                <button className={stylesButtons.button_primary}>{__("dialog.cancel")}</button>
+                            </Dialog.Close>
+                            <Dialog.Close asChild>
+                                <button type="submit" disabled={!title || !url} className={stylesButtons.button_secondary} onClick={() => this.update()}>{__("opds.updateForm.updateButton")}</button>
+                            </Dialog.Close>
+                        </div>
+                    </form>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>;
     }
 
     private update = () => {