jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
116 lines (115 loc) • 2.61 kB
TypeScript
/**
* @file index.tsx
*
* @fileoverview File input component. Renders a button input together with its label.
*/
import React, { ChangeEvent, Component } from 'react';
export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
/**
* The label to be shown next to the input.
*/
label?: string;
/**
* Marks if a field is in an error state.
*
* @default false
*/
error?: boolean;
/**
* The placeholder to be shown next to the input.
*/
placeholder?: string;
/**
* The description is shown for multiple files.
*/
description?: string;
/**
* The style for the button.
*
* @default "default"
*/
buttonStyle?: 'primary' | 'secondary' | 'default';
/**
* If the file upload allows multiple file selection.
*
* @default "false"
*/
multiple?: boolean;
/**
* File types the input accepts. Separated by a comma.
*
* @param string accept
*/
fileTypes?: string[];
/**
* Maximum file size of the selected files in MB.
*/
maxSize?: number;
/**
* Max size label to display.
*
* @default "File is too large."
*/
maxSizeMessage?: string;
/**
* Event when the file is chose.
*/
onChange?(file: File | File[] | ChangeEvent): void;
}
interface FileItem {
/**
* The file that was uploaded.
*/
file: any;
/**
* The name of the file that was uploaded.
*/
filename: string;
/**
* The size of the file that was uploaded.
*/
fileSize: number;
/**
* The type of file.
*/
type: string;
}
interface State {
/**
* The file that was uploaded.
*/
files: FileItem[];
/**
* The errors to show the user.
*/
errors: string[];
}
/**
* A file input is a form element where users can chose a file from their local
* computer and use it to upload.
*/
export declare class FileInput extends Component<Props, State> {
/**
* Internal property to hold the reference to the file input.
*/
fileInput: React.RefObject<HTMLInputElement>;
state: {
files: any[];
errors: any[];
};
constructor(props: any);
/**
* Triggers a click on the input.
*/
handleClick: (event: any) => void;
/**
* Handle change on the input field.
*/
handleChange: (event: any) => void;
/**
* Handle change on the input field.
*/
removeFile: (fileIndex: any) => void;
render(): JSX.Element;
}
export default FileInput;