@conecli/cone-render 0.10.1-beta.4 → 0.10.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.
Files changed (7) hide show
  1. package/dist/components/base/LazyLoadImage/index.h5.tsx +1 -1
  2. package/dist/components/base/LazyLoadImage/index.tsx +1 -1
  3. package/dist/components/decorate/PlaceHolder/index.tsx +1 -1
  4. package/dist/components/floorItem.jd.tsx +1 -1
  5. package/dist/components/floorItem.tsx +1 -1
  6. package/dist/components/floorItem.weapp.tsx +1 -1
  7. package/package.json +2 -1
package/dist/components/base/LazyLoadImage/index.h5.tsx CHANGED
@@ -1 +1 @@
1
- import React, { useCallback, useEffect, useRef, useState } from "react";
2
1
  getQualityImage,
3
2
  isH5AndJdShopView,
4
3
  isJdApp,
5
4
  isChartH5,
6
5
  isH5AndJdShopViewH5Scroll,
7
6
  isAppStowShop,
8
7
  getSgmCustomCode,
9
8
  sgmCustomReport,
10
9
  isImageOptimizeEnable,
11
10
  getNativePageScrollRes,
12
11
  latestFromNativeMsgStorage,
13
12
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=";
14
13
  "https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png";
15
14
  const {
16
15
  src = null,
17
16
  lazyLoad = true,
18
17
  imagRenderingSet = true,
19
18
  width = null,
20
19
  height = null,
21
20
  className = null,
22
21
  isSkuImage = false,
23
22
  hideErrorImage = false,
24
23
  style = null,
25
24
  backgroundColor = null,
26
25
  errorSrc = null,
27
26
  onLoad = null,
28
27
  onError = null,
29
28
  ...otherOption
30
29
  } = props;
31
30
  getNetWorkType === NetWorkTypeQuality.default &&
32
31
  (getNetWorkType = global.info.sysInfo.netWorkType);
33
32
  const [loadSuccess, setLoadSuccess] = useState(false);
34
33
  const [imageErrState, setImageErrState] = useState(false);
35
34
  const [componentShowState, setComponentShowState] = useState(false);
36
35
  const measureRef = useRef<HTMLElement | null>(null);
37
36
  const [measureComplete, setMeasureComplete] = useState(false);
38
37
  const [imgSrc, setImgSrc] = useState(src);
39
38
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false);
40
39
  const hasRetryRef = useRef(false);
41
40
  const componentShowStateRef = useRef(false);
42
41
  const requestSrcRef = useRef(src);
43
42
  const needShowHighVersion =
44
43
  isH5AndJdShopViewH5Scroll &&
45
44
  !(
46
45
  global.info.queryInfo?.downgraded &&
47
46
  global.info.queryInfo.downgraded === "true"
48
47
  );
49
48
  const enableAvifOptimize = isImageOptimizeEnable();
50
49
 
51
50
  const getRequestSrc = useCallback(
52
51
  (src) => {
53
52
  const requestSrc = getQualityImage(imgSrc, {
54
53
  isSkuImage,
55
54
  size: measureRef?.current?.offsetWidth,
56
55
  });
57
56
  requestSrcRef.current = requestSrc;
58
57
  return requestSrc;
59
58
  },
60
59
  [src]
61
60
  );
62
61
 
63
62
  const imageErrorRetry = (src) => {
64
63
  return new Promise((resolve, reject) => {
65
64
  if (fetch && window && window.Image) {
66
65
  fetch(src)
67
66
  .then((response) => {
68
67
  const { ok, status } = response;
69
68
  if (ok) {
70
69
  response.blob().then((blob) => {
71
70
  const url = URL.createObjectURL(blob);
72
71
  const img = new window.Image();
73
72
  img.src = url;
74
73
  img.onload = () => {
75
74
  resolve({
76
75
  ok: true,
77
76
  url,
78
77
  });
79
78
  setTimeout(() => {
80
79
  URL.revokeObjectURL(url);
81
80
  }, 1000);
82
81
  };
83
82
  img.onerror = () => {
84
83
  resolve({
85
84
  ok: false,
86
85
  text: "图片解析异常",
87
86
  type: "imageParseError",
88
87
  });
89
88
  URL.revokeObjectURL(url);
90
89
  };
91
90
  });
92
91
  } else {
93
92
  if (status === 404) {
94
93
  resolve({
95
94
  ok: false,
96
95
  text: "访问图片不存在",
97
96
  type: "noSuchUrlImage",
98
97
  });
99
98
  } else {
100
99
  resolve({
101
100
  ok: false,
102
101
  status: status,
103
102
  text: "其它图片问题",
104
103
  type: "otherImageError",
105
104
  });
106
105
  }
107
106
  }
108
107
  })
109
108
  .catch((error) => {
110
109
  resolve({
111
110
  ok: false,
112
111
  text: "网络异常",
113
112
  type: "networkError",
114
113
  });
115
114
  console.error("LazyLoadImage imageErrorRetry() error:", error);
116
115
  });
117
116
  } else {
118
117
  resolve({
119
118
  ok: false,
120
119
  text: "不支持重试",
121
120
  type: "notSupportRetry",
122
121
  });
123
122
  }
124
123
  });
125
124
  };
126
125
  const imageErrorHandle = useCallback(
127
126
  (e) => {
128
127
  console.log(" ==============> 图片加载错误", e);
129
128
  if (!hasRetryRef.current) {
130
129
  hasRetryRef.current = true;
131
130
  if (src) {
132
131
  try {
133
132
  imageErrorRetry(requestSrcRef.current).then((result) => {
134
133
  const { status, ok, text, type, url } = result || {};
135
134
  if (ok) {
136
135
  setImgSrc(url);
137
136
  setHasRetrySuccess(true);
138
137
  } else {
139
138
  errorSrc && setImgSrc(errorSrc);
140
139
  hideErrorImage && setImageErrState(true);
141
140
  typeof onError === "function" && onError(e, src, props);
142
141
  const { shopId, venderId } = global.info.queryInfo || {};
143
142
  sgmCustomReport({
144
143
  code: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
145
144
  msg: {
146
145
  shopId,
147
146
  venderId,
148
147
  originSrc: src,
149
148
  requestSrc: requestSrcRef.current,
150
149
  status,
151
150
  text,
152
151
  },
153
152
  });
154
153
  }
155
154
  });
156
155
  } catch (e) {
157
156
  console.error("LazyLoadImage imageErrorHandle() error:", e);
158
157
  errorSrc && setImgSrc(errorSrc);
159
158
  hideErrorImage && setImageErrState(true);
160
159
  typeof onError === "function" && onError(e, src, props);
161
160
  }
162
161
  }
163
162
  }
164
163
  },
165
164
  [src, hasRetryRef.current]
166
165
  );
167
166
 
168
167
  const imageLoad = useCallback(
169
168
  (_src, event) => {
170
169
  setLoadSuccess(true);
171
170
  typeof onLoad === "function" && onLoad(event, src, props);
172
171
  },
173
172
  [src]
174
173
  );
175
174
 
176
175
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
177
176
  const changeStyle = {};
178
177
  width && (changeStyle["width"] = width);
179
178
  height && (changeStyle["height"] = height);
180
179
  backgroundColor && (changeStyle["backgroundColor"] = backgroundColor);
181
180
  return changeStyle;
182
181
  };
183
182
  useEffect(() => {
184
183
  setMeasureComplete(true);
185
184
  if (needShowHighVersion) return;
186
185
  const latestRes =
187
186
  latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
188
187
  !componentShowStateRef.current && dealPageScrollInfo(latestRes);
189
188
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
190
189
  !componentShowStateRef.current && dealPageScrollInfo(res);
191
190
  });
192
191
  }, []);
193
192
 
194
193
  const dealPageScrollInfo = (res) => {
195
194
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
196
195
  if (typeof displayHeight === "undefined" || typeof offSetY === "undefined")
197
196
  return;
198
197
  if (measureRef.current) {
199
198
  const eleClientRect = measureRef.current.getBoundingClientRect();
200
199
  const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY;
201
200
  const eleOffsetTop = Math.ceil(eleClientRect.top);
202
201
  const eleOffsetHeight = Math.ceil(eleClientRect.height);
203
202
  if (!componentShowStateRef.current) {
204
203
  if (getContainerHeightOffSetY > eleOffsetTop) {
205
204
  componentShowStateRef.current = true;
206
205
  setComponentShowState(true);
207
206
  }
208
207
  }
209
208
  }
210
209
  };
211
210
  return isH5AndJdShopView &&
212
211
  global?.config?.needImageLazy !== false &&
213
212
  !needShowHighVersion &&
214
213
  !isAppStowShop ? (
215
214
  <View
216
215
  ref={measureRef}
217
216
  className={classNames(
218
217
  imageStyle["d-app-lazy-image"],
219
218
  {
220
219
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
221
220
  },
222
221
  {
223
222
  [imageStyle["d-hide-image-error"]]: imageErrState,
224
223
  },
225
224
  {
226
225
  [imageStyle["d-load-completed"]]: loadSuccess,
227
226
  },
228
227
  {
229
228
  "d-imag-rendering-crisp-edges":
230
229
  !global.info.pageInfo.isVipShop && imagRenderingSet,
231
230
  },
232
231
  "J_html5ImageBg",
233
232
  className
234
233
  )}
235
234
  style={{
236
235
  ...style,
237
236
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
238
237
  }}
239
238
  {...otherOption}
240
239
  >
241
240
  {(componentShowState || lazyLoad === false) && (
242
241
  <img
243
242
  src={getQualityImage(
244
243
  imgSrc,
245
244
  global.info.pageInfo.isVipShop
246
245
  ? NetWorkTypeQuality["perfect"]
247
246
  : NetWorkTypeQuality[getNetWorkType]
248
247
  )}
249
248
  onLoad={imageLoad.bind(this, imgSrc)}
250
249
  onError={imageErrorHandle}
251
250
  />
252
251
  )}
253
252
  </View>
254
253
  ) : enableAvifOptimize ? (
255
254
  [
256
255
  measureComplete ? (
257
256
  <Image
258
257
  key={hasRetrySuccess ? "realImageRetry" : "realImage"}
259
258
  style={{
260
259
  ...style,
261
260
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
262
261
  }}
263
262
  className={classNames(
264
263
  imageStyle["d-lazy-image"],
265
264
  {
266
265
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
267
266
  },
268
267
  {
269
268
  [imageStyle["d-hide-image-error"]]: imageErrState,
270
269
  },
271
270
  {
272
271
  [imageStyle["d-load-completed"]]: loadSuccess,
273
272
  },
274
273
  {
275
274
  "d-imag-rendering-crisp-edges": imagRenderingSet,
276
275
  },
277
276
  className
278
277
  )}
279
278
  src={hasRetrySuccess ? imgSrc : getRequestSrc(imgSrc)}
280
279
  lazyLoad={isChartH5 ? false : lazyLoad}
281
280
  onError={imageErrorHandle}
282
281
  onLoad={imageLoad.bind(this, imgSrc)}
283
282
  {...otherOption}
284
283
  />
285
284
  ) : (
286
285
  <Image
287
286
  key={"defaultImage"}
288
287
  style={{
289
288
  ...style,
290
289
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
291
290
  }}
292
291
  className={classNames(
293
292
  imageStyle["d-lazy-image"],
294
293
  {
295
294
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
296
295
  },
297
296
  {
298
297
  [imageStyle["d-hide-image-error"]]: imageErrState,
299
298
  },
300
299
  {
301
300
  [imageStyle["d-load-completed"]]: loadSuccess,
302
301
  },
303
302
  {
304
303
  "d-imag-rendering-crisp-edges": imagRenderingSet,
305
304
  },
306
305
  className
307
306
  )}
308
307
  src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
309
308
  />
310
309
  ),
311
310
  loadSuccess ? null : <View key={"measureRef"} ref={measureRef}></View>,
312
311
  ]
313
312
  ) : (
314
313
  <Image
315
314
  style={{
316
315
  ...style,
317
316
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
318
317
  }}
319
318
  className={classNames(
320
319
  imageStyle["d-lazy-image"],
321
320
  {
322
321
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
323
322
  },
324
323
  {
325
324
  [imageStyle["d-hide-image-error"]]: imageErrState,
326
325
  },
327
326
  {
328
327
  [imageStyle["d-load-completed"]]: loadSuccess,
329
328
  },
330
329
  {
331
330
  "d-imag-rendering-crisp-edges": imagRenderingSet,
332
331
  },
333
332
  className
334
333
  )}
335
334
  src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
336
335
  lazyLoad={isChartH5 ? false : lazyLoad}
337
336
  onError={imageErrorHandle}
338
337
  onLoad={imageLoad.bind(this, imgSrc)}
339
338
  {...otherOption}
340
339
  />
341
340
  );
341
+ import React, { useCallback, useEffect, useRef, useState } from "react";
342
342
  getQualityImage,
343
343
  isH5AndJdShopView,
344
344
  isJdApp,
345
345
  isChartH5,
346
346
  isH5AndJdShopViewH5Scroll,
347
347
  isAppStowShop,
348
348
  getSgmCustomCode,
349
349
  sgmCustomReport,
350
350
  isImageOptimizeEnable,
351
351
  getNativePageScrollRes,
352
352
  latestFromNativeMsgStorage,
353
353
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=";
354
354
  "https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png";
355
355
  const {
356
356
  src,
357
357
  lazyLoad,
358
358
  imagRenderingSet,
359
359
  width,
360
360
  height,
361
361
  className,
362
362
  isSkuImage,
363
363
  hideErrorImage,
364
364
  style,
365
365
  backgroundColor,
366
366
  errorSrc,
367
367
  onLoad,
368
368
  onError,
369
369
  ...otherOption
370
370
  } = props;
371
371
  getNetWorkType === NetWorkTypeQuality.default &&
372
372
  (getNetWorkType = global.info.sysInfo.netWorkType);
373
373
  const [loadSuccess, setLoadSuccess] = useState(false);
374
374
  const [imageErrState, setImageErrState] = useState(false);
375
375
  const [componentShowState, setComponentShowState] = useState(false);
376
376
  const measureRef = useRef<HTMLElement | null>(null);
377
377
  const [measureComplete, setMeasureComplete] = useState(false);
378
378
  const [imgSrc, setImgSrc] = useState(src);
379
379
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false);
380
380
  const hasRetryRef = useRef(false);
381
381
  const componentShowStateRef = useRef(false);
382
382
  const requestSrcRef = useRef(src);
383
383
  const needShowHighVersion =
384
384
  isH5AndJdShopViewH5Scroll &&
385
385
  !(
386
386
  global.info.queryInfo?.downgraded &&
387
387
  global.info.queryInfo.downgraded === "true"
388
388
  );
389
389
  const enableAvifOptimize = isImageOptimizeEnable();
390
390
 
391
391
  const getRequestSrc = useCallback(
392
392
  (src) => {
393
393
  const requestSrc = getQualityImage(imgSrc, {
394
394
  isSkuImage,
395
395
  size: measureRef?.current?.offsetWidth,
396
396
  });
397
397
  requestSrcRef.current = requestSrc;
398
398
  return requestSrc;
399
399
  },
400
400
  [src]
401
401
  );
402
402
 
403
403
  const imageErrorRetry = (src) => {
404
404
  return new Promise((resolve, reject) => {
405
405
  if (fetch && window && window.Image) {
406
406
  fetch(src)
407
407
  .then((response) => {
408
408
  const { ok, status } = response;
409
409
  if (ok) {
410
410
  response.blob().then((blob) => {
411
411
  const url = URL.createObjectURL(blob);
412
412
  const img = new window.Image();
413
413
  img.src = url;
414
414
  img.onload = () => {
415
415
  resolve({
416
416
  ok: true,
417
417
  url,
418
418
  });
419
419
  setTimeout(() => {
420
420
  URL.revokeObjectURL(url);
421
421
  }, 1000);
422
422
  };
423
423
  img.onerror = () => {
424
424
  resolve({
425
425
  ok: false,
426
426
  text: "图片解析异常",
427
427
  type: "imageParseError",
428
428
  });
429
429
  URL.revokeObjectURL(url);
430
430
  };
431
431
  });
432
432
  } else {
433
433
  if (status === 404) {
434
434
  resolve({
435
435
  ok: false,
436
436
  text: "访问图片不存在",
437
437
  type: "noSuchUrlImage",
438
438
  });
439
439
  } else {
440
440
  resolve({
441
441
  ok: false,
442
442
  status: status,
443
443
  text: "其它图片问题",
444
444
  type: "otherImageError",
445
445
  });
446
446
  }
447
447
  }
448
448
  })
449
449
  .catch((error) => {
450
450
  resolve({
451
451
  ok: false,
452
452
  text: "网络异常",
453
453
  type: "networkError",
454
454
  });
455
455
  console.error("LazyLoadImage imageErrorRetry() error:", error);
456
456
  });
457
457
  } else {
458
458
  resolve({
459
459
  ok: false,
460
460
  text: "不支持重试",
461
461
  type: "notSupportRetry",
462
462
  });
463
463
  }
464
464
  });
465
465
  };
466
466
  const imageErrorHandle = useCallback(
467
467
  (e) => {
468
468
  console.log(" ==============> 图片加载错误", e);
469
469
  if (!hasRetryRef.current) {
470
470
  hasRetryRef.current = true;
471
471
  if (src) {
472
472
  try {
473
473
  imageErrorRetry(requestSrcRef.current).then((result) => {
474
474
  const { status, ok, text, type, url } = result || {};
475
475
  if (ok) {
476
476
  setImgSrc(url);
477
477
  setHasRetrySuccess(true);
478
478
  } else {
479
479
  errorSrc && setImgSrc(errorSrc);
480
480
  hideErrorImage && setImageErrState(true);
481
481
  typeof onError === "function" && onError(e, src, props);
482
482
  const { shopId, venderId } = global.info.queryInfo || {};
483
483
  sgmCustomReport({
484
484
  code: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
485
485
  msg: {
486
486
  shopId,
487
487
  venderId,
488
488
  originSrc: src,
489
489
  requestSrc: requestSrcRef.current,
490
490
  status,
491
491
  text,
492
492
  },
493
493
  });
494
494
  }
495
495
  });
496
496
  } catch (e) {
497
497
  console.error("LazyLoadImage imageErrorHandle() error:", e);
498
498
  errorSrc && setImgSrc(errorSrc);
499
499
  hideErrorImage && setImageErrState(true);
500
500
  typeof onError === "function" && onError(e, src, props);
501
501
  }
502
502
  }
503
503
  }
504
504
  },
505
505
  [src, hasRetryRef.current]
506
506
  );
507
507
 
508
508
  const imageLoad = useCallback(
509
509
  (_src, event) => {
510
510
  setLoadSuccess(true);
511
511
  typeof onLoad === "function" && onLoad(event, src, props);
512
512
  },
513
513
  [src]
514
514
  );
515
515
 
516
516
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
517
517
  const changeStyle = {};
518
518
  width && (changeStyle["width"] = width);
519
519
  height && (changeStyle["height"] = height);
520
520
  backgroundColor && (changeStyle["backgroundColor"] = backgroundColor);
521
521
  return changeStyle;
522
522
  };
523
523
  useEffect(() => {
524
524
  setMeasureComplete(true);
525
525
  if (needShowHighVersion) return;
526
526
  const latestRes =
527
527
  latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
528
528
  !componentShowStateRef.current && dealPageScrollInfo(latestRes);
529
529
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
530
530
  !componentShowStateRef.current && dealPageScrollInfo(res);
531
531
  });
532
532
  }, []);
533
533
 
534
534
  const dealPageScrollInfo = (res) => {
535
535
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
536
536
  if (typeof displayHeight === "undefined" || typeof offSetY === "undefined")
537
537
  return;
538
538
  if (measureRef.current) {
539
539
  const eleClientRect = measureRef.current.getBoundingClientRect();
540
540
  const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY;
541
541
  const eleOffsetTop = Math.ceil(eleClientRect.top);
542
542
  const eleOffsetHeight = Math.ceil(eleClientRect.height);
543
543
  if (!componentShowStateRef.current) {
544
544
  if (getContainerHeightOffSetY > eleOffsetTop) {
545
545
  componentShowStateRef.current = true;
546
546
  setComponentShowState(true);
547
547
  }
548
548
  }
549
549
  }
550
550
  };
551
551
  return isH5AndJdShopView &&
552
552
  global?.config?.needImageLazy !== false &&
553
553
  !needShowHighVersion &&
554
554
  !isAppStowShop ? (
555
555
  <View
556
556
  ref={measureRef}
557
557
  className={classNames(
558
558
  imageStyle["d-app-lazy-image"],
559
559
  {
560
560
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
561
561
  },
562
562
  {
563
563
  [imageStyle["d-hide-image-error"]]: imageErrState,
564
564
  },
565
565
  {
566
566
  [imageStyle["d-load-completed"]]: loadSuccess,
567
567
  },
568
568
  {
569
569
  "d-imag-rendering-crisp-edges":
570
570
  !global.info.pageInfo.isVipShop && imagRenderingSet,
571
571
  },
572
572
  "J_html5ImageBg",
573
573
  className
574
574
  )}
575
575
  style={{
576
576
  ...style,
577
577
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
578
578
  }}
579
579
  {...otherOption}
580
580
  >
581
581
  {(componentShowState || lazyLoad === false) && (
582
582
  <img
583
583
  src={getQualityImage(
584
584
  imgSrc,
585
585
  global.info.pageInfo.isVipShop
586
586
  ? NetWorkTypeQuality["perfect"]
587
587
  : NetWorkTypeQuality[getNetWorkType]
588
588
  )}
589
589
  onLoad={imageLoad.bind(this, imgSrc)}
590
590
  onError={imageErrorHandle}
591
591
  />
592
592
  )}
593
593
  </View>
594
594
  ) : enableAvifOptimize ? (
595
595
  [
596
596
  measureComplete ? (
597
597
  <Image
598
598
  key={hasRetrySuccess ? "realImageRetry" : "realImage"}
599
599
  style={{
600
600
  ...style,
601
601
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
602
602
  }}
603
603
  className={classNames(
604
604
  imageStyle["d-lazy-image"],
605
605
  {
606
606
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
607
607
  },
608
608
  {
609
609
  [imageStyle["d-hide-image-error"]]: imageErrState,
610
610
  },
611
611
  {
612
612
  [imageStyle["d-load-completed"]]: loadSuccess,
613
613
  },
614
614
  {
615
615
  "d-imag-rendering-crisp-edges": imagRenderingSet,
616
616
  },
617
617
  className
618
618
  )}
619
619
  src={hasRetrySuccess ? imgSrc : getRequestSrc(imgSrc)}
620
620
  lazyLoad={isChartH5 ? false : lazyLoad}
621
621
  onError={imageErrorHandle}
622
622
  onLoad={imageLoad.bind(this, imgSrc)}
623
623
  {...otherOption}
624
624
  />
625
625
  ) : (
626
626
  <Image
627
627
  key={"defaultImage"}
628
628
  style={{
629
629
  ...style,
630
630
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
631
631
  }}
632
632
  className={classNames(
633
633
  imageStyle["d-lazy-image"],
634
634
  {
635
635
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
636
636
  },
637
637
  {
638
638
  [imageStyle["d-hide-image-error"]]: imageErrState,
639
639
  },
640
640
  {
641
641
  [imageStyle["d-load-completed"]]: loadSuccess,
642
642
  },
643
643
  {
644
644
  "d-imag-rendering-crisp-edges": imagRenderingSet,
645
645
  },
646
646
  className
647
647
  )}
648
648
  src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
649
649
  />
650
650
  ),
651
651
  loadSuccess ? null : <View key={"measureRef"} ref={measureRef}></View>,
652
652
  ]
653
653
  ) : (
654
654
  <Image
655
655
  style={{
656
656
  ...style,
657
657
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
658
658
  }}
659
659
  className={classNames(
660
660
  imageStyle["d-lazy-image"],
661
661
  {
662
662
  [imageStyle["d-lazy-sku-image"]]: isSkuImage,
663
663
  },
664
664
  {
665
665
  [imageStyle["d-hide-image-error"]]: imageErrState,
666
666
  },
667
667
  {
668
668
  [imageStyle["d-load-completed"]]: loadSuccess,
669
669
  },
670
670
  {
671
671
  "d-imag-rendering-crisp-edges": imagRenderingSet,
672
672
  },
673
673
  className
674
674
  )}
675
675
  src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
676
676
  lazyLoad={isChartH5 ? false : lazyLoad}
677
677
  onError={imageErrorHandle}
678
678
  onLoad={imageLoad.bind(this, imgSrc)}
679
679
  {...otherOption}
680
680
  />
681
681
  );
682
682
  lazyLoad: true,
683
683
  isSkuImage: false,
684
684
  hideErrorImage: false,
685
685
  imagRenderingSet: true,
686
686
  src: null,
687
687
  style: null,
688
688
  width: null,
689
689
  height: null,
690
690
  backgroundColor: null,
691
691
  className: null,
692
692
  errorSrc: null,
693
693
  onLoad: null,
694
694
  onError: null,
package/dist/components/base/LazyLoadImage/index.tsx CHANGED
@@ -1 +1 @@
1
- import React, { useCallback, useState } from 'react'
2
1
  const {
3
2
  src = null,
4
3
  lazyLoad = true,
5
4
  imagRenderingSet = true,
6
5
  width = null,
7
6
  height = null,
8
7
  className = null,
9
8
  isSkuImage = false,
10
9
  hideErrorImage = false,
11
10
  style = null,
12
11
  backgroundColor = null,
13
12
  errorSrc = null,
14
13
  onLoad = null,
15
14
  onError = null,
16
15
  ...otherOption
17
16
  } = props
18
17
  getNetWorkType === NetWorkTypeQuality.default &&
19
18
  (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
20
19
  const [loadSuccess, setLoadSuccess] = useState(false)
21
20
  const [imgSrc, setImgSrc] = useState(src)
22
21
  const [imageErrState, setImageErrState] = useState(false)
23
22
  const imageError = useCallback(
24
23
  (e) => {
25
24
  console.log('图片加载错误', e)
26
25
  errorSrc && setImgSrc(errorSrc)
27
26
  hideErrorImage && setImageErrState(true)
28
27
  typeof onError === 'function' && onError(e, src, props)
29
28
  },
30
29
  [src],
31
30
  )
32
31
 
33
32
  const imageLoad = useCallback(
34
33
  (event) => {
35
34
  setLoadSuccess(true)
36
35
  typeof onLoad === 'function' && onLoad(event, src, props)
37
36
  },
38
37
  [src],
39
38
  )
40
39
 
41
40
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
42
41
  const changeStyle = {}
43
42
  width && (changeStyle['width'] = width)
44
43
  height && (changeStyle['height'] = height)
45
44
  backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
46
45
  return changeStyle
47
46
  }
48
47
  return (
49
48
  <Image
50
49
  style={{
51
50
  ...style,
52
51
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
53
52
  }}
54
53
  className={classNames(
55
54
  imageStyle['d-lazy-image'],
56
55
  {
57
56
  [imageStyle['d-lazy-sku-image']]: isSkuImage,
58
57
  },
59
58
  {
60
59
  [imageStyle['d-hide-image-error']]: imageErrState,
61
60
  },
62
61
  {
63
62
  [imageStyle['d-load-completed']]: loadSuccess,
64
63
  },
65
64
  {
66
65
  'd-imag-rendering-crisp-edges': imagRenderingSet,
67
66
  },
68
67
  className,
69
68
  )}
70
69
  src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
71
70
  lazyLoad={lazyLoad}
72
71
  onError={imageError}
73
72
  onLoad={imageLoad}
74
73
  {...otherOption}
75
74
  />
76
75
  )
76
+ import React, {useCallback, useState} from 'react'
package/dist/components/decorate/PlaceHolder/index.tsx CHANGED
@@ -1 +1 @@
1
- import { View, Text } from '@tarojs/components'
2
1
  const { placeHolderPreContainerId = '-1', containerId } = props
3
2
  return (
4
3
  <View
5
4
  className={classNames(placeHolderStyle['d-place-holder'], {
6
5
  [placeHolderStyle['d-place-holder-active']]:
7
6
  placeHolderPreContainerId === containerId ||
8
7
  placeHolderPreContainerId === EMPTY_LIST_PREFLOOR_ID,
9
8
  })}
10
9
  >
11
10
  <View
12
11
  className={classNames(
13
12
  placeHolderStyle['d-place-holder-border'],
14
13
  'flexible-center-box',
15
14
  )}
16
15
  >
17
16
  <Text className={placeHolderStyle['d-place-holder-text']}>
18
17
  松开鼠标模块会放到这里
19
18
  </Text>
20
19
  </View>
21
20
  </View>
22
21
  )
22
+ import { View, Text } from '@tarojs/components'
package/dist/components/floorItem.jd.tsx CHANGED
@@ -1 +1 @@
1
- import React from 'react'
2
1
  const {
3
2
  floorData,
4
3
  renderSourceType = BUSINESS_TYPE.ONLINE,
5
4
  builtInComponents = {},
6
5
  updateContainerFloorListDataFn,
7
6
  } = props
8
7
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
9
8
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
10
9
  const FloorContentItem =
11
10
  (floorModuleType && builtInComponents[floorModuleType]) || null
12
11
  const dataDefines = getFloorDataToDataDefines(floorData)
13
12
 
14
13
  const renderDecorateDefaultModule = () => {
15
14
  return (
16
15
  <View
17
16
  style={{
18
17
  lineHeight: '120px',
19
18
  textAlign: 'center',
20
19
  }}
21
20
  >
22
21
  当前模块是{floorData.moduleName}
23
22
  </View>
24
23
  )
25
24
  }
26
25
  return FloorContentItem ? (
27
26
  <FloorContentItem {...props} dataDefines={dataDefines} />
28
27
  ) : isDevMode ? (
29
28
  renderDecorateDefaultModule()
30
29
  ) : null
31
30
  switch (moduleId) {
32
31
  case 83158:
33
32
  return 'freeLayout'
34
33
  case 99654:
35
34
  return 'activeText'
36
35
  case 100382:
37
36
  return 'superGoods'
38
37
  }
39
38
  floorList.map((item) => {
40
39
  if (!item.floorExtInfo) {
41
40
  return null
42
41
  }
43
42
  const moduleFlag = item.floorExtInfo.moduleFlag
44
43
  if (!moduleFlag) {
45
44
  const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
46
45
  if (newModuleFlag) {
47
46
  item.floorExtInfo.moduleFlag = newModuleFlag
48
47
  }
49
48
  }
50
49
  })
50
+ import React from 'react'
51
51
  return FloorContentItem ? (
52
52
  <FloorContentItem {...props} dataDefines={dataDefines} />
53
53
  ) : isDevMode ? (
54
54
  renderDecorateDefaultModule()
55
55
  ) : null
package/dist/components/floorItem.tsx CHANGED
@@ -1 +1 @@
1
- import React from 'react'
2
1
  const {
3
2
  floorData,
4
3
  renderSourceType = BUSINESS_TYPE.ONLINE,
5
4
  builtInComponents = {},
6
5
  } = props
7
6
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
8
7
  const floorModuleType: any = floorData?.floorExtInfo?.moduleFlag
9
8
  const FloorContentItem =
10
9
  (floorModuleType && builtInComponents[floorModuleType]) || null
11
10
  const dataDefines = getFloorDataToDataDefines(floorData)
12
11
 
13
12
  const renderDecorateDefaultModule = () => {
14
13
  return (
15
14
  <View
16
15
  style={{
17
16
  lineHeight: '120px',
18
17
  textAlign: 'center',
19
18
  }}
20
19
  >
21
20
  当前模块是{floorData.moduleName}
22
21
  </View>
23
22
  )
24
23
  }
25
24
  if (
26
25
  floorModuleType &&
27
26
  (RemoteLoadFloorList.includes(floorModuleType) ||
28
27
  floorData?.floorExtInfo?.floorLoadWay === 2)
29
28
  ) {
30
29
  return (
31
30
  <RemoteFloorItem {...props} dataDefines={dataDefines}></RemoteFloorItem>
32
31
  )
33
32
  } else {
34
33
  return FloorContentItem ? (
35
34
  <ErrorBoundary {...props}>
36
35
  <FloorContentItem {...props} dataDefines={dataDefines} />
37
36
  </ErrorBoundary>
38
37
  ) : isDevMode ? (
39
38
  renderDecorateDefaultModule()
40
39
  ) : null
41
40
  }
42
41
  switch (moduleId) {
43
42
  case 83158:
44
43
  return 'freeLayout'
45
44
  case 99654:
46
45
  return 'activeText'
47
46
  case 100382:
48
47
  return 'superGoods'
49
48
  }
50
49
  floorList.map((item) => {
51
50
  if (!item.floorExtInfo) {
52
51
  return null
53
52
  }
54
53
  const moduleFlag = item.floorExtInfo.moduleFlag
55
54
  if (!moduleFlag) {
56
55
  const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
57
56
  if (newModuleFlag) {
58
57
  item.floorExtInfo.moduleFlag = newModuleFlag
59
58
  }
60
59
  }
61
60
  })
61
+ import React from 'react'
62
62
  const { floorData, renderSourceType, builtInComponents = {} } = props
63
63
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
64
64
  const floorModuleType: any = floorData?.floorExtInfo?.moduleFlag
65
65
  const FloorContentItem =
66
66
  (floorModuleType && builtInComponents[floorModuleType]) || null
67
67
  const dataDefines = getFloorDataToDataDefines(floorData)
68
68
 
69
69
  const renderDecorateDefaultModule = () => {
70
70
  return (
71
71
  <View
72
72
  style={{
73
73
  lineHeight: '120px',
74
74
  textAlign: 'center',
75
75
  }}
76
76
  >
77
77
  当前模块是{floorData.moduleName}
78
78
  </View>
79
79
  )
80
80
  }
81
81
  if (floorModuleType && (RemoteLoadFloorList.includes(floorModuleType) || floorData?.floorExtInfo?.floorLoadWay === 2)) {
82
82
  return (
83
83
  <RemoteFloorItem {...props} dataDefines={dataDefines}></RemoteFloorItem>
84
84
  )
85
85
  } else {
86
86
  return FloorContentItem ? (
87
87
  <ErrorBoundary {...props}>
88
88
  <FloorContentItem {...props} dataDefines={dataDefines} />
89
89
  </ErrorBoundary>
90
90
  ) : isDevMode ? (
91
91
  renderDecorateDefaultModule()
92
92
  ) : null
93
93
  }
94
94
  renderSourceType: BUSINESS_TYPE.ONLINE,
95
95
  switch (moduleId) {
96
96
  case 83158:
97
97
  return 'freeLayout'
98
98
  case 99654:
99
99
  return 'activeText'
100
100
  case 100382:
101
101
  return 'superGoods'
102
102
  }
103
103
  floorList.map((item) => {
104
104
  if (!item.floorExtInfo) {
105
105
  return null
106
106
  }
107
107
  const moduleFlag = item.floorExtInfo.moduleFlag
108
108
  if (!moduleFlag) {
109
109
  const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
110
110
  if (newModuleFlag) {
111
111
  item.floorExtInfo.moduleFlag = newModuleFlag
112
112
  }
113
113
  }
114
114
  })
package/dist/components/floorItem.weapp.tsx CHANGED
@@ -1 +1 @@
1
- import React from 'react'
2
1
  const {
3
2
  floorData,
4
3
  renderSourceType = BUSINESS_TYPE.ONLINE,
5
4
  builtInComponents = {},
6
5
  updateContainerFloorListDataFn,
7
6
  } = props
8
7
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
9
8
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
10
9
  const FloorContentItem =
11
10
  (floorModuleType && builtInComponents[floorModuleType]) || null
12
11
  const dataDefines = getFloorDataToDataDefines(floorData)
13
12
 
14
13
  const renderDecorateDefaultModule = () => {
15
14
  return (
16
15
  <View
17
16
  style={{
18
17
  lineHeight: '120px',
19
18
  textAlign: 'center',
20
19
  }}
21
20
  >
22
21
  当前模块是{floorData.moduleName}
23
22
  </View>
24
23
  )
25
24
  }
26
25
  return FloorContentItem ? (
27
26
  <ErrorBoundary {...props}>
28
27
  <FloorContentItem {...props} dataDefines={dataDefines} />
29
28
  </ErrorBoundary>
30
29
  ) : isDevMode ? (
31
30
  renderDecorateDefaultModule()
32
31
  ) : null
33
32
  switch (moduleId) {
34
33
  case 83158:
35
34
  return 'freeLayout'
36
35
  case 99654:
37
36
  return 'activeText'
38
37
  case 100382:
39
38
  return 'superGoods'
40
39
  }
41
40
  floorList.map((item) => {
42
41
  if (!item.floorExtInfo) {
43
42
  return null
44
43
  }
45
44
  const moduleFlag = item.floorExtInfo.moduleFlag
46
45
  if (!moduleFlag) {
47
46
  const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
48
47
  if (newModuleFlag) {
49
48
  item.floorExtInfo.moduleFlag = newModuleFlag
50
49
  }
51
50
  }
52
51
  })
52
+ import React from 'react'
53
53
  return FloorContentItem ? (
54
54
  <ErrorBoundary {...props}>
55
55
  <FloorContentItem {...props} dataDefines={dataDefines} />
56
56
  </ErrorBoundary>
57
57
  ) : isDevMode ? (
58
58
  renderDecorateDefaultModule()
59
59
  ) : null
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conecli/cone-render",
3
- "version": "0.10.1-beta.4",
3
+ "version": "0.10.1-isv2.1",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist/"
@@ -78,6 +78,7 @@
78
78
  "@tarojs/taro": "4.0.6",
79
79
  "@tarojs/plugin-framework-react": "4.0.6",
80
80
  "@tarojs/react": "4.0.6",
81
+ "@tarojs/service": "4.0.6",
81
82
  "react-dom": "^18.2.0",
82
83
  "react": "^18.2.0",
83
84
  "art-template": "^4.13.2",