pb-sxp-ui 1.9.1 → 1.9.3

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
+exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
 const uuid_1 = require("uuid");
 function uuid(len, radix) {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -168,3 +168,15 @@ function getCookie(val) {
     return value !== null && value !== void 0 ? value : '';
 }
 exports.getCookie = getCookie;
+function getScreenReader() {
+    let userAgent = self.navigator.userAgent;
+    if (!userAgent)
+        return false;
+    return (/TalkBack/i.test(userAgent) ||
+        /Funtouch/i.test(userAgent) ||
+        /VoiceOver/i.test(userAgent) ||
+        /NVDA/i.test(userAgent) ||
+        /JAWS/i.test(userAgent) ||
+        /ChromeVox/i.test(userAgent));
+}
+exports.getScreenReader = getScreenReader;

package/lib/materials/sxp/cta/AniLinkPopup/index.js

@@ -10,7 +10,7 @@ const tool_1 = require("../../../../core/utils/tool");
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const AniLinkPopup = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
     style === null || style === void 0 ? true : delete style.transform;
     const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
@@ -67,12 +67,12 @@ const AniLinkPopup = (_a) => {
             paddingLeft: '6px'
         } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle}  ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
         react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
-            react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
-        react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
+            react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
+        react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                __html: (0, tool_1.setFontForText)((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
             } })),
-        react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
+        react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
             } })))));
 };

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -23,7 +23,8 @@ const CommodityDetail = (_a) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-    const ref = (0, react_1.useRef)();
+    const swiperRef = (0, react_1.useRef)();
+    const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
     const data = isPost ? rec : popupDetailData;
     let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
     let cta = isPost
@@ -114,9 +115,9 @@ const CommodityDetail = (_a) => {
         popupCurTimeRef.current = new Date();
         setCheckCommodityIndex(index);
         checkCommodityIndexRef.current = index;
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            ref.current.swiper.slideTo(0);
-            ref.current.swiper.autoplay.start();
+        if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
+            swiperRef.current.swiper.slideTo(0);
+            swiperRef.current.swiper.autoplay.start();
         }
     }, []);
     const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -134,19 +135,40 @@ const CommodityDetail = (_a) => {
         return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
     }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
     const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.stop();
+        }
+    }, []);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.start();
+        }
+    }, []);
+    const handleSlideChange = (0, react_1.useCallback)((swiper) => {
+        setSwiperActiveIndex(swiper.activeIndex);
+    }, []);
+    const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            react_1.default.createElement("div", { style: { position: 'relative' } },
-                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { a11y: {
-                        enabled: true
-                    }, height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+            react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign,
                         bulletElement: 'button'
-                    }, loop: true, autoplay: {
+                    } }, (isAlly
+                    ? {
+                        mousewheel: true,
+                        keyboard: true,
+                        navigation: true,
+                        a11y: {
+                            enabled: true
+                        }
+                    }
+                    : {}), { loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                    }, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
                         '.swiper-pagination-bullet': {
                             backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
                             opacity: 1
@@ -156,10 +178,10 @@ const CommodityDetail = (_a) => {
                             backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                             opacity: 1
                         }
-                    }))) },
-                    react_1.default.createElement(react_1.default.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
+                    }))) }),
+                    react_1.default.createElement(react_1.default.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
                         var _a;
-                        return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
+                        return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                             react_1.default.createElement("div", { style: {
                                     overflow: 'hidden',
                                     width,

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -27,7 +27,8 @@ const CommodityDetailDiroNew = (_a) => {
     const curTimeRef = (0, react_1.useRef)(null);
     const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-    const ref = (0, react_1.useRef)();
+    const swiperRef = (0, react_1.useRef)();
+    const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
     const data = isPost ? rec : popupDetailData;
     let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
     let cta = isPost
@@ -100,9 +101,9 @@ Made in Italy` })));
         popupCurTimeRef.current = new Date();
         setCheckCommodityIndex(index);
         checkCommodityIndexRef.current = index;
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            ref.current.swiper.slideTo(0);
-            ref.current.swiper.autoplay.start();
+        if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
+            swiperRef.current.swiper.slideTo(0);
+            swiperRef.current.swiper.autoplay.start();
         }
     }, []);
     const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -120,17 +121,40 @@ Made in Italy` })));
         return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
     }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
     const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.stop();
+        }
+    }, []);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.start();
+        }
+    }, []);
+    const handleSlideChange = (0, react_1.useCallback)((swiper) => {
+        setSwiperActiveIndex(swiper.activeIndex);
+    }, []);
+    const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
     return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
-            react_1.default.createElement("div", { style: { position: 'relative' } },
-                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+            react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign,
                         bulletElement: 'button'
-                    }, loop: true, autoplay: {
+                    } }, (isAlly
+                    ? {
+                        mousewheel: true,
+                        keyboard: true,
+                        navigation: true,
+                        a11y: {
+                            enabled: true
+                        }
+                    }
+                    : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
+                    }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
                             bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
                             fontSize: '14px'
                         } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -143,9 +167,9 @@ Made in Italy` })));
                             backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                             opacity: 1
                         }
-                    }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
+                    }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
                     var _a;
-                    return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
+                    return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                         react_1.default.createElement("div", { style: {
                                 overflow: 'hidden',
                                 width,

package/package.json

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