pb-sxp-ui 1.9.1 → 1.9.2

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.
Files changed (28) hide show
  1. package/dist/index.cjs +814 -55
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +5 -0
  4. package/dist/index.js +814 -55
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +814 -55
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/Modal/index.js +3 -3
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +51 -25
  16. package/es/core/utils/tool.d.ts +2 -1
  17. package/es/core/utils/tool.js +12 -1
  18. package/es/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  19. package/es/materials/sxp/popup/CommodityDetail/index.js +37 -15
  20. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +36 -12
  21. package/lib/core/components/SxpPageRender/Modal/index.js +3 -3
  22. package/lib/core/components/SxpPageRender/PictureGroup/index.js +49 -23
  23. package/lib/core/utils/tool.d.ts +2 -1
  24. package/lib/core/utils/tool.js +13 -1
  25. package/lib/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  26. package/lib/materials/sxp/popup/CommodityDetail/index.js +35 -13
  27. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +34 -10
  28. package/package.json +1 -1
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -23,7 +23,8 @@ const CommodityDetail = (_a) => {
23
23
  const [showModal, setShowModal] = (0, react_1.useState)(false);
24
24
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
25
25
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
26
- const ref = (0, react_1.useRef)();
26
+ const swiperRef = (0, react_1.useRef)();
27
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
27
28
  const data = isPost ? rec : popupDetailData;
28
29
  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];
29
30
  let cta = isPost
@@ -114,9 +115,9 @@ const CommodityDetail = (_a) => {
114
115
  popupCurTimeRef.current = new Date();
115
116
  setCheckCommodityIndex(index);
116
117
  checkCommodityIndexRef.current = index;
117
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
118
- ref.current.swiper.slideTo(0);
119
- ref.current.swiper.autoplay.start();
118
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
119
+ swiperRef.current.swiper.slideTo(0);
120
+ swiperRef.current.swiper.autoplay.start();
120
121
  }
121
122
  }, []);
122
123
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -134,19 +135,40 @@ const CommodityDetail = (_a) => {
134
135
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
135
136
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
136
137
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
138
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
139
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
140
+ swiperRef.current.swiper.autoplay.stop();
141
+ }
142
+ }, []);
143
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
144
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
145
+ swiperRef.current.swiper.autoplay.start();
146
+ }
147
+ }, []);
148
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
149
+ setSwiperActiveIndex(swiper.activeIndex);
150
+ }, []);
151
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
137
152
  return (react_1.default.createElement(react_1.default.Fragment, null,
138
153
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
139
- react_1.default.createElement("div", { style: { position: 'relative' } },
140
- 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: {
141
- enabled: true
142
- }, height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
154
+ react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
155
+ 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: {
143
156
  clickable: true,
144
157
  bulletActiveClass: 'swipe-item-active-bullet',
145
158
  clickableClass: getDotsAlign,
146
159
  bulletElement: 'button'
147
- }, loop: true, autoplay: {
160
+ } }, (isAlly
161
+ ? {
162
+ mousewheel: true,
163
+ keyboard: true,
164
+ navigation: true,
165
+ a11y: {
166
+ enabled: true
167
+ }
168
+ }
169
+ : {}), { loop: true, autoplay: {
148
170
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
149
- }, 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) && {
171
+ }, 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) && {
150
172
  '.swiper-pagination-bullet': {
151
173
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
152
174
  opacity: 1
@@ -156,10 +178,10 @@ const CommodityDetail = (_a) => {
156
178
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
157
179
  opacity: 1
158
180
  }
159
- }))) },
160
- 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) => {
181
+ }))) }),
182
+ 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) => {
161
183
  var _a;
162
- return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
184
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
163
185
  react_1.default.createElement("div", { style: {
164
186
  overflow: 'hidden',
165
187
  width,
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -27,7 +27,8 @@ const CommodityDetailDiroNew = (_a) => {
27
27
  const curTimeRef = (0, react_1.useRef)(null);
28
28
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
29
29
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
30
- const ref = (0, react_1.useRef)();
30
+ const swiperRef = (0, react_1.useRef)();
31
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
31
32
  const data = isPost ? rec : popupDetailData;
32
33
  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];
33
34
  let cta = isPost
@@ -100,9 +101,9 @@ Made in Italy` })));
100
101
  popupCurTimeRef.current = new Date();
101
102
  setCheckCommodityIndex(index);
102
103
  checkCommodityIndexRef.current = index;
103
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
104
- ref.current.swiper.slideTo(0);
105
- ref.current.swiper.autoplay.start();
104
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
105
+ swiperRef.current.swiper.slideTo(0);
106
+ swiperRef.current.swiper.autoplay.start();
106
107
  }
107
108
  }, []);
108
109
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -120,17 +121,40 @@ Made in Italy` })));
120
121
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
121
122
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
122
123
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
124
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
125
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
126
+ swiperRef.current.swiper.autoplay.stop();
127
+ }
128
+ }, []);
129
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
130
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
131
+ swiperRef.current.swiper.autoplay.start();
132
+ }
133
+ }, []);
134
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
135
+ setSwiperActiveIndex(swiper.activeIndex);
136
+ }, []);
137
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
123
138
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
124
139
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
125
- react_1.default.createElement("div", { style: { position: 'relative' } },
126
- 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: {
140
+ react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
141
+ 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: {
127
142
  clickable: true,
128
143
  bulletActiveClass: 'swipe-item-active-bullet',
129
144
  clickableClass: getDotsAlign,
130
145
  bulletElement: 'button'
131
- }, loop: true, autoplay: {
146
+ } }, (isAlly
147
+ ? {
148
+ mousewheel: true,
149
+ keyboard: true,
150
+ navigation: true,
151
+ a11y: {
152
+ enabled: true
153
+ }
154
+ }
155
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
132
156
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
133
- }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
157
+ }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
134
158
  bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
135
159
  fontSize: '14px'
136
160
  } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -143,9 +167,9 @@ Made in Italy` })));
143
167
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
144
168
  opacity: 1
145
169
  }
146
- }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
170
+ }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
147
171
  var _a;
148
- return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
172
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
149
173
  react_1.default.createElement("div", { style: {
150
174
  overflow: 'hidden',
151
175
  width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.9.1",
3
+ "version": "1.9.2",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",