website/plasma-web-docs/docs/components/Attach.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Attach.mdx
237 строк7 KB
TitanKuzmich
docs: add Attach multiple docs
28 окт 2025, 10:01
28 окт 2025, 10:01c794505
---
id: attach
title: Attach
---

import { PropsTable, Description } from '@site/src/components';

# Attach
<Description name="Attach" />

### Быстрый старт

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    const handleFileSelect = (event) => {
        const file = event.target.files[0];
        console.log('Выбран файл:', file.name);
    };

    return (
        <Attach
            view="accent"
            text="Upload file"
            onChange={handleFileSelect}
        />
    );
}
```

### Управление внешним видом и типом компонента

С помощью свойств:
- `view` - задается внешний вид
- `buttonType` - можно менять вид кнопки: `button`, `iconButton`

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "32px"}}>
            <Attach view="accent" buttonType='button' text="Upload file" />
            <Attach view="secondary" buttonType='iconButton'/>
        </div>
    );
}
```

### Управление подсказкой с помощью свойства helperText

Вид `helperText` задается с помощью свойства `helperTextView`.

Возможные значения свойства:
+ `default` – по умолчанию;
+ `negative` – ошибка.

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    return (
        <div style={{ padding: "1rem" }}>
            <Attach helperTextView="default" helperText="Caption" />
            <Attach helperTextView="negative" helperText="Caption" />
        </div>
    );
}
```

### Расположение элементов
Расположение регулируется свойством Flow, которое позволяет размещать элементы вертикально,
горизонтально или автоматически (перенес на следующую строку при нехватке ширины компонента Attach).

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "50px"}}>
            <Attach style={{ width: "400px" }} helperText='Auto' flow="auto" />
            <Attach style={{ width: "400px" }} helperText='Horizontal' flow="horizontal" />
            <Attach style={{ width: "400px" }} helperText='Vertical' flow="vertical" />
        </div>
    );
}
```

### Attach с несколькими файлами

С помощью свойств:
- `multiple` - добавляет возможность прикреплять несколько файлов

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "32px"}}>
            <Attach multiple flow="horizontal" style={{ width: "400px" }} text="Upload files" />
            <Attach multiple flow="vertical" style={{ width: "400px" }} text="Upload files" />
        </div>
    );
}
```

### Фильтр форматов файлов

Свойство `acceptedFileFormats` устанавливает доступные форматы файлов.

```tsx live
import React from 'react';
import { Attach } from '@salutejs/plasma-web';

export function App() {
    const handleFileSelect = (event) => {
        const file = event.target.files[0];
        console.log('Выбран файл:', file.name);
    };

    return (
        <Attach
            acceptedFileFormats={['.pdf', '.doc']}
            view="accent"
            text="Upload file"
            onChange={handleFileSelect}
        />
    );
}
```

### Пример взаимодействия с формой

:::tip
С помощью компонента `InformationWrapper`можно добавить весь необходимый UX/UI для работы с формой, включая:
- обязательность поле
- label, caption, hint, etc
- view
:::


```tsx live
import React, { useState } from 'react';
import { Attach, Button, InformationWrapper } from '@salutejs/plasma-web';

function App() {
    const [isLoading, setIsLoading] = useState(false);
    const [attachedFiles, setAttachedFiles] = useState([]);

    const handleAttachFile = (e) => {
        setAttachedFiles((prevAttachedFiles) => [
            ...prevAttachedFiles,
            {
                fileData: e.target.files[0],
                id: e.target.id,
            },
        ]);
    };

    const handleAttachClear = (id) => {
        setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        setIsLoading(true);

        const formData = new FormData(e.target);
        console.log('formData', Object.fromEntries(formData));

        setTimeout(() => {
            setAttachedFiles([]);
            setIsLoading(false);
        }, 2000);
    };

    return (
        <>
            {!isLoading && (
                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px', padding: '16px 18px', border: `1px dashed black` }}>
                    <InformationWrapper labelHtmlFor={`example-id-attach-1`} label="Label" hasRequiredIndicator leftHelper="Caption" titleCaption="Title Caption">
                        <Attach
                            id={`example-id-attach-1`}
                            name={`attach-1`}
                            text={`Upload avatar`}
                            onChange={handleAttachFile}
                            onClear={() => handleAttachClear('1')}
                            view="accent"
                        />
                   </InformationWrapper>
                    <InformationWrapper
                        labelHtmlFor={`example-id-attach-2`}
                        label="Label"
                        leftHelper="Caption"
                        titleCaption="Title Caption"
                        hintText='Example hint text'
                    >
                        <Attach
                            id={`example-id-attach-2`}
                            name={`attach-2`}
                            text={`Upload config`}
                            onChange={handleAttachFile}
                            onClear={() => handleAttachClear('2')}
                            view="accent"
                        />
                   </InformationWrapper>
                   <Button style={{ alignSelf: 'end' }} type="submit">Submit</Button>
                </form>
            )}

            <div style={{ display: 'flex', flexDirection: 'column', padding: '1rem', margin: '16px 0 0 0', border: '1px dashed gray' }}>
              <span>
                {isLoading ? 'Форма отправляется' : 'Прикрепленные к форме файлы:'}
              </span>

              {!isLoading && attachedFiles.length > 0 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                    {attachedFiles.map((file) => (
                        <div>{file.fileData.name}</div>
                    ))}
                </div>
              )}
            </div>
        </>
    );
}
```

## Props

<PropsTable name="Attach" />