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

feat(web/circleprogress): add optional label (#33)

Browse Source 
* feat(circle progress label)

* refactor(circleprogress): wrap in flex
This commit is contained in:
Sam Shanks
2022-05-31 18:30:54 +01:00
committed by GitHub
parent 6108016796
commit 4cd53eeb1b
2 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resource/interface/client/progress.lua
View File

@@ -128,7 +128,8 @@ function lib.progressCircle(data)
action = 'circleProgress', action = 'circleProgress',
data = { data = {
duration = data.duration, duration = data.duration,
position = data.position position = data.position,
label = data.label
} }
}) })

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

@@ -3,12 +3,14 @@ import {
CircularProgress, CircularProgress,
CircularProgressLabel, CircularProgressLabel,
Flex, Flex,
Text,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useNuiEvent } from "../../hooks/useNuiEvent"; import { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData"; import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui"; import { fetchNui } from "../../utils/fetchNui";
interface Props { interface Props {
label?: string;
duration: number; duration: number;
position?: "middle" | "bottom"; position?: "middle" | "bottom";
percent?: boolean; percent?: boolean;
@@ -19,6 +21,7 @@ debugData([
action: "circleProgress", action: "circleProgress",
data: { data: {
duration: 8000, duration: 8000,
label: "Using Armour",
}, },
}, },
]); ]);
@@ -28,6 +31,7 @@ const CircleProgressbar: React.FC = () => {
const [progressDuration, setProgressDuration] = React.useState(0); const [progressDuration, setProgressDuration] = React.useState(0);
const [position, setPosition] = React.useState<"middle" | "bottom">("middle"); const [position, setPosition] = React.useState<"middle" | "bottom">("middle");
const [value, setValue] = React.useState(0); const [value, setValue] = React.useState(0);
const [label, setLabel] = React.useState("");
const [cancelled, setCancelled] = React.useState(false); const [cancelled, setCancelled] = React.useState(false);
const progressComplete = () => { const progressComplete = () => {
@@ -50,6 +54,7 @@ const CircleProgressbar: React.FC = () => {
setCancelled(false); setCancelled(false);
setVisible(true); setVisible(true);
setValue(0); setValue(0);
setLabel(data.label || "");
setProgressDuration(data.duration); setProgressDuration(data.duration);
setPosition(data.position || "middle"); setPosition(data.position || "middle");
const onePercent = data.duration * 0.01; const onePercent = data.duration * 0.01;
@@ -72,6 +77,10 @@ const CircleProgressbar: React.FC = () => {
alignItems="center" alignItems="center"
> >
{visible && ( {visible && (
<Flex
alignItems= "center"
flexDirection="column"
>
<CircularProgress <CircularProgress
value={value} value={value}
size="5rem" size="5rem"
@@ -101,6 +110,15 @@ const CircleProgressbar: React.FC = () => {
{value}% {value}%
</CircularProgressLabel> </CircularProgressLabel>
</CircularProgress> </CircularProgress>
<Text
fontFamily="Inter"
isTruncated
fontSize={18}
fontWeight="light"
>
{label}
</Text>
</Flex>
)} )}
</Flex> </Flex>
); );