@s-ui/react-image-lazy-load - npm Package Compare versions

Comparing version 1.21.0 to 1.22.0

lib/index.js

@@ -8,2 +8,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var BASE_CLASS = 'sui-ImageLazyLoad';
+var BASE_CLASS_IMAGE = BASE_CLASS + "-image";
+var BASE_CLASS_IMAGE_WRAP = BASE_CLASS + "-imageWrap";
+export var FIT_MODES = {
+  contain: 'contain',
+  cover: 'cover',
+  "default": 'default',
+  fill: 'fill',
+  none: 'none'
+};
 /**
@@ -15,17 +24,19 @@ * Component that will print defer loading images with an optional and specific
 export default function ImageLazyLoad(_ref) {
-  var _cx;
+  var _cx, _cx2, _cx3;
 
   var _ref$alt = _ref.alt,
       alt = _ref$alt === void 0 ? '' : _ref$alt,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
       _ref$aspectRatio = _ref.aspectRatio,
       aspectRatio = _ref$aspectRatio === void 0 ? '' : _ref$aspectRatio,
+      _ref$fitMode = _ref.fitMode,
+      fitMode = _ref$fitMode === void 0 ? FIT_MODES["default"] : _ref$fitMode,
+      _ref$offsetVertical = _ref.offsetVertical,
+      offsetVertical = _ref$offsetVertical === void 0 ? 100 : _ref$offsetVertical,
       _ref$onError = _ref.onError,
       onError = _ref$onError === void 0 ? function () {} : _ref$onError,
-      _ref$offsetVertical = _ref.offsetVertical,
-      offsetVertical = _ref$offsetVertical === void 0 ? 100 : _ref$offsetVertical,
       _ref$showSpinner = _ref.showSpinner,
       showSpinner = _ref$showSpinner === void 0 ? true : _ref$showSpinner,
-      src = _ref.src;
+      src = _ref.src,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
 
@@ -38,3 +49,5 @@ var _useNearScreen = useNearScreen({
 
-  var lazyLoadWrapClassName = cx(BASE_CLASS, (_cx = {}, _cx[BASE_CLASS + "--ratio-" + aspectRatio.replace(':', '-')] = aspectRatio, _cx));
+  var lazyLoadWrapClassName = cx(BASE_CLASS, (_cx = {}, _cx[BASE_CLASS + "--ratio-" + aspectRatio.replace(':', '-')] = aspectRatio, _cx[BASE_CLASS + "--fitContain"] = fitMode === FIT_MODES.contain, _cx[BASE_CLASS + "--fitCover"] = fitMode === FIT_MODES.cover, _cx[BASE_CLASS + "--fitFill"] = fitMode === FIT_MODES.fill, _cx[BASE_CLASS + "--fitNone"] = fitMode === FIT_MODES.none, _cx));
+  var lazyLoadImageClassName = cx(BASE_CLASS_IMAGE, (_cx2 = {}, _cx2[BASE_CLASS_IMAGE + "--fitContain"] = fitMode === FIT_MODES.contain, _cx2[BASE_CLASS_IMAGE + "--fitCover"] = fitMode === FIT_MODES.cover, _cx2[BASE_CLASS_IMAGE + "--fitFill"] = fitMode === FIT_MODES.fill, _cx2[BASE_CLASS_IMAGE + "--fitNone"] = fitMode === FIT_MODES.none, _cx2));
+  var lazyLoadImageWrapClassName = cx(BASE_CLASS_IMAGE_WRAP, (_cx3 = {}, _cx3[BASE_CLASS_IMAGE_WRAP + "--fitContain"] = fitMode === FIT_MODES.contain, _cx3[BASE_CLASS_IMAGE_WRAP + "--fitCover"] = fitMode === FIT_MODES.cover, _cx3[BASE_CLASS_IMAGE_WRAP + "--fitFill"] = fitMode === FIT_MODES.fill, _cx3[BASE_CLASS_IMAGE_WRAP + "--fitNone"] = fitMode === FIT_MODES.none, _cx3));
   return /*#__PURE__*/_jsxs("div", {
@@ -47,6 +60,6 @@ className: lazyLoadWrapClassName,
     }), /*#__PURE__*/_jsx("div", {
-      className: BASE_CLASS + "-imageWrap",
+      className: lazyLoadImageWrapClassName,
       children: isNearScreen && /*#__PURE__*/_jsx("img", {
         alt: alt,
-        className: BASE_CLASS + "-image",
+        className: lazyLoadImageClassName,
         onError: onError,
@@ -53,0 +66,0 @@ src: src,

package.json

 {
   "name": "@s-ui/react-image-lazy-load",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "SUI Image Lazy Load",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

@@ -7,2 +7,12 @@ import PropTypes from 'prop-types'
 const BASE_CLASS = 'sui-ImageLazyLoad'
+const BASE_CLASS_IMAGE = `${BASE_CLASS}-image`
+const BASE_CLASS_IMAGE_WRAP = `${BASE_CLASS}-imageWrap`
+
+export const FIT_MODES = {
+  contain: 'contain',
+  cover: 'cover',
+  default: 'default',
+  fill: 'fill',
+  none: 'none'
+}
 /**
@@ -14,8 +24,9 @@ * Component that will print defer loading images with an optional and specific
   alt = '',
-  title = '',
   aspectRatio = '',
+  fitMode = FIT_MODES.default,
+  offsetVertical = 100,
   onError = () => {},
-  offsetVertical = 100,
   showSpinner = true,
-  src
+  src,
+  title = ''
 }) {
@@ -25,4 +36,20 @@ const [isNearScreen, fromRef] = useNearScreen({offset: `${offsetVertical}px`})
   const lazyLoadWrapClassName = cx(BASE_CLASS, {
-    [`${BASE_CLASS}--ratio-${aspectRatio.replace(':', '-')}`]: aspectRatio
+    [`${BASE_CLASS}--ratio-${aspectRatio.replace(':', '-')}`]: aspectRatio,
+    [`${BASE_CLASS}--fitContain`]: fitMode === FIT_MODES.contain,
+    [`${BASE_CLASS}--fitCover`]: fitMode === FIT_MODES.cover,
+    [`${BASE_CLASS}--fitFill`]: fitMode === FIT_MODES.fill,
+    [`${BASE_CLASS}--fitNone`]: fitMode === FIT_MODES.none
   })
+  const lazyLoadImageClassName = cx(BASE_CLASS_IMAGE, {
+    [`${BASE_CLASS_IMAGE}--fitContain`]: fitMode === FIT_MODES.contain,
+    [`${BASE_CLASS_IMAGE}--fitCover`]: fitMode === FIT_MODES.cover,
+    [`${BASE_CLASS_IMAGE}--fitFill`]: fitMode === FIT_MODES.fill,
+    [`${BASE_CLASS_IMAGE}--fitNone`]: fitMode === FIT_MODES.none
+  })
+  const lazyLoadImageWrapClassName = cx(BASE_CLASS_IMAGE_WRAP, {
+    [`${BASE_CLASS_IMAGE_WRAP}--fitContain`]: fitMode === FIT_MODES.contain,
+    [`${BASE_CLASS_IMAGE_WRAP}--fitCover`]: fitMode === FIT_MODES.cover,
+    [`${BASE_CLASS_IMAGE_WRAP}--fitFill`]: fitMode === FIT_MODES.fill,
+    [`${BASE_CLASS_IMAGE_WRAP}--fitNone`]: fitMode === FIT_MODES.none
+  })
 
@@ -36,7 +63,7 @@ return (
       )}
-      <div className={`${BASE_CLASS}-imageWrap`}>
+      <div className={lazyLoadImageWrapClassName}>
         {isNearScreen && (
           <img
             alt={alt}
-            className={`${BASE_CLASS}-image`}
+            className={lazyLoadImageClassName}
             onError={onError}
@@ -54,2 +81,6 @@ src={src}
   /**
+   * Specifies which object-fit applies to the image.
+   */
+  fitMode: PropTypes.oneOf(Object.values(FIT_MODES)),
+  /**
    * Specify how to handle, can be useful to specify a fallback image.
@@ -56,0 +87,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

16107

32.33%

Lines of code

179

34.59%

No dependency changes