react-images-uploading - npm Package Compare versions

Comparing version 3.1.2 to 3.1.3

dist/constants.d.ts

 export declare const DEFAULT_NULL_INDEX = -1;
 export declare const INIT_MAX_NUMBER = 1000;
 export declare const DEFAULT_DATA_URL_KEY = "dataURL";

dist/constants.js

@@ -0,0 +0,0 @@ "use strict";

dist/index.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

dist/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -70,8 +81,8 @@ if (k2 === undefined) k2 = k;
 var ReactImageUploading = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, onError = _a.onError, children = _a.children, _c = _a.dataURLKey, dataURLKey = _c === void 0 ? constants_1.DEFAULT_DATA_URL_KEY : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxNumber, maxNumber = _e === void 0 ? constants_1.INIT_MAX_NUMBER : _e, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType;
+    var _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, onError = _a.onError, children = _a.children, _c = _a.dataURLKey, dataURLKey = _c === void 0 ? constants_1.DEFAULT_DATA_URL_KEY : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxNumber, maxNumber = _e === void 0 ? constants_1.INIT_MAX_NUMBER : _e, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType, _f = _a.inputProps, inputProps = _f === void 0 ? {} : _f;
     var inValue = value || [];
     var inputRef = react_1.useRef(null);
-    var _f = react_1.useState(constants_1.DEFAULT_NULL_INDEX), keyUpdate = _f[0], setKeyUpdate = _f[1];
-    var _g = react_1.useState(null), errors = _g[0], setErrors = _g[1];
-    var _h = react_1.useState(false), isDragging = _h[0], setIsDragging = _h[1];
+    var _g = react_1.useState(constants_1.DEFAULT_NULL_INDEX), keyUpdate = _g[0], setKeyUpdate = _g[1];
+    var _h = react_1.useState(null), errors = _h[0], setErrors = _h[1];
+    var _j = react_1.useState(false), isDragging = _j[0], setIsDragging = _j[1];
     var handleClickInput = react_1.useCallback(function () { return utils_1.openFileDialog(inputRef); }, [
@@ -85,3 +96,3 @@ inputRef,
     var onImageRemoveAll = react_1.useCallback(function () {
-        onChange && onChange([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
     }, [onChange]);
@@ -98,3 +109,3 @@ var onImageRemove = function (index) {
         }
-        onChange && onChange(updatedList);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedList);
     };
@@ -124,3 +135,3 @@ var onImageUpdate = function (index) {
                         setErrors(errorsValidation);
-                        onError && onError(errorsValidation, fileList);
+                        onError === null || onError === void 0 ? void 0 : onError(errorsValidation, fileList);
                         return [2 /*return*/, false];
@@ -134,3 +145,3 @@ }
     var handleChange = function (files) { return __awaiter(void 0, void 0, void 0, function () {
-        var fileList, checkValidate, updatedFileList, updatedIndexes, i;
+        var fileList, checkValidate, updatedFileList, updatedIndexes, firstFile, i;
         return __generator(this, function (_a) {
@@ -153,19 +164,18 @@ switch (_a.label) {
                     if (keyUpdate > constants_1.DEFAULT_NULL_INDEX) {
+                        firstFile = fileList[0];
                         updatedFileList = __spreadArrays(inValue);
-                        updatedFileList[keyUpdate] = fileList[0];
+                        updatedFileList[keyUpdate] = firstFile;
                         updatedIndexes.push(keyUpdate);
                     }
-                    else {
-                        if (multiple) {
-                            updatedFileList = __spreadArrays(inValue, fileList);
-                            for (i = inValue.length; i < updatedFileList.length; i++) {
-                                updatedIndexes.push(i);
-                            }
+                    else if (multiple) {
+                        updatedFileList = __spreadArrays(inValue, fileList);
+                        for (i = inValue.length; i < updatedFileList.length; i += 1) {
+                            updatedIndexes.push(i);
                         }
-                        else {
-                            updatedFileList = [fileList[0]];
-                            updatedIndexes.push(0);
-                        }
                     }
-                    onChange && onChange(updatedFileList, updatedIndexes);
+                    else {
+                        updatedFileList = [fileList[0]];
+                        updatedIndexes.push(0);
+                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(updatedFileList, updatedIndexes);
                     return [2 /*return*/];
@@ -213,25 +223,29 @@ }
             handleChange(e.dataTransfer.files);
-            e.dataTransfer.clearData();
         }
     };
+    var handleDragStart = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.clearData();
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "file", accept: acceptTypeString, ref: inputRef, multiple: multiple && keyUpdate === constants_1.DEFAULT_NULL_INDEX, onChange: onInputChange, style: { display: 'none' } }),
-        children &&
-            children({
-                imageList: inValue,
-                onImageUpload: onImageUpload,
-                onImageRemoveAll: onImageRemoveAll,
-                onImageUpdate: onImageUpdate,
-                onImageRemove: onImageRemove,
-                errors: errors,
-                dragProps: {
-                    onDrop: handleDrop,
-                    onDragEnter: handleDragIn,
-                    onDragLeave: handleDragOut,
-                    onDragOver: handleDrag,
-                },
-                isDragging: isDragging,
-            })));
+        react_1.default.createElement("input", __assign({ type: "file", accept: acceptTypeString, ref: inputRef, multiple: multiple && keyUpdate === constants_1.DEFAULT_NULL_INDEX, onChange: onInputChange, style: { display: 'none' } }, inputProps)), children === null || children === void 0 ? void 0 :
+        children({
+            imageList: inValue,
+            onImageUpload: onImageUpload,
+            onImageRemoveAll: onImageRemoveAll,
+            onImageUpdate: onImageUpdate,
+            onImageRemove: onImageRemove,
+            errors: errors,
+            dragProps: {
+                onDrop: handleDrop,
+                onDragEnter: handleDragIn,
+                onDragLeave: handleDragOut,
+                onDragOver: handleDrag,
+                onDragStart: handleDragStart,
+            },
+            isDragging: isDragging,
+        })));
 };
 exports.default = ReactImageUploading;
 //# sourceMappingURL=index.js.map

dist/typings.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 export interface ImageType {
@@ -20,2 +21,3 @@ dataURL?: string;
     dataURLKey?: string;
+    inputProps?: React.HTMLProps<HTMLInputElement>;
 }
@@ -29,3 +31,3 @@ export interface ExportInterface {
     onImageRemove: (index: number) => void;
-    isDragging: Boolean;
+    isDragging: boolean;
     dragProps: {
@@ -36,2 +38,3 @@ onDrop: (e: any) => void;
         onDragOver: (e: any) => void;
+        onDragStart: (e: any) => void;
     };
@@ -38,0 +41,0 @@ }

dist/typings.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=typings.js.map

dist/utils.d.ts

@@ -0,0 +0,0 @@ import { ImageListType } from './typings';

dist/utils.js

@@ -29,3 +29,3 @@ "use strict";
     var promiseFiles = [];
-    for (var i = 0; i < files.length; i++) {
+    for (var i = 0; i < files.length; i += 1) {
         promiseFiles.push(exports.getBase64(files[i]));
@@ -32,0 +32,0 @@ }

dist/validation.d.ts

@@ -0,0 +0,0 @@ import { ResolutionType, ErrorsType } from './typings';

dist/validation.js

@@ -69,2 +69,4 @@ "use strict";
         }
+        default:
+            break;
     }
@@ -97,6 +99,4 @@ return false;
     }
-    else {
-        if (totalNumber <= maxNumber + 1)
-            return true;
-    }
+    else if (totalNumber <= maxNumber + 1)
+        return true;
     return false;
@@ -146,3 +146,3 @@ };
                 case 4:
-                    i++;
+                    i += 1;
                     return [3 /*break*/, 2];
@@ -149,0 +149,0 @@ case 5:

package.json

 {
   "name": "react-images-uploading",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "The simple images uploader applied Render Props pattern. This approach allows you to fully control UI component and behaviours.",
@@ -43,4 +43,6 @@ "author": {
     "start": "node ./server",
-    "prettier": "prettier --write ./**/*.{js,ts,tsx,md}",
+    "prettier": "./node_modules/.bin/prettier --write ./**/*.{js,ts,tsx,md}",
     "test": "./node_modules/.bin/jest",
+    "lint": "./node_modules/.bin/eslint . --ext .ts,.tsx",
+    "lint:fix": "./node_modules/.bin/eslint . --ext .ts,.tsx --fix",
     "contributors:add": "./node_modules/.bin/all-contributors add",
@@ -63,2 +65,4 @@ "contributors:generate": "./node_modules/.bin/all-contributors generate",
     "@types/sinon": "^9.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.0",
     "all-contributors-cli": "^6.17.2",
@@ -74,2 +78,10 @@ "babel-core": "^6.26.3",
     "doctoc": "^1.4.0",
+    "eslint": "^7.8.1",
+    "eslint-config-airbnb-typescript": "^10.0.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.0.1",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "express": "^4.17.1",
@@ -76,0 +88,0 @@ "file-loader": "^6.0.0",

README.md

@@ -151,15 +151,16 @@ # react-images-uploading
 
-| parameter        | type     | options                                   | default | description                                                        |
-| :--------------- | :------- | :---------------------------------------- | :------ | :----------------------------------------------------------------- |
-| value            | array    |                                           | []      | List of images                                                     |
-| onChange         | function | (imageList, addUpdateIndex) => void       |         | Called when add, update or delete action is called                 |
-| dataURLKey       | string   |                                           | dataURL | Customized field name that base64 of selected image is assigned to |
-| multiple         | boolean  |                                           | false   | Set `true` for multiple chooses                                    |
-| maxNumber        | number   |                                           | 1000    | Number of images user can select if mode = `multiple`              |
-| onError          | function | (errors, files) => void                   |         | Called when it has errors                                          |
-| acceptType       | array    | ['jpg', 'gif', 'png']                     | []      | The file extension(s) to upload                                    |
-| maxFileSize      | number   |                                           |         | Max image size (Byte) and it is used in validation                 |
-| resolutionType   | string   | 'absolute' \| 'less' \| 'more' \| 'ratio' |         | Using for image validation with provided width & height            |
-| resolutionWidth  | number   | > 0                                       |         |                                                                    |
-| resolutionHeight | number   | > 0                                       |         |                                                                    |
+| parameter        | type                                | options                                   | default | description                                                        |
+| ---------------- | ----------------------------------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |
+| value            | array                               |                                           | []      | List of images                                                     |
+| onChange         | function                            | (imageList, addUpdateIndex) => void       |         | Called when add, update or delete action is called                 |
+| dataURLKey       | string                              |                                           | dataURL | Customized field name that base64 of selected image is assigned to |
+| multiple         | boolean                             |                                           | false   | Set `true` for multiple chooses                                    |
+| maxNumber        | number                              |                                           | 1000    | Number of images user can select if mode = `multiple`              |
+| onError          | function                            | (errors, files) => void                   |         | Called when it has errors                                          |
+| acceptType       | array                               | ['jpg', 'gif', 'png']                     | []      | The file extension(s) to upload                                    |
+| maxFileSize      | number                              |                                           |         | Max image size (Byte) and it is used in validation                 |
+| resolutionType   | string                              | 'absolute' \| 'less' \| 'more' \| 'ratio' |         | Using for image validation with provided width & height            |
+| resolutionWidth  | number                              | > 0                                       |         |                                                                    |
+| resolutionHeight | number                              | > 0                                       |         |                                                                    |
+| inputProps       | React.HTMLProps\<HTMLInputElement\> |                                           |         |                                                                    |
 
@@ -166,0 +167,0 @@ ### Note

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53128

increased by6.11%

Lines of code

524

increased by3.56%

Number of lines in readme file

212

increased by0.47%

Worsened metrics

Dev dependency count

48

increased by26.32%

No dependency changes