@snack-uikit/attachment 0.0.1-preview-8b6f4393.0

package/src/helperComponents/Actions/Actions.tsx

@@ -0,0 +1,48 @@
+import { ButtonFunction } from '@snack-uikit/button';
+import { DownloadSVG, TrashSVG } from '@snack-uikit/icons';
+
+import { useAttachmentContext } from '../../contexts';
+import styles from './styles.module.scss';
+
+type ActionsProps = {
+  hideDownload?: boolean;
+  hideDelete?: boolean;
+};
+
+export function Actions({ hideDelete, hideDownload }: ActionsProps) {
+  const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+
+  const showDownload = onDownload && !hideDownload;
+  const showDelete = onDelete && !hideDelete;
+
+  if (!showDownload && !showDelete) {
+    return null;
+  }
+
+  return (
+    <div className={styles.actions}>
+      {showDownload && (
+        <ButtonFunction
+          disabled={disabled}
+          size='xs'
+          icon={<DownloadSVG />}
+          onClick={e => {
+            onDownload(file);
+            e.stopPropagation();
+          }}
+        />
+      )}
+      {showDelete && (
+        <ButtonFunction
+          disabled={disabled}
+          size='xs'
+          icon={<TrashSVG />}
+          onClick={e => {
+            onDelete(file);
+            e.stopPropagation();
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/helperComponents/Actions/index.ts

@@ -0,0 +1 @@
+export * from './Actions';

package/src/helperComponents/Actions/styles.module.scss

@@ -0,0 +1,8 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+.actions {
+  @include composite-var($attachment, 'composition', 'end-item', 'gap');
+
+  display: flex;
+  flex-shrink: 0;
+}

package/src/helperComponents/Text/Text.tsx

@@ -0,0 +1,22 @@
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { useAttachmentContext } from '../../contexts';
+
+export type TextProps = {
+  text?: string;
+  className: string;
+};
+
+export function Text({ text, className }: TextProps) {
+  const { truncateVariant } = useAttachmentContext();
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <TruncateString text={text} maxLines={1} variant={truncateVariant} />
+    </div>
+  );
+}

package/src/helperComponents/Text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

package/src/helperComponents/Text/styles.module.scss

@@ -0,0 +1,24 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+.wrapper {
+  @include composite-var($attachment-container-square);
+
+  .main {
+    display: flex;
+  }
+
+  .hover {
+    display: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    .hover {
+      display: flex;
+    }
+
+    .main {
+      display: none;
+    }
+  }
+}

package/src/helperComponents/TextBlock/TextBlock.tsx

@@ -0,0 +1,22 @@
+import cn from 'classnames';
+
+import { useAttachmentContext } from '../../contexts';
+import { AttachmentProps } from '../../types';
+import { Text } from '../Text';
+import styles from './styles.module.scss';
+
+export type TextBlockProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'> & {
+  align?: 'center' | 'left';
+};
+
+export function TextBlock({ title, description, error, className, align = 'left' }: TextBlockProps) {
+  const { size } = useAttachmentContext();
+
+  return (
+    <div className={cn(styles.content, className)} data-size={size} data-align={align}>
+      <Text className={styles.title} text={title} />
+      <Text className={styles.description} text={description} />
+      <Text className={styles.error} text={error} />
+    </div>
+  );
+}

package/src/helperComponents/TextBlock/index.ts

@@ -0,0 +1 @@
+export * from './TextBlock';

package/src/helperComponents/TextBlock/styles.module.scss

@@ -0,0 +1,63 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+$sizes: 's', 'm';
+
+$title: (
+  's': $sans-label-m,
+  'm': $sans-label-l,
+);
+
+$description: (
+  's': $sans-body-s,
+  'm': $sans-body-m,
+);
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &[data-align='left'] {
+    text-align: left;
+  }
+
+  &[data-align='center'] {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .title {
+        @include composite-var($title, $size);
+      }
+
+      .description,
+      .error {
+        @include composite-var($description, $size);
+      }
+    }
+  }
+}
+
+.title,
+.description,
+.error {
+  overflow: hidden;
+  width: 100%;
+}
+
+.title {
+  color: $sys-neutral-text-main;
+}
+
+.description {
+  color: $sys-neutral-text-light;
+}
+
+.error {
+  color: $sys-red-text-support;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './Actions';
+export * from './TextBlock';

package/src/helpers.ts

@@ -0,0 +1,21 @@
+export function getBaseFileName(fileName?: string) {
+  if (!fileName) {
+    return fileName;
+  }
+
+  const parts = fileName.split('.');
+  parts.pop();
+
+  // Для отображения названия файлов без имени (например, .bashrc, .gitignore)
+  if (parts.length === 1 && parts[0] === '') return fileName;
+
+  return parts.join('.');
+}
+
+export function getFileExtension(fileName?: string) {
+  return fileName?.split('.').pop()?.toLocaleUpperCase();
+}
+
+export function isFileImage(file: File) {
+  return file.type.match(/image\/(png|jpg|jpeg|gif|webp|bmp|svg)/i);
+}

package/src/hooks.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+import { isFileImage } from './helpers';
+
+export function useImage(file?: File) {
+  const [imageData, setImageData] = useState<string | undefined>(undefined);
+  const [loading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (file && isFileImage(file)) {
+      const reader = new FileReader();
+
+      reader.onloadstart = () => {
+        setIsLoading(true);
+      };
+
+      reader.onloadend = () => {
+        setIsLoading(false);
+
+        const { result } = reader;
+        if (result) {
+          setImageData(result.toString());
+        }
+      };
+
+      reader.readAsDataURL(file);
+    } else {
+      setImageData(undefined);
+    }
+  }, [file]);
+
+  return { imageData, loading };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+
+export type { AttachmentSquareProps, AttachmentProps } from './types';

package/src/types.ts

@@ -0,0 +1,47 @@
+import { CardProps } from '@snack-uikit/card';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+export type Size = 's' | 'm';
+
+export type AttachmentCommonProps = WithSupportProps<{
+  /** Файл */
+  file?: File;
+  /** Колбек на клик по кнопке скачивания */
+  onDownload?(file?: File | undefined): void;
+  /** Колбек на клик по кнопке удаления */
+  onDelete?(file?: File | undefined): void;
+  /**
+   * Заголовок
+   * @default file.name
+   */
+  title?: string;
+  /**
+   * Описание
+   * @default file.type
+   */
+  description?: string;
+  /** Сообщение об ошибке */
+  error?: string;
+  /**
+   * Вариант обрезания строки:
+   * <br> - `End` - с конца;
+   * <br> - `Middle` - по середине
+   * */
+  truncateVariant?: TruncateStringProps['variant'];
+  /** Управление состоянием загрузки */
+  loading?: boolean;
+  /**
+   * Объект сопоставления расширения файла и отображаемой иконки
+   * @defaultIcon FileSVG
+   */
+  extension2Icon?: Record<string, IconPredefinedProps['icon']>;
+}> &
+  Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
+
+export type AttachmentSquareProps = AttachmentCommonProps;
+export type AttachmentProps = AttachmentCommonProps & {
+  /** Размер */
+  size?: Size;
+};