mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
fix(web): cant update from settings panels (#1105)
* fix(web): propagation bug with IRC network table dropdown * fix submit button not working
This commit is contained in:
stacksmash76
GitHub
parent
996519cbae
commit
3c030dc0ce
2 changed files with 46 additions and 22 deletions
|
|
@ -7,7 +7,7 @@ import { Fragment, useRef, ReactNode, ReactElement } from "react";
|
|||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Form, Formik } from "formik";
|
||||
import type { FormikValues } from "formik";
|
||||
import type { FormikValues, FormikProps } from "formik";
|
||||
|
||||
import DEBUG from "@components/debug";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
|
|
@ -16,7 +16,7 @@ import { classNames } from "@utils";
|
|||
|
||||
interface SlideOverProps<DataType> {
|
||||
title: string;
|
||||
initialValues: FormikValues & DataType;
|
||||
initialValues: DataType;
|
||||
validate?: (values: DataType) => void;
|
||||
onSubmit: (values?: DataType) => void;
|
||||
isOpen: boolean;
|
||||
|
|
@ -31,7 +31,7 @@ interface SlideOverProps<DataType> {
|
|||
extraButtons?: (values: DataType) => ReactNode;
|
||||
}
|
||||
|
||||
function SlideOver<DataType>({
|
||||
function SlideOver<DataType extends FormikValues>({
|
||||
title,
|
||||
initialValues,
|
||||
validate,
|
||||
|
|
@ -48,13 +48,9 @@ function SlideOver<DataType>({
|
|||
extraButtons
|
||||
}: SlideOverProps<DataType>): ReactElement {
|
||||
const cancelModalButtonRef = useRef<HTMLInputElement | null>(null);
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
const formRef = useRef<FormikProps<DataType>>(null);
|
||||
|
||||
const test = (values: unknown) => {
|
||||
if (testFn) {
|
||||
testFn(values);
|
||||
}
|
||||
};
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
|
|
@ -71,13 +67,16 @@ function SlideOver<DataType>({
|
|||
/>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div className="fixed inset-y-0 right-0 max-w-full flex">
|
||||
<div
|
||||
className="fixed inset-y-0 right-0 max-w-full flex"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
|
|
@ -93,10 +92,16 @@ function SlideOver<DataType>({
|
|||
initialValues={initialValues}
|
||||
onSubmit={onSubmit}
|
||||
validate={validate}
|
||||
innerRef={formRef}
|
||||
>
|
||||
{({ handleSubmit, values }) => (
|
||||
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
|
||||
onSubmit={handleSubmit}>
|
||||
<Form
|
||||
className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSubmit(e);
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
|
||||
|
|
@ -154,7 +159,10 @@ function SlideOver<DataType>({
|
|||
"mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
)}
|
||||
disabled={isTesting}
|
||||
onClick={() => test(values)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
testFn(values);
|
||||
}}
|
||||
>
|
||||
{isTesting ? (
|
||||
<svg
|
||||
|
|
@ -190,13 +198,20 @@ function SlideOver<DataType>({
|
|||
<button
|
||||
type="button"
|
||||
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
onClick={toggle}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toggle();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
type="button"
|
||||
className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
formRef.current?.submitForm();
|
||||
}}
|
||||
>
|
||||
{type === "CREATE" ? "Create" : "Save"}
|
||||
</button>
|
||||
|
|
@ -208,7 +223,6 @@ function SlideOver<DataType>({
|
|||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
</div>
|
||||
|
||||
</Transition.Child>
|
||||
|
|
|
|||
|
|
@ -248,7 +248,13 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
"grid grid-cols-12 gap-2 lg:gap-4 items-center py-2 cursor-pointer",
|
||||
network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
)}
|
||||
onClick={toggleEdit}
|
||||
onClick={(e) => {
|
||||
if (e.defaultPrevented)
|
||||
return;
|
||||
|
||||
e.preventDefault();
|
||||
toggleEdit();
|
||||
}}
|
||||
>
|
||||
<IrcNetworkUpdateForm
|
||||
isOpen={updateIsOpen}
|
||||
|
|
@ -474,7 +480,11 @@ const ListItemDropdown = ({
|
|||
return (
|
||||
<Menu
|
||||
as="div"
|
||||
onClick={(e: MouseEvent) => e.stopPropagation()}
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
}}
|
||||
>
|
||||
<DeleteModal
|
||||
isOpen={deleteModalIsOpen}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue