FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(interface/menu): checkbox

Browse Source 
feat(package/interface/menu): checkbox
feat(web/menu/list): checkbox
feat(web/menu/list): checkbox option for ListItem
feat(web/menu/list): custom checkbox
This commit is contained in:
BerkieBb
2022-10-29 12:23:15 +02:00
committed by Luke
parent de23227ea7
commit 5ba1a3b8f9
5 changed files with 125 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package/client/resource/interface/menu.ts
View File

@@ -1,11 +1,12 @@
import { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
type ChangeFunction = (selected: number, scrollIndex: number | null, args: any | null) => void;
type ChangeFunction = (selected: number, scrollIndex?: number, args?: any, checked?: boolean) => void;
interface MenuOptions {
label: string;
icon?: IconName | [IconPrefix, IconName];
checked?: boolean;
values?: Array<string | { label: string; description: string }>;
description?: string;
defaultIndex?: number;
@@ -23,6 +24,7 @@ interface MenuProps {
onClose?: (keyPressed?: 'Escape' | 'Backspace') => void;
onSelected?: ChangeFunction;
onSideScroll?: ChangeFunction;
onChecked?: ChangeFunction;
cb?: ChangeFunction;
}

29
resource/interface/client/menu.lua
View File

@@ -4,12 +4,13 @@ local registeredMenus = {}
local openMenu = nil
local keepInput = IsNuiFocusKeepingInput()
---@alias MenuPosition 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
---@alias MenuChangeFunction fun(selected: number, scrollIndex?: number, args?: any)
---@alias MenuPosition 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
---@alias MenuChangeFunction fun(selected: number, scrollIndex?: number, args?: any, checked?: boolean)
---@class MenuOptions
---@field label string
---@field icon? string
---@field checked? boolean
---@field values? Array<string | { label: string, description: string }>
---@field description? string
---@field defaultIndex? number
@@ -26,6 +27,7 @@ local keepInput = IsNuiFocusKeepingInput()
---@field onClose? fun(keyPressed?: 'Escape' | 'Backspace')
---@field onSelected? MenuChangeFunction
---@field onSideScroll? MenuChangeFunction
---@field onCheck? MenuChangeFunction
---@field cb? MenuChangeFunction
---@param data MenuProps
@@ -132,13 +134,13 @@ RegisterNUICallback('confirmSelected', function(data, cb)
end
if menu.cb then
menu.cb(data[1], data[2], menu.options[data[1]].args)
menu.cb(data[1], data[2], menu.options[data[1]].args, data[3])
end
end)
RegisterNUICallback('changeIndex', function(data, cb)
cb(1)
if not openMenu.onSideScroll then return end
if not openMenu?.onSideScroll then return end
data[1] += 1 -- selected
@@ -146,12 +148,12 @@ RegisterNUICallback('changeIndex', function(data, cb)
data[2] += 1 -- scrollIndex
end
openMenu.onSideScroll(data[1], data[2], openMenu.options[data[1]].args)
openMenu.onSideScroll(data[1], data[2], openMenu.options[data[1]].args, data[3])
end)
RegisterNUICallback('changeSelected', function(data, cb)
cb(1)
if not openMenu.onSelected then return end
if not openMenu?.onSelected then return end
data[1] += 1 -- selected
@@ -159,7 +161,20 @@ RegisterNUICallback('changeSelected', function(data, cb)
data[2] += 1 -- scrollIndex
end
openMenu.onSelected(data[1], data[2], openMenu.options[data[1]].args)
openMenu.onSelected(data[1], data[2], openMenu.options[data[1]].args, data[3])
end)
RegisterNUICallback('changeChecked', function(data, cb)
cb(1)
if not openMenu?.onCheck then return end
data[1] += 1 -- selected
if data[2] then
data[2] += 1 -- scrollIndex
end
openMenu.onCheck(data[1], data[2], openMenu.options[data[1]].args, data[3])
end)
RegisterNUICallback('closeMenu', function(data, cb)

36
web/src/features/menu/list/CustomCheckbox.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { Box, Flex, useCheckbox, chakra, CheckboxIcon } from '@chakra-ui/react';
const CustomCheckbox: React.FC<{ checked: boolean }> = ({ checked }) => {
const { getCheckboxProps, getInputProps, htmlProps } = useCheckbox();
return (
<chakra.label
display='flex'
flexDirection='row'
alignItems='center'
gridColumnGap={2}
pr={4}
cursor='pointer'
{...htmlProps}
>
<input {...getInputProps()} hidden />
<Flex
alignItems='center'
justifyContent='center'
border='2px solid'
borderColor='#909296'
rounded={'sm'}
w={6}
h={6}
{...getCheckboxProps()}
>
{checked && (
<Box w={5} h={5} bg='#25262B'>
<CheckboxIcon isChecked color={'#373A40'} />
</Box>
)}
</Flex>
</chakra.label>
)
};
export default CustomCheckbox;

11
web/src/features/menu/list/ListItem.tsx
View File

@@ -1,15 +1,17 @@
import { Box, Flex, Stack, Spacer, Text, IconProps } from '@chakra-ui/react';
import { Box, Flex, Stack, Text } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { forwardRef } from 'react';
import CustomCheckbox from './CustomCheckbox';
import type { MenuItem } from './index';
interface Props {
item: MenuItem;
index: number;
scrollIndex: number;
checked: boolean;
}
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex }, ref) => {
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex, checked }, ref) => {
return (
<Box
bg="#25262B"
@@ -53,6 +55,11 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
<FontAwesomeIcon icon="chevron-right" fontSize={16} color="#909296" />
</Stack>
</Flex>
) : item.checked !== undefined ? (
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text>{item.label}</Text>
<CustomCheckbox checked={checked}></CustomCheckbox>
</Flex>
) : (
<Text>{item.label}</Text>
)}

75
web/src/features/menu/list/index.tsx
View File

@@ -11,6 +11,7 @@ import React from 'react';
export interface MenuItem {
label: string;
checked?: boolean;
values?: Array<string | { label: string; description: string }>;
description?: string;
icon?: IconProp;
@@ -35,6 +36,7 @@ const ListMenu: React.FC = () => {
const [selected, setSelected] = useState(0);
const [visible, setVisible] = useState(false);
const [indexStates, setIndexStates] = useState<Record<number, number>>({});
const [checkedStates, setCheckedStates] = useState<Record<number, boolean>>({});
const listRefs = useRef<Array<HTMLDivElement | null>>([]);
const firstRenderRef = useRef(false);
@@ -59,33 +61,63 @@ const ListMenu: React.FC = () => {
});
break;
case 'ArrowRight':
if (!Array.isArray(menu.items[selected].values)) return;
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1
? indexStates[selected] + 1
: (indexStates[selected] = 0),
});
if (Array.isArray(menu.items[selected].values)) {
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1
? indexStates[selected] + 1
: 0
});
} else if (menu.items[selected].checked !== undefined) {
setCheckedStates({
...checkedStates,
[selected]: !checkedStates[selected]
});
}
break;
case 'ArrowLeft':
if (!Array.isArray(menu.items[selected].values)) return;
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] - 1 >= 0
? indexStates[selected] - 1
: (indexStates[selected] = menu.items[selected].values?.length! - 1),
});
if (Array.isArray(menu.items[selected].values)) {
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] - 1 >= 0
? indexStates[selected] - 1
: menu.items[selected].values?.length! - 1
});
} else if (menu.items[selected].checked !== undefined) {
setCheckedStates({
...checkedStates,
[selected]: !checkedStates[selected]
});
}
break;
case 'Enter':
if (!menu.items[selected]) return;
if (menu.items[selected].checked !== undefined) {
setCheckedStates({
...checkedStates,
[selected]: !checkedStates[selected]
});
}
fetchNui('confirmSelected', [selected, indexStates[selected]]).catch();
if (menu.items[selected].close === undefined || menu.items[selected].close) setVisible(false);
break;
}
};
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false;
return;
}
if (menu.items[selected]?.checked === undefined) return;
const timer = setTimeout(() => {
fetchNui('changeChecked', [selected, indexStates[selected], checkedStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [checkedStates])
useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false;
@@ -93,7 +125,7 @@ const ListMenu: React.FC = () => {
}
if (!menu.items[selected]?.values) return;
const timer = setTimeout(() => {
fetchNui('changeIndex', [selected, indexStates[selected]]).catch();
fetchNui('changeIndex', [selected, indexStates[selected], checkedStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [indexStates]);
@@ -107,7 +139,7 @@ const ListMenu: React.FC = () => {
listRefs.current[selected]?.focus({ preventScroll: true });
// debounces the callback to avoid spam
const timer = setTimeout(() => {
fetchNui('changeSelected', [selected, indexStates[selected]]).catch();
fetchNui('changeSelected', [selected, indexStates[selected], checkedStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [selected, menu]);
@@ -135,11 +167,14 @@ const ListMenu: React.FC = () => {
listRefs.current = [];
setMenu(data);
setVisible(true);
let arrayIndexes: { [key: number]: number } = {};
const arrayIndexes: { [key: number]: number } = {};
const checkedIndexes: { [key: number]: boolean } = {};
for (let i = 0; i < data.items.length; i++) {
if (Array.isArray(data.items[i].values)) arrayIndexes[i] = (data.items[i].defaultIndex || 1) - 1;
else if (data.items[i].checked !== undefined) checkedIndexes[i] = data.items[i].checked || false;
}
setIndexStates(arrayIndexes);
setCheckedStates(checkedIndexes);
listRefs.current[data.startItemIndex]?.focus();
});
@@ -189,7 +224,7 @@ const ListMenu: React.FC = () => {
{menu.items.map((item, index) => (
<React.Fragment key={`menu-item-${index}`}>
{item.label && (
<ListItem index={index} item={item} scrollIndex={indexStates[index]} ref={listRefs} />
<ListItem index={index} item={item} scrollIndex={indexStates[index]} checked={checkedStates[index]} ref={listRefs} />
)}
</React.Fragment>
))}