@conecli/cone-render 0.8.42 → 0.9.1-isv2.1

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.
@@ -1 +1 @@
1
- import React, { useRef, useEffect } from 'react'
2
1
  isH5AndJdShopView,
3
2
  isAndroidDevice,
4
3
  isJdAndAndroidDevice,
5
4
  isJdAndIosDevice,
6
5
  isIosDevice,
7
6
  isJdApp,
8
7
  isWxMin,
9
8
  isH5AndJdShopViewH5Scroll,
10
9
  isH5AndJdShopH5CustomScrollView,
11
10
  isH5,
12
11
  isAppClassifyPage,
13
12
  lodashThrottle,
14
13
  START: 'start',
15
14
  MOVE: 'move',
16
15
  END: 'end',
17
16
  const rootEleNode = isH5 && document ? document.querySelector('body') : null
18
17
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
19
18
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView
20
19
 
21
20
  const touchstartEventBubbleFunc = (e) => {
22
21
  const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom')
23
22
  if(!isH5SwiperCustomEle){
24
23
  const hasCustomEle = e ? (e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')) : false
25
24
  if (isJdAndAndroidDevice && !hasCustomEle) {
26
25
  window.JdAndroid && window.JdAndroid.requestEvent(false)
27
26
  }
28
27
  !hasCustomEle && rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
29
28
  console.log("customScrollView所在页面document touch start事件是否有J_customScroll元素",hasCustomEle,"根元素是否有over-hidden",rootEleNode.classList)
30
29
  }
31
30
  }
32
31
  const touchstartEventCaptureFunc = (e) => {
33
32
  if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')){
34
33
  rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
35
34
  console.log("customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden",rootEleNode.classList)
36
35
  }
37
36
  }
38
37
  useEffect(() => {
39
38
  isJdApp && !window.JDJshopViewInfo.getAndroidTouchSlopState &&
40
39
  nativePageGetScaledTouchSlop((res) => {
41
40
  console.log('获取安卓系统滑动阈值', res)
42
41
  window.JDJshopViewInfo.androidTouchSlop = res
43
42
  window.JDJshopViewInfo.getAndroidTouchSlopState = true
44
43
  })
45
44
  if(isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState){
46
45
  global?.removeJdAndroidRquestEventForTouchStart && global.removeJdAndroidRquestEventForTouchStart()
47
46
  rootEleNode.addEventListener(
48
47
  'touchstart',
49
48
  touchstartEventBubbleFunc,
50
49
  false,
51
50
  )
52
51
 
53
52
  rootEleNode.addEventListener(
54
53
  'touchstart',
55
54
  touchstartEventCaptureFunc,
56
55
  true,
57
56
  )
58
57
  rootEleAddEventListenerState = true
59
58
  console.warn("customScrollView 初始化document监听完成")
60
59
  }
61
60
  return () => {
62
61
  if(isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState){
63
62
  console.warn("customScrollView document监听取消完成")
64
63
  rootEleNode.removeEventListener(
65
64
  'touchstart',
66
65
  touchstartEventBubbleFunc,
67
66
  false,
68
67
  )
69
68
  rootEleNode.removeEventListener(
70
69
  'touchstart',
71
70
  touchstartEventCaptureFunc,
72
71
  true,
73
72
  )
74
73
  }
75
74
  }
76
75
  }, [])
77
76
  console.log("触发window?.JdAndroid.requestEvent",touchType === TouchType.START,touchType)
78
77
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
79
78
  e && e.stopPropagation()
80
79
  sendIosState && iosDeviceSendRouter(touchType)
81
80
  }
82
81
  const iosDeviceSendRouter = (state) => {
83
82
  window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
84
83
  method: 'callRouterModuleWithParams',
85
84
  params: {
86
85
  routerURL: 'router://JDShopModule/processShoph5SlideState',
87
86
  routerParam: {
88
87
  slideDirection: 'horizontal',
89
88
  needDisableVertical: `${iosNeedDisableVertical}`,
90
89
  state,
91
90
  },
92
91
  callBackId: new Date().getTime(),
93
92
  },
94
93
  })
95
94
  }
96
95
  isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType)
97
96
  console.log("当前customScrollView touch事件", touchType, e, "是否是e instanceof CustomEvent", e instanceof CustomEvent)
98
97
  const GetSlideAngle = (dx,dy) => {
99
98
  return Math.atan2(dy,dx) * 180 / Math.PI;
100
99
  }
101
100
  const GetSlideDirection = (startX, startY, endX, endY) => {
102
101
  const dy = startY - endY
103
102
  const dx = endX - startX
104
103
  let result = 0
105
104
  if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
106
105
  return result
107
106
  }
108
107
  const angle = GetSlideAngle(dx, dy)
109
108
  if (angle >= -45 && angle < 45) {
110
109
  result = 4
111
110
  } else if (angle >= 45 && angle < 135) {
112
111
  result = 1
113
112
  } else if (angle >= -135 && angle < -45) {
114
113
  result = 2
115
114
  } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
116
115
  result = 3
117
116
  }
118
117
  return result
119
118
  }
120
119
  if(isJdApp){
121
120
  stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical)
122
121
  if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
123
122
  isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden')
124
123
  console.info("customScrollView touchstart 当前根元素是否添加还是删除over-hidden",TouchType.START,rootEleNode.classList)
125
124
  const touchEvent =
126
125
  e?.originalEvent?.targetTouches[0] || e?.targetTouches[0]
127
126
  mLastClientPosRef.current.mLastClientX = touchEvent.clientX
128
127
  mLastClientPosRef.current.mLastClientY = touchEvent.clientY
129
128
  console.log('ustomScrollView touchstart 获取mLastClientPosRef', mLastClientPosRef)
130
129
  }
131
130
  }
132
131
  stopNativeScrollEvent(e,TouchType.END)
133
132
  mLastClientPosRef.current.mLastClientX = 0
134
133
  mLastClientPosRef.current.mLastClientY = 0
135
134
  console.log('ustomScrollView touchend 获取mLastClientPosRef', mLastClientPosRef)
136
135
  const triggerIosTouchMove = () => {
137
136
  isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null,TouchType.START, true)
138
137
  }
139
138
 
140
139
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(
141
140
  triggerIosTouchMove,
142
141
  500,
143
142
  )
144
143
 
145
144
  const recoverRootEleVerticalScroll = (touchEvent) => {
146
145
  const direction = GetSlideDirection(mLastClientPosRef.current.mLastClientX, mLastClientPosRef.current.mLastClientY, touchEvent.clientX, touchEvent.clientY)
147
146
  if (direction === 1 || direction === 2) {
148
147
  rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
149
148
  }
150
149
  console.log("获取当前滚动方向,向上向下1、2",direction,'根元素的classList',rootEleNode.classList,'mLastClientPosRef.current.mLastClientX',mLastClientPosRef.current.mLastClientX)
151
150
  }
152
151
  const touchEvent =
153
152
  e?.originalEvent?.targetTouches[0] || e?.targetTouches[0]
154
153
  const xDiff = Math.abs(
155
154
  touchEvent.clientX - mLastClientPosRef.current.mLastClientX,
156
155
  ).toFixed(2)
157
156
  const yDiff = Math.abs(
158
157
  touchEvent.clientY - mLastClientPosRef.current.mLastClientY,
159
158
  ).toFixed(2)
160
159
  if(isJdApp) {
161
160
  if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
162
161
  console.log(
163
162
  '横向滚动触发',
164
163
  xDiff,
165
164
  touchEvent,
166
165
  window.JDJshopViewInfo.androidTouchSlop,
167
166
  "iosNeedDisableVertical",
168
167
  iosNeedDisableVertical
169
168
  )
170
169
  iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove()
171
170
  } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
172
171
  console.log(
173
172
  '纵向滚动触发',
174
173
  yDiff,
175
174
  touchEvent,
176
175
  window.JDJshopViewInfo.androidTouchSlop,
177
176
  )
178
177
  stopNativeScrollEvent(e,TouchType.END)
179
178
  }
180
179
  }
181
180
  isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent)
182
181
  <ScrollView
183
182
  scrollX
184
183
  onTouchStart={changeTouchStart}
185
184
  onTouchEnd={changeTouchEnd}
186
185
  onTouchCancel={changeTouchEnd}
187
186
  onTouchMove={changeTouchMove}
188
187
  enhanced
189
188
  showScrollbar={false}
190
189
  style={style}
191
190
  className={classNames(className, {
192
191
  [customScrollViewStyle[
193
192
  'd-custom-ios-h5-extend-border-radius'
194
193
  ]]: isIosDevice,
195
194
  }, 'J_customScroll')}
196
195
  {...otherProps}
197
196
  >
198
197
  {children}
199
198
  </ScrollView>
200
199
  )
201
200
  } else {
202
201
  return (
203
202
  <ScrollView
204
203
  scrollX
205
204
  enhanced
206
205
  showScrollbar={false}
207
206
  {...otherProps}
208
207
  className={classNames(
209
208
  className,
210
209
  {
211
210
  [customScrollViewStyle[
212
211
  'd-custom-ios-mini-extend-border-radius'
213
212
  ]]:
214
213
  isIosDevice &&
215
214
  isWxMin &&
216
215
  scrollX &&
217
216
  style['borderRadius'],
218
217
  },
219
218
  {
220
219
  [customScrollViewStyle[
221
220
  'd-custom-ios-h5-extend-border-radius'
222
221
  ]]: isIosDevice,
223
222
  },
224
223
  {
225
224
  [customScrollViewStyle['d-custom-mini-hide-scroll']]:
226
225
  isWxMin,
227
226
  },
228
227
  )}
229
228
  style={style}
230
229
  >
231
230
  {children}
232
231
  </ScrollView>
233
232
  )
234
233
  }
235
234
  iosNeedDisableVertical: false,
235
+ import React, { useRef, useEffect } from 'react'
236
236
  isH5AndJdShopView,
237
237
  isAndroidDevice,
238
238
  isJdAndAndroidDevice,
239
239
  isJdAndIosDevice,
240
240
  isIosDevice,
241
241
  isJdApp,
242
242
  isWxMin,
243
243
  isH5AndJdShopViewH5Scroll,
244
244
  isH5AndJdShopH5CustomScrollView,
245
245
  isH5,
246
246
  isAppClassifyPage,
247
247
  lodashThrottle,
248
248
  START: 'start',
249
249
  MOVE: 'move',
250
250
  END: 'end',
251
251
  const rootEleNode = isH5 && document ? document.querySelector('body') : null
252
252
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
253
253
  const isJdAndH5ScrollState = needShowHighVersion || isH5AndJdShopH5CustomScrollView
254
254
 
255
255
  const touchstartEventBubbleFunc = (e) => {
256
256
  const isH5SwiperCustomEle = e?.target?.closest('.J_h5SwiperCustom')
257
257
  if(!isH5SwiperCustomEle){
258
258
  const hasCustomEle = e ? (e?.target?.closest('.J_customScroll') || e?.target?.closest('.J_customLayout')) : false
259
259
  if (isJdAndAndroidDevice && !hasCustomEle) {
260
260
  window.JdAndroid && window.JdAndroid.requestEvent(false)
261
261
  }
262
262
  !hasCustomEle && rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
263
263
  console.log("customScrollView所在页面document touch start事件是否有J_customScroll元素",hasCustomEle,"根元素是否有over-hidden",rootEleNode.classList)
264
264
  }
265
265
  }
266
266
  const touchstartEventCaptureFunc = (e) => {
267
267
  if (e && !e?.target?.closest('.J_h5SwiperCustom') && !e?.target?.closest('.J_customLayout')){
268
268
  rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
269
269
  console.log("customScrollView所在页面document touch start事件捕获阶段移除根元素是否有over-hidden",rootEleNode.classList)
270
270
  }
271
271
  }
272
272
  useEffect(() => {
273
273
  isJdApp && !window.JDJshopViewInfo.getAndroidTouchSlopState &&
274
274
  nativePageGetScaledTouchSlop((res) => {
275
275
  console.log('获取安卓系统滑动阈值', res)
276
276
  window.JDJshopViewInfo.androidTouchSlop = res
277
277
  window.JDJshopViewInfo.getAndroidTouchSlopState = true
278
278
  })
279
279
  if(isJdAndH5ScrollState && rootEleNode && !rootEleAddEventListenerState){
280
280
  global?.removeJdAndroidRquestEventForTouchStart && global.removeJdAndroidRquestEventForTouchStart()
281
281
  rootEleNode.addEventListener(
282
282
  'touchstart',
283
283
  touchstartEventBubbleFunc,
284
284
  false,
285
285
  )
286
286
 
287
287
  rootEleNode.addEventListener(
288
288
  'touchstart',
289
289
  touchstartEventCaptureFunc,
290
290
  true,
291
291
  )
292
292
  rootEleAddEventListenerState = true
293
293
  console.warn("customScrollView 初始化document监听完成")
294
294
  }
295
295
  return () => {
296
296
  if(isJdAndH5ScrollState && rootEleNode && rootEleAddEventListenerState){
297
297
  console.warn("customScrollView document监听取消完成")
298
298
  rootEleNode.removeEventListener(
299
299
  'touchstart',
300
300
  touchstartEventBubbleFunc,
301
301
  false,
302
302
  )
303
303
  rootEleNode.removeEventListener(
304
304
  'touchstart',
305
305
  touchstartEventCaptureFunc,
306
306
  true,
307
307
  )
308
308
  }
309
309
  }
310
310
  }, [])
311
311
 
312
312
  const androidDeviceStopNativeScrollEvent = (touchType) => {
313
313
  isJdApp &&
314
314
  isAndroidDevice &&
315
315
  window?.JdAndroid &&
316
316
  window?.JdAndroid.requestEvent(touchType === TouchType.START)
317
317
  console.log("触发window?.JdAndroid.requestEvent",touchType === TouchType.START,touchType)
318
318
  }
319
319
  const iosDeviceStopNativeScrollEvent = (e, touchType, sendIosState = true) => {
320
320
  e && e.stopPropagation()
321
321
  sendIosState && iosDeviceSendRouter(touchType)
322
322
  }
323
323
  const iosDeviceSendRouter = (state) => {
324
324
  window?.webkit?.messageHandlers?.MobileNavi?.postMessage?.({
325
325
  method: 'callRouterModuleWithParams',
326
326
  params: {
327
327
  routerURL: 'router://JDShopModule/processShoph5SlideState',
328
328
  routerParam: {
329
329
  slideDirection: 'horizontal',
330
330
  needDisableVertical: `${iosNeedDisableVertical}`,
331
331
  state,
332
332
  },
333
333
  callBackId: new Date().getTime(),
334
334
  },
335
335
  })
336
336
  }
337
337
  isAndroidDevice && androidDeviceStopNativeScrollEvent(touchType)
338
338
  console.log("当前customScrollView touch事件", touchType, e, "是否是e instanceof CustomEvent", e instanceof CustomEvent)
339
339
  const GetSlideAngle = (dx,dy) => {
340
340
  return Math.atan2(dy,dx) * 180 / Math.PI;
341
341
  }
342
342
  const GetSlideDirection = (startX, startY, endX, endY) => {
343
343
  const dy = startY - endY
344
344
  const dx = endX - startX
345
345
  let result = 0
346
346
  if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
347
347
  return result
348
348
  }
349
349
  const angle = GetSlideAngle(dx, dy)
350
350
  if (angle >= -45 && angle < 45) {
351
351
  result = 4
352
352
  } else if (angle >= 45 && angle < 135) {
353
353
  result = 1
354
354
  } else if (angle >= -135 && angle < -45) {
355
355
  result = 2
356
356
  } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
357
357
  result = 3
358
358
  }
359
359
  return result
360
360
  }
361
361
  if(isJdApp){
362
362
  stopNativeScrollEvent(e, TouchType.START, !iosNeedDisableVertical)
363
363
  if (isH5AndJdShopView || isH5AndJdShopH5CustomScrollView) {
364
364
  isJdAndH5ScrollState && rootEleNode && rootEleNode.classList.add('over-hidden')
365
365
  console.info("customScrollView touchstart 当前根元素是否添加还是删除over-hidden",TouchType.START,rootEleNode.classList)
366
366
  const touchEvent =
367
367
  e?.originalEvent?.targetTouches[0] || e?.targetTouches[0]
368
368
  mLastClientPosRef.current.mLastClientX = touchEvent.clientX
369
369
  mLastClientPosRef.current.mLastClientY = touchEvent.clientY
370
370
  console.log('ustomScrollView touchstart 获取mLastClientPosRef', mLastClientPosRef)
371
371
  }
372
372
  }
373
373
  stopNativeScrollEvent(e,TouchType.END)
374
374
  mLastClientPosRef.current.mLastClientX = 0
375
375
  mLastClientPosRef.current.mLastClientY = 0
376
376
  console.log('ustomScrollView touchend 获取mLastClientPosRef', mLastClientPosRef)
377
377
  const triggerIosTouchMove = () => {
378
378
  isJdAndIosDevice && iosDeviceStopNativeScrollEvent(null,TouchType.START, true)
379
379
  }
380
380
 
381
381
  const lodashThrottleTriggerIosTouchMove = lodashThrottle(
382
382
  triggerIosTouchMove,
383
383
  500,
384
384
  )
385
385
 
386
386
  const recoverRootEleVerticalScroll = (touchEvent) => {
387
387
  const direction = GetSlideDirection(mLastClientPosRef.current.mLastClientX, mLastClientPosRef.current.mLastClientY, touchEvent.clientX, touchEvent.clientY)
388
388
  if (direction === 1 || direction === 2) {
389
389
  rootEleNode && rootEleNode.classList.contains('over-hidden') && rootEleNode.classList.remove('over-hidden')
390
390
  }
391
391
  console.log("获取当前滚动方向,向上向下1、2",direction,'根元素的classList',rootEleNode.classList,'mLastClientPosRef.current.mLastClientX',mLastClientPosRef.current.mLastClientX)
392
392
  }
393
393
  const touchEvent =
394
394
  e?.originalEvent?.targetTouches[0] || e?.targetTouches[0]
395
395
  const xDiff = Math.abs(
396
396
  touchEvent.clientX - mLastClientPosRef.current.mLastClientX,
397
397
  ).toFixed(2)
398
398
  const yDiff = Math.abs(
399
399
  touchEvent.clientY - mLastClientPosRef.current.mLastClientY,
400
400
  ).toFixed(2)
401
401
  if(isJdApp) {
402
402
  if (xDiff >= window.JDJshopViewInfo.androidTouchSlop) {
403
403
  console.log(
404
404
  '横向滚动触发',
405
405
  xDiff,
406
406
  touchEvent,
407
407
  window.JDJshopViewInfo.androidTouchSlop,
408
408
  "iosNeedDisableVertical",
409
409
  iosNeedDisableVertical
410
410
  )
411
411
  iosNeedDisableVertical && isJdApp && lodashThrottleTriggerIosTouchMove()
412
412
  } else if (yDiff > window.JDJshopViewInfo.androidTouchSlop) {
413
413
  console.log(
414
414
  '纵向滚动触发',
415
415
  yDiff,
416
416
  touchEvent,
417
417
  window.JDJshopViewInfo.androidTouchSlop,
418
418
  )
419
419
  stopNativeScrollEvent(e, TouchType.END)
420
420
  }
421
421
  }
422
422
  isJdAndH5ScrollState && recoverRootEleVerticalScroll(touchEvent)
423
423
  <ScrollView
424
424
  scrollX
425
425
  onTouchStart={changeTouchStart}
426
426
  onTouchEnd={changeTouchEnd}
427
427
  onTouchCancel={changeTouchEnd}
428
428
  onTouchMove={changeTouchMove}
429
429
  enhanced
430
430
  showScrollbar={false}
431
431
  style={style}
432
432
  className={classNames(className, {
433
433
  [customScrollViewStyle[
434
434
  'd-custom-ios-h5-extend-border-radius'
435
435
  ]]: isIosDevice,
436
436
  }, 'J_customScroll')}
437
437
  {...otherProps}
438
438
  >
439
439
  {children}
440
440
  </ScrollView>
441
441
  )
442
442
  } else {
443
443
  return (
444
444
  <ScrollView
445
445
  scrollX
446
446
  enhanced
447
447
  showScrollbar={false}
448
448
  {...otherProps}
449
449
  className={classNames(
450
450
  className,
451
451
  {
452
452
  [customScrollViewStyle[
453
453
  'd-custom-ios-mini-extend-border-radius'
454
454
  ]]:
455
455
  isIosDevice &&
456
456
  isWxMin &&
457
457
  scrollX &&
458
458
  style['borderRadius'],
459
459
  },
460
460
  {
461
461
  [customScrollViewStyle[
462
462
  'd-custom-ios-h5-extend-border-radius'
463
463
  ]]: isIosDevice,
464
464
  },
465
465
  {
466
466
  [customScrollViewStyle['d-custom-mini-hide-scroll']]:
467
467
  isWxMin,
468
468
  },
469
469
  )}
470
470
  style={style}
471
471
  >
472
472
  {children}
473
473
  </ScrollView>
474
474
  )
475
475
  }
476
476
  iosNeedDisableVertical: false,