Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue/dialog autofocus #137

Closed
wants to merge 2 commits into from
Closed

Issue/dialog autofocus #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c24e39d
:sparkles: - feat: confirm works for forms
Xaohs Oct 1, 2024
c601399
:sparkles: - feat: autofocus useprompt
Xaohs Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/hooks/dialog/usealert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const useAlert = () => {
{
children: labelConfirm,
variant: "primary",
type: "submit",
onClick: () => {
setModalProps({ open: false });
onConfirm?.();
Expand Down
2 changes: 2 additions & 0 deletions src/hooks/dialog/useconfirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const useConfirm = () => {
{
children: labelCancel,
variant: "secondary",
type: "button",
onClick: () => {
setModalProps({ open: false });
onCancel?.();
Expand All @@ -47,6 +48,7 @@ export const useConfirm = () => {
{
children: labelConfirm,
variant: "primary",
type: "submit",
onClick: () => {
setModalProps({ open: false });
onConfirm?.();
Expand Down
105 changes: 69 additions & 36 deletions src/hooks/dialog/useprompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useEffect } from "react";

import { Form, ModalProps, P } from "../../components";
import { ModalServiceContext } from "../../contexts";
Expand All @@ -12,18 +12,6 @@ export const usePrompt = () => {
const dialog = useDialog();
const { setModalProps } = useContext(ModalServiceContext);

/**
* Shows a prompt dialog with a confirmation callback and an optional
* cancellation callback.
* @param title
* @param message
* @param label
* @param labelConfirm
* @param labelCancel
* @param onConfirm
* @param onCancel
* @param modalProps
*/
const fn = (
title: string,
message: React.ReactNode,
Expand All @@ -36,33 +24,78 @@ export const usePrompt = () => {
) => {
dialog(
title,
<>
{typeof message === "string" ? <P>{message}</P> : message}
<Form
fields={[{ label, name: "message", required: true }]}
labelSubmit={labelConfirm}
secondaryActions={[
{
children: labelCancel,
variant: "secondary",
type: "button",
onClick: () => {
setModalProps({ open: false });
onCancel?.();
},
},
]}
validateOnChange={true}
onSubmit={(_, { message }) => {
setModalProps({ open: false });
onConfirm(message as string);
}}
/>
</>,
<PromptForm
message={message}
label={label}
labelConfirm={labelConfirm}
labelCancel={labelCancel}
onConfirm={onConfirm}
onCancel={onCancel}
setModalProps={setModalProps}
/>,
undefined,
{ allowClose: false, ...modalProps },
);
};

return fn;
};

const PromptForm = ({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any reason why an additional component is introduced over using the effect directly on the hook (might work as well I think?)

I like to keep changes as minimal as possible especially considering that a new similar hook useFormDialog may be introduced (see: OAB).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, a hook cannot be used in the function of that component like that, as it defies the rules of react hooks

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I think you're correct, were acting on the returned function instead of the hook. I sill think this could be a nice moment to merge this with useFormDialog though so lets discuss further.

message,
label,
labelConfirm,
labelCancel,
onConfirm,
onCancel,
setModalProps,
}: {
message: React.ReactNode;
label: string;
labelConfirm: string;
labelCancel: string;
onConfirm: (message: string) => void;
onCancel?: () => void;
setModalProps: (props: Partial<ModalProps>) => void;
}) => {
useEffect(() => {
// Delay the focus slightly to ensure modal and form are fully rendered
const timer = setTimeout(() => {
// We focus a form element, and if none are found, we focus the submit button, and otherwise none
const formElement: HTMLFormElement | null = document.querySelector(
"form input , form textarea , form select , form button[type=submit]",
);
if (formElement) {
formElement.focus();
}
}, 100);

return () => clearTimeout(timer);
}, []);

return (
<>
{typeof message === "string" ? <P>{message}</P> : message}
<Form
fields={[{ label, name: "message", required: true }]} // No need to pass ref
labelSubmit={labelConfirm}
secondaryActions={[
{
children: labelCancel,
variant: "secondary",
type: "button",
onClick: () => {
setModalProps({ open: false });
onCancel?.();
},
},
]}
validateOnChange={true}
onSubmit={(_, { message }) => {
setModalProps({ open: false });
onConfirm(message as string);
}}
/>
</>
);
};