[MVP Dropzone ui]

Author: JinSSJ3

build/components/dropzone/components/Dropzone/Dropzone.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Dropzone.scss";
+import { DropzoneProps } from "./DropzoneProps";
+declare const DropzoneUI: React.FC<DropzoneProps>;
+export default DropzoneUI;

build/components/dropzone/components/Dropzone/DropzoneProps.d.ts

@@ -0,0 +1,104 @@
+import { OverridableProps } from "@unlimited-react-components/kernel";
+import { FileListProps } from "../../../file-item/components/FileList/FileListProps";
+export interface DropzoneProps extends OverridableProps {
+    /**
+     * What to do when Drop event is triggered
+     * In most cases is to retrieve the list of files validated
+     */
+    onDrop?: Function;
+    /**
+     * Upload Url or endpoint
+     */
+    url?: string;
+    /**
+     * upload method, can be POST | PUT | PATCH
+     */
+    method?: "POST" | "PUT" | "PATCH";
+    /**
+     * Extra configuration for uploading
+     * e.g. headers or token bearer
+     */
+    config?: Object;
+    /**
+     * If true, onDrop event will return the list of files, but also
+     * will upload the files if url was set, and also config
+     */
+    uploadOnDrop?: boolean;
+    /**
+     * Max number of files to be accepted.
+     */
+    maxFiles?: number;
+    /**
+     * max file size allowed in bytes
+     */
+    maxFileSize?: number;
+    /**
+     * If true, the dropzone component itself will be clickable
+     */
+    clickable?: boolean;
+    /**
+     * Extra featur to perform on click
+     * Only if clickable was set to true
+     */
+    onClick?: Function;
+    /**
+     * The default implementation of accept
+     * checks the file's mime type or extension
+     * against this list. This is a comma
+     * separated list of mime types or file extensions.
+     * Eg.: image/*,application/pdf,.psd
+     */
+    accept?: string;
+    /**
+     * If true, files that does not match accept
+     * criteria will be ignored
+     */
+    removeOnDrop?: boolean;
+    /**
+     * If present, delete all butoon will be visible
+     * and will trigger this function onClick
+     */
+    onReset?: Function;
+    /**
+     * if true, will show a ripple everytime
+     * the user drops files os selects files
+     */
+    disableRipple?: boolean;
+    /**
+     * The background color for dropzone,
+     * by default is linear-gradient(to bottom, aliceblue,#b7a8a8)
+     */
+    backgroundColor?: string;
+    /**
+     * custom validator
+     * must be a function that recieves as first parameter a File Object
+     * and must return a boolean value
+     */
+    validator?: any;
+    /**
+     * The current number of valid files
+     */
+    numberOfValidFiles?: number;
+    /**
+     * If present will make change view visible
+     * and also return the selected view mode
+     */
+    onChangeView?: Function;
+    /**
+     * The current view
+     */
+    view?: FileListProps["view"];
+    /**
+     * The max height of the container
+     * in string format
+     * by default "500px"
+     *
+     * examples:
+     *    "50vh"
+     *    "20%"
+     *    "40em"
+     *    "1rem"
+     */
+    maxHeight?: string;
+}
+export declare const DropzonePropsDefault: DropzoneProps;

build/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DropzoneFooterProps } from "./DropzoneFooterProps";
+declare const DropzoneFooter: FC<DropzoneFooterProps>;
+export default DropzoneFooter;

build/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooterProps.d.ts

@@ -0,0 +1,3 @@
+export interface DropzoneFooterProps {
+    accept?: string;
+}

build/components/dropzone/components/DropzoneHeader/DropzoneHeader.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { FileListProps } from "../../../file-item/components/FileList/FileListProps";
+export interface DropzoneHeaderProps {
+    maxFileSize: number | undefined;
+    numberOfValidFiles: number | undefined;
+    maxFiles: number | undefined;
+    onReset: Function | undefined;
+    handleReset: Function;
+    view: FileListProps["view"];
+    onChangeView: Function | undefined;
+}
+declare const DropzoneHeader: FC<DropzoneHeaderProps>;
+export default DropzoneHeader;

build/components/dropzone/components/DropzoneLabel/DropzoneLabel.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+export interface DropzoneLabelProps {
+    children: React.ReactNode | string;
+}
+declare const DropzoneLabel: FC<DropzoneLabelProps>;
+export default DropzoneLabel;

build/components/dropzone/components/hooks/useDropzoneStyles.d.ts

@@ -0,0 +1,2 @@
+declare const useDropzoneStyles: (color: string | undefined, backgroundColor: string | undefined, maxHeight: string | undefined) => string;
+export default useDropzoneStyles;

build/components/dropzone/components/utils/dropzone-ui.utils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function createRipple<T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>(event: React.MouseEvent<T, MouseEvent>, color: string): void;

build/components/dropzone/components/utils/errors.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const ERROR_MAX_SIZE: (maxSize: number) => string;
+export declare const ERROR_ACCEPT = "File's type is not allowed";

build/components/dropzone/components/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { createRipple } from "./dropzone-ui.utils";
+export { createRipple };