From 8dc6f8dfab166deedd5e8ca9370e643c0e861a0c Mon Sep 17 00:00:00 2001 From: Kr3mu Date: Sun, 31 Aug 2025 15:34:50 +0200 Subject: [PATCH] Fixes the issue with less forgiving Typescript --- [core]/esx_menu_default/web/build/index.html | 32 ++--- [core]/esx_menu_default/web/src/app/App.tsx | 144 +++++++++---------- 2 files changed, 83 insertions(+), 93 deletions(-) diff --git a/[core]/esx_menu_default/web/build/index.html b/[core]/esx_menu_default/web/build/index.html index 5e0f081a..74d98a36 100644 --- a/[core]/esx_menu_default/web/build/index.html +++ b/[core]/esx_menu_default/web/build/index.html @@ -1,19 +1,19 @@ - - - - - - - - - ESX Menu Default + + + + + + + + + ESX Menu Default - - - -
- - - + + + +
+ + + \ No newline at end of file diff --git a/[core]/esx_menu_default/web/src/app/App.tsx b/[core]/esx_menu_default/web/src/app/App.tsx index 3c34772f..427a176e 100644 --- a/[core]/esx_menu_default/web/src/app/App.tsx +++ b/[core]/esx_menu_default/web/src/app/App.tsx @@ -1,106 +1,96 @@ import React, { useEffect, useState } from "react"; import { useNuiEvent } from "@/hooks/useNuiEvent"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion"; import Menu from "@/components/menu"; import { IconProp } from "@fortawesome/fontawesome-svg-core"; export interface Element { - label: string; - name: string; - description?: string; - icon?: IconProp; - value?: number; - type?: "slider"; - min: number; - max: number; - options?: string[]; - usable?: boolean; - unselectable?: boolean; - disableRightArrow?: boolean; + label: string; + name: string; + description?: string; + icon?: IconProp; + value?: number; + type?: "slider"; + min: number; + max: number; + options?: string[]; + usable?: boolean; + unselectable?: boolean; + disableRightArrow?: boolean; } export interface MenuData { - title: string; - namespace: string; - name: string; - align: - | "top-left" - | "top-right" - | "bottom-left" - | "bottom-right" - | "center" - | "left-center" - | "right-center"; - elements: Element[]; + title: string; + namespace: string; + name: string; + align: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "left-center" | "right-center"; + elements: Element[]; } export interface CloseData { - namespace: string; - name: string; + namespace: string; + name: string; } -const visibility_animation = { - initial: { opacity: 0 }, - animate: { - opacity: 1, - transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }, - }, - exit: { - opacity: 0, - transition: { duration: 0.3, ease: [0.4, 0, 1, 1] }, - }, +const visibility_animation: HTMLMotionProps<"div"> = { + initial: { opacity: 0 }, + animate: { + opacity: 1, + transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }, + }, + exit: { + opacity: 0, + transition: { duration: 0.3, ease: [0.4, 0, 1, 1] }, + }, }; const App: React.FC = () => { - const [_, setCreatedMenus] = useState>({}); + const [_, setCreatedMenus] = useState>({}); - const [currentMenu, setCurrentMenu] = useState(null); + const [currentMenu, setCurrentMenu] = useState(null); - useNuiEvent("openMenu", (data) => { - setCreatedMenus((prev) => { - const list = prev[data.namespace] ?? []; - return { - ...prev, - [data.namespace]: [...list, data], - }; + useNuiEvent("openMenu", (data) => { + setCreatedMenus((prev) => { + const list = prev[data.namespace] ?? []; + return { + ...prev, + [data.namespace]: [...list, data], + }; + }); + + console.log(JSON.stringify(data)); + + setCurrentMenu(data); }); - console.log(JSON.stringify(data)) + useNuiEvent("closeMenu", ({ namespace, name }) => { + setCreatedMenus((prev) => { + const list = prev[namespace] ?? []; + const nextList = list.filter((m) => m.name !== name); - setCurrentMenu(data); - }); + const next = { ...prev }; + if (nextList.length > 0) { + next[namespace] = nextList; + } else { + delete next[namespace]; + } - useNuiEvent("closeMenu", ({ namespace, name }) => { - setCreatedMenus((prev) => { - const list = prev[namespace] ?? []; - const nextList = list.filter((m) => m.name !== name); + const all = Object.values(next).flat(); + setCurrentMenu(all.length > 0 ? all[all.length - 1] : null); - const next = { ...prev }; - if (nextList.length > 0) { - next[namespace] = nextList; - } else { - delete next[namespace]; - } - - const all = Object.values(next).flat(); - setCurrentMenu(all.length > 0 ? all[all.length - 1] : null); - - return next; + return next; + }); }); - }); - return ( - - {currentMenu && ( - - - - )} - - ); + return ( + + {currentMenu && ( + + + + )} + + ); }; export default App;