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

New User Onboarding Task List (#9083)

Browse source 
* Improve type of AccessibleButton to accurately represent available props
* Update analytics events
This commit is contained in:
Janne Mareike Koschinski 2022-07-29 13:43:29 +02:00 • committed by GitHub
parent 45f6c32eb6
commit 1e4c336fed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 1261 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/views/elements/ProgressBar.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2020,2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -16,13 +16,20 @@ limitations under the License.
import React from "react";
import { useSmoothAnimation } from "../../../hooks/useSmoothAnimation";
interface IProps {
value: number;
max: number;
animated?: boolean;
}
const ProgressBar: React.FC<IProps> = ({ value, max }) => {
return <progress className="mx_ProgressBar" max={max} value={value} />;
const PROGRESS_BAR_ANIMATION_DURATION = 300;
const ProgressBar: React.FC<IProps> = ({ value, max, animated }) => {
// Animating progress bars via CSS transition isn’t possible in all of our supported browsers yet.
// As workaround, we’re using animations through JS requestAnimationFrame
const currentValue = useSmoothAnimation(0, value, PROGRESS_BAR_ANIMATION_DURATION, animated);
return <progress className="mx_ProgressBar" max={max} value={currentValue} />;
};
export default ProgressBar;