@@ -10,12 +10,15 @@ export const OverflowContext = React.createContext<{
10
10
prefixCls : string ;
11
11
responsive : boolean ;
12
12
order : number ;
13
- item : any ;
14
- itemKey : React . Key ;
15
13
registerSize : ( key : React . Key , width : number | null ) => void ;
16
14
display : boolean ;
17
15
18
- // renderItem={mergedRenderItem}
16
+ // Item Usage
17
+ item ?: any ;
18
+ itemKey ?: React . Key ;
19
+
20
+ // Rest Usage
21
+ className ?: string ;
19
22
} > ( null ) ;
20
23
21
24
const RESPONSIVE = 'responsive' as const ;
@@ -41,6 +44,8 @@ export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
41
44
renderRest ?:
42
45
| React . ReactNode
43
46
| ( ( omittedItems : ItemType [ ] ) => React . ReactNode ) ;
47
+ /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
48
+ renderRawRest ?: ( omittedItems : ItemType [ ] ) => React . ReactElement ;
44
49
suffix ?: React . ReactNode ;
45
50
component ?: ComponentType ;
46
51
itemComponent ?: ComponentType ;
@@ -64,7 +69,8 @@ function Overflow<ItemType = any>(
64
69
style,
65
70
className,
66
71
maxCount,
67
- renderRest = defaultRenderRest ,
72
+ renderRest,
73
+ renderRawRest,
68
74
suffix,
69
75
component : Component = 'div' ,
70
76
itemComponent,
@@ -149,7 +155,7 @@ function Overflow<ItemType = any>(
149
155
}
150
156
151
157
function registerSize ( key : React . Key , width : number | null ) {
152
- setItemWidths ( ( origin ) => {
158
+ setItemWidths ( origin => {
153
159
const clone = new Map ( origin ) ;
154
160
155
161
if ( width === null ) {
@@ -248,7 +254,7 @@ function Overflow<ItemType = any>(
248
254
component : itemComponent ,
249
255
} ;
250
256
251
- // Choice render fun by `renderRawItem`
257
+ // >>>>> Choice render fun by `renderRawItem`
252
258
const internalRenderItemNode = renderRawItem
253
259
? ( item : ItemType , index : number ) => {
254
260
const key = getKey ( item , index ) ;
@@ -286,6 +292,42 @@ function Overflow<ItemType = any>(
286
292
) ;
287
293
} ;
288
294
295
+ // >>>>> Rest node
296
+ let restNode : React . ReactNode ;
297
+ const restContextProps = {
298
+ order : displayRest ? displayCount : Number . MAX_SAFE_INTEGER ,
299
+ className : `${ itemPrefixCls } -rest` ,
300
+ registerSize : registerOverflowSize ,
301
+ display : displayRest ,
302
+ } ;
303
+
304
+ if ( ! renderRawRest ) {
305
+ const mergedRenderRest = renderRest || defaultRenderRest ;
306
+
307
+ restNode = (
308
+ < Item
309
+ { ...itemSharedProps }
310
+ // When not show, order should be the last
311
+ { ...restContextProps }
312
+ >
313
+ { typeof mergedRenderRest === 'function'
314
+ ? mergedRenderRest ( omittedItems )
315
+ : mergedRenderRest }
316
+ </ Item >
317
+ ) ;
318
+ } else if ( renderRawRest ) {
319
+ restNode = (
320
+ < OverflowContext . Provider
321
+ value = { {
322
+ ...itemSharedProps ,
323
+ ...restContextProps ,
324
+ } }
325
+ >
326
+ { renderRawRest ( omittedItems ) }
327
+ </ OverflowContext . Provider >
328
+ ) ;
329
+ }
330
+
289
331
let overflowNode = (
290
332
< Component
291
333
className = { classNames ( prefixCls , className ) }
@@ -296,20 +338,7 @@ function Overflow<ItemType = any>(
296
338
{ mergedData . map ( internalRenderItemNode ) }
297
339
298
340
{ /* Rest Count Item */ }
299
- { showRest ? (
300
- < Item
301
- { ...itemSharedProps }
302
- // When not show, order should be the last
303
- order = { displayRest ? displayCount : Number . MAX_SAFE_INTEGER }
304
- className = { `${ itemPrefixCls } -rest` }
305
- registerSize = { registerOverflowSize }
306
- display = { displayRest }
307
- >
308
- { typeof renderRest === 'function'
309
- ? renderRest ( omittedItems )
310
- : renderRest }
311
- </ Item >
312
- ) : null }
341
+ { showRest ? restNode : null }
313
342
314
343
{ /* Suffix Node */ }
315
344
{ suffix && (
0 commit comments