docs(): attach docs updated

salute-developers · Oct 14, 2024 · 68056e2 · 68056e2
1 parent 1bb510e
commit 68056e2
Show file tree

Hide file tree

Showing 6 changed files with 414 additions and 0 deletions.
diff --git a/packages/plasma-new-hope/src/components/Attach/Attach.template-doc.mdx b/packages/plasma-new-hope/src/components/Attach/Attach.template-doc.mdx
@@ -61,3 +61,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/{{ package }}';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    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 (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```
diff --git a/website/plasma-b2c-docs/docs/components/Attach.mdx b/website/plasma-b2c-docs/docs/components/Attach.mdx
@@ -62,3 +62,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/plasma-b2c';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    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 (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```
diff --git a/website/plasma-web-docs/docs/components/Attach.mdx b/website/plasma-web-docs/docs/components/Attach.mdx
@@ -62,3 +62,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/plasma-web';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    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 (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```
diff --git a/website/sdds-cs-docs/docs/components/Attach.mdx b/website/sdds-cs-docs/docs/components/Attach.mdx
@@ -61,3 +61,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/sdds-cs';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    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 (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```
diff --git a/website/sdds-dfa-docs/docs/components/Attach.mdx b/website/sdds-dfa-docs/docs/components/Attach.mdx
@@ -60,4 +60,73 @@ export function App() {
         </div>
     );
 }
+```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/sdds-dfa';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    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 (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
 ```