@oslokommune/punkt-react
Version:
React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
43 lines (42 loc) • 1.95 kB
TypeScript
import { InputHTMLAttributes } from 'react';
import { TFileItemList, TUploadStrategy } from './types';
/**
* Props for the internal `DropZone` building block.
*
* This component is responsible for:
* - rendering the native `<input type="file">` (visually hidden, still accessible)
* - handling drag & drop + file dialog selection
* - optionally rendering hidden inputs with file IDs when `uploadStrategy="custom"`
*/
interface IDropZoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'> {
/** Called with `FileItem`s created from dropped/selected files. */
onFilesAdded?: (files: TFileItemList) => void;
/** Used for the native input `id` and related label/ARIA wiring. */
id: string;
/** Allow selecting/dropping multiple files. */
multiple?: boolean;
/** Current file list (used for custom hidden inputs + re-populating the native input). */
value: TFileItemList;
/**
* Field name.
* - `uploadStrategy="form"`: used as `<input name="...">` so the files are posted on submit.
* - `uploadStrategy="custom"`: used for hidden `<input type="hidden" name="...">` file IDs.
*/
name: string;
/** Upload mode. */
uploadStrategy: TUploadStrategy;
/** Enables alternate texts/UX for thumbnail view. */
isThumbnailView?: boolean;
/** Disables all interaction. */
disabled?: boolean;
/** Whether the file input already has an external visible label associated with it. */
hasVisibleLabel?: boolean;
}
export declare const DropZone: import('react').ForwardRefExoticComponent<IDropZoneProps & import('react').RefAttributes<HTMLInputElement>>;
/**
* Create a `FileList` from a list of `FileItem`s.
*
* Note: relies on `DataTransfer`, which may be missing or restricted in test environments (jsdom).
*/
export declare const createFileList: (fileItemList: TFileItemList) => FileList;
export {};