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

feat(web): developer drawer

Browse Source 
Move all debug functions into a single developer drawer,

Not the best implementation as there is focus fighting going on between some elements and the drawer but will do for now without state management
This commit is contained in:
Luke
2022-08-27 15:40:41 +02:00
parent 9bd0b52749
commit 0bc185ef38
19 changed files with 487 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/features/progress/CircleProgressbar.tsx
View File

@@ -6,26 +6,15 @@ import {
Text,
} from "@chakra-ui/react";
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui";
interface Props {
export interface CircleProgressbarProps {
label?: string;
duration: number;
position?: "middle" | "bottom";
percent?: boolean;
}
debugData([
{
action: "circleProgress",
data: {
duration: 8000,
label: "Using Armour",
},
},
]);
const CircleProgressbar: React.FC = () => {
const [visible, setVisible] = React.useState(false);
const [progressDuration, setProgressDuration] = React.useState(0);
@@ -47,7 +36,7 @@ const CircleProgressbar: React.FC = () => {
useNuiEvent("progressCancel", progressCancel);
useNuiEvent<Props>("circleProgress", (data) => {
useNuiEvent<CircleProgressbarProps>("circleProgress", (data) => {
if (visible) return;
setCancelled(false);
setVisible(true);

15
web/src/features/progress/Progressbar.tsx
View File

@@ -1,24 +1,13 @@
import React from "react";
import { Text, Flex, Box } from "@chakra-ui/react";
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui";
interface Props {
export interface ProgressbarProps {
label: string;
duration: number;
}
debugData([
{
action: "progress",
data: {
label: "Using Lockpick",
duration: 8000,
},
},
]);
const Progressbar: React.FC = () => {
const [visible, setVisible] = React.useState(false);
const [label, setLabel] = React.useState("");
@@ -37,7 +26,7 @@ const Progressbar: React.FC = () => {
useNuiEvent("progressCancel", progressCancel);
useNuiEvent<Props>("progress", (data) => {
useNuiEvent<ProgressbarProps>("progress", (data) => {
setCancelled(false);
setVisible(true);
setLabel(data.label);