@mertsolak/react-drop-zone 1.0.0

package/.editorconfig

@@ -0,0 +1,7 @@
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+tab_width = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.eslintignore

@@ -0,0 +1 @@
+/node_modules

package/.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'airbnb'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'implicit-arrow-linebreak': 0,
+    'import/extensions': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-unresolved': 0,
+    'import/prefer-default-export': 0,
+    'max-len': [2, { code: 110 }],
+    'no-unused-vars': 0,
+    'no-use-before-define': 0,
+    'object-curly-newline': 0,
+    'operator-linebreak': 0,
+    'react/button-has-type': 0,
+    'react/jsx-filename-extension': [2, { extensions: ['.jsx', '.tsx'] }],
+    'react/prop-types': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'no-bitwise': 0,
+    'no-confusing-arrow': 0,
+  },
+};

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 110
+}

package/README.md

@@ -0,0 +1,35 @@
+## React Drop Zone
+
+Package to upload and convert files with drop zone
+
+![npm](https://img.shields.io/npm/v/@mertsolak/react-drop-zone)
+![license](https://img.shields.io/npm/l/@mertsolak/react-drop-zone)
+![size](https://img.shields.io/bundlephobia/min/@mertsolak/react-drop-zone)
+![issue](https://img.shields.io/github/issues/mert-solak/react-drop-zone)
+
+## Installation
+
+Use node package manager to install @mertsolak/react-drop-zone.
+
+```bash
+npm i @mertsolak/react-drop-zone
+```
+
+## Basic Usage
+
+```typescript
+import { DropZone, useDropZone } from '@mertsolak/react-drop-zone';
+
+const App = () => {
+  // converted files will be available in files array
+  // fileInDropZone can be used to style component when any file drag over the drop zone
+  // fileList is the original list that comes from event
+  // control needs to be given to the component to get updated states
+  // 'File' is the default value for the getFilesAs, if it is not provided
+  const { files, control, fileList, totalFileSize, fileInDropZone } = useDropZone({ getFilesAs: 'base64' });
+
+  // default components can be overwritten with buttonComponent
+  // and contentComponent or their styles can be updated via classNames
+  return <DropZone multiple accept={['.png']} control={control} />;
+};
+```

package/dist/components/drop-zone-config.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    accept?: string[] | undefined;
+    multiple?: boolean | undefined;
+}

package/dist/components/drop-zone.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ComponentProps } from '../definitions';
+/**
+ * button and content container can be overwritten
+ * it can be managed by control object that comes
+ * from useDropZone hook
+ * @param param @type ComponentProps
+ * @returns Rect.ReactNode
+ */
+export declare const DropZone: React.FC<ComponentProps>;

package/dist/components/dropzone.component.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DropZone: () => JSX.Element;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+import { DropZone } from './drop-zone.component';
+export { DropZone };

package/dist/configs/conversion.config.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Configuration object for conversion of Base64
+ */
+export declare const base64ToFileConfig: {
+    webWorkerBreakpointLength: number;
+};

package/dist/configs/convert.config.d.ts

@@ -0,0 +1,3 @@
+export declare const base64ToFileConfig: {
+    webWorkerBreakpointLength: number;
+};

package/dist/configs/index.d.ts

@@ -0,0 +1,2 @@
+import * as conversionConfig from './conversion.config';
+export { conversionConfig };

package/dist/conversion.helper.d.ts

@@ -0,0 +1,24 @@
+import { conversionDefinitions } from './definitions';
+/**
+ * It converts base64 format to File format
+ * base64Data has to be in correct format
+ * mimeType will overwrite already included
+ * in base64Data if provided
+ * It uses webWorker if data is bigger
+ * then the number specified in config file
+ * @param param0 @type Base64Input
+ * @returns Promise<File>
+ */
+export declare const convertBase64ToFile: ({ base64Data, fileName, mimeType, }: conversionDefinitions.Base64Input) => Promise<File>;
+/**
+ * It converts File format to Base64 Format
+ * @param file @type File
+ * @returns Promise<string>
+ */
+export declare const convertFileToBase64: (file: File) => Promise<string>;
+/**
+ * It downloads the file in File or Base64 format
+ * @param downloadContent @type DownloadContent
+ * @returns null
+ */
+export declare const download: (downloadContent: conversionDefinitions.DownloadContent) => void;

package/dist/convertion.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const convertBase64ToFile: (base64URL: string, filename: string) => Promise<File>;
+export declare const convertFileToBase64: (file: File) => Promise<string | ArrayBuffer>;

package/dist/definitions/conversion.definition.d.ts

@@ -0,0 +1,11 @@
+export declare type Base64Input = {
+    base64Data: string;
+    fileName: string;
+    mimeType?: string;
+};
+export declare type Transformation = {
+    base64URLParam: string;
+    mimeTypeParam?: string;
+};
+export declare type TransformationOutput = [Uint8Array, string];
+export declare type DownloadContent = Base64Input | File;

package/dist/definitions/drop-zone.definition.d.ts

@@ -0,0 +1,33 @@
+import React, { ChangeEventHandler, DragEvent, DragEventHandler } from 'react';
+export declare type Accept = string[];
+export interface Control {
+    onDrop?: (event: DragEvent<HTMLDivElement>, accept: Accept, multiple: boolean) => void | undefined;
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    onDragEnter?: DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: DragEventHandler<HTMLDivElement> | undefined;
+    fileInDropZone: boolean;
+}
+export interface ButtonComponentProps {
+    onClick: () => void;
+}
+export interface ComponentProps extends Omit<Control, 'fileInDropZone'> {
+    accept?: Accept | undefined;
+    multiple?: boolean | undefined;
+    control?: Control | undefined;
+    className?: string | undefined;
+    buttonClassName?: string | undefined;
+    contentClassName?: string | undefined;
+    buttonComponent?: React.FunctionComponent<ButtonComponentProps> | undefined;
+    contentComponent?: React.FunctionComponent | undefined;
+}
+export declare type GetFilesAs = 'base64' | 'File';
+export interface DropZoneHookProps {
+    getFilesAs: GetFilesAs;
+}
+export interface DropZoneHookReturns<T extends DropZoneHookProps> {
+    control: Control;
+    files: (T['getFilesAs'] extends 'base64' ? string : File)[];
+    fileList: FileList;
+    totalFileSize: number;
+    fileInDropZone: boolean;
+}

package/dist/definitions/index.d.ts

@@ -0,0 +1 @@
+export * from './drop-zone.definition';

package/dist/helpers/attribute.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const mergeClassNames: (...classNames: (string | undefined)[]) => string;
+export declare const shouldMergeClassNames: (shouldMerge: boolean, defaultMergeNumber: number, ...classNames: string[]) => string;

package/dist/helpers/base64.helper.d.ts

@@ -0,0 +1,15 @@
+import { conversionDefinitions } from '../definitions';
+/**
+ * it converts base64 url to required format by adding missing parts
+ * if base64Data string does not include mimeType,
+ * mimeType has to be provided
+ * @param param0 @type Omit<Base64Input, 'fileName'>
+ * @returns string
+ */
+export declare const constructBase64Url: ({ base64Data, mimeType, }: Omit<conversionDefinitions.Base64Input, 'fileName'>) => string;
+/**
+ * It checks if base64 data is ObjectURL or not
+ * @param base64Data @type string
+ * @returns
+ */
+export declare const isObjectURL: (base64Data: string) => boolean;

package/dist/helpers/index.d.ts

@@ -0,0 +1,3 @@
+import * as variableHelper from './variable.helper';
+import * as attributeHelper from './attribute.helper';
+export { variableHelper, attributeHelper };

package/dist/helpers/size.helper.d.ts

@@ -0,0 +1 @@
+export declare const getBas64SizeAsByte: (length: number) => number;

package/dist/helpers/variable.helper.d.ts

@@ -0,0 +1 @@
+export declare const isDefined: (variable: any) => boolean;

package/dist/hooks/use-drag-drop.hook.d.ts

@@ -0,0 +1,2 @@
+import { DragDropHookReturns, DragDropHookProps } from '../definitions';
+export declare const useDragDrop: <T extends DragDropHookProps>({ getFilesAs }?: T) => DragDropHookReturns<T>;

package/dist/hooks/use-drop-zone.hook.d.ts

@@ -0,0 +1,9 @@
+import { DropZoneHookReturns, DropZoneHookProps } from '../definitions';
+/**
+ * It gives ready to use states if control
+ * object is provided to DropZoneComponent
+ * as props
+ * @param param @type DropZoneHookProps
+ * @returns DropZoneHookReturns<DropZoneHookProps>
+ */
+export declare const useDropZone: <T extends DropZoneHookProps>({ getFilesAs }?: T) => DropZoneHookReturns<T>;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { useDropZone } from './hooks/use-drop-zone.hook';
+import { DropZone } from './components';
+export { DropZone, useDropZone };

package/dist/index.js

@@ -0,0 +1,324 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var fileHelper = require('@mertsolak/file-helper');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+/**
+ * It gives ready to use states if control
+ * object is provided to DropZoneComponent
+ * as props
+ * @param param @type DropZoneHookProps
+ * @returns DropZoneHookReturns<DropZoneHookProps>
+ */
+var useDropZone = function (_a) {
+    var _b = _a === void 0 ? { getFilesAs: 'File' } : _a, getFilesAs = _b.getFilesAs;
+    var _c = React.useState(false), fileInDropZone = _c[0], setFileInDropZone = _c[1];
+    var _d = React.useState(), totalFileSize = _d[0], setTotalFileSize = _d[1];
+    var _e = React.useState(), fileList = _e[0], setFileList = _e[1];
+    var _f = React.useState(), files = _f[0], setFiles = _f[1];
+    /** It sets file related states and converts files if needed
+     * @param eventFileList @type FileList
+     */
+    var processFiles = React.useCallback(function (eventFileList) { return __awaiter(void 0, void 0, void 0, function () {
+        var convertedFiles, conversionPromises, eventFiles, eventTotalFileSize, conversionResults;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    convertedFiles = [];
+                    conversionPromises = [];
+                    eventFiles = [];
+                    eventTotalFileSize = 0;
+                    Object.keys(eventFileList).forEach(function (eachFileKey) {
+                        var file = eventFileList[eachFileKey];
+                        eventFiles.push(file);
+                        eventTotalFileSize += file.size;
+                        if (getFilesAs === 'base64') {
+                            conversionPromises.push(fileHelper.convertFileToBase64(file));
+                        }
+                    });
+                    return [4 /*yield*/, Promise.all(conversionPromises)];
+                case 1:
+                    conversionResults = _a.sent();
+                    eventFiles.forEach(function (file, index) {
+                        var _a;
+                        var convertedFile = (_a = conversionResults[index]) !== null && _a !== void 0 ? _a : file;
+                        convertedFiles.push(convertedFile);
+                    });
+                    setTotalFileSize(eventTotalFileSize);
+                    setFileList(eventFileList);
+                    setFiles(convertedFiles);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [getFilesAs]);
+    /**
+     * It filters files by looking at accept and multiple
+     * and calls processFiles with filtered files
+     * @param event @type DragEvent<HtMLDivElement>
+     * @param accept @type string[]
+     * @param multiple @type boolean
+     */
+    var handleOnDrop = React.useCallback(function (event, accept, multiple) {
+        setFileInDropZone(false);
+        var eventFiles = event.dataTransfer.files;
+        var newDataTransfer = new DataTransfer();
+        Object.values(eventFiles).some(function (file) {
+            if (accept.includes("." + file.name.split('.').pop().toLowerCase())) {
+                newDataTransfer.items.add(file);
+                if (!multiple) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        processFiles(newDataTransfer.files);
+    }, [processFiles]);
+    /**
+     * it calls processFiles with files that comes from event
+     * @param event @type DragEvent<HtMLDivElement>
+     */
+    var handleOnChange = React.useCallback(function (event) {
+        processFiles(event.currentTarget.files);
+    }, [processFiles]);
+    /**
+     * it sets fileInDropZone state true to notify there is a file
+     * inside of the drop zone borders
+     */
+    var handleOnDragEnter = React.useCallback(function () {
+        setFileInDropZone(true);
+    }, []);
+    /**
+     * it sets fileInDropZone state false to notify there is no file
+     * inside of the drop zone borders
+     */
+    var handleOnDragLeave = React.useCallback(function () {
+        setFileInDropZone(false);
+    }, []);
+    /**
+     * control object that controls dropZoneComponent to process
+     * inputs for the ready to use outputs
+     */
+    var control = React.useMemo(function () { return ({
+        onDrop: handleOnDrop,
+        onChange: handleOnChange,
+        onDragEnter: handleOnDragEnter,
+        onDragLeave: handleOnDragLeave,
+        fileInDropZone: fileInDropZone,
+    }); }, [handleOnDrop, handleOnChange, handleOnDragEnter, handleOnDragLeave, fileInDropZone]);
+    return { control: control, files: files, fileList: fileList, totalFileSize: totalFileSize, fileInDropZone: fileInDropZone };
+};
+
+var isDefined = function (variable) { return variable !== undefined && variable !== null; };
+
+var mergeClassNames = function () {
+    var classNames = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classNames[_i] = arguments[_i];
+    }
+    return classNames.join(' ');
+};
+var shouldMergeClassNames = function (shouldMerge, defaultMergeNumber) {
+    var classNames = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        classNames[_i - 2] = arguments[_i];
+    }
+    return shouldMerge
+        ? classNames.join(' ')
+        : classNames.filter(function () {
+            var params = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                params[_i] = arguments[_i];
+            }
+            return params[1] <= defaultMergeNumber - 1;
+        }).join(' ');
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".drop-zone-module_container__24aKE {\n  width: fit-content;\n  position: relative;\n}\n\n.drop-zone-module_input__2Pzq_ {\n  display: none;\n}\n\n.drop-zone-module_button__2a7EM {\n  position: absolute;\n  margin: auto;\n  width: 140px;\n  bottom: 25px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  cursor: pointer;\n  padding: 10px 4px;\n}\n\n.drop-zone-module_contentContainer__2wXPQ {\n  padding: 20px;\n  width: 300px;\n  height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #4a4a4a;\n  border: 1px dashed #c8c8c8;\n  background-color: #ebebeb;\n}\n.drop-zone-module_contentContainer__2wXPQ * {\n  pointer-events: none;\n}\n\n.drop-zone-module_fileInDropZone__3GBPO {\n  background-color: white;\n}\n\n.drop-zone-module_text__1fmAO {\n  margin: 0px 0px 6px 0px;\n}";
+var styles = {"container":"drop-zone-module_container__24aKE","input":"drop-zone-module_input__2Pzq_","button":"drop-zone-module_button__2a7EM","contentContainer":"drop-zone-module_contentContainer__2wXPQ","fileInDropZone":"drop-zone-module_fileInDropZone__3GBPO","text":"drop-zone-module_text__1fmAO"};
+styleInject(css_248z);
+
+/**
+ * button and content container can be overwritten
+ * it can be managed by control object that comes
+ * from useDropZone hook
+ * @param param @type ComponentProps
+ * @returns Rect.ReactNode
+ */
+var DropZone = function (_a) {
+    var className = _a.className, buttonClassName = _a.buttonClassName, contentClassName = _a.contentClassName, ButtonComponentParam = _a.buttonComponent, ContentComponentParam = _a.contentComponent, accept = _a.accept, multiple = _a.multiple, control = _a.control, onDrop = _a.onDrop, onChange = _a.onChange, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave;
+    var inputRef = React.useRef();
+    /**
+     * It redirects event, accept and multiple to onDrop
+     * and control.onDrop if they are given and prevents
+     * default to make drop zone working
+     * @param event @type DragEvent<HTMLDivElement>
+     */
+    var handleOnDrop = React.useCallback(function (event) {
+        event.preventDefault();
+        if (isDefined(onDrop)) {
+            onDrop(event, accept, multiple);
+        }
+        if (isDefined(control === null || control === void 0 ? void 0 : control.onDrop)) {
+            control === null || control === void 0 ? void 0 : control.onDrop(event, accept, multiple);
+        }
+    }, [onDrop, control === null || control === void 0 ? void 0 : control.onDrop, accept, multiple]);
+    /**
+     * It prevents default to make drop zone working
+     * @param event: DragEvent<HTMLDivElement>
+     */
+    var handleOnDragOver = React.useCallback(function (event) {
+        event.preventDefault();
+    }, []);
+    /**
+     * It redirects event to onDragEnter and control.onDragEnter if they are given
+     * @param event @type DragEvent<HTMLDivElement>
+     */
+    var handleOnDragEnter = React.useCallback(function (event) {
+        if (isDefined(onDragEnter)) {
+            onDragEnter(event);
+        }
+        if (isDefined(control === null || control === void 0 ? void 0 : control.onDragEnter)) {
+            control === null || control === void 0 ? void 0 : control.onDragEnter(event);
+        }
+    }, [onDragEnter, control === null || control === void 0 ? void 0 : control.onDragEnter]);
+    /**
+     * It redirects event to onDragLeave and control.onDragLeave if they are given
+     * @param event @type DragEvent<HTMLDivElement>
+     */
+    var handleOnDragLeave = React.useCallback(function (event) {
+        if (isDefined(onDragLeave)) {
+            onDragLeave(event);
+        }
+        if (isDefined(control === null || control === void 0 ? void 0 : control.onDragLeave)) {
+            control === null || control === void 0 ? void 0 : control.onDragLeave(event);
+        }
+    }, [onDragLeave, control === null || control === void 0 ? void 0 : control.onDragLeave]);
+    /**
+     * It redirects event to onChange and control.onChange if they are given
+     * @param event @type ChangeEvent<HTMLInputElement>
+     */
+    var handleOnChangeInput = React.useCallback(function (event) {
+        if (isDefined(onDrop)) {
+            onChange(event);
+        }
+        if (isDefined(control === null || control === void 0 ? void 0 : control.onChange)) {
+            control === null || control === void 0 ? void 0 : control.onChange(event);
+        }
+    }, [onChange, control === null || control === void 0 ? void 0 : control.onChange]);
+    /**
+     * It triggers input's click event to upload
+     */
+    var handleOnClickButton = React.useCallback(function () {
+        inputRef.current.click();
+    }, [inputRef.current]);
+    /**
+     * It decides for the button component and
+     * assigns onClick method to it
+     * @returns React.ReactNode
+     */
+    var ButtonComponent = React.useCallback(function () {
+        return isDefined(ButtonComponentParam) ? (React__default['default'].createElement(ButtonComponentParam, { onClick: handleOnClickButton })) : (React__default['default'].createElement("button", { className: mergeClassNames(styles.button, buttonClassName), onClick: handleOnClickButton }, "Click to Upload"));
+    }, [ButtonComponentParam, buttonClassName, handleOnClickButton]);
+    /**
+     * It decides for the content component ang manage
+     * styling by looking at fileInDropZone prop
+     * @returns React.ReactNode
+     */
+    var ContentComponent = React.useCallback(function () {
+        return ContentComponentParam ? (React__default['default'].createElement(ContentComponentParam, null)) : (React__default['default'].createElement("div", { className: shouldMergeClassNames(control === null || control === void 0 ? void 0 : control.fileInDropZone, 2, styles.contentContainer, contentClassName, styles.fileInDropZone) },
+            React__default['default'].createElement("p", { className: styles.text }, "Drop files here"),
+            React__default['default'].createElement("p", { className: styles.text }, "or")));
+    }, [ContentComponentParam, contentClassName, control === null || control === void 0 ? void 0 : control.fileInDropZone]);
+    return (React__default['default'].createElement("div", { className: mergeClassNames(styles.container, className), onDragOver: handleOnDragOver, onDrop: handleOnDrop, onDragEnter: handleOnDragEnter, onDragLeave: handleOnDragLeave },
+        React__default['default'].createElement("input", { className: styles.input, ref: inputRef, multiple: multiple, accept: accept === null || accept === void 0 ? void 0 : accept.join(','), type: "file", onChange: handleOnChangeInput }),
+        React__default['default'].createElement(ButtonComponent, null),
+        React__default['default'].createElement(ContentComponent, null)));
+};
+
+exports.DropZone = DropZone;
+exports.useDropZone = useDropZone;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/hooks/use-drop-zone.hook.ts","../src/helpers/variable.helper.ts","../src/helpers/attribute.helper.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/components/drop-zone.component.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { convertFileToBase64 } from '@mertsolak/file-helper';\n\nimport { DropZoneHookReturns, DropZoneHookProps, Control } from '../definitions';\n\n/**\n * It gives ready to use states if control\n * object is provided to DropZoneComponent\n * as props\n * @param param @type DropZoneHookProps\n * @returns DropZoneHookReturns<DropZoneHookProps>\n */\nexport const useDropZone = <T extends DropZoneHookProps>(\n  { getFilesAs }: T = { getFilesAs: 'File' } as T,\n): DropZoneHookReturns<T> => {\n  const [fileInDropZone, setFileInDropZone] = useState<DropZoneHookReturns<T>['fileInDropZone']>(false);\n  const [totalFileSize, setTotalFileSize] = useState<DropZoneHookReturns<T>['totalFileSize']>();\n  const [fileList, setFileList] = useState<DropZoneHookReturns<T>['fileList']>();\n  const [files, setFiles] = useState<DropZoneHookReturns<T>['files']>();\n\n  /** It sets file related states and converts files if needed\n   * @param eventFileList @type FileList\n   */\n  const processFiles = useCallback(\n    async (eventFileList: FileList) => {\n      const convertedFiles: DropZoneHookReturns<T>['files'] = [];\n      const conversionPromises: Promise<any>[] = [];\n      const eventFiles: File[] = [];\n      let eventTotalFileSize = 0;\n\n      Object.keys(eventFileList).forEach((eachFileKey) => {\n        const file = eventFileList[eachFileKey] as File;\n        eventFiles.push(file);\n        eventTotalFileSize += file.size;\n\n        if (getFilesAs === 'base64') {\n          conversionPromises.push(convertFileToBase64(file));\n        }\n      });\n\n      const conversionResults = await Promise.all(conversionPromises);\n\n      eventFiles.forEach((file, index) => {\n        const convertedFile = conversionResults[index] ?? file;\n        convertedFiles.push(convertedFile);\n      });\n\n      setTotalFileSize(eventTotalFileSize);\n      setFileList(eventFileList);\n      setFiles(convertedFiles);\n    },\n    [getFilesAs],\n  );\n\n  /**\n   * It filters files by looking at accept and multiple\n   * and calls processFiles with filtered files\n   * @param event @type DragEvent<HtMLDivElement>\n   * @param accept @type string[]\n   * @param multiple @type boolean\n   */\n  const handleOnDrop = useCallback<Control['onDrop']>(\n    (event, accept, multiple) => {\n      setFileInDropZone(false);\n\n      const eventFiles = event.dataTransfer.files;\n      const newDataTransfer = new DataTransfer();\n\n      Object.values(eventFiles).some((file) => {\n        if (accept.includes(`.${file.name.split('.').pop().toLowerCase()}`)) {\n          newDataTransfer.items.add(file);\n          if (!multiple) {\n            return true;\n          }\n        }\n\n        return false;\n      });\n\n      processFiles(newDataTransfer.files);\n    },\n    [processFiles],\n  );\n\n  /**\n   * it calls processFiles with files that comes from event\n   * @param event @type DragEvent<HtMLDivElement>\n   */\n  const handleOnChange = useCallback<Control['onChange']>(\n    (event) => {\n      processFiles(event.currentTarget.files);\n    },\n    [processFiles],\n  );\n\n  /**\n   * it sets fileInDropZone state true to notify there is a file\n   * inside of the drop zone borders\n   */\n  const handleOnDragEnter = useCallback<Control['onDragEnter']>(() => {\n    setFileInDropZone(true);\n  }, []);\n\n  /**\n   * it sets fileInDropZone state false to notify there is no file\n   * inside of the drop zone borders\n   */\n  const handleOnDragLeave = useCallback<Control['onDragLeave']>(() => {\n    setFileInDropZone(false);\n  }, []);\n\n  /**\n   * control object that controls dropZoneComponent to process\n   * inputs for the ready to use outputs\n   */\n  const control: DropZoneHookReturns<T>['control'] = useMemo(\n    () => ({\n      onDrop: handleOnDrop,\n      onChange: handleOnChange,\n      onDragEnter: handleOnDragEnter,\n      onDragLeave: handleOnDragLeave,\n      fileInDropZone,\n    }),\n    [handleOnDrop, handleOnChange, handleOnDragEnter, handleOnDragLeave, fileInDropZone],\n  );\n\n  return { control, files, fileList, totalFileSize, fileInDropZone };\n};\n","export const isDefined = (variable: any) => variable !== undefined && variable !== null;\n","export const mergeClassNames = (...classNames: (string | undefined)[]): string => classNames.join(' ');\n\nexport const shouldMergeClassNames = (\n  shouldMerge: boolean,\n  defaultMergeNumber: number,\n  ...classNames: string[]\n) =>\n  shouldMerge\n    ? classNames.join(' ')\n    : classNames.filter((...params) => params[1] <= defaultMergeNumber - 1).join(' ');\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { ChangeEventHandler, DragEventHandler, useCallback, useRef } from 'react';\n\nimport { variableHelper, attributeHelper } from '../helpers';\nimport { ComponentProps } from '../definitions';\n\nimport styles from './drop-zone.module.scss';\n\n/**\n * button and content container can be overwritten\n * it can be managed by control object that comes\n * from useDropZone hook\n * @param param @type ComponentProps\n * @returns Rect.ReactNode\n */\nexport const DropZone: React.FC<ComponentProps> = ({\n  className,\n  buttonClassName,\n  contentClassName,\n  buttonComponent: ButtonComponentParam,\n  contentComponent: ContentComponentParam,\n  accept,\n  multiple,\n  control,\n  onDrop,\n  onChange,\n  onDragEnter,\n  onDragLeave,\n}) => {\n  const inputRef = useRef<HTMLInputElement>();\n\n  /**\n   * It redirects event, accept and multiple to onDrop\n   * and control.onDrop if they are given and prevents\n   * default to make drop zone working\n   * @param event @type DragEvent<HTMLDivElement>\n   */\n  const handleOnDrop: DragEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      event.preventDefault();\n\n      if (variableHelper.isDefined(onDrop)) {\n        onDrop(event, accept, multiple);\n      }\n\n      if (variableHelper.isDefined(control?.onDrop)) {\n        control?.onDrop(event, accept, multiple);\n      }\n    },\n    [onDrop, control?.onDrop, accept, multiple],\n  );\n\n  /**\n   * It prevents default to make drop zone working\n   * @param event: DragEvent<HTMLDivElement>\n   */\n  const handleOnDragOver: DragEventHandler<HTMLDivElement> = useCallback((event) => {\n    event.preventDefault();\n  }, []);\n\n  /**\n   * It redirects event to onDragEnter and control.onDragEnter if they are given\n   * @param event @type DragEvent<HTMLDivElement>\n   */\n  const handleOnDragEnter: DragEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      if (variableHelper.isDefined(onDragEnter)) {\n        onDragEnter(event);\n      }\n\n      if (variableHelper.isDefined(control?.onDragEnter)) {\n        control?.onDragEnter(event);\n      }\n    },\n    [onDragEnter, control?.onDragEnter],\n  );\n\n  /**\n   * It redirects event to onDragLeave and control.onDragLeave if they are given\n   * @param event @type DragEvent<HTMLDivElement>\n   */\n  const handleOnDragLeave: DragEventHandler<HTMLDivElement> = useCallback(\n    (event) => {\n      if (variableHelper.isDefined(onDragLeave)) {\n        onDragLeave(event);\n      }\n\n      if (variableHelper.isDefined(control?.onDragLeave)) {\n        control?.onDragLeave(event);\n      }\n    },\n    [onDragLeave, control?.onDragLeave],\n  );\n\n  /**\n   * It redirects event to onChange and control.onChange if they are given\n   * @param event @type ChangeEvent<HTMLInputElement>\n   */\n  const handleOnChangeInput: ChangeEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      if (variableHelper.isDefined(onDrop)) {\n        onChange(event);\n      }\n\n      if (variableHelper.isDefined(control?.onChange)) {\n        control?.onChange(event);\n      }\n    },\n    [onChange, control?.onChange],\n  );\n\n  /**\n   * It triggers input's click event to upload\n   */\n  const handleOnClickButton = useCallback(() => {\n    inputRef.current.click();\n  }, [inputRef.current]);\n\n  /**\n   * It decides for the button component and\n   * assigns onClick method to it\n   * @returns React.ReactNode\n   */\n  const ButtonComponent = useCallback(\n    () =>\n      variableHelper.isDefined(ButtonComponentParam) ? (\n        <ButtonComponentParam onClick={handleOnClickButton} />\n      ) : (\n        <button\n          className={attributeHelper.mergeClassNames(styles.button, buttonClassName)}\n          onClick={handleOnClickButton}\n        >\n          Click to Upload\n        </button>\n      ),\n    [ButtonComponentParam, buttonClassName, handleOnClickButton],\n  );\n\n  /**\n   * It decides for the content component ang manage\n   * styling by looking at fileInDropZone prop\n   * @returns React.ReactNode\n   */\n  const ContentComponent = useCallback(\n    () =>\n      ContentComponentParam ? (\n        <ContentComponentParam />\n      ) : (\n        <div\n          className={attributeHelper.shouldMergeClassNames(\n            control?.fileInDropZone,\n            2,\n            styles.contentContainer,\n            contentClassName,\n            styles.fileInDropZone,\n          )}\n        >\n          <p className={styles.text}>Drop files here</p>\n          <p className={styles.text}>or</p>\n        </div>\n      ),\n    [ContentComponentParam, contentClassName, control?.fileInDropZone],\n  );\n\n  return (\n    <div\n      className={attributeHelper.mergeClassNames(styles.container, className)}\n      onDragOver={handleOnDragOver}\n      onDrop={handleOnDrop}\n      onDragEnter={handleOnDragEnter}\n      onDragLeave={handleOnDragLeave}\n    >\n      <input\n        className={styles.input}\n        ref={inputRef}\n        multiple={multiple}\n        accept={accept?.join(',')}\n        type=\"file\"\n        onChange={handleOnChangeInput}\n      />\n      <ButtonComponent />\n      <ContentComponent />\n    </div>\n  );\n};\n"],"names":["useState","useCallback","convertFileToBase64","useMemo","useRef","variableHelper.isDefined","React","attributeHelper.mergeClassNames","attributeHelper.shouldMergeClassNames"],"mappings":"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"}

package/dist/permission-manager.d.ts

@@ -0,0 +1,43 @@
+import { Operator, PermissionObject } from './types';
+export declare class Permissions<T extends string> {
+    private permissionObject;
+    private permissionNumber;
+    /** It gets permission names and
+     *  initial permission number in base 16 as optional
+     * @param permissionNames @type string(name)[]
+     * @param initialPermissionNumber @type string(hex number)
+     */
+    constructor(permissionNames: T[], initialPermissionNumber?: string);
+    /**
+     * It creates permission object&enum
+     * @param permissionNames @type string(name)[]
+     */
+    private createPermissionObject;
+    /**
+     * It gets expected permission names and operator for verification
+     * @param expectedPermissions @type string(name)[]
+     * @param operator @type string = '|' default
+     * @returns boolean
+     */
+    verifyPermissions: (expectedPermissions: T[], operator?: Operator) => boolean;
+    /**
+     * It gets permission names to add
+     * @param newPermissions @type string(name)[]
+     */
+    addPermissions: (newPermissions: T[]) => void;
+    /**
+     * It gets permission names to remove
+     * @param removedPermissions @type string(name)[]
+     */
+    removePermissions: (removedPermissions: T[]) => void;
+    /**
+     * It returns permission object
+     * @returns Record<string(name), string>
+     */
+    getPermissionObject: () => PermissionObject<T>;
+    /**
+     * It returns permission number
+     * @returns string
+     */
+    getPermissionNumber: () => string;
+}

package/dist/permission.helper.d.ts

@@ -0,0 +1,35 @@
+import { Operator, PermissionObject } from './types';
+/**
+ * creates permissionNames array with string literal type
+ * @param permissions @type T[]
+ * @returns T[]
+ */
+export declare const createPermissionNames: <T extends string>(...permissions: T[]) => T[];
+/**
+ * It creates permission object&enum
+ * @param permissionNames @type string(name)[]
+ */
+export declare const createPermissionObject: <T extends string>(permissionNames: T[]) => PermissionObject<T>;
+/**
+ * It gets expected permission names, permission number, permission object and operator for verification
+ * @param permissionNumber @type string
+ * @param permissionObject @type PermissionObject<T>
+ * @param expectedPermissions @type string(name)[]
+ * @param operator @type string = '|' default
+ * @returns boolean
+ */
+export declare const verifyPermissions: <T extends string>(permissionNumber: string, permissionObject: PermissionObject<T>, expectedPermissions: T[], operator?: Operator) => boolean;
+/**
+ * It gets permission number, permission object and permission names to add permissions
+ * @param permissionNumber @type string
+ * @param permissionObject @type PermissionObject<T>
+ * @param newPermissions @type string(name)[]
+ */
+export declare const addPermissions: <T extends string>(permissionNumber: string, permissionObject: PermissionObject<T>, newPermissions: T[]) => string;
+/**
+ * It gets permission number, permission object and permission names to remove permissions
+ * @param permissionNumber @type string
+ * @param permissionObject @type PermissionObject<T>
+ * @param removedPermissions @type string(name)[]
+ */
+export declare const removePermissions: <T extends string>(permissionNumber: string, permissionObject: PermissionObject<T>, removedPermissions: T[]) => string;

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+export declare type Operator = '&' | '|';
+export declare type PermissionObject<T extends string> = Record<T, string>;

package/dist/web-worker-helper.d.ts

@@ -0,0 +1 @@
+export declare const createWebWorker: <T extends unknown, K extends unknown>(inputData: T, processCallback: (data: T) => K, resultCallback: (data: K) => void) => Worker | null;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@mertsolak/react-drop-zone",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/mert-solak/react-drop-zone.git"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "commit": "git-cz",
+    "release": "standard-version",
+    "lint": "eslint \"{src/**/*.ts, src/**/*.tsx}\""
+  },
+  "dependencies": {
+    "@mertsolak/file-helper": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.36",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
+    "commitizen": "^4.2.2",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "ghooks": "^2.0.4",
+    "rollup": "^2.36.1",
+    "sass": "1.32.0",
+    "sass-loader": "10.1.0",
+    "style-loader": "2.0.0",
+    "css-loader": "5.0.1",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "standard-version": "^9.3.0",
+    "ts-loader": "^8.0.13",
+    "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run lint -s"
+    },
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+}