pb-sxp-ui 1.0.21 → 1.0.23

package/lib/materials/sxp/template/CommodityDiroNew/index.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
@@ -14,7 +15,7 @@ const CommodityDiroNew = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',

package/lib/materials/sxp/template/Link/index.js

@@ -7,6 +7,7 @@ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProv
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const Link = (_a) => {
     var _b, _c, _d, _e, _f;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
@@ -22,7 +23,7 @@ const Link = (_a) => {
     };
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ index: index, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image, alt: '' })),
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 display: 'flex',
                 alignItems: 'center',

package/lib/materials/sxp/template/components/Img.js

@@ -5,6 +5,7 @@ const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const hooks_1 = require("../../../../core/hooks");
+const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const Img = ({ src, rec, item, index }) => {
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
@@ -17,6 +18,7 @@ const Img = ({ src, rec, item, index }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (react_1.default.createElement("img", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, alt: '' }));
+    return (react_1.default.createElement("div", { ref: ref, hidden: !src },
+        react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
 };
 exports.default = (0, react_1.memo)(Img);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",