@mpxjs/webpack-plugin 2.10.18-beta.7 → 2.10.18-beta.8

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 (4) hide show
  1. package/lib/runtime/components/react/dist/mpx-swiper.d.ts +1 -0
  2. package/lib/runtime/components/react/dist/mpx-swiper.jsx +15 -3
  3. package/lib/runtime/components/react/mpx-swiper.tsx +18 -3
  4. package/package.json +1 -1
package/lib/runtime/components/react/dist/mpx-swiper.d.ts CHANGED
@@ -58,6 +58,7 @@ interface SwiperProps {
58
58
  disableGesture?: boolean;
59
59
  'display-multiple-items'?: number;
60
60
  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
61
+ bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
61
62
  }
62
63
  declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
63
64
  export default SwiperWrapper;
package/lib/runtime/components/react/dist/mpx-swiper.jsx CHANGED
@@ -61,7 +61,7 @@ const easeMap = {
61
61
  easeInOutCubic: Easing.inOut(Easing.cubic)
62
62
  };
63
63
  const SwiperWrapper = forwardRef((props, ref) => {
64
- const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
64
+ const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange, bindchangestart } = props;
65
65
  const dotCommonStyle = {
66
66
  width: dotWidth,
67
67
  height: dotHeight,
@@ -300,6 +300,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
300
300
  nextIndex += 1;
301
301
  // targetOffset = -nextIndex * step.value - preMarginShared.value
302
302
  targetOffset = -nextIndex * step.value;
303
+ runOnJSCallback('handleSwiperChangeStart', nextIndex);
303
304
  offset.value = withTiming(targetOffset, {
304
305
  duration: easeDuration,
305
306
  easing: easeMap[easeingFunc]
@@ -314,6 +315,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
314
315
  nextIndex = 0;
315
316
  targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value;
316
317
  // 执行动画到下一帧
318
+ runOnJSCallback('handleSwiperChangeStart', nextIndex);
317
319
  offset.value = withTiming(targetOffset, {
318
320
  duration: easeDuration
319
321
  }, () => {
@@ -328,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
328
330
  nextIndex = currentIndex.value + 1;
329
331
  targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value;
330
332
  // 执行动画到下一帧
333
+ runOnJSCallback('handleSwiperChangeStart', nextIndex);
331
334
  offset.value = withTiming(targetOffset, {
332
335
  duration: easeDuration,
333
336
  easing: easeMap[easeingFunc]
@@ -362,11 +365,16 @@ const SwiperWrapper = forwardRef((props, ref) => {
362
365
  const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
363
366
  bindchange && bindchange(eventData);
364
367
  }
368
+ function handleSwiperChangeStart(current) {
369
+ const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef });
370
+ bindchangestart && bindchangestart(eventData);
371
+ }
365
372
  const runOnJSCallbackRef = useRef({
366
373
  loop,
367
374
  pauseLoop,
368
375
  resumeLoop,
369
- handleSwiperChange
376
+ handleSwiperChange,
377
+ handleSwiperChangeStart
370
378
  });
371
379
  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
372
380
  function getOffset(index, stepValue) {
@@ -387,6 +395,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
387
395
  if (targetOffset !== offset.value) {
388
396
  // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
389
397
  if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
398
+ runOnJSCallback('handleSwiperChangeStart', propCurrent);
390
399
  offset.value = withTiming(targetOffset, {
391
400
  duration: easeDuration,
392
401
  easing: easeMap[easeingFunc]
@@ -686,7 +695,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
686
695
  const offsetHalf = computeHalf();
687
696
  if (childrenLength.value > 1 && offsetHalf) {
688
697
  const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
689
- currentIndex.value = selectedIndex;
698
+ if (selectedIndex !== currentIndex.value) {
699
+ currentIndex.value = selectedIndex;
700
+ runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex);
701
+ }
690
702
  }
691
703
  // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
692
704
  if (!circularShared.value) {
package/lib/runtime/components/react/mpx-swiper.tsx CHANGED
@@ -79,6 +79,7 @@ interface SwiperProps {
79
79
  disableGesture?: boolean
80
80
  'display-multiple-items'?: number
81
81
  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
82
+ bindchangestart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
82
83
  }
83
84
 
84
85
  /**
@@ -159,7 +160,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
159
160
  circular = false,
160
161
  disableGesture = false,
161
162
  current: propCurrent = 0,
162
- bindchange
163
+ bindchange,
164
+ bindchangestart
163
165
  } = props
164
166
 
165
167
  const dotCommonStyle = {
@@ -425,6 +427,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
425
427
  nextIndex += 1
426
428
  // targetOffset = -nextIndex * step.value - preMarginShared.value
427
429
  targetOffset = -nextIndex * step.value
430
+ runOnJSCallback('handleSwiperChangeStart', nextIndex)
428
431
  offset.value = withTiming(targetOffset, {
429
432
  duration: easeDuration,
430
433
  easing: easeMap[easeingFunc]
@@ -438,6 +441,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
438
441
  nextIndex = 0
439
442
  targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
440
443
  // 执行动画到下一帧
444
+ runOnJSCallback('handleSwiperChangeStart', nextIndex)
441
445
  offset.value = withTiming(targetOffset, {
442
446
  duration: easeDuration
443
447
  }, () => {
@@ -451,6 +455,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
451
455
  nextIndex = currentIndex.value + 1
452
456
  targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
453
457
  // 执行动画到下一帧
458
+ runOnJSCallback('handleSwiperChangeStart', nextIndex)
454
459
  offset.value = withTiming(targetOffset, {
455
460
  duration: easeDuration,
456
461
  easing: easeMap[easeingFunc]
@@ -489,11 +494,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
489
494
  bindchange && bindchange(eventData)
490
495
  }
491
496
 
497
+ function handleSwiperChangeStart (current: number) {
498
+ const eventData = getCustomEvent('changestart', {}, { detail: { current }, layoutRef: layoutRef })
499
+ bindchangestart && bindchangestart(eventData)
500
+ }
501
+
492
502
  const runOnJSCallbackRef = useRef({
493
503
  loop,
494
504
  pauseLoop,
495
505
  resumeLoop,
496
- handleSwiperChange
506
+ handleSwiperChange,
507
+ handleSwiperChangeStart
497
508
  })
498
509
  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
499
510
 
@@ -514,6 +525,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
514
525
  if (targetOffset !== offset.value) {
515
526
  // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
516
527
  if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
528
+ runOnJSCallback('handleSwiperChangeStart', propCurrent)
517
529
  offset.value = withTiming(targetOffset, {
518
530
  duration: easeDuration,
519
531
  easing: easeMap[easeingFunc]
@@ -805,7 +817,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
805
817
  const offsetHalf = computeHalf()
806
818
  if (childrenLength.value > 1 && offsetHalf) {
807
819
  const { selectedIndex } = getTargetPosition({ transdir: moveDistance } as EventEndType)
808
- currentIndex.value = selectedIndex
820
+ if (selectedIndex !== currentIndex.value) {
821
+ currentIndex.value = selectedIndex
822
+ runOnJS(runOnJSCallback)('handleSwiperChangeStart', selectedIndex)
823
+ }
809
824
  }
810
825
  // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
811
826
  if (!circularShared.value) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mpxjs/webpack-plugin",
3
- "version": "2.10.18-beta.7",
3
+ "version": "2.10.18-beta.8",
4
4
  "description": "mpx compile core",
5
5
  "keywords": [
6
6
  "mpx"