imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix progress bar regression throughout the app (#9219)

Browse source 
* Fix useSmoothAnimation enablement not working properly by getting rid of it

Passing duration=0 is more logical and less superfluous

* Refactor UploadBar to handle state more correctly

* Change ProgressBar to new useSmoothAnimation signature and default animated to true for consistency

* Add type guard

* Make types stricter

* Write tests for the ProgressBar component

* Make the new test conform to tsc --strict

* Update UploadBar.tsx

* Update UploadBar.tsx

* Update UploadBar.tsx
This commit is contained in:
Michael Telatynski 2022-08-25 16:39:00 +01:00 • committed by GitHub
parent 6407cd4c0d
commit 9b99c967f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/hooks/useSmoothAnimation.ts
View file

@ -30,14 +30,12 @@ const debuglog = (...args: any[]) => {
* Utility function to smoothly animate to a certain target value
* @param initialValue Initial value to be used as initial starting point
* @param targetValue Desired value to animate to (can be changed repeatedly to whatever is current at that time)
* @param duration Duration that each animation should take
* @param enabled Whether the animation should run or not
* @param duration Duration that each animation should take, specify 0 to skip animating
*/
export function useSmoothAnimation(
initialValue: number,
targetValue: number,
duration: number,
enabled: boolean,
): number {
const state = useRef<{ timestamp: DOMHighResTimeStamp | null, value: number }>({
timestamp: null,
@ -79,7 +77,7 @@ export function useSmoothAnimation(
[currentStepSize, targetValue],
);
useAnimation(enabled, update);
useAnimation(duration > 0, update);
return currentValue;
return duration > 0 ? currentValue : targetValue;
}