61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { animated, useSpring } from '@react-spring/web';
|
|
|
|
import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
|
|
import { Icon } from 'mastodon/components/icon';
|
|
import { reduceMotion } from 'mastodon/initial_state';
|
|
|
|
interface UploadProgressProps {
|
|
active: boolean;
|
|
progress: number;
|
|
isProcessing: boolean;
|
|
}
|
|
|
|
export const UploadProgress: React.FC<UploadProgressProps> = ({
|
|
active,
|
|
progress,
|
|
isProcessing,
|
|
}) => {
|
|
const styles = useSpring({
|
|
from: { width: '0%' },
|
|
to: { width: `${progress}%` },
|
|
reset: true,
|
|
immediate: reduceMotion,
|
|
});
|
|
if (!active) {
|
|
return null;
|
|
}
|
|
|
|
let message;
|
|
|
|
if (isProcessing) {
|
|
message = (
|
|
<FormattedMessage
|
|
id='upload_progress.processing'
|
|
defaultMessage='Processing…'
|
|
/>
|
|
);
|
|
} else {
|
|
message = (
|
|
<FormattedMessage
|
|
id='upload_progress.label'
|
|
defaultMessage='Uploading…'
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='upload-progress'>
|
|
<Icon id='upload' icon={UploadFileIcon} />
|
|
|
|
<div className='upload-progress__message'>
|
|
{message}
|
|
|
|
<div className='upload-progress__backdrop'>
|
|
<animated.div className='upload-progress__tracker' style={styles} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|