|
| 1 | +--- |
| 2 | +title: File Additions Trigger |
| 3 | +description: File Additions Trigger component documentation |
| 4 | +--- |
| 5 | + |
| 6 | +The File Additions Trigger component provides a UI element for creating new files or uploading files. It uses a dropdown menu to offer these options. |
| 7 | + |
| 8 | +import { DocsPage } from "@/components/docs-page"; |
| 9 | + |
| 10 | +<DocsPage.ComponentExample |
| 11 | + client:only |
| 12 | + code={`<FileAdditionsTrigger |
| 13 | + useTranslationStore={() => ({ t: (key, fallback) => fallback })} |
| 14 | + pathNewFile="/new-file" |
| 15 | + pathUploadFiles="/upload-files" |
| 16 | +/>`} |
| 17 | +/> |
| 18 | + |
| 19 | +## Usage |
| 20 | + |
| 21 | +```typescript jsx |
| 22 | +import { FileAdditionsTrigger } from '@harnessio/ui/components' |
| 23 | + |
| 24 | +return ( |
| 25 | + <FileAdditionsTrigger |
| 26 | + useTranslationStore={useTranslationStoreHook} // [REQUIRED] Translation hook for i18n support |
| 27 | + pathNewFile="/new-file" // [REQUIRED] Navigation path for new file creation |
| 28 | + pathUploadFiles="/upload-files" // [REQUIRED] Navigation path for file upload |
| 29 | + className="my-class" // [OPTIONAL] Additional CSS classes |
| 30 | + /> |
| 31 | +) |
| 32 | +``` |
| 33 | + |
| 34 | +## API Reference |
| 35 | + |
| 36 | +<DocsPage.PropsTable |
| 37 | + props={[ |
| 38 | + { |
| 39 | + name: "useTranslationStore", |
| 40 | + description: "Function that returns a translation store object with a 't' function for internationalization support. The 't' function takes a key and fallback text.", |
| 41 | + required: true, |
| 42 | + value: "() => { t: (key: string, fallback: string) => string }", |
| 43 | + }, |
| 44 | + { |
| 45 | + name: "pathNewFile", |
| 46 | + description: "URL path to navigate to when the user selects the 'Create New File' option from the dropdown", |
| 47 | + required: true, |
| 48 | + value: "string", |
| 49 | + }, |
| 50 | + { |
| 51 | + name: "pathUploadFiles", |
| 52 | + description: "URL path to navigate to when the user selects the 'Upload Files' option from the dropdown", |
| 53 | + required: true, |
| 54 | + value: "string", |
| 55 | + }, |
| 56 | + { |
| 57 | + name: "className", |
| 58 | + description: "Additional CSS classes to apply to the component", |
| 59 | + required: false, |
| 60 | + value: "string", |
| 61 | + }, |
| 62 | + ]} |
| 63 | +/> |
0 commit comments