chore: Add renderRawItem support (#10)

* feat: Add raw render

* fix: no memo

* feat: Support renderRawItem

* test: Add test case

* test: Not crash

* test: more test

Author: zombieJ

.prettierrc

@@ -3,5 +3,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }

docs/demo/raw-render.md

@@ -0,0 +1,3 @@
+## Raw Render
+
+<code src="../../examples/raw-render.tsx">

docs/index.md

@@ -2,4 +2,4 @@
 title: rc-overflow
 ---
 
-<embed src="../README.md"></embed>
+<embed src="../README.md" />

examples/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Overflow from 'rc-overflow';
+import Overflow from '../src';
 import '../assets/index.less';
 import './common.less';
 

examples/blink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Overflow from 'rc-overflow';
+import Overflow from '../src';
 import '../assets/index.less';
 import './common.less';
 

examples/fill-width.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Overflow from 'rc-overflow';
+import Overflow from '../src';
 import '../assets/index.less';
 import './common.less';
 

examples/raw-render.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import Overflow from '../src';
+import '../assets/index.less';
+import './common.less';
+
+interface ItemType {
+  value: string | number;
+  label: string;
+}
+
+function createData(count: number): ItemType[] {
+  const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
+    value: index,
+    label: `Label ${index}`,
+  }));
+
+  return data;
+}
+
+function renderRawItem(item: ItemType) {
+  return (
+    <Overflow.Item component="span">
+      <div
+        style={{
+          margin: '0 16px 0 8px',
+          padding: '4px 8px',
+          background: 'rgba(255, 0, 0, 0.2)',
+        }}
+      >
+        {item.label}
+      </div>
+    </Overflow.Item>
+  );
+}
+
+function renderRest(items: ItemType[]) {
+  return (
+    <div
+      style={{
+        margin: '0 16px 0 8px',
+        padding: '4px 8px',
+        background: 'rgba(255, 0, 0, 0.2)',
+      }}
+    >
+      +{items.length}...
+    </div>
+  );
+}
+
+const Demo = () => {
+  const [responsive, setResponsive] = React.useState(true);
+  const [data, setData] = React.useState(createData(1));
+
+  return (
+    <div style={{ padding: 32 }}>
+      <button
+        type="button"
+        onClick={() => {
+          setResponsive(!responsive);
+        }}
+      >
+        {responsive ? 'Responsive' : 'MaxCount: 6'}
+      </button>
+      <select
+        style={{ width: 200, height: 32 }}
+        value={data.length}
+        onChange={({ target: { value } }) => {
+          setData(createData(Number(value)));
+        }}
+      >
+        <option value={0}>0</option>
+        <option value={1}>1</option>
+        <option value={2}>2</option>
+        <option value={3}>3</option>
+        <option value={5}>5</option>
+        <option value={10}>10</option>
+        <option value={20}>20</option>
+        <option value={200}>200</option>
+      </select>
+
+      <div
+        style={{
+          border: '5px solid green',
+          padding: 8,
+          maxWidth: 300,
+          marginTop: 32,
+        }}
+      >
+        <Overflow<ItemType>
+          data={data}
+          renderRawItem={renderRawItem}
+          renderRest={renderRest}
+          maxCount={responsive ? 'responsive' : 6}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

src/Item.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import { ComponentType } from './Overflow';
 
-export interface ItemProps<ItemType> {
+export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   prefixCls: string;
   item?: ItemType;
   className?: string;
@@ -31,7 +31,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     children,
     display,
     order,
-    component: Component,
+    component: Component = 'div',
     ...restProps
   } = props;
 
@@ -50,7 +50,8 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   );
 
   // ================================ Render ================================
-  const childNode = item !== undefined ? renderItem!(item) : children;
+  const childNode =
+    renderItem && item !== undefined ? renderItem(item) : children;
 
   let itemNode = (
     <Component

src/Overflow.tsx

@@ -4,6 +4,19 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import Item from './Item';
 import { useBatchFrameState } from './hooks/useBatchFrameState';
+import RawItem from './RawItem';
+
+export const OverflowContext = React.createContext<{
+  prefixCls: string;
+  responsive: boolean;
+  order: number;
+  item: any;
+  itemKey: React.Key;
+  registerSize: (key: React.Key, width: number | null) => void;
+  display: boolean;
+
+  //           renderItem={mergedRenderItem}
+}>(null);
 
 const RESPONSIVE = 'responsive' as const;
 
@@ -22,7 +35,8 @@ export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
   /** Used for `responsive`. It will limit render node to avoid perf issue */
   itemWidth?: number;
   renderItem?: (item: ItemType) => React.ReactNode;
-  renderItemProps?: (item: ItemType) => React.HTMLAttributes<any>;
+  /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+  renderRawItem?: (item: ItemType, index: number) => React.ReactElement;
   maxCount?: number | typeof RESPONSIVE;
   renderRest?:
     | React.ReactNode
@@ -44,16 +58,16 @@ function Overflow<ItemType = any>(
     prefixCls = 'rc-overflow',
     data = [],
     renderItem,
+    renderRawItem,
     itemKey,
     itemWidth = 10,
     style,
     className,
     maxCount,
     renderRest = defaultRenderRest,
-    renderItemProps,
     suffix,
     component: Component = 'div',
-    itemComponent = 'div',
+    itemComponent,
     ...restProps
   } = props;
 
@@ -234,14 +248,28 @@ function Overflow<ItemType = any>(
     component: itemComponent,
   };
 
-  let overflowNode = (
-    <Component
-      className={classNames(prefixCls, className)}
-      style={style}
-      ref={ref}
-      {...restProps}
-    >
-      {mergedData.map((item, index) => {
+  // Choice render fun by `renderRawItem`
+  const internalRenderItemNode = renderRawItem
+    ? (item: ItemType, index: number) => {
+        const key = getKey(item, index);
+
+        return (
+          <OverflowContext.Provider
+            key={key}
+            value={{
+              ...itemSharedProps,
+              order: index,
+              item,
+              itemKey: key,
+              registerSize,
+              display: index <= displayCount,
+            }}
+          >
+            {renderRawItem(item, index)}
+          </OverflowContext.Provider>
+        );
+      }
+    : (item: ItemType, index: number) => {
         const key = getKey(item, index);
 
         return (
@@ -254,10 +282,18 @@ function Overflow<ItemType = any>(
             itemKey={key}
             registerSize={registerSize}
             display={index <= displayCount}
-            {...renderItemProps?.(item)}
           />
         );
-      })}
+      };
+
+  let overflowNode = (
+    <Component
+      className={classNames(prefixCls, className)}
+      style={style}
+      ref={ref}
+      {...restProps}
+    >
+      {mergedData.map(internalRenderItemNode)}
 
       {/* Rest Count Item */}
       {showRest ? (
@@ -304,11 +340,18 @@ function Overflow<ItemType = any>(
 
 const ForwardOverflow = React.forwardRef(Overflow);
 
-ForwardOverflow.displayName = 'Overflow';
-
-// Convert to generic type
-export default ForwardOverflow as <ItemType = any>(
+type ForwardOverflowType = <ItemType = any>(
   props: React.PropsWithChildren<OverflowProps<ItemType>> & {
     ref?: React.Ref<HTMLDivElement>;
   },
 ) => React.ReactElement;
+
+type FilledOverflowType = ForwardOverflowType & {
+  Item: typeof RawItem;
+};
+
+ForwardOverflow.displayName = 'Overflow';
+((ForwardOverflow as unknown) as FilledOverflowType).Item = RawItem;
+
+// Convert to generic type
+export default (ForwardOverflow as unknown) as FilledOverflowType;

src/RawItem.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Item from './Item';
+import { ComponentType, OverflowContext } from './Overflow';
+
+export interface RawItemProps extends React.HTMLAttributes<any> {
+  component?: ComponentType;
+  children?: React.ReactNode;
+}
+
+export default function RawItem(props: RawItemProps) {
+  const context = React.useContext(OverflowContext);
+
+  // Render directly when context not provided
+  if (!context) {
+    const { component: Component = 'div', ...restProps } = props;
+    return <Component {...restProps} />;
+  }
+
+  return <Item {...context} {...props} />;
+}