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(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>

32
web/src/components/Progressbar.tsx
View File

@@ -29,14 +29,25 @@ const Progressbar: React.FC = () => {
const [visible, setVisible] = React.useState(false);
const [label, setLabel] = React.useState("");
const [duration, setDuration] = React.useState(0);
const [cancelled, setCancelled] = React.useState(false);
const progressComplete = () => {
setVisible(false);
fetchNui("progressComplete");
};
const progressCancel = () => {
setCancelled(true);
setTimeout(() => {
setVisible(false);
}, 2500);
};
useNuiEvent("progressCancel", progressCancel);
useNuiEvent<Props>("progress", (data) => {
if (visible) return;
setCancelled(false);
setVisible(true);
setLabel(data.label);
setDuration(data.duration);
@@ -59,12 +70,21 @@ const Progressbar: React.FC = () => {
height="3rem"
flex="1 1 auto"
onAnimationEnd={progressComplete}
sx={{
// really scuffed solution but works, wonder if there's a better way to do this?
"> div:first-of-type": {
animation: `progress-bar linear ${duration}ms`,
},
}}
sx={
!cancelled
? {
// really scuffed solution but works, wonder if there's a better way to do this?
"> div:first-of-type": {
animation: `progress-bar linear ${duration}ms`,
},
}
: {
"> div:first-of-type": {
width: "100%",
backgroundColor: "rgb(198, 40, 40)",
},
}
}
>
<ProgressLabel fontSize={22}>{label}</ProgressLabel>
</Progress>