@alfalab/core-components-file-upload-item 5.10.1 → 6.0.0

package/src/Component.tsx

@@ -1,141 +1,25 @@
-import React, { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from 'react';
+import React from 'react';
 import cn from 'classnames';
 
-import { IconButton } from '@alfalab/core-components-icon-button';
-import { Link } from '@alfalab/core-components-link';
-import { Spinner } from '@alfalab/core-components-spinner';
-import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
-import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
-import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
-
-import { fileIcon, humanFileSize } from './utils';
+import { Actions } from './components/actions-control';
+import { Content } from './components/content';
+import { StatusControl } from './components/status-control';
+import { FileUploadItemContext } from './context/file-upload-item-context';
+import { FileUploadItemProps } from './types/file-upload-item-props';
 
 import styles from './index.module.css';
 
-export type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
-
-export type FileUploadItemProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
-    /**
-     * Идентификатор элемента
-     */
-    id?: string;
-
-    /**
-     * Имя файла с расширением
-     */
-    name?: string;
-
-    /**
-     * Размер файла
-     */
-    size?: string | number;
-
-    /**
-     * Дата загрузки файла
-     */
-    uploadDate?: string;
-
-    /**
-     * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
-     */
-    downloadLink?: string;
-
-    /**
-     * Рекомендует браузеру скачивать контент по ссылке.
-     * В проп может быть передано рекомендуемое название скачиваемого файла.
-     */
-    download?: string | true;
-
-    /**
-     * Отображение кнопки удаления
-     */
-    showDelete?: boolean;
-
-    /**
-     * Отображение кнопки восстановления
-     */
-    showRestore?: boolean;
-
-    /**
-     * Процент загрузки файла
-     */
-    uploadPercent?: number;
-
-    /**
-     * Статус загрузки файла
-     */
-    uploadStatus?: FileStatuses;
-
-    /**
-     * Сообщение об ошибке
-     */
-    error?: ReactNode;
-
-    /**
-     * Дочерние элементы
-     */
-    children?: React.ReactNode;
-
-    /**
-     * Компонент кастомной иконки
-     */
-    icon?: ElementType<{ className?: string }>;
-
-    /**
-     * Обработчик загрузки файла
-     */
-    onDownload?: (id: string) => void;
-
-    /**
-     * Обработчик удаления файла
-     */
-    onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
-
-    /**
-     * Обработчик восстановления файла
-     */
-    onRestore?: (id: string) => void;
-
-    /**
-     * Управление активностью кнопок
-     */
-    disableButtons?: boolean;
-
-    /**
-     * Разрешить многострочное название файла
-     */
-    multiline?: boolean;
-
-    /**
-     * Указывает, где открыть скачиваемый документ
-     */
-    target?: HTMLAttributeAnchorTarget;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-
-export const FileUploadItem: React.FC<FileUploadItemProps> = ({
+export const FileUploadItemComponent: React.FC<FileUploadItemProps> = ({
     className,
     children,
     id = '0',
-    name = '',
+    title = '',
+    subtitle,
     size,
-    icon: Icon = fileIcon(name),
     uploadDate,
     downloadLink,
     download,
     uploadStatus,
-    uploadPercent = 0,
     error,
     showDelete,
     showRestore,
@@ -143,132 +27,57 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
     onDownload,
     onRestore,
     disableButtons,
-    multiline = false,
     target,
     dataTestId,
-}) => {
-    const handleDownload = (event: MouseEvent<HTMLElement>) => {
-        if (onDownload) {
-            event.preventDefault();
-            onDownload(id);
-        }
-    };
-
-    const handleDelete = (event: MouseEvent<HTMLElement>) => {
-        if (onDelete) onDelete(id, event);
-    };
-
-    const handleRestore = () => {
-        if (onRestore) onRestore(id);
-    };
-
-    const renderIcon = () => {
-        if (showRestore) {
-            return <ClockMIcon className={styles.restoreIcon} />;
-        }
-
-        switch (uploadStatus) {
-            case 'ERROR':
-                return <AlertCircleMIcon className={styles.errorIcon} />;
-            case 'SUCCESS':
-                return <CheckmarkCircleMIcon className={styles.successIcon} />;
-            case 'LOADING':
-            case 'UPLOADING':
-                return (
-                    <div className={styles.spinnerWrapper}>
-                        <Spinner visible={true} className={styles.spinner} />
-                    </div>
-                );
-            default: {
-                return <Icon className={styles.icon} />;
-            }
-        }
-    };
-
-    const renderInfoSection = () => {
-        const shouldShownError = uploadStatus === 'ERROR' || !!error;
-        const errorContent =
-            uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
-
-        return (
-            <div className={styles.infoSection}>
-                <div className={cn(styles.name, { [styles.rowLimit]: !multiline })}>{name}</div>
-
-                {shouldShownError && (
-                    <div className={styles.errorWrapper} role='alert'>
-                        {errorContent}
-                    </div>
-                )}
-            </div>
-        );
-    };
-
-    const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
-    const showDownload = Boolean(downloadLink) && !showRestore;
-
-    return (
-        <div
-            className={cn(
-                className,
-                styles.component,
-                uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
-            )}
-            data-test-id={dataTestId}
+    customIcon,
+    iconStyle = 'gray',
+    progressBar = 0,
+    customContent,
+    truncate,
+    imageUrl,
+}) => (
+    <div
+        className={cn(
+            className,
+            styles.component,
+            uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
+        )}
+        data-test-id={dataTestId}
+    >
+        <FileUploadItemContext.Provider
+            // eslint-disable-next-line react/jsx-no-constructed-context-values
+            value={{
+                showRestore,
+                uploadStatus,
+                error,
+                title,
+                subtitle,
+                uploadDate,
+                size,
+                id,
+                onDownload,
+                onDelete,
+                onRestore,
+                downloadLink,
+                download,
+                disableButtons,
+                target,
+                showDelete,
+                customIcon,
+                iconStyle,
+                progressBar,
+                customContent,
+                truncate,
+                imageUrl,
+            }}
         >
-            <div className={styles.info}>
-                {renderIcon()}
-
-                {renderInfoSection()}
-
-                {children}
-
-                {uploadStatus === 'UPLOADING' && (
-                    <span className={styles.uploadPercent}>{`${Math.round(uploadPercent)}%`}</span>
-                )}
-
-                {showMeta && (
-                    <div className={styles.meta}>
-                        {uploadDate && <span key={uploadDate}>{uploadDate}</span>}
-
-                        {size && (
-                            <span key={size} className={styles.size}>
-                                {humanFileSize(size)}
-                            </span>
-                        )}
-                    </div>
-                )}
-            </div>
-
-            {showRestore && (
-                <Link pseudo={true} className={styles.restore} onClick={handleRestore}>
-                    Восстановить
-                </Link>
-            )}
-
-            {showDownload && (
-                <IconButton
-                    size='xxs'
-                    icon={PointerDownSIcon}
-                    className={styles.download}
-                    aria-label='скачать'
-                    href={downloadLink}
-                    onClick={handleDownload}
-                    disabled={disableButtons}
-                    download={download}
-                    target={target}
-                />
-            )}
-
-            {showDelete && !showRestore && (
-                <IconButton
-                    size='xxs'
-                    icon={CrossSIcon}
-                    onClick={handleDelete}
-                    disabled={disableButtons}
-                    className={styles.delete}
-                    aria-label='удалить'
-                />
-            )}
-        </div>
-    );
-};
+            {children}
+        </FileUploadItemContext.Provider>
+    </div>
+);
+
+export const FileUploadItem = Object.assign(FileUploadItemComponent, {
+    StatusControl,
+    Content,
+    Actions,
+});

package/src/components/actions-control/actions-control.module.css

@@ -0,0 +1,23 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.container {
+    display: flex;
+    max-width: 144px;
+
+    & .icon {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+.deleteIconColor {
+    fill: var(--color-light-text-tertiary);
+}
+
+.downloadIconColor {
+    fill: var(--color-light-text-tertiary);
+}
+
+.restoreIconColor {
+    fill: var(--color-light-text-tertiary);
+}

package/src/components/actions-control/actions.tsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+
+import { FileUploadItemContext } from '../../context/file-upload-item-context';
+
+import { DeleteButton } from './components/delete-button';
+import { DownloadButton } from './components/download-button';
+import { RestoreButton } from './components/restore-button';
+
+import styles from './actions-control.module.css';
+
+export const Actions = () => {
+    const { showRestore, downloadLink, showDelete } = useContext(FileUploadItemContext);
+
+    return (
+        <div className={styles.container}>
+            {showRestore && <RestoreButton />}
+
+            {Boolean(downloadLink) && !showRestore && <DownloadButton />}
+
+            {showDelete && !showRestore && <DeleteButton />}
+        </div>
+    );
+};

package/src/components/actions-control/components/delete-button/delete-button.tsx

@@ -0,0 +1,29 @@
+import React, { MouseEvent, useContext } from 'react';
+
+import { IconButton } from '@alfalab/core-components-icon-button';
+import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
+
+import { FileUploadItemContext } from '../../../../context/file-upload-item-context';
+
+import styles from '../../actions-control.module.css';
+
+export const DeleteButton = () => {
+    const { id = '0', disableButtons, onDelete } = useContext(FileUploadItemContext);
+
+    const handleDelete = (e: MouseEvent<HTMLElement>) => {
+        if (onDelete) {
+            onDelete(id, e);
+        }
+    };
+
+    return (
+        <IconButton
+            className={styles.icon}
+            size='xxs'
+            aria-label='удалить'
+            icon={<CrossMIcon className={styles.deleteIconColor} />}
+            disabled={disableButtons}
+            onClick={handleDelete}
+        />
+    );
+};

package/src/components/actions-control/components/delete-button/index.ts

@@ -0,0 +1 @@
+export { DeleteButton } from './delete-button';

package/src/components/actions-control/components/download-button/download-button.tsx

@@ -0,0 +1,40 @@
+import React, { MouseEvent, useContext } from 'react';
+
+import { IconButton } from '@alfalab/core-components-icon-button';
+import ArrowDownLineDownCompactMIcon from '@alfalab/icons-glyph/ArrowDownLineDownCompactMIcon';
+
+import { FileUploadItemContext } from '../../../../context/file-upload-item-context';
+
+import styles from '../../actions-control.module.css';
+
+export const DownloadButton = () => {
+    const {
+        id = '0',
+        downloadLink,
+        download,
+        disableButtons,
+        target,
+        onDownload,
+    } = useContext(FileUploadItemContext);
+
+    const handleDownload = (e: MouseEvent<HTMLElement>) => {
+        if (onDownload) {
+            e.preventDefault();
+            onDownload(id);
+        }
+    };
+
+    return (
+        <IconButton
+            className={styles.icon}
+            size='xxs'
+            aria-label='скачать'
+            icon={<ArrowDownLineDownCompactMIcon className={styles.downloadIconColor} />}
+            disabled={disableButtons}
+            href={downloadLink}
+            download={download}
+            target={target}
+            onClick={handleDownload}
+        />
+    );
+};

package/src/components/actions-control/components/download-button/index.ts

@@ -0,0 +1 @@
+export { DownloadButton } from './download-button';

package/src/components/actions-control/components/restore-button/index.ts

@@ -0,0 +1 @@
+export { RestoreButton } from './restore-button';

package/src/components/actions-control/components/restore-button/restore-button.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+
+import { IconButton } from '@alfalab/core-components-icon-button';
+import ArrowsCwCompactMIcon from '@alfalab/icons-glyph/ArrowsCwCompactMIcon';
+
+import { FileUploadItemContext } from '../../../../context/file-upload-item-context';
+
+import styles from '../../actions-control.module.css';
+
+export const RestoreButton = () => {
+    const { id = '0', disableButtons, onRestore } = useContext(FileUploadItemContext);
+
+    const handleRestore = () => {
+        if (onRestore) {
+            onRestore(id);
+        }
+    };
+
+    return (
+        <IconButton
+            className={styles.icon}
+            size='xxs'
+            aria-label='восстановить'
+            icon={<ArrowsCwCompactMIcon className={styles.restoreIconColor} />}
+            disabled={disableButtons}
+            onClick={handleRestore}
+        />
+    );
+};

package/src/components/actions-control/index.ts

@@ -0,0 +1 @@
+export { Actions } from './actions';

package/src/components/content/components/content-error/content-error.module.css

@@ -0,0 +1,3 @@
+.errorItem {
+    display: block;
+}

package/src/components/content/components/content-error/content-error.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { FileUploadItemContext } from '../../../../context/file-upload-item-context';
+
+import styles from './content-error.module.css';
+
+export const ContentError = () => {
+    const { error } = useContext(FileUploadItemContext);
+
+    if (typeof error === 'string' && error.length > 0) {
+        return (
+            <Typography.Text className={styles.errorItem} view='primary-small' color='negative'>
+                {error}
+            </Typography.Text>
+        );
+    }
+
+    if (Array.isArray(error) && error.length > 0) {
+        return (
+            <div>
+                {error.map((item) => (
+                    <Typography.Text
+                        key={item}
+                        className={styles.errorItem}
+                        view='primary-small'
+                        color='negative'
+                    >
+                        {item}
+                    </Typography.Text>
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <Typography.Text className={styles.errorItem} view='primary-small' color='negative'>
+            Не удалось загрузить файл
+        </Typography.Text>
+    );
+};

package/src/components/content/components/content-error/index.ts

@@ -0,0 +1 @@
+export { ContentError } from './content-error';

package/src/components/content/components/content-subtitle/content-subtitle.module.css

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.subtitle {
+    display: block;
+
+    &.truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.size {
+    margin-right: var(--gap-8);
+}

package/src/components/content/components/content-subtitle/content-subtitle.tsx

@@ -0,0 +1,92 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { MAX_PROGRESS_BAR_VALUE } from '../../../../const/progress-bar';
+import { FileUploadItemContext } from '../../../../context/file-upload-item-context';
+import {
+    humanFileSize,
+    isErrorStatus,
+    isSuccessStatus,
+    isUploadedStatus,
+    isUploadingStatus,
+} from '../../../../utils';
+import { isError } from '../../utils/isError';
+import { ContentError } from '../content-error';
+
+import styles from './content-subtitle.module.css';
+
+export const ContentSubtitle = () => {
+    const { uploadStatus, subtitle, uploadDate, size, truncate, showRestore, error, progressBar } =
+        useContext(FileUploadItemContext);
+
+    const shouldShownError = isErrorStatus(uploadStatus) || isError(error);
+    const showMeta =
+        !showRestore && (isSuccessStatus(uploadStatus) || isUploadedStatus(uploadStatus));
+
+    // валидация progressBar (не должен превышать 100 и быть меньше 0)
+    const validateProgressBarValue = (progressValue: number | undefined) => {
+        if (progressValue === undefined) {
+            return 0;
+        }
+
+        return Math.min(Math.max(progressValue, 0), MAX_PROGRESS_BAR_VALUE);
+    };
+
+    const validProgressBar = validateProgressBarValue(progressBar);
+
+    // uploading status
+    if (isUploadingStatus(uploadStatus)) {
+        return (
+            <Typography.Text view='primary-small' color='secondary'>
+                Загрузка{'\u00A0'}
+                {Math.floor(validProgressBar)}%
+            </Typography.Text>
+        );
+    }
+
+    // error status
+    if (shouldShownError) {
+        return <ContentError />;
+    }
+
+    // success status
+    if (showMeta) {
+        return (
+            <div>
+                {size && (
+                    <Typography.Text className={styles.size} view='primary-small' color='secondary'>
+                        {humanFileSize(size)}
+                    </Typography.Text>
+                )}
+                {uploadDate && (
+                    <Typography.Text view='primary-small' color='secondary'>
+                        {uploadDate}
+                    </Typography.Text>
+                )}
+            </div>
+        );
+    }
+
+    // restore status
+    if (showRestore) {
+        return (
+            <Typography.Text view='primary-small' color='tertiary'>
+                Файл удален
+            </Typography.Text>
+        );
+    }
+
+    return (
+        <Typography.Text
+            className={cn(styles.subtitle, {
+                [styles.truncate]: truncate,
+            })}
+            view='primary-small'
+            color='secondary'
+        >
+            {subtitle}
+        </Typography.Text>
+    );
+};