@conecli/cone-render 0.9.1-shop2.37 → 0.9.1-shop2.39

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