@conecli/cone-render 0.10.1-shop-beta.21 → 0.10.1-shop-beta.22

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 from 'react';
2
1
  NETWORK_DATA_TYPE,
3
2
  M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
4
3
  APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
5
4
  containerFloorListData: ComponentInterFace.ContainerItemData[];
6
5
  className?: string;
7
6
  containerItemClass?: object;
8
7
  style?: object;
9
8
  hasGoodsFeeds?: boolean;
10
9
  builtInComponents?: object;
11
10
  loadingEndComponentFn?: functionType;
12
11
  sectionType?: string;
13
12
  updateShopFloorDataFn?: functionType;
14
13
  updateContainerFloorListDataFn?: functionType;
15
14
  refreshFloorListDataFn?: functionType;
16
15
  refreshFloorListDataBtnLabel?: string;
17
16
  customErrorIsvFloorModule?: React.ReactElement;
18
17
  componentExtend?: React.ReactElement;
19
18
  luxuryFixedIndex?: number;
20
19
  isContainerListHasMarginBottom?: boolean;
21
20
  switchConfig?: {
22
21
  [key: string]: any;
23
22
  };
24
23
  const { windowHeight } = taroJdBaseInfo.info.sysInfo;
25
24
  const {
26
25
  className,
27
26
  style,
28
27
  containerItemClass = null,
29
28
  containerFloorListData,
30
29
  builtInComponents,
31
30
  loadingEndComponentFn,
32
31
  sectionType,
33
32
  updateShopFloorDataFn,
34
33
  updateContainerFloorListDataFn,
35
34
  refreshFloorListDataFn,
36
35
  refreshFloorListDataBtnLabel,
37
36
  customErrorIsvFloorModule,
38
37
  luxuryFixedIndex = -1,
39
38
  isContainerListHasMarginBottom,
40
39
  switchConfig,
41
40
  } = props;
42
41
  const emptyFloorListHidden = switchConfig?.emptyFloorListHidden || false;
43
42
  const isSageShop = taroJdBaseInfo.info?.pageInfo?.isSageShop;
44
43
  const isHasMarginBottom = isContainerListHasMarginBottom ?? !isSageShop;
45
44
 
46
45
  const hasLiveForSageShop =
47
46
  isSageShop && taroJdBaseInfo.info?.pageInfo?.isJdShowNativeImmersivePlayer;
48
47
 
49
48
  const renderFloorItem = (
50
49
  item,
51
50
  floorItem,
52
51
  floorIndex,
53
52
  containerLayoutLeftRightMargin,
54
53
  lazyLoadState = false,
55
54
  index,
56
55
  borderStyle,
57
56
  ) => {
58
57
  return (
59
58
  <View
60
59
  className={classNames(shopContainerListStyle['d-floor-item'])}
61
60
  data-floor-uid={floorItem?.uid}
62
61
  data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
63
62
  data-lazy-load={lazyLoadState}
64
63
  key={floorItem.uid}
65
64
  id={`J_floor_${floorItem.uid}`}
66
65
  style={borderStyle}
67
66
  >
68
67
  {isChartH5 && (
69
68
  <View
70
69
  className={shopContainerListStyle['d-floor-chart-item']}
71
70
  id={`J_chart_floor_${floorItem?.uid}`}
72
71
  data-floor-uid={floorItem?.uid}
73
72
  data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
74
73
  />
75
74
  )}
76
75
  <FloorListItem
77
76
  floorIndex={floorIndex}
78
77
  floorData={floorItem}
79
78
  layoutLeftRightMargin={containerLayoutLeftRightMargin}
80
79
  containerBorderRadius={borderStyle}
81
80
  updateShopFloorDataFn={updateShopFloorDataFn}
82
81
  loadingEndComponentFn={loadingEndComponentFn}
83
82
  key={floorItem.uid}
84
83
  builtInComponents={builtInComponents}
85
84
  updateContainerFloorListDataFn={updateContainerFloorListDataFn}
86
85
  customErrorIsvFloorModule={customErrorIsvFloorModule}
87
86
  />
88
87
  {index === luxuryFixedIndex ? props.children : null}
89
88
  </View>
90
89
  );
91
90
  };
92
91
 
93
92
  const getFloorSetHeight = (item) => {
94
93
  const getHeight = item?.floorExtInfo?.floorHeight
95
94
  ? Number(item?.floorExtInfo?.floorHeight)
96
95
  : 200;
97
96
  return getHeight > 0 ? getHeight : 200;
98
97
  };
99
98
  const containerFloorListDataLen = containerFloorListData.length;
100
99
 
101
100
  const getNoDataContainerHeight = () => {
102
101
  const changeHeight = hasLiveForSageShop
103
102
  ? windowHeight
104
103
  : windowHeight -
105
104
  (isJdApp
106
105
  ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
107
106
  : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT);
108
107
  return {
109
108
  height: `${changeHeight}px`,
110
109
  };
111
110
  };
112
111
  return (
113
112
  <View
114
113
  className={classNames(className, shopContainerListStyle['d-shop-container-list'])}
115
114
  style={style}
116
115
  >
117
116
  <View
118
117
  id="J_shopContainerFloorList"
119
118
  className={
120
119
  isHasMarginBottom
121
120
  ? shopContainerListStyle['d-container-list-with-margin-bottom']
122
121
  : shopContainerListStyle['d-container-list-no-margin-bottom']
123
122
  }
124
123
  >
125
124
  {containerFloorListDataLen > 0 ? (
126
125
  containerFloorListData.map((item, index) => {
127
126
  const containerLayoutLeftRightMargin = (item.marginLeft || 0) + (item.marginRight || 0);
128
127
  const getContainerId = `J_container_${item.containerId}`;
129
128
  const borderStyle = getBorderStyle(
130
129
  item,
131
130
  index,
132
131
  containerFloorListData,
133
132
  containerFloorListDataLen,
134
133
  );
135
134
  return (
136
135
  <React.Fragment key={item.containerId + index}>
137
136
  {item.addLuxuryStyle ? (
138
137
  <View className={shopContainerListStyle['d-luxury-header']} />
139
138
  ) : null}
140
139
  {item.addLuxuryBackupStyle ? (
141
140
  <View
142
141
  style={{
143
142
  height: taroJdBaseInfo?.info?.sysInfo?.jdNativeHeaderHeight + 'px',
144
143
  }}
145
144
  className={shopContainerListStyle['d-luxury-header-black']}
146
145
  />
147
146
  ) : null}
148
147
  {typeof item?.renderExtendComponent === 'function'
149
148
  ? item?.renderExtendComponent(item?.floorExtendData)
150
149
  : null}
151
150
  <View
152
151
  className={classNames(
153
152
  shopContainerListStyle['d-container-item'],
154
153
  containerItemClass,
155
154
  )}
156
155
  id={getContainerId}
157
156
  key={item.containerId}
158
157
  data-container-id={item?.containerId}
159
158
  data-container-type={item?.typeCode}
160
159
  style={{
161
160
  marginBottom: item.marginBottom ? `${item.marginBottom}px` : 0,
162
161
  marginTop: item.marginTop ? `${item.marginTop}px` : 0,
163
162
  marginLeft: item.marginLeft ? `${item.marginLeft}px` : 0,
164
163
  marginRight: item.marginRight ? `${item.marginRight}px` : 0,
165
164
  borderTopLeftRadius: borderStyle?.borderTopLeftRadius || `0px`,
166
165
  borderTopRightRadius: borderStyle?.borderTopRightRadiu || `0px`,
167
166
  borderBottomLeftRadius: borderStyle?.borderBottomLeftRadius || `0px`,
168
167
  borderBottomRightRadius: borderStyle?.borderBottomRightRadius || `0px`,
169
168
  '--container-layout-left-right-margin': `${containerLayoutLeftRightMargin}px`,
170
169
  }}
171
170
  >
172
171
  {typeof item?.insertContainerStartComponent === 'function'
173
172
  ? item?.insertContainerStartComponent(item)
174
173
  : null}
175
174
  {item.floors &&
176
175
  item.floors.length > 0 &&
177
176
  item.floors?.map((floorItem, floorIndex) => {
178
177
  return index > lazyLoadStartIndex ? (
179
178
  <LazyLayoutLoad
180
179
  key={item.containerId}
181
180
  sectionType={sectionType}
182
181
  containerId={getContainerId}
183
182
  height={getFloorSetHeight(floorItem)}
184
183
  floorData={floorItem}
185
184
  >
186
185
  {renderFloorItem(
187
186
  item,
188
187
  floorItem,
189
188
  floorIndex,
190
189
  containerLayoutLeftRightMargin,
191
190
  true,
192
191
  index,
193
192
  borderStyle,
194
193
  )}
195
194
  </LazyLayoutLoad>
196
195
  ) : (
197
196
  renderFloorItem(
198
197
  item,
199
198
  floorItem,
200
199
  floorIndex,
201
200
  containerLayoutLeftRightMargin,
202
201
  false,
203
202
  index,
204
203
  borderStyle,
205
204
  )
206
205
  );
207
206
  })}
208
207
  </View>
209
208
  </React.Fragment>
210
209
  );
211
210
  })
212
211
  ) : !emptyFloorListHidden ? (
213
212
  <View
214
213
  className={classNames(shopContainerListStyle['d-container-list-no-data'], {
215
214
  [shopContainerListStyle['d-sage-shop-no-data']]: hasLiveForSageShop,
216
215
  })}
217
216
  style={getNoDataContainerHeight()}
218
217
  >
219
218
  <NetworkDataError
220
219
  netWorkShowType={NetWorkShowType.PART}
221
220
  netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
222
221
  backgroundColorWhite={hasLiveForSageShop}
223
222
  refreshCallBackFn={refreshFloorListDataFn ? refreshFloorListDataFn : null}
224
223
  btnLabel={refreshFloorListDataBtnLabel || ''}
225
224
  />
226
225
  </View>
227
226
  ) : null}
228
227
  </View>
229
228
  </View>
230
229
  );
231
230
  updateShopDataFn: null,
231
+ import React from 'react';
232
232
  NETWORK_DATA_TYPE,
233
233
  M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
234
234
  APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT,
235
235
  containerFloorListData: ComponentInterFace.ContainerItemData[];
236
236
  extendInfoData?: object;
237
237
  className?: string;
238
238
  containerItemClass?: object;
239
239
  style?: object;
240
240
  hasGoodsFeeds?: boolean;
241
241
  builtInComponents?: object;
242
242
  loadingEndComponentFn?: functionType;
243
243
  sectionType?: string;
244
244
  updateShopFloorDataFn?: functionType;
245
245
  updateContainerFloorListDataFn?: functionType;
246
246
  refreshFloorListDataFn?: functionType;
247
247
  refreshFloorListDataBtnLabel?: string;
248
248
  customErrorIsvFloorModule?: React.ReactElement;
249
249
  componentExtend?: React.ReactElement;
250
250
  luxuryFixedIndex?: number;
251
251
  isContainerListHasMarginBottom?: boolean;
252
252
  switchConfig?: {
253
253
  [key: string]: any;
254
254
  };
255
255
  const { windowHeight } = taroJdBaseInfo.info.sysInfo;
256
256
  const {
257
257
  className,
258
258
  style,
259
259
  containerItemClass = null,
260
260
  containerFloorListData,
261
261
  extendInfoData,
262
262
  builtInComponents,
263
263
  loadingEndComponentFn,
264
264
  sectionType,
265
265
  updateShopFloorDataFn,
266
266
  updateContainerFloorListDataFn,
267
267
  refreshFloorListDataFn,
268
268
  refreshFloorListDataBtnLabel,
269
269
  customErrorIsvFloorModule,
270
270
  luxuryFixedIndex = -1,
271
271
  isContainerListHasMarginBottom,
272
272
  switchConfig,
273
273
  } = props;
274
274
  const emptyFloorListHidden = switchConfig?.emptyFloorListHidden || false;
275
275
  const isSageShop = taroJdBaseInfo.info?.pageInfo?.isSageShop;
276
276
  const isHasMarginBottom = isContainerListHasMarginBottom ?? !isSageShop;
277
277
 
278
278
  const hasLiveForSageShop =
279
279
  isSageShop && taroJdBaseInfo.info?.pageInfo?.isJdShowNativeImmersivePlayer;
280
280
 
281
281
  const renderFloorItem = (
282
282
  item,
283
283
  floorItem,
284
284
  floorIndex,
285
285
  containerLayoutLeftRightMargin,
286
286
  lazyLoadState = false,
287
287
  index,
288
288
  borderStyle,
289
289
  ) => {
290
290
  return (
291
291
  <View
292
292
  className={classNames(shopContainerListStyle['d-floor-item'])}
293
293
  data-floor-uid={floorItem?.uid}
294
294
  data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
295
295
  data-lazy-load={lazyLoadState}
296
296
  key={floorItem.uid}
297
297
  id={`J_floor_${floorItem.uid}`}
298
298
  style={borderStyle}
299
299
  >
300
300
  {isChartH5 && (
301
301
  <View
302
302
  className={shopContainerListStyle['d-floor-chart-item']}
303
303
  id={`J_chart_floor_${floorItem?.uid}`}
304
304
  data-floor-uid={floorItem?.uid}
305
305
  data-floor-type={floorItem?.floorExtInfo?.moduleFlag || ''}
306
306
  />
307
307
  )}
308
308
  <FloorListItem
309
309
  floorIndex={floorIndex}
310
310
  floorData={floorItem}
311
311
  layoutLeftRightMargin={containerLayoutLeftRightMargin}
312
312
  containerBorderRadius={borderStyle}
313
313
  updateShopFloorDataFn={updateShopFloorDataFn}
314
314
  loadingEndComponentFn={loadingEndComponentFn}
315
315
  extendInfoData={
316
316
  passExtendInfoModuleWhiteList.includes(floorItem?.floorExtInfo?.moduleFlag)
317
317
  ? extendInfoData
318
318
  : undefined
319
319
  }
320
320
  key={floorItem.uid}
321
321
  builtInComponents={builtInComponents}
322
322
  updateContainerFloorListDataFn={updateContainerFloorListDataFn}
323
323
  customErrorIsvFloorModule={customErrorIsvFloorModule}
324
324
  />
325
325
  {index === luxuryFixedIndex ? props.children : null}
326
326
  </View>
327
327
  );
328
328
  };
329
329
 
330
330
  const getFloorSetHeight = (item) => {
331
331
  const getHeight = item?.floorExtInfo?.floorHeight
332
332
  ? Number(item?.floorExtInfo?.floorHeight)
333
333
  : 200;
334
334
  return getHeight > 0 ? getHeight : 200;
335
335
  };
336
336
  const containerFloorListDataLen = containerFloorListData.length;
337
337
 
338
338
  const getNoDataContainerHeight = () => {
339
339
  const changeHeight = hasLiveForSageShop
340
340
  ? windowHeight
341
341
  : windowHeight -
342
342
  (isJdApp
343
343
  ? APP_SHOP_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT
344
344
  : M_SHOP_DOWNLOAD_HEADER_NAV_BAR_BOTTOM_MENU_HEIGHT);
345
345
  return {
346
346
  height: `${changeHeight}px`,
347
347
  };
348
348
  };
349
349
  return (
350
350
  <View
351
351
  className={classNames(className, shopContainerListStyle['d-shop-container-list'])}
352
352
  style={style}
353
353
  >
354
354
  <View
355
355
  id="J_shopContainerFloorList"
356
356
  className={
357
357
  isHasMarginBottom
358
358
  ? shopContainerListStyle['d-container-list-with-margin-bottom']
359
359
  : shopContainerListStyle['d-container-list-no-margin-bottom']
360
360
  }
361
361
  >
362
362
  {containerFloorListDataLen > 0 ? (
363
363
  containerFloorListData.map((item, index) => {
364
364
  const containerLayoutLeftRightMargin = (item.marginLeft || 0) + (item.marginRight || 0);
365
365
  const getContainerId = `J_container_${item.containerId}`;
366
366
  const borderStyle = getBorderStyle(
367
367
  item,
368
368
  index,
369
369
  containerFloorListData,
370
370
  containerFloorListDataLen,
371
371
  );
372
372
  return (
373
373
  <React.Fragment key={item.containerId + index}>
374
374
  {item.addLuxuryStyle ? (
375
375
  <View className={shopContainerListStyle['d-luxury-header']} />
376
376
  ) : null}
377
377
  {item.addLuxuryBackupStyle ? (
378
378
  <View
379
379
  style={{
380
380
  height: taroJdBaseInfo?.info?.sysInfo?.jdNativeHeaderHeight + 'px',
381
381
  }}
382
382
  className={shopContainerListStyle['d-luxury-header-black']}
383
383
  />
384
384
  ) : null}
385
385
  {typeof item?.renderExtendComponent === 'function'
386
386
  ? item?.renderExtendComponent(item?.floorExtendData)
387
387
  : null}
388
388
  <View
389
389
  className={classNames(
390
390
  shopContainerListStyle['d-container-item'],
391
391
  containerItemClass,
392
392
  )}
393
393
  id={getContainerId}
394
394
  key={item.containerId}
395
395
  data-container-id={item?.containerId}
396
396
  data-container-type={item?.typeCode}
397
397
  data-container-index={index}
398
398
  style={{
399
399
  marginBottom: item.marginBottom ? `${item.marginBottom}px` : 0,
400
400
  marginTop: item.marginTop ? `${item.marginTop}px` : 0,
401
401
  marginLeft: item.marginLeft ? `${item.marginLeft}px` : 0,
402
402
  marginRight: item.marginRight ? `${item.marginRight}px` : 0,
403
403
  borderTopLeftRadius: borderStyle?.borderTopLeftRadius || `0px`,
404
404
  borderTopRightRadius: borderStyle?.borderTopRightRadiu || `0px`,
405
405
  borderBottomLeftRadius: borderStyle?.borderBottomLeftRadius || `0px`,
406
406
  borderBottomRightRadius: borderStyle?.borderBottomRightRadius || `0px`,
407
407
  '--container-layout-left-right-margin': `${containerLayoutLeftRightMargin}px`,
408
408
  }}
409
409
  >
410
410
  {typeof item?.insertContainerStartComponent === 'function'
411
411
  ? item?.insertContainerStartComponent(item)
412
412
  : null}
413
413
  {item.floors &&
414
414
  item.floors.length > 0 &&
415
415
  item.floors?.map((floorItem, floorIndex) => {
416
416
  return index > lazyLoadStartIndex ? (
417
417
  <LazyLayoutLoad
418
418
  key={item.containerId}
419
419
  sectionType={sectionType}
420
420
  containerId={getContainerId}
421
421
  height={getFloorSetHeight(floorItem)}
422
422
  floorData={floorItem}
423
423
  >
424
424
  {renderFloorItem(
425
425
  item,
426
426
  floorItem,
427
427
  floorIndex,
428
428
  containerLayoutLeftRightMargin,
429
429
  true,
430
430
  index,
431
431
  borderStyle,
432
432
  )}
433
433
  </LazyLayoutLoad>
434
434
  ) : (
435
435
  renderFloorItem(
436
436
  item,
437
437
  floorItem,
438
438
  floorIndex,
439
439
  containerLayoutLeftRightMargin,
440
440
  false,
441
441
  index,
442
442
  borderStyle,
443
443
  )
444
444
  );
445
445
  })}
446
446
  </View>
447
447
  </React.Fragment>
448
448
  );
449
449
  })
450
450
  ) : !emptyFloorListHidden ? (
451
451
  <View
452
452
  className={classNames(shopContainerListStyle['d-container-list-no-data'], {
453
453
  [shopContainerListStyle['d-sage-shop-no-data']]: hasLiveForSageShop,
454
454
  })}
455
455
  style={getNoDataContainerHeight()}
456
456
  >
457
457
  <NetworkDataError
458
458
  netWorkShowType={NetWorkShowType.PART}
459
459
  netWorkDataType={NETWORK_DATA_TYPE.DATA_ERROR}
460
460
  backgroundColorWhite={hasLiveForSageShop}
461
461
  refreshCallBackFn={refreshFloorListDataFn ? refreshFloorListDataFn : null}
462
462
  btnLabel={refreshFloorListDataBtnLabel || ''}
463
463
  />
464
464
  </View>
465
465
  ) : null}
466
466
  </View>
467
467
  </View>
468
468
  );
469
469
  updateShopDataFn: null,