pb-sxp-ui 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +75 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +75 -45
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +75 -45
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/FormatImage.d.ts +13 -0
- package/es/core/components/SxpPageRender/FormatImage.js +22 -0
- package/es/core/components/SxpPageRender/PictureGroup/Picture.js +25 -27
- package/es/core/components/SxpPageRender/VideoWidget/index.js +2 -1
- package/es/core/components/SxpPageRender/WaterFall/List.js +9 -7
- package/es/materials/sxp/popup/CommodityDetail/index.js +2 -1
- package/es/materials/sxp/popup/CommodityDetailDiro/index.js +2 -1
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +2 -1
- package/es/materials/sxp/template/Commodity/index.js +2 -1
- package/es/materials/sxp/template/CommodityDiro/index.js +2 -1
- package/es/materials/sxp/template/CommodityDiroNew/index.js +2 -1
- package/es/materials/sxp/template/Link/index.js +2 -1
- package/es/materials/sxp/template/components/Img.js +3 -1
- package/lib/core/components/SxpPageRender/FormatImage.d.ts +13 -0
- package/lib/core/components/SxpPageRender/FormatImage.js +25 -0
- package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +24 -26
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +2 -1
- package/lib/core/components/SxpPageRender/WaterFall/List.js +9 -7
- package/lib/materials/sxp/popup/CommodityDetail/index.js +2 -1
- package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +2 -1
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +2 -1
- package/lib/materials/sxp/template/Commodity/index.js +2 -1
- package/lib/materials/sxp/template/CommodityDiro/index.js +2 -1
- package/lib/materials/sxp/template/CommodityDiroNew/index.js +2 -1
- package/lib/materials/sxp/template/Link/index.js +2 -1
- package/lib/materials/sxp/template/components/Img.js +3 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
7
7
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
|
9
|
+
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
|
9
10
|
const CommodityDiro = (_a) => {
|
|
10
11
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
11
12
|
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 CommodityDiro = (_a) => {
|
|
|
14
15
|
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;
|
|
15
16
|
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),
|
|
16
17
|
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)) },
|
|
17
|
-
react_1.default.createElement(
|
|
18
|
+
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
|
|
18
19
|
react_1.default.createElement("div", { className: (0, css_1.css)({
|
|
19
20
|
color: '#fff',
|
|
20
21
|
display: 'flex',
|
|
@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
7
7
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
|
9
|
+
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
|
9
10
|
const CommodityDiroNew = (_a) => {
|
|
10
11
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
11
12
|
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) => {
|
|
|
14
15
|
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;
|
|
15
16
|
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),
|
|
16
17
|
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)) },
|
|
17
|
-
react_1.default.createElement(
|
|
18
|
+
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
|
|
18
19
|
react_1.default.createElement("div", { className: (0, css_1.css)({
|
|
19
20
|
color: '#fff',
|
|
20
21
|
display: 'flex',
|
|
@@ -7,6 +7,7 @@ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProv
|
|
|
7
7
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
|
9
9
|
const useEventReport_1 = require("../../../../core/hooks/useEventReport");
|
|
10
|
+
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
|
10
11
|
const Link = (_a) => {
|
|
11
12
|
var _b, _c, _d, _e, _f;
|
|
12
13
|
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) => {
|
|
|
22
23
|
};
|
|
23
24
|
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 }),
|
|
24
25
|
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)) },
|
|
25
|
-
react_1.default.createElement(
|
|
26
|
+
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 })),
|
|
26
27
|
react_1.default.createElement("div", { className: (0, css_1.css)({
|
|
27
28
|
display: 'flex',
|
|
28
29
|
alignItems: 'center',
|
|
@@ -5,6 +5,7 @@ const css_1 = require("@emotion/css");
|
|
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
|
|
7
7
|
const hooks_1 = require("../../../../core/hooks");
|
|
8
|
+
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
|
8
9
|
const Img = ({ src, rec, item, index }) => {
|
|
9
10
|
const ref = (0, react_1.useRef)(null);
|
|
10
11
|
const isOnScreen = (0, useOnScreen_1.default)(ref);
|
|
@@ -17,6 +18,7 @@ const Img = ({ src, rec, item, index }) => {
|
|
|
17
18
|
}, rec, item, index);
|
|
18
19
|
}
|
|
19
20
|
}, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
|
|
20
|
-
return (react_1.default.createElement("
|
|
21
|
+
return (react_1.default.createElement("div", { ref: ref, hidden: !src },
|
|
22
|
+
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
|
|
21
23
|
};
|
|
22
24
|
exports.default = (0, react_1.memo)(Img);
|