@mertsolak/react-drop-zone 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +1 -1
- package/dist/configs/accept.config.d.ts +4 -0
- package/dist/configs/index.d.ts +2 -2
- package/dist/definitions/drop-zone.definition.d.ts +1 -6
- package/dist/helpers/accept.helper.d.ts +7 -0
- package/dist/helpers/index.d.ts +2 -1
- package/dist/index.js +65 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
# Changelog
|
2
|
+
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
4
|
+
|
5
|
+
## 2.0.0 (2021-11-27)
|
6
|
+
|
7
|
+
|
8
|
+
### Features
|
9
|
+
|
10
|
+
* **package.json:** name and dependencies set ([02c509b](https://github.com/mert-solak/react-drop-zone/commit/02c509b6c7bb01bfa7253d268ca6e15e01f266f9))
|
11
|
+
* **src/*:** bug fix & upload extension improvement ([8fc1bc6](https://github.com/mert-solak/react-drop-zone/commit/8fc1bc6bd7435997d35b29e3ddb4b93eeea2d279))
|
12
|
+
* **src/*:** styling configuration ([a5c3763](https://github.com/mert-solak/react-drop-zone/commit/a5c3763483b8c77e3b4ab61ef18136a62355c67a))
|
13
|
+
* **src/*:** useDropZone hook and definitions created ([80d6908](https://github.com/mert-solak/react-drop-zone/commit/80d69083be085f5cf4443bf28fe62cfd57ed9006))
|
14
|
+
* **src/components/*:** dropzone component created ([7137e8a](https://github.com/mert-solak/react-drop-zone/commit/7137e8ac9d04632c9842ef94b5d915a4e9dce046))
|
15
|
+
* **src/components/*:** dropzone component management improvement ([2690bfc](https://github.com/mert-solak/react-drop-zone/commit/2690bfc4787b84a26068ff08452f3c7f3cc8dfdf))
|
16
|
+
* **src/helpers:** helpers created for styling and null control ([262e9a4](https://github.com/mert-solak/react-drop-zone/commit/262e9a4751acc79b7c9b3fc0ddcfdf4054b1b7d0))
|
package/README.md
CHANGED
@@ -29,7 +29,7 @@ const App = () => {
|
|
29
29
|
const { files, control, fileList, totalFileSize, fileInDropZone } = useDropZone({ getFilesAs: 'base64' });
|
30
30
|
|
31
31
|
// default components can be overwritten with buttonComponent
|
32
|
-
// and contentComponent or
|
32
|
+
// and contentComponent or container style can be updated via className
|
33
33
|
return <DropZone multiple accept={['.png']} control={control} />;
|
34
34
|
};
|
35
35
|
```
|
package/dist/configs/index.d.ts
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
import * as
|
2
|
-
export {
|
1
|
+
import * as acceptConfig from './accept.config';
|
2
|
+
export { acceptConfig };
|
@@ -7,17 +7,12 @@ export interface Control {
|
|
7
7
|
onDragLeave?: DragEventHandler<HTMLDivElement> | undefined;
|
8
8
|
fileInDropZone: boolean;
|
9
9
|
}
|
10
|
-
export interface ButtonComponentProps {
|
11
|
-
onClick: () => void;
|
12
|
-
}
|
13
10
|
export interface ComponentProps extends Omit<Control, 'fileInDropZone'> {
|
14
11
|
accept?: Accept | undefined;
|
15
12
|
multiple?: boolean | undefined;
|
16
13
|
control?: Control | undefined;
|
17
14
|
className?: string | undefined;
|
18
|
-
|
19
|
-
contentClassName?: string | undefined;
|
20
|
-
buttonComponent?: React.FunctionComponent<ButtonComponentProps> | undefined;
|
15
|
+
buttonComponent?: React.FunctionComponent | undefined;
|
21
16
|
contentComponent?: React.FunctionComponent | undefined;
|
22
17
|
}
|
23
18
|
export declare type GetFilesAs = 'base64' | 'File';
|
package/dist/helpers/index.d.ts
CHANGED
package/dist/index.js
CHANGED
@@ -60,6 +60,48 @@ function __generator(thisArg, body) {
|
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
63
|
+
var isDefined = function (variable) { return variable !== undefined && variable !== null; };
|
64
|
+
|
65
|
+
var shouldMergeClassNames = function (shouldMerge, defaultMergeNumber) {
|
66
|
+
var classNames = [];
|
67
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
68
|
+
classNames[_i - 2] = arguments[_i];
|
69
|
+
}
|
70
|
+
return shouldMerge
|
71
|
+
? classNames.join(' ')
|
72
|
+
: classNames.filter(function () {
|
73
|
+
var params = [];
|
74
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
75
|
+
params[_i] = arguments[_i];
|
76
|
+
}
|
77
|
+
return params[1] <= defaultMergeNumber - 1;
|
78
|
+
}).join(' ');
|
79
|
+
};
|
80
|
+
|
81
|
+
var extensions = {
|
82
|
+
'.jpg': '.jpeg',
|
83
|
+
'.jpeg': '.jpg',
|
84
|
+
};
|
85
|
+
|
86
|
+
/**
|
87
|
+
* it extends accept array for .jpeg, .jpg etc
|
88
|
+
* @param acceptArray @type Accept
|
89
|
+
* @returns Accept | undefined
|
90
|
+
*/
|
91
|
+
var extend = function (acceptArray) {
|
92
|
+
if (!isDefined(acceptArray)) {
|
93
|
+
return undefined;
|
94
|
+
}
|
95
|
+
var extendedAcceptArray = [];
|
96
|
+
acceptArray.forEach(function (accept) {
|
97
|
+
if (isDefined(extensions[accept])) {
|
98
|
+
extendedAcceptArray.push(extensions[accept]);
|
99
|
+
}
|
100
|
+
extendedAcceptArray.push(accept);
|
101
|
+
});
|
102
|
+
return extendedAcceptArray;
|
103
|
+
};
|
104
|
+
|
63
105
|
/**
|
64
106
|
* It gives ready to use states if control
|
65
107
|
* object is provided to DropZoneComponent
|
@@ -116,15 +158,23 @@ var useDropZone = function (_a) {
|
|
116
158
|
* @param multiple @type boolean
|
117
159
|
*/
|
118
160
|
var handleOnDrop = React.useCallback(function (event, accept, multiple) {
|
161
|
+
var extendedAccept = extend(accept);
|
119
162
|
setFileInDropZone(false);
|
120
163
|
var eventFiles = event.dataTransfer.files;
|
121
164
|
var newDataTransfer = new DataTransfer();
|
122
165
|
Object.values(eventFiles).some(function (file) {
|
123
|
-
|
166
|
+
var confirmFile = function () {
|
124
167
|
newDataTransfer.items.add(file);
|
125
168
|
if (!multiple) {
|
126
169
|
return true;
|
127
170
|
}
|
171
|
+
return false;
|
172
|
+
};
|
173
|
+
if (!isDefined(extendedAccept)) {
|
174
|
+
return confirmFile();
|
175
|
+
}
|
176
|
+
if (extendedAccept.includes("." + file.type.split('/').pop())) {
|
177
|
+
return confirmFile();
|
128
178
|
}
|
129
179
|
return false;
|
130
180
|
});
|
@@ -165,31 +215,6 @@ var useDropZone = function (_a) {
|
|
165
215
|
return { control: control, files: files, fileList: fileList, totalFileSize: totalFileSize, fileInDropZone: fileInDropZone };
|
166
216
|
};
|
167
217
|
|
168
|
-
var isDefined = function (variable) { return variable !== undefined && variable !== null; };
|
169
|
-
|
170
|
-
var mergeClassNames = function () {
|
171
|
-
var classNames = [];
|
172
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
173
|
-
classNames[_i] = arguments[_i];
|
174
|
-
}
|
175
|
-
return classNames.join(' ');
|
176
|
-
};
|
177
|
-
var shouldMergeClassNames = function (shouldMerge, defaultMergeNumber) {
|
178
|
-
var classNames = [];
|
179
|
-
for (var _i = 2; _i < arguments.length; _i++) {
|
180
|
-
classNames[_i - 2] = arguments[_i];
|
181
|
-
}
|
182
|
-
return shouldMerge
|
183
|
-
? classNames.join(' ')
|
184
|
-
: classNames.filter(function () {
|
185
|
-
var params = [];
|
186
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
187
|
-
params[_i] = arguments[_i];
|
188
|
-
}
|
189
|
-
return params[1] <= defaultMergeNumber - 1;
|
190
|
-
}).join(' ');
|
191
|
-
};
|
192
|
-
|
193
218
|
function styleInject(css, ref) {
|
194
219
|
if ( ref === void 0 ) ref = {};
|
195
220
|
var insertAt = ref.insertAt;
|
@@ -217,8 +242,8 @@ function styleInject(css, ref) {
|
|
217
242
|
}
|
218
243
|
}
|
219
244
|
|
220
|
-
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-
|
221
|
-
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"};
|
245
|
+
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_buttonWrapper__39hLD {\n width: fit-content;\n margin: auto;\n bottom: 12px;\n left: 0;\n right: 0;\n position: absolute;\n text-align: center;\n cursor: pointer;\n}\n.drop-zone-module_buttonWrapper__39hLD * {\n pointer-events: none;\n}\n\n.drop-zone-module_button__2a7EM {\n width: 140px;\n padding: 10px 4px;\n}\n\n.drop-zone-module_contentContainer__2wXPQ {\n padding: 12px;\n width: 300px;\n height: 80px;\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\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}";
|
246
|
+
var styles = {"container":"drop-zone-module_container__24aKE","input":"drop-zone-module_input__2Pzq_","buttonWrapper":"drop-zone-module_buttonWrapper__39hLD","button":"drop-zone-module_button__2a7EM","contentContainer":"drop-zone-module_contentContainer__2wXPQ","fileInDropZone":"drop-zone-module_fileInDropZone__3GBPO","text":"drop-zone-module_text__1fmAO"};
|
222
247
|
styleInject(css_248z);
|
223
248
|
|
224
249
|
/**
|
@@ -229,7 +254,7 @@ styleInject(css_248z);
|
|
229
254
|
* @returns Rect.ReactNode
|
230
255
|
*/
|
231
256
|
var DropZone = function (_a) {
|
232
|
-
var className = _a.className,
|
257
|
+
var className = _a.className, 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;
|
233
258
|
var inputRef = React.useRef();
|
234
259
|
/**
|
235
260
|
* It redirects event, accept and multiple to onDrop
|
@@ -296,27 +321,28 @@ var DropZone = function (_a) {
|
|
296
321
|
inputRef.current.click();
|
297
322
|
}, [inputRef.current]);
|
298
323
|
/**
|
299
|
-
* It decides for the button component
|
300
|
-
* assigns onClick method to it
|
324
|
+
* It decides for the button component
|
301
325
|
* @returns React.ReactNode
|
302
326
|
*/
|
303
327
|
var ButtonComponent = React.useCallback(function () {
|
304
|
-
return isDefined(ButtonComponentParam) ? (React__default['default'].createElement(ButtonComponentParam,
|
305
|
-
}, [ButtonComponentParam,
|
328
|
+
return isDefined(ButtonComponentParam) ? (React__default['default'].createElement(ButtonComponentParam, null)) : (React__default['default'].createElement("button", { className: styles.button }, "Click to Upload"));
|
329
|
+
}, [ButtonComponentParam, handleOnClickButton]);
|
306
330
|
/**
|
307
331
|
* It decides for the content component ang manage
|
308
332
|
* styling by looking at fileInDropZone prop
|
309
333
|
* @returns React.ReactNode
|
310
334
|
*/
|
311
335
|
var ContentComponent = React.useCallback(function () {
|
312
|
-
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,
|
336
|
+
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, className, styles.fileInDropZone) },
|
313
337
|
React__default['default'].createElement("p", { className: styles.text }, "Drop files here"),
|
314
338
|
React__default['default'].createElement("p", { className: styles.text }, "or")));
|
315
|
-
}, [ContentComponentParam,
|
316
|
-
return (React__default['default'].createElement("div", { className:
|
317
|
-
React__default['default'].createElement("input", { className: styles.input, ref: inputRef, multiple: multiple, accept: accept === null || accept === void 0 ? void 0 : accept.join(','), type: "file"
|
318
|
-
React__default['default'].createElement(
|
319
|
-
|
339
|
+
}, [ContentComponentParam, className, control === null || control === void 0 ? void 0 : control.fileInDropZone]);
|
340
|
+
return (React__default['default'].createElement("div", { className: styles.container, onDragOver: handleOnDragOver, onDrop: handleOnDrop, onDragEnter: handleOnDragEnter, onDragLeave: handleOnDragLeave },
|
341
|
+
React__default['default'].createElement("input", { className: styles.input, onChange: handleOnChangeInput, ref: inputRef, multiple: multiple, accept: accept === null || accept === void 0 ? void 0 : accept.join(','), type: "file" }),
|
342
|
+
React__default['default'].createElement("div", { className: styles.buttonWrapper, onKeyDown: handleOnClickButton, onClick: handleOnClickButton, role: "button", tabIndex: -1 },
|
343
|
+
React__default['default'].createElement(ButtonComponent, null)),
|
344
|
+
React__default['default'].createElement("div", { className: styles.contentWrapper },
|
345
|
+
React__default['default'].createElement(ContentComponent, null))));
|
320
346
|
};
|
321
347
|
|
322
348
|
exports.DropZone = DropZone;
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
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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"}
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/helpers/variable.helper.ts","../src/helpers/attribute.helper.ts","../src/configs/accept.config.ts","../src/helpers/accept.helper.ts","../src/hooks/use-drop-zone.hook.ts","../node_modules/style-inject/dist/style-inject.es.js","../src/components/drop-zone.component.tsx"],"sourcesContent":["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","export const extensions = {\n '.jpg': '.jpeg',\n '.jpeg': '.jpg',\n};\n","import { variableHelper } from '../helpers';\nimport { acceptConfig } from '../configs';\nimport { Accept } from '../definitions';\n\n/**\n * it extends accept array for .jpeg, .jpg etc\n * @param acceptArray @type Accept\n * @returns Accept | undefined\n */\nexport const extend = (acceptArray: Accept | undefined): Accept | undefined => {\n if (!variableHelper.isDefined(acceptArray)) {\n return undefined;\n }\n\n const extendedAcceptArray: Accept = [];\n\n acceptArray.forEach((accept) => {\n if (variableHelper.isDefined(acceptConfig.extensions[accept])) {\n extendedAcceptArray.push(acceptConfig.extensions[accept]);\n }\n\n extendedAcceptArray.push(accept);\n });\n\n return extendedAcceptArray;\n};\n","import { useCallback, useMemo, useState } from 'react';\nimport { convertFileToBase64 } from '@mertsolak/file-helper';\n\nimport { DropZoneHookReturns, DropZoneHookProps, Control } from '../definitions';\nimport { variableHelper, acceptHelper } from '../helpers';\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 const extendedAccept = acceptHelper.extend(accept);\n setFileInDropZone(false);\n\n const eventFiles = event.dataTransfer.files;\n const newDataTransfer = new DataTransfer();\n\n Object.values(eventFiles).some((file) => {\n const confirmFile = () => {\n newDataTransfer.items.add(file);\n if (!multiple) {\n return true;\n }\n\n return false;\n };\n\n if (!variableHelper.isDefined(extendedAccept)) {\n return confirmFile();\n }\n\n if (extendedAccept.includes(`.${file.type.split('/').pop()}`)) {\n return confirmFile();\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","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 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\n * @returns React.ReactNode\n */\n const ButtonComponent = useCallback(\n () =>\n variableHelper.isDefined(ButtonComponentParam) ? (\n <ButtonComponentParam />\n ) : (\n <button className={styles.button}>Click to Upload</button>\n ),\n [ButtonComponentParam, 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 className,\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, className, control?.fileInDropZone],\n );\n\n return (\n <div\n className={styles.container}\n onDragOver={handleOnDragOver}\n onDrop={handleOnDrop}\n onDragEnter={handleOnDragEnter}\n onDragLeave={handleOnDragLeave}\n >\n <input\n className={styles.input}\n onChange={handleOnChangeInput}\n ref={inputRef}\n multiple={multiple}\n accept={accept?.join(',')}\n type=\"file\"\n />\n <div\n className={styles.buttonWrapper}\n onKeyDown={handleOnClickButton}\n onClick={handleOnClickButton}\n role=\"button\"\n tabIndex={-1}\n >\n <ButtonComponent />\n </div>\n <div className={styles.contentWrapper}>\n <ContentComponent />\n </div>\n </div>\n );\n};\n"],"names":["variableHelper.isDefined","acceptConfig.extensions","useState","useCallback","convertFileToBase64","acceptHelper.extend","useMemo","useRef","React","attributeHelper.shouldMergeClassNames"],"mappings":"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"}
|