datasync-blob 1.1.4 → 1.1.5

package/dist/DsBlob.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
+import "./DsBlob.css";
 export class DsBlob extends Component {
     constructor(props) {
         super(props);
@@ -131,39 +132,12 @@ export class DsBlob extends Component {
         this.debugging = false;
     }
     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"
-        };
+        // Styles moved to external CSS file: DsBlob.css
         return (_jsxs("div", { children: [(!this.props.data) &&
-                    _jsxs("label", { id: "upload-picture-label", className: this.props.buttonStyle, style: upload_picture_label, children: [this.props.Caption, _jsx("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) &&
-                    _jsxs("div", { className: "show-image", style: div_show_image, onMouseOver: () => { this.setState({ hover_input: true, hover_image: true }, () => { if (this.debugging)
+                    _jsxs("label", { id: "upload-picture-label", className: `upload-picture-label ${this.props.buttonStyle}`, children: [this.props.Caption, _jsx("input", { className: "upload-picture-label-input", id: "nested-input", type: "file", accept: "image/*", onChange: this.onInputChange, multiple: true })] }), (this.props.data && this.props.data.length > 0) &&
+                    _jsxs("div", { className: "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"); }); }, children: [_jsx("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 &&
-                                _jsx("input", { style: this.state.hover_input ? div_show_image_hover_input : div_show_image_input, className: "btn btn-primary delete", type: "button", value: "Effacer", onClick: this.resetUpload })] })] }));
+                            console.log("onMouseLeave"); }); }, children: [_jsx("img", { className: `${this.state.hover_image ? "div-show-image-hover" : "div-show-image"} ${this.props.pictureStyle}`, src: (this.props.removebase64) ? "data:image/png;base64" : "" + this.props.data, alt: this.props.Caption || "uploaded image" }), !this.props.readOnly &&
+                                _jsx("input", { className: `btn btn-primary delete ${this.state.hover_input ? "div-show-image-hover-input" : "div-show-image-input"}`, type: "button", value: "Effacer", onClick: this.resetUpload })] })] }));
     }
 }

package/dist/types/DsBlob.d.ts

@@ -1,4 +1,5 @@
 import { Component, ChangeEvent } from "react";
+import "./DsBlob.css";
 interface DsBlobProps {
     width?: number;
     height?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Datasync Blob component",
   "main": "./dist/DsBlob.js",
   "module": "./dist/DsBlob.js",