@fuseloader/lite
Version:
A versatile and customizable file upload and processing component for React applications. Supports CSV, Excel, and various data formats with advanced data transformation, validation, and visualization capabilities. Ideal for building robust data-driven UI
100 lines (99 loc) • 2.8 kB
TypeScript
export type FileType = 'excel' | 'csv' | 'xml' | 'ods' | 'any';
export type Theme = 'light' | 'dark';
export interface BrandColors {
primary: string;
secondary: string;
accent: string;
}
export interface AnimationOptions {
dropZone?: boolean;
processProgress?: boolean;
filePreview?: boolean;
}
export interface LabelOptions {
title?: string;
dropZoneText?: string;
browseText?: string;
maxSizeText?: string;
processingText?: string;
processButtonText?: string;
downloadTemplateText?: string;
}
export interface NotificationOptions {
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
duration?: number;
}
export interface TemplateConfig {
enabled: boolean;
url: string;
filename: string;
}
export interface CustomCSS {
button?: React.CSSProperties & {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
lineHeight?: string;
letterSpacing?: string;
textTransform?: string;
};
labels?: React.CSSProperties & {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
lineHeight?: string;
letterSpacing?: string;
textTransform?: string;
};
}
export interface AnalyticsConfig {
enabled: boolean;
trackingId: string;
}
export interface FuseLoaderConfig {
allowedTypes?: FileType[];
maxSize: number;
theme?: Theme;
animations?: AnimationOptions;
labels?: LabelOptions;
brandColors?: BrandColors;
notificationOptions?: NotificationOptions;
showCloseIcon?: boolean;
useCardStyle?: boolean;
template?: TemplateConfig;
customCSS?: CustomCSS;
returnNotificationString?: boolean;
analytics?: AnalyticsConfig;
}
export interface SheetRow {
[key: string]: string | number | boolean | null;
}
export interface FuseLoaderProps extends FuseLoaderConfig {
onFileUpload: (file: File, sheetData: SheetRow[]) => void;
onClose?: () => void;
headerTemplate?: Record<string, string>;
formatValidation?: (file: File) => Promise<boolean>;
onNotification?: (message: string, type: 'success' | 'error' | 'warning' | 'info') => void;
}
export interface UploadedFileInfo {
name: string;
type: string;
}
export interface DragDropZoneProps {
onFileDrop: (files: FileList) => void;
onProcessClick: () => void;
onZoneClick: () => void;
onReset: () => void;
onClose?: () => void;
onDownloadTemplate?: () => void;
isProcessing: boolean;
processProgress: number;
uploadedFile?: UploadedFileInfo;
config: FuseLoaderConfig;
}
export interface NotificationProps {
message: string;
type: 'success' | 'error' | 'warning' | 'info';
onClose: () => void;
config: FuseLoaderConfig;
}