image-dropzone 1.0.2 → 1.0.4

package/dist/cjs/components/App.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-type Props = {
-    value?: number;
-};
-declare const MyCounter: ({ value }: Props) => React.JSX.Element;
-export default MyCounter;
+interface Props {
+    from?: string;
+    sendUploadImage?: (image: string, imageType: string) => void;
+    handleResetImage?: () => void;
+    handleChangeImage?: () => void;
+}
+declare const ImageDropZone: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export default ImageDropZone;

package/dist/cjs/components/App.js

@@ -2,21 +2,60 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var MyCounter = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b;
-    var _c = (0, react_1.useState)(value), counter = _c[0], setCounter = _c[1];
-    var onMinus = function () {
-        setCounter(function (prev) { return prev - 1; });
+var utils_1 = require("../utilities/utils");
+var react_dropzone_1 = tslib_1.__importDefault(require("react-dropzone"));
+var ImageDropZone = (0, react_1.forwardRef)(function (_a, ref) {
+    var from = _a.from, sendUploadImage = _a.sendUploadImage, handleResetImage = _a.handleResetImage, handleChangeImage = _a.handleChangeImage;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        handleSetPath: function (image, imageType) {
+            setPaths(["data:image/".concat(imageType, ";base64, ").concat(image)]);
+        },
+        removePath: function () {
+            setPaths([]);
+        },
+        restoreImage: function () {
+            setPaths(backupImage);
+            setBackupImage([]);
+        },
+    }); });
+    var _b = (0, react_1.useState)([]), paths = _b[0], setPaths = _b[1];
+    var _c = (0, react_1.useState)([]), backupImage = _c[0], setBackupImage = _c[1];
+    var handleUploadImage = function (acceptedFiles) {
+        (0, utils_1.getBase64)(acceptedFiles[0], function (result) {
+            if (sendUploadImage) {
+                var imageType = acceptedFiles[0].type.replace('image/', '');
+                sendUploadImage(result, imageType);
+            }
+        });
+        setPaths(acceptedFiles.map(function (file) { return URL.createObjectURL(file); }));
     };
-    var onPlus = function () {
-        setCounter(function (prev) { return prev + 1; });
+    var handleChange = function () {
+        if (from === 'profilePicture') {
+            handleResetImage === null || handleResetImage === void 0 ? void 0 : handleResetImage();
+        }
+        handleChangeImage === null || handleChangeImage === void 0 ? void 0 : handleChangeImage();
+        setBackupImage(paths);
+        setPaths([]);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null,
-            "Counter: ",
-            counter),
-        react_1.default.createElement("button", { onClick: onMinus }, "-"),
-        react_1.default.createElement("button", { onClick: onPlus }, "+")));
-};
-exports.default = MyCounter;
+    // const handleDelete = () => {
+    //   handleResetImage?.()
+    //   setPaths([])
+    //   const closeDeleteLogoModalBtn = document.getElementById('closeDeleteLogoModalBtn')
+    //   closeDeleteLogoModalBtn?.click()
+    // }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_dropzone_1.default, { noClick: false, onDrop: function (acceptedFiles) { return handleUploadImage(acceptedFiles); }, multiple: from === 'patient-forms' ? true : false, accept: utils_1.acceptedFileFormats }, function (_a) {
+            var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
+            return (react_1.default.createElement("section", { className: 'drop-zone d-flex align-items-center justify-content-center text-center cursor-pointer' },
+                react_1.default.createElement("div", tslib_1.__assign({}, getRootProps(), { className: 'w-100 h-100 d-flex align-items-center justify-content-center' }),
+                    react_1.default.createElement("input", tslib_1.__assign({}, getInputProps())),
+                    paths.length ? (paths.map(function (path) { return react_1.default.createElement("img", { className: 'w-100 h-100', key: path, src: path }); })) : (react_1.default.createElement("p", { className: 'mb-0 dropzone-text p-2' }, from === 'patient-forms' ? 'Upload one or more files (PDF, DOC, ...)' : 'Upload image (optional)')))));
+        }),
+        !!paths.length && (react_1.default.createElement("div", { className: 'd-flex align-items-center justify-content-center mt-2' },
+            react_1.default.createElement("button", { className: 'btn-with-border fw-bold border-0 bg-transparent', type: 'button', onClick: handleChange },
+                react_1.default.createElement("span", { className: 'light-text' }, "Change")),
+            from === 'businessLogo' && (react_1.default.createElement("button", { className: 'btn-with-border fw-bold border-0 bg-transparent', type: 'button', "data-bs-toggle": 'modal', "data-bs-target": '#DeleteLogo' },
+                react_1.default.createElement("span", { className: 'danger-text' }, "Delete")))))));
+});
+exports.default = ImageDropZone;
 //# sourceMappingURL=App.js.map

package/dist/cjs/components/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../src/components/App.tsx"],"names":[],"mappings":";;;AAAA,qDAAuC;AAKvC,IAAM,SAAS,GAAG,UAAC,EAAoB;QAAlB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA;IACtB,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,IAAM,OAAO,GAAG;QACd,UAAU,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,IAAM,MAAM,GAAG;QACb,UAAU,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,CACL;QACE;;YAAc,OAAO,CAAM;QAC3B,0CAAQ,OAAO,EAAE,OAAO,QAAY;QACpC,0CAAQ,OAAO,EAAE,MAAM,QAAY,CAC/B,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../src/components/App.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.d.ts

@@ -1,2 +1,2 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import ImageDropZone from './components/App';
+export { ImageDropZone };

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MyCounter = void 0;
+exports.ImageDropZone = void 0;
 var tslib_1 = require("tslib");
 var App_1 = tslib_1.__importDefault(require("./components/App"));
-exports.MyCounter = App_1.default;
+exports.ImageDropZone = App_1.default;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,iEAAwC;AAE/B,oBAFF,aAAS,CAEE"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,iEAA4C;AAEnC,wBAFF,aAAa,CAEE"}

package/dist/cjs/utilities/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const getBase64: (file: File, cb: (readerResult: any) => void) => void;
+export declare const acceptedFileFormats: {
+    'image/bmp': string[];
+    'image/gif': string[];
+    'image/jpeg': string[];
+    'image/pbm': string[];
+    'image/png': string[];
+    'image/tiff': string[];
+    'image/tga': string[];
+    'image/webp': string[];
+};

package/dist/cjs/utilities/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.acceptedFileFormats = exports.getBase64 = void 0;
+var getBase64 = function (file, cb) {
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function () {
+        var result = reader.result;
+        var strImage = result.replace(/^data:image\/[a-z]+;base64,/, '');
+        cb(strImage);
+    };
+    reader.onerror = function (error) {
+        console.log('Error: ', error);
+    };
+};
+exports.getBase64 = getBase64;
+exports.acceptedFileFormats = {
+    'image/bmp': ['.bmp'],
+    'image/gif': ['.gif'],
+    'image/jpeg': ['.jpeg'],
+    'image/pbm': ['.pbm'],
+    'image/png': ['.png'],
+    'image/tiff': ['.tiff'],
+    'image/tga': ['.tga'],
+    'image/webp': ['.webp'],
+};
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utilities/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utilities/utils.ts"],"names":[],"mappings":";;;AAAO,IAAM,SAAS,GAAG,UAAC,IAAU,EAAE,EAA+B;IACnE,IAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAA;IAC/B,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,MAAM,CAAC,MAAM,GAAG;QACd,IAAM,MAAM,GAAQ,MAAM,CAAC,MAAM,CAAA;QACjC,IAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAA;QAClE,EAAE,CAAC,QAAQ,CAAC,CAAA;IACd,CAAC,CAAA;IACD,MAAM,CAAC,OAAO,GAAG,UAAU,KAAK;QAC9B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,SAAS,aAWrB;AAEY,QAAA,mBAAmB,GAAG;IACjC,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;CACxB,CAAA"}

package/dist/esm/components/App.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-type Props = {
-    value?: number;
-};
-declare const MyCounter: ({ value }: Props) => React.JSX.Element;
-export default MyCounter;
+interface Props {
+    from?: string;
+    sendUploadImage?: (image: string, imageType: string) => void;
+    handleResetImage?: () => void;
+    handleChangeImage?: () => void;
+}
+declare const ImageDropZone: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export default ImageDropZone;

package/dist/esm/components/App.js

@@ -1,19 +1,59 @@
-import React, { useState } from 'react';
-var MyCounter = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b;
-    var _c = useState(value), counter = _c[0], setCounter = _c[1];
-    var onMinus = function () {
-        setCounter(function (prev) { return prev - 1; });
+import { __assign } from "tslib";
+import React, { forwardRef, useState, useImperativeHandle } from 'react';
+import { acceptedFileFormats, getBase64 } from '../utilities/utils';
+import Dropzone from 'react-dropzone';
+var ImageDropZone = forwardRef(function (_a, ref) {
+    var from = _a.from, sendUploadImage = _a.sendUploadImage, handleResetImage = _a.handleResetImage, handleChangeImage = _a.handleChangeImage;
+    useImperativeHandle(ref, function () { return ({
+        handleSetPath: function (image, imageType) {
+            setPaths(["data:image/".concat(imageType, ";base64, ").concat(image)]);
+        },
+        removePath: function () {
+            setPaths([]);
+        },
+        restoreImage: function () {
+            setPaths(backupImage);
+            setBackupImage([]);
+        },
+    }); });
+    var _b = useState([]), paths = _b[0], setPaths = _b[1];
+    var _c = useState([]), backupImage = _c[0], setBackupImage = _c[1];
+    var handleUploadImage = function (acceptedFiles) {
+        getBase64(acceptedFiles[0], function (result) {
+            if (sendUploadImage) {
+                var imageType = acceptedFiles[0].type.replace('image/', '');
+                sendUploadImage(result, imageType);
+            }
+        });
+        setPaths(acceptedFiles.map(function (file) { return URL.createObjectURL(file); }));
     };
-    var onPlus = function () {
-        setCounter(function (prev) { return prev + 1; });
+    var handleChange = function () {
+        if (from === 'profilePicture') {
+            handleResetImage === null || handleResetImage === void 0 ? void 0 : handleResetImage();
+        }
+        handleChangeImage === null || handleChangeImage === void 0 ? void 0 : handleChangeImage();
+        setBackupImage(paths);
+        setPaths([]);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null,
-            "Counter: ",
-            counter),
-        React.createElement("button", { onClick: onMinus }, "-"),
-        React.createElement("button", { onClick: onPlus }, "+")));
-};
-export default MyCounter;
+    // const handleDelete = () => {
+    //   handleResetImage?.()
+    //   setPaths([])
+    //   const closeDeleteLogoModalBtn = document.getElementById('closeDeleteLogoModalBtn')
+    //   closeDeleteLogoModalBtn?.click()
+    // }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dropzone, { noClick: false, onDrop: function (acceptedFiles) { return handleUploadImage(acceptedFiles); }, multiple: from === 'patient-forms' ? true : false, accept: acceptedFileFormats }, function (_a) {
+            var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
+            return (React.createElement("section", { className: 'drop-zone d-flex align-items-center justify-content-center text-center cursor-pointer' },
+                React.createElement("div", __assign({}, getRootProps(), { className: 'w-100 h-100 d-flex align-items-center justify-content-center' }),
+                    React.createElement("input", __assign({}, getInputProps())),
+                    paths.length ? (paths.map(function (path) { return React.createElement("img", { className: 'w-100 h-100', key: path, src: path }); })) : (React.createElement("p", { className: 'mb-0 dropzone-text p-2' }, from === 'patient-forms' ? 'Upload one or more files (PDF, DOC, ...)' : 'Upload image (optional)')))));
+        }),
+        !!paths.length && (React.createElement("div", { className: 'd-flex align-items-center justify-content-center mt-2' },
+            React.createElement("button", { className: 'btn-with-border fw-bold border-0 bg-transparent', type: 'button', onClick: handleChange },
+                React.createElement("span", { className: 'light-text' }, "Change")),
+            from === 'businessLogo' && (React.createElement("button", { className: 'btn-with-border fw-bold border-0 bg-transparent', type: 'button', "data-bs-toggle": 'modal', "data-bs-target": '#DeleteLogo' },
+                React.createElement("span", { className: 'danger-text' }, "Delete")))))));
+});
+export default ImageDropZone;
 //# sourceMappingURL=App.js.map

package/dist/esm/components/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../src/components/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAKvC,IAAM,SAAS,GAAG,UAAC,EAAoB;QAAlB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA;IACtB,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,IAAM,OAAO,GAAG;QACd,UAAU,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,IAAM,MAAM,GAAG;QACb,UAAU,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,CACL;QACE;;YAAc,OAAO,CAAM;QAC3B,gCAAQ,OAAO,EAAE,OAAO,QAAY;QACpC,gCAAQ,OAAO,EAAE,MAAM,QAAY,CAC/B,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../src/components/App.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -1,2 +1,2 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import ImageDropZone from './components/App';
+export { ImageDropZone };

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import ImageDropZone from './components/App';
+export { ImageDropZone };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/utilities/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const getBase64: (file: File, cb: (readerResult: any) => void) => void;
+export declare const acceptedFileFormats: {
+    'image/bmp': string[];
+    'image/gif': string[];
+    'image/jpeg': string[];
+    'image/pbm': string[];
+    'image/png': string[];
+    'image/tiff': string[];
+    'image/tga': string[];
+    'image/webp': string[];
+};

package/dist/esm/utilities/utils.js

@@ -0,0 +1,23 @@
+export var getBase64 = function (file, cb) {
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function () {
+        var result = reader.result;
+        var strImage = result.replace(/^data:image\/[a-z]+;base64,/, '');
+        cb(strImage);
+    };
+    reader.onerror = function (error) {
+        console.log('Error: ', error);
+    };
+};
+export var acceptedFileFormats = {
+    'image/bmp': ['.bmp'],
+    'image/gif': ['.gif'],
+    'image/jpeg': ['.jpeg'],
+    'image/pbm': ['.pbm'],
+    'image/png': ['.png'],
+    'image/tiff': ['.tiff'],
+    'image/tga': ['.tga'],
+    'image/webp': ['.webp'],
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utilities/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utilities/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,IAAU,EAAE,EAA+B;IACnE,IAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAA;IAC/B,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,MAAM,CAAC,MAAM,GAAG;QACd,IAAM,MAAM,GAAQ,MAAM,CAAC,MAAM,CAAA;QACjC,IAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAA;QAClE,EAAE,CAAC,QAAQ,CAAC,CAAA;IACd,CAAC,CAAA;IACD,MAAM,CAAC,OAAO,GAAG,UAAU,KAAK;QAC9B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC;CACxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-dropzone",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,10 +10,9 @@
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
-    "test": "jest --config jestconfig.json",
+    "prettier": "prettier --write \"{src,example/src}/**/*.{js,ts,jsx,tsx}\"",
     "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run prettier && npm run lint"
+    "prepublishOnly": "npm run prettier && npm run lint"
   },
   "repository": {
     "type": "git",
@@ -53,7 +52,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "react-dropzone": "^14.2.3"
   },
   "peerDependencies": {
     "react": ">=16"