@conecli/cone-render 0.8.41 → 0.8.42

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 Taro, { useRouter } from '@tarojs/taro'
2
1
  SECTION_HOME_TAB_TYPE,
3
2
  SECTION_HOME_TAB_NAME_TYPE,
4
3
  TaroEventType,
5
4
  const {
6
5
  children,
7
6
  containerId,
8
7
  type,
9
8
  placeholder,
10
9
  height,
11
10
  floorData = {},
12
11
  sectionType,
13
12
  lazyNodeClassName,
14
13
  } = props
15
14
  const getRouterInfo = useRouter()
16
15
  const getQueryData = getRouterInfo?.params || {}
17
16
  const [componentShowState, setComponentShowState] = useState(false)
18
17
  const [componentRenderShowState, setComponentRenderShowState] =
19
18
  useState(false)
20
19
  const componentLazyRef = useRef<HTMLElement | null>(null)
21
20
  const componentShowStateRef = useRef(false)
22
21
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
23
22
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
24
23
  const { ref, inView } = useInView({
25
24
  threshold: 0,
26
25
  triggerOnce: true,
27
26
  root: rootDom,
28
27
  rootMargin: `0px 0px ${window.innerHeight}px 0px`,
29
28
  })
30
29
  useEffect(() => {
31
30
  if(needShowHighVersion || !isH5AndJdShopView) return
32
31
  if (type === LazyType.FLOOR) {
33
32
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
34
33
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
35
34
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
36
35
  !componentShowStateRef.current && dealPageScrollInfo(res)
37
36
  })
38
37
  }
39
38
  }, [])
40
39
  useEffect(() => {
41
40
  if((!needShowHighVersion && componentShowState === true) ||
42
41
  (needShowHighVersion && inView && isH5AndJdShopView)
43
42
  ) {
44
43
  console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!')
45
44
  const modularPackResult = floorData?.floorExtInfo?.modularPackResult
46
45
  const modularPackResultObj = typeof modularPackResult === 'string' ? JSON.parse(modularPackResult) : modularPackResult
47
46
  if (modularPackResultObj && modularPackResultObj.bundleUrl) {
48
47
  const { bundleUrl } = modularPackResultObj
49
48
  nativePageRegisterMessage(
50
49
  Message_Type.NATIVE_INJECT_JS_FILE,
51
50
  {
52
51
  data: {
53
52
  "bundleUrl": [bundleUrl]
54
53
  },
55
54
  },
56
55
  )
57
56
  }
58
57
  }
59
58
  }, [componentShowState,inView])
60
59
 
61
60
  const dealPageScrollInfo = (res) => {
62
61
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
63
62
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
64
63
  const shopId = floorData?.floorExtInfo?.shopId
65
64
  if(!lazyLayoutLoadErrorShopId[`${shopId}`]) {
66
65
  const opt = {
67
66
  msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
68
67
  uid: floorData?.uid,
69
68
  floorIdx: floorData?.floorIdx,
70
69
  shopId: shopId,
71
70
  moduleId: floorData?.moduleId,
72
71
  moduleName: floorData?.moduleName,
73
72
  middleTemplateId: floorData?.middleTemplateId,
74
73
  modularPackResult: typeof floorData?.floorExtInfo?.modularPackResult == 'string' ? JSON.parse(floorData?.floorExtInfo?.modularPackResult) : floorData?.floorExtInfo?.modularPackResult,
75
74
  }
76
75
  sgmCustomReport({
77
76
  code: 'lazyLayoutLoadError',
78
77
  msg: opt,
79
78
  })
80
79
  lazyLayoutLoadErrorShopId[`${shopId}`] = true
81
80
  }
82
81
  return
83
82
  }
84
83
  if (componentLazyRef.current) {
85
84
  const eleClientRect =
86
85
  componentLazyRef.current.getBoundingClientRect()
87
86
  const getContainerHeightOffSetY = displayHeight + offSetY
88
87
  const eleOffsetTop = Math.ceil(eleClientRect.top)
89
88
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
90
89
  const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight
91
90
  if (!componentShowStateRef.current) {
92
91
  if (getContainerHeightOffSetY > eleOffsetTop) {
93
92
  componentShowStateRef.current = true
94
93
  setComponentShowState(true)
95
94
  Taro.nextTick(() => {
96
95
  setComponentRenderShowState(true)
97
96
  })
98
97
  }
99
98
  }
100
99
  }
101
100
  }
102
101
  return isH5AndJdShopView && !needShowHighVersion ? (
103
102
  <div
104
103
  id={`${containerId}_lazy`}
105
104
  ref={componentLazyRef}
106
105
  className={classNames(
107
106
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
108
107
  'd-app-floor-lazy-load',
109
108
  )}
110
109
  style={{
111
110
  minHeight: `${
112
111
  componentRenderShowState ? 'auto' : height + 'px'
113
112
  }`,
114
113
  backgroundColor: componentRenderShowState
115
114
  ? 'transparent'
116
115
  : '#ffffff',
117
116
  }}
118
117
  >
119
118
  {componentShowState ? children : placeholder}
120
119
  </div>
121
120
  ) : (
122
121
  <div
123
122
  id={`${containerId}_lazy`}
124
123
  className={classNames(
125
124
  lazyLayoutLoadStyle['d-mobile-floor-lazy-layout-load'],
126
125
  'd-mobile-floor-lazy-load',
127
126
  lazyNodeClassName,
128
127
  )}
129
128
  ref={ref}
130
129
  style={{
131
130
  minHeight: `${inView ? 'auto' : height + 'px'}`,
132
131
  backgroundColor: inView ? 'transparent' : '#ffffff',
133
132
  }}
134
133
  >
135
134
  {}
136
135
  {inView ? children : placeholder}
137
136
  </div>
138
137
  )
139
138
  sectionType:
140
139
  SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
141
140
  type: LazyType.FLOOR,
142
141
  children: null,
143
142
  placeholder: null,
144
143
  height: 200,
145
144
  className: '',
146
145
  lazyNodeClassName: '',
146
+ import Taro, { useRouter } from '@tarojs/taro'
147
147
  SECTION_HOME_TAB_TYPE,
148
148
  SECTION_HOME_TAB_NAME_TYPE,
149
149
  TaroEventType,
150
150
  const {
151
151
  children,
152
152
  containerId,
153
153
  type,
154
154
  placeholder,
155
155
  height,
156
156
  floorData = {},
157
157
  sectionType,
158
158
  lazyNodeClassName,
159
159
  } = props
160
160
  const getRouterInfo = useRouter()
161
161
  const getQueryData = getRouterInfo?.params || {}
162
162
  const [componentShowState, setComponentShowState] = useState(false)
163
163
  const [componentRenderShowState, setComponentRenderShowState] =
164
164
  useState(false)
165
165
  const componentLazyRef = useRef<HTMLElement | null>(null)
166
166
  const componentShowStateRef = useRef(false)
167
167
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
168
168
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
169
169
  const { ref, inView } = useInView({
170
170
  threshold: 0,
171
171
  triggerOnce: true,
172
172
  root: rootDom,
173
173
  rootMargin: `0px 0px ${window.innerHeight}px 0px`,
174
174
  })
175
175
  useEffect(() => {
176
176
  if(needShowHighVersion || !isH5AndJdShopView) return
177
177
  if (type === LazyType.FLOOR) {
178
178
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
179
179
  !componentShowStateRef.current && dealPageScrollInfo(latestRes,false)
180
180
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
181
181
  !componentShowStateRef.current && dealPageScrollInfo(res,true)
182
182
  })
183
183
  }
184
184
  }, [])
185
185
  useEffect(() => {
186
186
  if((!needShowHighVersion && componentShowState === true) ||
187
187
  (needShowHighVersion && inView && isH5AndJdShopView)
188
188
  ) {
189
189
  console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!')
190
190
  const modularPackResult = floorData?.floorExtInfo?.modularPackResult
191
191
  const modularPackResultObj = typeof modularPackResult === 'string' ? JSON.parse(modularPackResult) : modularPackResult
192
192
  if (modularPackResultObj && modularPackResultObj.bundleUrl) {
193
193
  const { bundleUrl } = modularPackResultObj
194
194
  nativePageRegisterMessage(
195
195
  Message_Type.NATIVE_INJECT_JS_FILE,
196
196
  {
197
197
  data: {
198
198
  "bundleUrl": [bundleUrl]
199
199
  },
200
200
  },
201
201
  )
202
202
  }
203
203
  }
204
204
  }, [componentShowState,inView])
205
205
 
206
206
  const dealPageScrollInfo = (res,pageScrollTrigger) => {
207
207
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
208
208
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
209
209
  const shopId = floorData?.floorExtInfo?.shopId
210
210
  if(!lazyLayoutLoadErrorShopId[`${shopId}`] && pageScrollTrigger) {
211
211
  const opt = {
212
212
  msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
213
213
  uid: floorData?.uid,
214
214
  floorIdx: floorData?.floorIdx,
215
215
  shopId: shopId,
216
216
  moduleId: floorData?.moduleId,
217
217
  moduleName: floorData?.moduleName,
218
218
  middleTemplateId: floorData?.middleTemplateId,
219
219
  modularPackResult: typeof floorData?.floorExtInfo?.modularPackResult == 'string' ? JSON.parse(floorData?.floorExtInfo?.modularPackResult) : floorData?.floorExtInfo?.modularPackResult,
220
220
  }
221
221
  sgmCustomReport({
222
222
  code: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
223
223
  msg: opt,
224
224
  })
225
225
  lazyLayoutLoadErrorShopId[`${shopId}`] = true
226
226
  }
227
227
  return
228
228
  }
229
229
  if (componentLazyRef.current) {
230
230
  const eleClientRect =
231
231
  componentLazyRef.current.getBoundingClientRect()
232
232
  const getContainerHeightOffSetY = displayHeight + offSetY
233
233
  const eleOffsetTop = Math.ceil(eleClientRect.top)
234
234
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
235
235
  const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight
236
236
  if (!componentShowStateRef.current) {
237
237
  if (getContainerHeightOffSetY > eleOffsetTop) {
238
238
  componentShowStateRef.current = true
239
239
  setComponentShowState(true)
240
240
  Taro.nextTick(() => {
241
241
  setComponentRenderShowState(true)
242
242
  })
243
243
  }
244
244
  }
245
245
  }
246
246
  }
247
247
  return isH5AndJdShopView && !needShowHighVersion ? (
248
248
  <div
249
249
  id={`${containerId}_lazy`}
250
250
  ref={componentLazyRef}
251
251
  className={classNames(
252
252
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
253
253
  'd-app-floor-lazy-load',
254
254
  )}
255
255
  style={{
256
256
  minHeight: `${
257
257
  componentRenderShowState ? 'auto' : height + 'px'
258
258
  }`,
259
259
  backgroundColor: componentRenderShowState
260
260
  ? 'transparent'
261
261
  : '#ffffff',
262
262
  }}
263
263
  >
264
264
  {componentShowState ? children : placeholder}
265
265
  </div>
266
266
  ) : (
267
267
  <div
268
268
  id={`${containerId}_lazy`}
269
269
  className={classNames(
270
270
  lazyLayoutLoadStyle['d-mobile-floor-lazy-layout-load'],
271
271
  'd-mobile-floor-lazy-load',
272
272
  lazyNodeClassName,
273
273
  )}
274
274
  ref={ref}
275
275
  style={{
276
276
  minHeight: `${inView ? 'auto' : height + 'px'}`,
277
277
  backgroundColor: inView ? 'transparent' : '#ffffff',
278
278
  }}
279
279
  >
280
280
  {}
281
281
  {inView ? children : placeholder}
282
282
  </div>
283
283
  )
284
284
  sectionType:
285
285
  SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
286
286
  type: LazyType.FLOOR,
287
287
  children: null,
288
288
  placeholder: null,
289
289
  height: 200,
290
290
  className: '',
291
291
  lazyNodeClassName: '',