pb-sxp-ui 1.0.87 → 1.0.89

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

@@ -35,11 +35,8 @@ const MultiCommodityDiro = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            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_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#000',
                     display: 'flex',
@@ -49,7 +46,7 @@ const MultiCommodityDiro = (_a) => {
                     overflow: 'hidden'
                 }) },
                 react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
+                react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
     })));
 };
 exports.default = (0, react_1.memo)(MultiCommodityDiro);

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

@@ -35,11 +35,8 @@ const MultiCommodityDiroNew = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            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_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',
@@ -50,7 +47,7 @@ const MultiCommodityDiroNew = (_a) => {
                     lineHeight: '20px'
                 }) },
                 react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
+                react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))))));
     })));
 };
 exports.default = (0, react_1.memo)(MultiCommodityDiroNew);

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

@@ -3,26 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = require("lodash");
-const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const EventProvider = (_a) => {
     var { rec, children, className, onClick, style, isExternalLink = false, index } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
     const ref = (0, react_1.useRef)(null);
-    const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { popup } = (0, hooks_1.useEditor)();
     const { setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'ctaExposure',
-                eventDescription: 'The cta was shown to the user'
-            }, rec, item, index);
-        }
-    }, [isOnScreen, ref, rec, ctaEvent, index]);
     const handleClick = (0, lodash_1.throttle)(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;

package/lib/materials/sxp/template/components/Img.d.ts

@@ -1,11 +1,13 @@
 import React, { CSSProperties } from 'react';
-import { ProductInfoType, RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import { ProductInfoType, RecItemType, VideoInfoType } from '../../../../core/components/SxpPageRender/typing';
 export interface IImgProps {
-    src: string;
+    src?: string;
     rec?: RecItemType;
-    item?: ProductInfoType;
+    item?: ProductInfoType | VideoInfoType | null;
     index?: number;
     style?: CSSProperties;
+    translateY?: number;
+    imgStyle?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

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

@@ -6,7 +6,7 @@ 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, style }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { ctaEvent } = (0, hooks_1.useSxpDataSource)();
@@ -18,7 +18,8 @@ const Img = ({ src, rec, item, index, style }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
-        react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }, style)), src: src })));
+    return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
+        react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
 };
 exports.default = (0, react_1.memo)(Img);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -27,7 +27,6 @@
     "README.md"
   ],
   "keywords": [
-    "antd",
     "react",
     "react-component",
     "ui",
@@ -37,11 +36,10 @@
   "author": "frontend@chatlabs.cn",
   "license": "MIT",
   "dependencies": {
-    "@ant-design/pro-components": "^2.6.35",
     "@emotion/css": "^11.11.2",
-    "antd": "^5.15.3",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
+    "hls.js": "^1.5.11",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",