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

feat(nui): Progress bar cancel

Browse Source
This commit is contained in:
Luke
2022-03-15 21:08:08 +01:00
parent ae073881c3
commit be1048271a
2 changed files with 56 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/CircleProgressbar.tsx
View File

@@ -26,14 +26,26 @@ const CircleProgressbar: React.FC = () => {
const [visible, setVisible] = React.useState(false);
const [progressDuration, setProgressDuration] = React.useState(0);
const [value, setValue] = React.useState(0);
const [cancelled, setCancelled] = React.useState(false);
const progressComplete = () => {
setVisible(false);
fetchNui("progressComplete");
};
const progressCancel = () => {
setCancelled(true);
setValue(99); // Sets the final value to 100% kek
setTimeout(() => {
setVisible(false);
}, 2500);
};
useNuiEvent("progressCancel", progressCancel);
useNuiEvent<Props>("circleProgress", (data) => {
if (visible) return;
setCancelled(false);
setVisible(true);
setValue(0);
setProgressDuration(data.duration);
@@ -61,14 +73,24 @@ const CircleProgressbar: React.FC = () => {
value={value}
size="7rem"
onAnimationEnd={progressComplete}
sx={{
".chakra-progress__indicator": {
transition: "none !important",
animation: "progress linear forwards !important",
animationDuration: `${progressDuration}ms !important`,
opacity: "1 !important",
},
}}
color={cancelled ? "rgb(198, 40, 40)" : "blue.300"}
sx={
!cancelled
? {
".chakra-progress__indicator": {
transition: "none !important",
animation: "progress linear forwards !important",
animationDuration: `${progressDuration}ms !important`,
opacity: "1 !important",
},
}
: {
".chakra-progress__indicator": {
transition: "none !important",
strokeDasharray: "264, 0 !important", // sets circle to full
},
}
}
>
<CircularProgressLabel color="black">{value}%</CircularProgressLabel>
</CircularProgress>