@mts-pjsc/image-optimize 1.1.5 → 1.2.1

package/dist/components/Image.d.ts

@@ -1,13 +1,12 @@
-import * as React from "react";
-export interface IImageOptions {
+import { Component } from "react";
+export interface IImageOptions extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     src: string;
     alt: string;
     offset?: number;
     quality?: number;
-    className?: string;
     setRef?: (elem: HTMLImageElement | null) => void;
 }
-export declare class Image<P extends IImageOptions> extends React.Component<P> {
+export declare class Image<P extends IImageOptions> extends Component<P> {
     static isShowDiagnostic: boolean;
     static controlPoints: number[];
     /**

package/dist/components/Image.js

@@ -1,7 +1,20 @@
+// For Next.js 13 and react 18. Switch component for support server components later.
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import { Component } from "react";
 import { getFormatFeatures } from "../helpers/get-format-features.js";
-export class Image extends React.Component {
+export class Image extends Component {
     constructor(props) {
         super(props);
         this.resultUrl = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -27,19 +40,20 @@ export class Image extends React.Component {
             this.checks = 0;
             // Raf for correct image position after redraw outer components
             requestAnimationFrame(() => this.checkImage());
-            return true;
         }
-        return false;
+        return true;
     }
     componentWillUnmount() {
         window.removeEventListener("resize", this.windowResizeHandler);
     }
     render() {
-        return (_jsx("img", { alt: this.props.alt, className: this.props.className, onLoad: () => requestAnimationFrame(() => this.checkImage()), ref: (elem) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _a = this.props, { offset, quality, setRef, src, alt } = _a, props = __rest(_a, ["offset", "quality", "setRef", "src", "alt"]);
+        return (_jsx("img", Object.assign({}, props, { alt: alt, onLoad: () => requestAnimationFrame(() => this.checkImage()), ref: (elem) => {
                 var _a, _b;
                 this.thisComponent = elem;
                 (_b = (_a = this.props).setRef) === null || _b === void 0 ? void 0 : _b.call(_a, elem);
-            }, src: this.resultUrl }));
+            }, src: this.resultUrl })));
     }
     async checkImage(isResize = false) {
         if (this.checks > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mts-pjsc/image-optimize",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "description": "React component for image optimizer",
   "main": "dist/index.js",
   "module": "dist/index.js",