@alfalab/core-components-file-upload-item 6.2.5 → 6.3.0

package/src/Component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
 
 import { Actions } from './components/actions-control';
@@ -27,6 +27,7 @@ export const FileUploadItemComponent: React.FC<FileUploadItemProps> = ({
     onDownload,
     onRestore,
     disableButtons,
+    isClickable = true,
     target,
     dataTestId,
     customIcon,
@@ -35,46 +36,53 @@ export const FileUploadItemComponent: React.FC<FileUploadItemProps> = ({
     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,
-            }}
+}) => {
+    const [actionsPresent, setActionsPresent] = useState(false);
+
+    return (
+        <div
+            className={cn(
+                className,
+                styles.component,
+                uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
+            )}
+            data-test-id={dataTestId}
         >
-            {children}
-        </FileUploadItemContext.Provider>
-    </div>
-);
+            <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,
+                    isClickable,
+                    target,
+                    showDelete,
+                    customIcon,
+                    iconStyle,
+                    progressBar,
+                    customContent,
+                    truncate,
+                    imageUrl,
+                    actionsPresent,
+                    setActionsPresent,
+                }}
+            >
+                {children}
+            </FileUploadItemContext.Provider>
+        </div>
+    );
+};
 
 export const FileUploadItem = Object.assign(FileUploadItemComponent, {
     StatusControl,

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

@@ -12,12 +12,24 @@
 
 .deleteIconColor {
     fill: var(--color-light-text-tertiary);
+
+    &:hover {
+        fill: var(--color-light-text-tertiary-hover);
+    }
 }
 
 .downloadIconColor {
     fill: var(--color-light-text-tertiary);
+
+    &:hover {
+        fill: var(--color-light-text-tertiary-hover);
+    }
 }
 
 .restoreIconColor {
     fill: var(--color-light-text-tertiary);
+
+    &:hover {
+        fill: var(--color-light-text-tertiary-hover);
+    }
 }

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { FileUploadItemContext } from '../../context/file-upload-item-context';
 
@@ -9,7 +9,14 @@ import { RestoreButton } from './components/restore-button';
 import styles from './actions-control.module.css';
 
 export const Actions = () => {
-    const { showRestore, downloadLink, showDelete } = useContext(FileUploadItemContext);
+    const { showRestore, downloadLink, showDelete, setActionsPresent } =
+        useContext(FileUploadItemContext);
+
+    useEffect(() => {
+        if (setActionsPresent) {
+            setActionsPresent(!!(showRestore || downloadLink || showDelete));
+        }
+    }, [showRestore, downloadLink, showDelete, setActionsPresent]);
 
     return (
         <div className={styles.container}>

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

@@ -40,7 +40,7 @@ export const ContentSubtitle = () => {
     if (isUploadingStatus(uploadStatus)) {
         return (
             <Text view='primary-small' color='secondary'>
-                Загрузка{'\u00A0'}
+                Загружено{'\u00A0'}
                 {Math.floor(validProgressBar)}%
             </Text>
         );

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

@@ -4,7 +4,10 @@
     padding: var(--gap-2) 0 0 var(--gap-16);
     flex-grow: 1;
     min-width: 0;
-    cursor: pointer;
+
+    &.clickable {
+        cursor: pointer;
+    }
 
     &.single {
         display: flex;

package/src/components/content/content.tsx

@@ -16,6 +16,8 @@ export const Content = () => {
         truncate,
         subtitle,
         showRestore,
+        actionsPresent,
+        isClickable,
     } = useContext(FileUploadItemContext);
 
     if (CustomContent) {
@@ -26,6 +28,7 @@ export const Content = () => {
         <div
             className={cn(styles.container, {
                 [styles.single]: !subtitle,
+                [styles.clickable]: !actionsPresent && isClickable,
             })}
         >
             {title && (

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

@@ -2,7 +2,10 @@
 
 .container {
     position: relative;
-    cursor: pointer;
+
+    &.clickable {
+        cursor: pointer;
+    }
 
     & .progress {
         position: absolute;

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

@@ -1,7 +1,7 @@
 import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 
-import { SuperEllipse } from '@alfalab/core-components/icon-view/super-ellipse';
+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';
@@ -13,7 +13,13 @@ import { StatusControlProgressBar } from './components/status-control-progress-b
 import styles from './status-control.module.css';
 
 export const StatusControl = () => {
-    const { uploadStatus = 'INITIAL', progressBar, imageUrl } = useContext(FileUploadItemContext);
+    const {
+        uploadStatus = 'INITIAL',
+        progressBar,
+        imageUrl,
+        actionsPresent,
+        isClickable,
+    } = useContext(FileUploadItemContext);
     const progressRef = useRef<HTMLDivElement>(null);
 
     if (progressRef.current && progressBar) {
@@ -26,7 +32,11 @@ export const StatusControl = () => {
         uploadStatus === 'INITIAL' || uploadStatus === 'UPLOADED' || uploadStatus === 'DELETED';
 
     return (
-        <div className={styles.container}>
+        <div
+            className={cn(styles.container, {
+                [styles.clickable]: !actionsPresent && isClickable,
+            })}
+        >
             <SuperEllipse size={48} {...(imageUrl && { imageUrl })}>
                 <StatusControlIcon />
             </SuperEllipse>

package/src/context/file-upload-item-context.tsx

@@ -17,6 +17,7 @@ type TFileUploadItemContext = {
     downloadLink?: string;
     download?: string | true;
     disableButtons?: boolean;
+    isClickable?: boolean;
     target?: HTMLAttributeAnchorTarget;
     showDelete?: boolean;
     customIcon?: ElementType<{ className?: string }>;
@@ -25,6 +26,8 @@ type TFileUploadItemContext = {
     customContent?: ElementType;
     truncate?: boolean;
     imageUrl?: string;
+    actionsPresent?: boolean;
+    setActionsPresent?: (present: boolean) => void;
 };
 
 export const FileUploadItemContext = createContext<TFileUploadItemContext>({
@@ -42,6 +45,7 @@ export const FileUploadItemContext = createContext<TFileUploadItemContext>({
     downloadLink: '',
     download: '',
     disableButtons: false,
+    isClickable: true,
     target: undefined,
     showDelete: false,
     iconStyle: 'gray',
@@ -50,4 +54,6 @@ export const FileUploadItemContext = createContext<TFileUploadItemContext>({
     customContent: undefined,
     truncate: false,
     imageUrl: undefined,
+    actionsPresent: false,
+    setActionsPresent: undefined,
 });

package/src/types/file-upload-item-props.ts

@@ -89,6 +89,11 @@ export type FileUploadItemProps = {
      */
     disableButtons?: boolean;
 
+    /**
+     * Управление отображением кликабельности элемента Content
+     */
+    isClickable?: boolean;
+
     /**
      * Указывает, где открыть скачиваемый документ
      */

package/types/file-upload-item-props.d.ts

@@ -72,6 +72,10 @@ type FileUploadItemProps = {
      * Управление активностью кнопок
      */
     disableButtons?: boolean;
+    /**
+     * Управление отображением кликабельности элемента Content
+     */
+    isClickable?: boolean;
     /**
      * Указывает, где открыть скачиваемый документ
      */

package/actions-control.module-d60492fb.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {"container":"file-upload-item__container_13oj7","icon":"file-upload-item__icon_13oj7","deleteIconColor":"file-upload-item__deleteIconColor_13oj7","downloadIconColor":"file-upload-item__downloadIconColor_13oj7","restoreIconColor":"file-upload-item__restoreIconColor_13oj7"};
-require('./components/actions-control/actions-control.css')
-
-exports.styles = styles;

package/esm/actions-control.module-e1988df9.js

@@ -1,4 +0,0 @@
-var styles = {"container":"file-upload-item__container_13oj7","icon":"file-upload-item__icon_13oj7","deleteIconColor":"file-upload-item__deleteIconColor_13oj7","downloadIconColor":"file-upload-item__downloadIconColor_13oj7","restoreIconColor":"file-upload-item__restoreIconColor_13oj7"};
-require('./components/actions-control/actions-control.css')
-
-export { styles as s };

package/modern/actions-control.module-05603b9e.js

@@ -1,4 +0,0 @@
-const styles = {"container":"file-upload-item__container_13oj7","icon":"file-upload-item__icon_13oj7","deleteIconColor":"file-upload-item__deleteIconColor_13oj7","downloadIconColor":"file-upload-item__downloadIconColor_13oj7","restoreIconColor":"file-upload-item__restoreIconColor_13oj7"};
-require('./components/actions-control/actions-control.css')
-
-export { styles as s };