feat(file-upload-item): improve percentage

core-ds · Nov 15, 2024 · e771bce · e771bce
1 parent 9e63ee8
commit e771bce
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 15 deletions.
diff --git 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}
                 >
                     <FileUploadItem.Content />
                 </FileUploadItem>,

diff --git 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/.../file-upload-item/src/components/content/components/content-subtitle/content-subtitle.tsx b/.../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 (
             <Typography.Text view='primary-small' color='secondary'>
                 Загрузка{'\u00A0'}
-                {Math.floor(
-                    validProgressBar / (MAX_PROGRESS_BAR_VALUE / progressBarAvailablePercents),
-                )}
-                %
+                {Math.floor(validProgressBar)}%
             </Typography.Text>
         );
     }

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
@@ -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<HTMLDivElement>(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
@@ -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
@@ -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
@@ -110,7 +110,7 @@ export type FileUploadItemProps = {
 
     /**
      * Шкала прогресса
-     * от 0 до 360
+     * от 0 до 100
      * @default 0
      */
     progressBar?: number;