starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-08-29 02:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds options to the slider component

Browse Source
This commit is contained in:
Kr3mu
2025-08-27 12:24:02 +02:00
committed by _Not_
parent a01730ce7a
commit 4363f6aaa4
6 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_menu_default/web/build/assets/index-D4qEeGwz.js → [core]/esx_menu_default/web/build/assets/index-DFrU2HgH.js
+18 -18
View File
File diff suppressed because one or more lines are too long
[core]/esx_menu_default/web/build/assets/index-CFgRLOwP.css → [core]/esx_menu_default/web/build/assets/index-DfU8TAxG.css
+1 -1
View File
File diff suppressed because one or more lines are too long
[core]/esx_menu_default/web/build/index.html
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESX Menu Default</title> <title>ESX Menu Default</title>
<script type="module" crossorigin src="./assets/index-D4qEeGwz.js"></script> <script type="module" crossorigin src="./assets/index-DFrU2HgH.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CFgRLOwP.css"> <link rel="stylesheet" crossorigin href="./assets/index-DfU8TAxG.css">
</head> </head>
<body> <body>
[core]/esx_menu_default/web/src/app/App.tsx
+1
View File
@@ -13,6 +13,7 @@ export interface Element {
type?: "slider"; type?: "slider";
min: number; min: number;
max: number; max: number;
options?: string[];
unselectable?: boolean; unselectable?: boolean;
} }
[core]/esx_menu_default/web/src/components/menu-slider.tsx
+17 -9
View File
@@ -8,14 +8,15 @@ interface Props {
} }
const MenuSlider: React.FC<Props> = ({ element, isSelected }) => { const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
const { const { label, description, icon } = element;
min = element.min,
max = element.max, const options = (element as Element).options as string[] | undefined;
label,
description, const min = options ? 0 : element.min ?? 0;
icon, const max = options ? Math.max(0, options.length - 1) : element.max ?? 0;
} = element;
const value = element.value ?? min; const rawValue = element.value ?? min;
const value = Math.min(max, Math.max(min, rawValue));
const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between"; const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
const sel = isSelected const sel = isSelected
@@ -58,7 +59,14 @@ const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
<div className="flex items-center gap-2 select-none"> <div className="flex items-center gap-2 select-none">
<ChevronLeft color={isSelected ? "#FB9B04" : "white"} /> <ChevronLeft color={isSelected ? "#FB9B04" : "white"} />
<span className={`${text} w-6 text-center`}>{value}</span> {options ? (
<span
className={`${text} whitespace-nowrap overflow-hidden text-ellipsis`}
dangerouslySetInnerHTML={{ __html: options[value] ?? "" }}
/>
) : (
<span className={`${text} w-6 text-center`}>{value}</span>
)}
<ChevronRight color={isSelected ? "#FB9B04" : "white"} /> <ChevronRight color={isSelected ? "#FB9B04" : "white"} />
</div> </div>
</div> </div>
[core]/esx_menu_default/web/src/components/menu.tsx
+15 -3
View File
@@ -32,10 +32,22 @@ const Menu: React.FC<Props> = ({ data }) => {
const stepSelectedSlider = (delta: number) => { const stepSelectedSlider = (delta: number) => {
const el = elements[position]; const el = elements[position];
if (el?.type !== "slider") return; if (el?.type !== "slider") return;
const min = el.min ?? 0;
const max = el.max ?? 0; const options = (el as any).options as string[] | undefined;
const min = options ? 0 : el.min ?? 0;
const max = options ? Math.max(0, options.length - 1) : el.max ?? 0;
const cur = (el.value ?? min) + delta; const cur = (el.value ?? min) + delta;
el.value = Math.min(max, Math.max(min, cur));
if (cur > max) {
el.value = min;
} else if (cur < min) {
el.value = max;
} else {
el.value = cur;
}
forceRender(); forceRender();
change(); change();
}; };