FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 07:26:02 +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

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>