diff --git a/packages/file-upload-item/src/Component.test.tsx b/packages/file-upload-item/src/Component.test.tsx
index 3037cecd46..6f28da1231 100644
--- a/packages/file-upload-item/src/Component.test.tsx
+++ b/packages/file-upload-item/src/Component.test.tsx
@@ -135,7 +135,7 @@ describe('FileUploadItem', () => {
title='title'
subtitle='subtitle'
uploadStatus='UPLOADING'
- progressBar={270}
+ progressBar={75}
>
,
diff --git a/packages/file-upload-item/src/component.screenshots.test.tsx b/packages/file-upload-item/src/component.screenshots.test.tsx
index dc9dcfa319..af01b36ed6 100644
--- a/packages/file-upload-item/src/component.screenshots.test.tsx
+++ b/packages/file-upload-item/src/component.screenshots.test.tsx
@@ -119,7 +119,7 @@ describe(
knobs: {
title: 'File.pdf',
uploadStatus: 'UPLOADING',
- progressBar: 270,
+ progressBar: 75,
},
}),
screenshotOpts: {
diff --git a/packages/file-upload-item/src/components/content/components/content-subtitle/content-subtitle.tsx b/packages/file-upload-item/src/components/content/components/content-subtitle/content-subtitle.tsx
index abfc423ca3..ff0ffc4e12 100644
--- a/packages/file-upload-item/src/components/content/components/content-subtitle/content-subtitle.tsx
+++ b/packages/file-upload-item/src/components/content/components/content-subtitle/content-subtitle.tsx
@@ -25,9 +25,7 @@ export const ContentSubtitle = () => {
const showMeta =
!showRestore && (isSuccessStatus(uploadStatus) || isUploadedStatus(uploadStatus));
- const progressBarAvailablePercents = 100;
-
- // валидируем progressBar, не должен превышать 360 и быть меньше 0
+ // валидация progressBar (не должен превышать 100 и быть меньше 0)
const validateProgressBarValue = (progressValue: number | undefined) => {
if (progressValue === undefined) {
return 0;
@@ -43,10 +41,7 @@ export const ContentSubtitle = () => {
return (
Загрузка{'\u00A0'}
- {Math.floor(
- validProgressBar / (MAX_PROGRESS_BAR_VALUE / progressBarAvailablePercents),
- )}
- %
+ {Math.floor(validProgressBar)}%
);
}
diff --git a/packages/file-upload-item/src/components/status-control/status-control.tsx b/packages/file-upload-item/src/components/status-control/status-control.tsx
index 3a51a35676..d0ad1c0022 100644
--- a/packages/file-upload-item/src/components/status-control/status-control.tsx
+++ b/packages/file-upload-item/src/components/status-control/status-control.tsx
@@ -3,6 +3,7 @@ import cn from 'classnames';
import { SuperEllipse } from '@alfalab/core-components/icon-view/super-ellipse';
+import { MAX_PROGRESS_BAR_VALUE, RADIUS } from '../../const/progress-bar';
import { FileUploadItemContext } from '../../context/file-upload-item-context';
import { isErrorStatus, isSuccessStatus, isUploadingStatus } from '../../utils';
@@ -15,8 +16,10 @@ export const StatusControl = () => {
const { uploadStatus = 'INITIAL', progressBar, imageUrl } = useContext(FileUploadItemContext);
const progressRef = useRef(null);
- if (progressRef.current) {
- progressRef.current.style.maskImage = `conic-gradient(red ${progressBar}deg, transparent 0)`;
+ if (progressRef.current && progressBar) {
+ progressRef.current.style.maskImage = `conic-gradient(red ${
+ (RADIUS / MAX_PROGRESS_BAR_VALUE) * progressBar
+ }deg, transparent 0)`;
}
const isTransparentProgressBar = () =>
diff --git a/packages/file-upload-item/src/const/progress-bar.ts b/packages/file-upload-item/src/const/progress-bar.ts
index 06516fd885..9242ff91e1 100644
--- a/packages/file-upload-item/src/const/progress-bar.ts
+++ b/packages/file-upload-item/src/const/progress-bar.ts
@@ -1 +1,2 @@
-export const MAX_PROGRESS_BAR_VALUE = 360;
+export const MAX_PROGRESS_BAR_VALUE = 100;
+export const RADIUS = 360;
diff --git a/packages/file-upload-item/src/docs/description.mdx b/packages/file-upload-item/src/docs/description.mdx
index 53b4f51a17..ca97e8b85a 100644
--- a/packages/file-upload-item/src/docs/description.mdx
+++ b/packages/file-upload-item/src/docs/description.mdx
@@ -100,7 +100,7 @@ render(() => {
const [progressBar, setProgressBar] = React.useState(0);
const [error, setError] = React.useState('');
- const distance = 360;
+ const distance = 100;
const duration = 500;
let startAnimation = null;
@@ -328,7 +328,7 @@ render(() => {
render(() => {
const [files, setFiles] = React.useState([]);
- const distance = 360;
+ const distance = 100;
const duration = 500;
let startAnimation = null;
diff --git a/packages/file-upload-item/src/types/file-upload-item-props.ts b/packages/file-upload-item/src/types/file-upload-item-props.ts
index 45f8d1499b..45aae488cc 100644
--- a/packages/file-upload-item/src/types/file-upload-item-props.ts
+++ b/packages/file-upload-item/src/types/file-upload-item-props.ts
@@ -110,7 +110,7 @@ export type FileUploadItemProps = {
/**
* Шкала прогресса
- * от 0 до 360
+ * от 0 до 100
* @default 0
*/
progressBar?: number;