chore(meshconfig): fix rebase

libremesh · Oct 25, 2024 · c451161 · c451161
1 parent 93280d4
commit c451161
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 153 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/Components.tsx
@@ -51,23 +51,27 @@ export const EditOrDelete = ({
     onEdit,
     onDelete,
 }: {
-    onEdit: (e) => void;
-    onDelete: (e) => void;
+    onEdit?: (e) => void;
+    onDelete?: (e) => void;
 }) => {
     const runCb = (e, cb) => {
         e.stopPropagation();
         cb();
     };
     return (
         <div className={"flex flex-row gap-3"}>
-            <EditIcon
-                className={"cursor-pointer"}
-                onClick={(e) => runCb(e, onEdit)}
-            />
-            <BinIcon
-                className={"cursor-pointer"}
-                onClick={(e) => runCb(e, onDelete)}
-            />
+            {!!onEdit && (
+                <EditIcon
+                    className={"cursor-pointer"}
+                    onClick={(e) => runCb(e, onEdit)}
+                />
+            )}
+            {!!onDelete && (
+                <BinIcon
+                    className={"cursor-pointer"}
+                    onClick={(e) => runCb(e, onDelete)}
+                />
+            )}
         </div>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -14,8 +14,10 @@ import {
     DeletePropModal,
     EditPropModal,
 } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
-import { IMeshWideSection } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
-import { EditOrDelete } from "plugins/lime-plugin-mesh-wide/src/components/Components";
+import {
+    IMeshWideConfig,
+    IMeshWideSection,
+} from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
 
 export const ConfigSection = ({
     title,
@@ -105,37 +107,36 @@ export const SectionEditOrDelete = ({ name }) => {
 };
 
 export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
-    const { toggleModal: toggleNewSectionModal, actionModal: addSectionModal } =
-        useAddNewSectionModal();
+    const { open, onOpen, onClose } = useDisclosure();
+    const { showToast } = useToast();
+
     const { watch, setValue } = useFormContext<IMeshWideConfig>();
     const section = watch(sectionName);
 
-    const { showToast } = useToast();
-
-    return (
-        <AddElementButton
-            onClick={() => {
-                addSectionModal((data) => {
-                    if (!sectionName) {
-                        setValue(data.name, {});
-                    } else {
-                        const kaka = { ...section, [data.name]: "" };
-                        setValue(sectionName, kaka);
-                    }
-                    toggleNewSectionModal();
-                    showToast({
-                        text: <Trans>Added section {data.name}</Trans>,
-                    });
-                }, sectionName);
-            }}
-        />
-    );
-};
+    const onSuccess = (data: AddNewSectionFormProps) => {
+        if (!sectionName) {
+            setValue(data.name, {});
+        } else {
+            const kaka = { ...section, [data.name]: "" };
+            setValue(sectionName, kaka);
+        }
+        onClose();
+        showToast({
+            text: <Trans>Added section {data.name}</Trans>,
+        });
+    };
 
-export const AddElementButton = (props: ButtonProps) => {
     return (
-        <Button color={"info"} {...props}>
-            <Trans>Add new section</Trans>
-        </Button>
+        <>
+            <Button color={"info"} onClick={onOpen}>
+                <Trans>Add new section</Trans>
+            </Button>
+            <AddNewSectionModal
+                sectionName={sectionName}
+                isOpen={open}
+                onSuccess={onSuccess}
+                onClose={onClose}
+            />
+        </>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -7,13 +7,8 @@ import { Button } from "components/buttons/button";
 import Divider from "components/divider";
 import { useToast } from "components/toast/toastProvider";
 
-import { AddElementButton } from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
 import { EditOrDelete } from "plugins/lime-plugin-mesh-wide-config/src/components/Components";
-import {
-    DeletePropModal,
-    EditPropModal,
-} from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
-import { ConfigItemType } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes";
+import { DeletePropModal } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
 
 type OptionContainerProps = {
     sectionName: string;
@@ -26,13 +21,27 @@ export const OptionContainer = ({
 }: OptionContainerProps) => {
     const { watch, setValue } = useFormContext();
     const [isEditing, setIsEditing] = useState(false);
+    const {
+        open: isDeleteModalOpen,
+        onOpen: openDeleteModal,
+        onClose: onCloseDeleteModal,
+    } = useDisclosure();
 
-    const { toggleModal: toggleDeleteModal, actionModal: deletePropModal } =
-        useDeletePropModal();
-    // const { toggleModal: toggleEditModal, actionModal: editPropertyModal } =
-    //     useEditPropModal();
     const { showToast } = useToast();
 
+    const onDelete = async () => {
+        const newValues = { ...section };
+        delete newValues[keyString];
+        setValue(sectionName, newValues);
+        onCloseDeleteModal();
+        showToast({
+            text: <Trans>Deleted {keyString}</Trans>,
+            onAction: () => {
+                setValue(sectionName, section);
+            },
+        });
+    };
+
     const name = `${sectionName}[${keyString}]`;
     const value = watch(name);
     const section = watch(sectionName);
@@ -58,23 +67,7 @@ export const OptionContainer = ({
                         </div>
                         <EditOrDelete
                             onEdit={() => setIsEditing((prev) => !prev)}
-                            onDelete={(e) => {
-                                e.stopPropagation();
-                                deletePropModal(keyString, () => {
-                                    const newValues = { ...section };
-                                    delete newValues[keyString];
-                                    setValue(sectionName, newValues);
-                                    toggleDeleteModal();
-                                    showToast({
-                                        text: (
-                                            <Trans>Deleted {keyString}</Trans>
-                                        ),
-                                        onAction: () => {
-                                            setValue(sectionName, section);
-                                        },
-                                    });
-                                });
-                            }}
+                            onDelete={openDeleteModal}
                         />
                     </div>
                     {!isEditing && <div>{_value}</div>}
@@ -151,7 +144,7 @@ const EditableField = ({
                             )}
                         />
                     ))}
-                    <AddElementButton onClick={addListItem} />
+                    {/*<AddElementButton onClick={addListItem} />*/}
                 </div>
             ) : (
                 <>

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
@@ -43,11 +43,12 @@ export interface AddNewSectionFormProps {
 
 export const AddNewSectionModal = ({
     onSuccess,
+    sectionName,
     ...rest
-}: { onSuccess: (data: AddNewSectionFormProps) => void } & Pick<
-    ModalProps,
-    "isOpen" | "onClose"
->) => {
+}: {
+    onSuccess: (data: AddNewSectionFormProps) => void;
+    sectionName?: string;
+} & Pick<ModalProps, "isOpen" | "onClose">) => {
     const {
         register,
         handleSubmit,
@@ -56,28 +57,25 @@ export const AddNewSectionModal = ({
         defaultValues: { name: "" },
     });
 
-    const actionModal = useCallback(
-        (actionCb: (data) => void, sectionName?: string) => {
-            let title = <Trans>Add new section</Trans>;
-            if (sectionName) {
-                title = <Trans>Add new section for {sectionName}</Trans>;
-            }
-            setModalState({
-                content: (
-                    <div>
-                        <InputField
-                            id={"name"}
-                            label={<Trans>Name</Trans>}
-                            register={register}
-                        />
-                    </div>
-                ),
-                title,
-                successCb: handleSubmit(actionCb),
-                successBtnText: <Trans>Add</Trans>,
-            });
-            toggleModal();
-        },
-        [handleSubmit, register, setModalState, toggleModal]
+    let title = <Trans>Add new section</Trans>;
+    if (sectionName) {
+        title = <Trans>Add new section for {sectionName}</Trans>;
+    }
+
+    return (
+        <Modal
+            title={title}
+            successBtnText={<Trans>Add</Trans>}
+            {...rest}
+            onSuccess={handleSubmit(onSuccess)}
+        >
+            <div>
+                <InputField
+                    id={"name"}
+                    label={<Trans>Name</Trans>}
+                    register={register}
+                />
+            </div>
+        </Modal>
     );
 };
diff --git a/plugins/lime-plugin-rx/src/sections/alignment.tsx b/plugins/lime-plugin-rx/src/sections/alignment.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/macro";
 
-import { Button } from "components/elements/button";
+import { Button } from "components/buttons/button";
 
 import {
     IconsClassName,

diff --git a/plugins/lime-plugin-rx/src/sections/internetPath.tsx b/plugins/lime-plugin-rx/src/sections/internetPath.tsx
@@ -1,7 +1,7 @@
 import { Trans } from "@lingui/macro";
 import { useCallback } from "react";
 
-import { Button } from "components/elements/button";
+import { Button } from "components/buttons/button";
 import { GlobeIcon } from "components/icons/globeIcon";
 import Loading from "components/loading";
 

diff --git a/src/components/elements/button.tsx b/src/components/elements/button.tsx