diff --git a/src/components/FilePreview/FilePreview.scss b/src/components/FilePreview/FilePreview.scss index bdece132..a646f42a 100644 --- a/src/components/FilePreview/FilePreview.scss +++ b/src/components/FilePreview/FilePreview.scss @@ -44,15 +44,21 @@ $smallRoundedButtonSize: 24px; flex-direction: column; align-items: center; - cursor: pointer; position: relative; outline: none; box-shadow: var(--gc-card-box-shadow); - background-color: var(--_-color-base-background); border-radius: var(--_-border-radius); padding: 4px 10px; + &_clickable { + cursor: pointer; + } + + &_hoverable { + background-color: var(--_-color-base-background); + } + &::after { position: absolute; top: 0; diff --git a/src/components/FilePreview/FilePreview.tsx b/src/components/FilePreview/FilePreview.tsx index bc4e45b8..2fe9aa99 100644 --- a/src/components/FilePreview/FilePreview.tsx +++ b/src/components/FilePreview/FilePreview.tsx @@ -80,13 +80,16 @@ export function FilePreview({ } }, [file, imageSrc]); + const clickable = Boolean(onClick); + const withActions = Boolean(actions?.length); + return (
{typeof previewSrc === 'string' ? ( diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx index 267f4116..0b02468b 100644 --- a/src/components/FilePreview/__stories__/FilePreview.stories.tsx +++ b/src/components/FilePreview/__stories__/FilePreview.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {CircleExclamation, Link, Xmark} from '@gravity-ui/icons'; +import {Flex} from '@gravity-ui/uikit'; import type {Meta, StoryFn} from '@storybook/react'; import {FilePreview, FilePreviewProps} from '../FilePreview'; @@ -58,7 +59,6 @@ const DefaultTemplate: StoryFn = (args) => { }; export const Default = DefaultTemplate.bind({}); - Default.args = { file: {name: 'my-file.docs', type: 'text/docs'} as File, onClick: () => { @@ -72,3 +72,38 @@ Default.args = { }, ], }; + +const NoClickableTemplate: StoryFn> = (args) => { + return ( + + + alert('Are you sure you want to delete the file?'), + title: 'Close', + }, + ]} + /> + { + window.open('https://disk.yandex.com', '_blank'); + }} + actions={[ + { + icon: Xmark, + onClick: () => alert('Are you sure you want to delete the file?'), + title: 'Close', + }, + ]} + /> + + ); +}; + +export const NoClickable = NoClickableTemplate.bind({});