From e771bce22d188405b144f21fcae7a972f1e7afde Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 15 Nov 2024 21:20:21 +0700 Subject: [PATCH] feat(file-upload-item): improve percentage --- packages/file-upload-item/src/Component.test.tsx | 2 +- .../file-upload-item/src/component.screenshots.test.tsx | 2 +- .../components/content-subtitle/content-subtitle.tsx | 9 ++------- .../src/components/status-control/status-control.tsx | 7 +++++-- packages/file-upload-item/src/const/progress-bar.ts | 3 ++- packages/file-upload-item/src/docs/description.mdx | 4 ++-- .../file-upload-item/src/types/file-upload-item-props.ts | 2 +- 7 files changed, 14 insertions(+), 15 deletions(-) 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;