Skip to content

Commit b45ca42

Browse files
committed
feat: add renderRawRest
1 parent 979f57b commit b45ca42

File tree

2 files changed

+60
-21
lines changed

2 files changed

+60
-21
lines changed

src/Overflow.tsx

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@ export const OverflowContext = React.createContext<{
1010
prefixCls: string;
1111
responsive: boolean;
1212
order: number;
13-
item: any;
14-
itemKey: React.Key;
1513
registerSize: (key: React.Key, width: number | null) => void;
1614
display: boolean;
1715

18-
// renderItem={mergedRenderItem}
16+
// Item Usage
17+
item?: any;
18+
itemKey?: React.Key;
19+
20+
// Rest Usage
21+
className?: string;
1922
}>(null);
2023

2124
const RESPONSIVE = 'responsive' as const;
@@ -41,6 +44,8 @@ export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
4144
renderRest?:
4245
| React.ReactNode
4346
| ((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;
4449
suffix?: React.ReactNode;
4550
component?: ComponentType;
4651
itemComponent?: ComponentType;
@@ -64,7 +69,8 @@ function Overflow<ItemType = any>(
6469
style,
6570
className,
6671
maxCount,
67-
renderRest = defaultRenderRest,
72+
renderRest,
73+
renderRawRest,
6874
suffix,
6975
component: Component = 'div',
7076
itemComponent,
@@ -149,7 +155,7 @@ function Overflow<ItemType = any>(
149155
}
150156

151157
function registerSize(key: React.Key, width: number | null) {
152-
setItemWidths((origin) => {
158+
setItemWidths(origin => {
153159
const clone = new Map(origin);
154160

155161
if (width === null) {
@@ -248,7 +254,7 @@ function Overflow<ItemType = any>(
248254
component: itemComponent,
249255
};
250256

251-
// Choice render fun by `renderRawItem`
257+
// >>>>> Choice render fun by `renderRawItem`
252258
const internalRenderItemNode = renderRawItem
253259
? (item: ItemType, index: number) => {
254260
const key = getKey(item, index);
@@ -286,6 +292,42 @@ function Overflow<ItemType = any>(
286292
);
287293
};
288294

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+
289331
let overflowNode = (
290332
<Component
291333
className={classNames(prefixCls, className)}
@@ -296,20 +338,7 @@ function Overflow<ItemType = any>(
296338
{mergedData.map(internalRenderItemNode)}
297339

298340
{/* 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}
313342

314343
{/* Suffix Node */}
315344
{suffix && (

src/RawItem.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import classNames from 'classnames';
23
import Item from './Item';
34
import { ComponentType, OverflowContext } from './Overflow';
45

@@ -16,5 +17,14 @@ export default function RawItem(props: RawItemProps) {
1617
return <Component {...restProps} />;
1718
}
1819

19-
return <Item {...context} {...props} />;
20+
const { className: contextClassName, ...restContext } = context;
21+
const { className, ...restProps } = props;
22+
23+
return (
24+
<Item
25+
className={classNames(contextClassName, className)}
26+
{...restContext}
27+
{...restProps}
28+
/>
29+
);
2030
}

0 commit comments

Comments
 (0)