datasync-blob 1.0.1 → 1.1.0

package/dist/components/DsBlob.js

@@ -5,41 +5,78 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DsBlob = void 0;
 var _react = _interopRequireWildcard(require("react"));
-require("../DsBlob.css");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 class DsBlob extends _react.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      hover_input: false,
+      hover_image: false
+    };
+    this.debugging = false;
   }
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   reduceImage = e => {
     let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
-    //console.log("imageSource = ",imageSource);
+
+    if (this.debugging) console.log("imageSource = ", imageSource);
     var canvas = document.createElement('canvas'),
       context,
-      maxWidth = 800,
-      maxHeight = 800,
       width = imageSource.width,
       height = imageSource.height;
-    if (width > height) {
-      if (width > maxWidth) {
-        height *= maxWidth / width;
-        width = maxWidth;
+
+    //Exact size props are set
+    if (this.props.width && this.props.height) {
+      //Check image size
+      if (width > this.props.width || height > this.props.height) {
+        alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
+        return;
       }
-    } else {
-      if (height > maxHeight) {
-        width *= maxHeight / height;
-        height = maxHeight;
+
+      //Check image size
+      if (width < this.props.width || height < this.props.height) {
+        alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
+        return;
+      }
+    }
+
+    //Max size props are set
+    if (this.props.maxWidth && this.props.maxHeight) {
+      if (width > height) {
+        //Check resize is enabled
+        if (!this.props.reduceImage) {
+          alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
+          return;
+        }
+        if (width > this.props.maxWidth) {
+          height *= this.props.maxWidth / width;
+          width = this.props.maxWidth;
+        }
+      } else {
+        if (height > this.props.maxHeight) {
+          //Check resize is enabled
+          if (!this.props.reduceImage) {
+            alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
+            return;
+          }
+          width *= this.props.maxHeight / height;
+          height = this.props.maxHeight;
+        }
       }
     }
+
+    //Build 2d picture
     canvas.width = width;
     canvas.height = height;
     context = canvas.getContext('2d');
     context.drawImage(imageSource, 0, 0, width, height);
-    let canvasData = canvas.toDataURL('image/jpg', 0.6); //Jpeg quality reduced from 0.8 down to 0.6
+
+    //Jpeg conversion
+    let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
+    let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
+
+    if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
     if (this.props.removebase64) {
       //remove base64 prefix if property is set
       this.props.uploadPicture({
@@ -81,13 +118,13 @@ class DsBlob extends _react.Component {
   onInputChange = e => {
     const errs = [];
     const files = Array.from(e.target.files);
-    const types = ['image/png', 'image/jpeg'];
+    const types = ['image/png', 'image/jpeg', 'image/gif'];
     const _1Mo = 1024 * 1024;
     const SizeLimit = 9;
-    console.clear();
+
     //Reset input cache value -  to assure trigger if user select the same file again
     e.target.value = null;
-    console.log("onInputChange");
+    if (this.debugging) console.log("onInputChange");
     if (files.length > 1) {
       const msg = 'Pas plus d\'une image à la fois';
       alert(msg);
@@ -101,10 +138,10 @@ class DsBlob extends _react.Component {
       if (file.size > SizeLimit * _1Mo) {
         errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`);
       }
-      console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+      if (this.debugging) console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
       if (errCount == errs.length) {
         //None new error occurs
-        console.log("readImage:", file.name);
+        if (this.debugging) console.log("readImage::", file.name);
         this.readImage(file);
       }
     });
@@ -113,21 +150,70 @@ class DsBlob extends _react.Component {
     }
   };
   render() {
+    const upload_picture_label = {
+      cursor: "pointer"
+    };
+    const upload_picture_label_input = {
+      opacity: "0",
+      width: "0px",
+      height: "0px"
+    };
+    const div_show_image_hover = {
+      position: "relative",
+      margin: "0px",
+      opacity: "0.5"
+    };
+    const div_show_image = {
+      position: "relative",
+      margin: "0px"
+    };
+    const div_show_image_hover_input = {
+      display: "block",
+      top: "0px",
+      left: "0px",
+      position: "absolute"
+    };
+    const div_show_image_input = {
+      position: "absolute",
+      display: "none",
+      cursor: "pointer"
+    };
     return /*#__PURE__*/_react.default.createElement("div", null, !this.props.data && /*#__PURE__*/_react.default.createElement("label", {
       id: "upload-picture-label",
-      className: this.props.buttonStyle
+      className: this.props.buttonStyle,
+      style: upload_picture_label
     }, this.props.Caption, /*#__PURE__*/_react.default.createElement("input", {
+      style: upload_picture_label_input,
       id: "nested-input",
       type: "file",
       accept: "image/*",
       onChange: this.onInputChange,
       multiple: true
     })), this.props.data && this.props.data.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      class: "show-image"
+      class: "show-image",
+      style: div_show_image,
+      onMouseOver: () => {
+        this.setState({
+          hover_input: true,
+          hover_image: true
+        }, () => {
+          if (this.debugging) console.log("onMouseOver");
+        });
+      },
+      onMouseLeave: () => {
+        this.setState({
+          hover_input: false,
+          hover_image: false
+        }, () => {
+          if (this.debugging) console.log("onMouseLeave");
+        });
+      }
     }, /*#__PURE__*/_react.default.createElement("img", {
+      style: this.state.hover_image ? div_show_image_hover : div_show_image,
       src: this.props.removebase64 ? "data:image/png;base64" : "" + this.props.data,
       className: this.props.pictureStyle
     }), !this.props.readOnly && /*#__PURE__*/_react.default.createElement("input", {
+      style: this.state.hover_input ? div_show_image_hover_input : div_show_image_input,
       className: "btn btn-primary delete",
       type: "button",
       value: "Effacer",

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "datasync-blob",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
-  "files": ["./dist"],
+  "files": [
+    "./dist"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/pmabiala/datasync-blob.git"
@@ -18,17 +20,23 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@testing-library/react": "^14.2.2",
+    "javascript-obfuscator": "^4.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-css": "^6.0.1",
     "react": "^18.2.0",
-    "react-pdf": "^7.7.1"
+    "react-pdf": "^7.7.1",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-node-externals": "^3.0.0",
+    "webpack-obfuscator": "^3.5.1"
   },
   "peerDependencies": {
     "react": "^ 18.2.0"
   },
   "scripts": {
-    "build": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files",
+    "build_old": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files",
+    "build": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files && webpack --config webpack.config.js",
     "copy-files": "cp ./src/*.css dist/",
     "test": "jest --config jest.config.json"
   },

package/dist/DsBlob.css

@@ -1,33 +0,0 @@
-#upload-picture-label{
-    cursor: pointer;
-}
-
-#upload-picture-label input{
-    opacity: 0;
-    width: 0px;
-    height: 0px;
-}
-
-div.show-image {
-    position: relative;
-    /*float:left;*/
-    margin:5px;
-}
-div.show-image:hover img{
-    opacity:0.5;
-}
-div.show-image:hover input {
-    display: block;
-}
-div.show-image input {
-    position:absolute;
-    display:none;
-}
-div.show-image input.update {
-    top:0;
-    left:0;
-}
-div.show-image input.delete {
-    top:0;
-    left:0px;
-}