@tap-payments/os-micro-frontend-shared 0.1.82 → 0.1.84

package/build/components/LazyImage/LazyImage.d.ts

@@ -0,0 +1,3 @@
+import { type LazyLoadImageProps } from 'react-lazy-load-image-component';
+declare const LazyImage: (props: LazyLoadImageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default LazyImage;

package/build/components/LazyImage/LazyImage.js

@@ -0,0 +1,39 @@
+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 { useEffect, useState } from 'react';
+import { LazyLoadImage as RawLazyLoadImage } from 'react-lazy-load-image-component';
+const LazyLoadImage = RawLazyLoadImage;
+const EFFECT_ASSETS_MAPPER = {
+    opacity: () => import('react-lazy-load-image-component/src/effects/opacity.css'),
+    blur: () => import('react-lazy-load-image-component/src/effects/blur.css'),
+    'black-and-white': () => import('react-lazy-load-image-component/src/effects/black-and-white.css'),
+};
+const LazyImage = (props) => {
+    const { wrapperProps } = props, rest = __rest(props, ["wrapperProps"]);
+    const { effect } = rest;
+    const { style } = wrapperProps || {};
+    const [cssEffectAssetsLoading, setCssEffectAssetsLoading] = useState(!!effect);
+    useEffect(() => {
+        if (!effect || !(effect in EFFECT_ASSETS_MAPPER))
+            return;
+        const getResources = EFFECT_ASSETS_MAPPER[effect];
+        setCssEffectAssetsLoading(true);
+        getResources().finally(() => {
+            setCssEffectAssetsLoading(false);
+        });
+    }, [effect]);
+    if (cssEffectAssetsLoading)
+        return null;
+    return (_jsx(LazyLoadImage, Object.assign({}, rest, { wrapperProps: Object.assign(Object.assign({}, wrapperProps), { style: Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center' }, style) }) })));
+};
+export default LazyImage;

package/build/components/LazyImage/index.d.ts

@@ -0,0 +1,3 @@
+import LazyImage from './LazyImage';
+export * from './LazyImage';
+export default LazyImage;

package/build/components/LazyImage/index.js

@@ -0,0 +1,3 @@
+import LazyImage from './LazyImage';
+export * from './LazyImage';
+export default LazyImage;

package/build/components/index.d.ts

@@ -104,3 +104,5 @@ export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
+export { default as LazyImage } from './LazyImage';
+export * from './LazyImage';

package/build/components/index.js

@@ -104,3 +104,5 @@ export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
+export { default as LazyImage } from './LazyImage';
+export * from './LazyImage';

package/build/constants/table/cell/terminalsTableCellWidth.d.ts

@@ -30,9 +30,9 @@ export declare const terminalsTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly features: {
-        readonly default: "80px";
-        readonly text: "80px";
-        readonly sheet: "80px";
+        readonly default: "100px";
+        readonly text: "100px";
+        readonly sheet: "100px";
     };
     readonly acceptance: {
         readonly default: "80px";

package/build/constants/table/cell/terminalsTableCellWidth.js

@@ -30,9 +30,9 @@ export const terminalsTableCellWidth = {
         sheet: '80px',
     },
     features: {
-        default: '80px',
-        text: '80px',
-        sheet: '80px',
+        default: '100px',
+        text: '100px',
+        sheet: '100px',
     },
     acceptance: {
         default: '80px',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
@@ -94,6 +94,7 @@
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.2.2",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-multi-date-picker": "^4.1.2",
     "react-router-dom": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.20",
@@ -108,6 +109,7 @@
     "@types/lodash": "^4.17.15",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.3.5",
+    "@types/react-lazy-load-image-component": "^1.6.4",
     "@types/react-virtualized-auto-sizer": "^1.0.8",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",