feat: Support customize component (#7)

Author: zombieJ

src/Item.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
+import { ComponentType } from './Overflow';
 
 export interface ItemProps<ItemType> {
   prefixCls: string;
@@ -14,6 +15,7 @@ export interface ItemProps<ItemType> {
   children?: React.ReactNode;
   display: boolean;
   order: number;
+  component?: ComponentType;
 }
 
 export default function Item<ItemType>(props: ItemProps<ItemType>) {
@@ -29,6 +31,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     children,
     display,
     order,
+    component: Component,
   } = props;
 
   const mergedHidden = responsive && !display;
@@ -49,7 +52,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   const childNode = item !== undefined ? renderItem!(item) : children;
 
   let itemNode = (
-    <div
+    <Component
       className={classNames(prefixCls, className)}
       style={{
         opacity: mergedHidden ? 0.2 : 1,
@@ -61,7 +64,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
       }}
     >
       {childNode}
-    </div>
+    </Component>
   );
 
   if (responsive) {

src/Overflow.tsx

@@ -7,6 +7,12 @@ import { useBatchFrameState } from './hooks/useBatchFrameState';
 
 const RESPONSIVE = 'responsive' as const;
 
+export type ComponentType =
+  | React.ComponentType<any>
+  | React.ForwardRefExoticComponent<any>
+  | React.FC<any>
+  | keyof React.ReactHTML;
+
 export interface OverflowProps<ItemType> {
   prefixCls?: string;
   className?: string;
@@ -21,6 +27,8 @@ export interface OverflowProps<ItemType> {
     | React.ReactNode
     | ((omittedItems: ItemType[]) => React.ReactNode);
   suffix?: React.ReactNode;
+  component?: ComponentType;
+  itemComponent?: ComponentType;
 }
 
 function defaultRenderRest<ItemType>(omittedItems: ItemType[]) {
@@ -42,6 +50,8 @@ function Overflow<ItemType = any>(
     maxCount,
     renderRest = defaultRenderRest,
     suffix,
+    component: Component = 'div',
+    itemComponent = 'div'
   } = props;
 
   const createUseState = useBatchFrameState();
@@ -218,10 +228,15 @@ function Overflow<ItemType = any>(
   const itemSharedProps = {
     prefixCls: itemPrefixCls,
     responsive: isResponsive,
+    component: itemComponent,
   };
 
   let overflowNode = (
-    <div className={classNames(prefixCls, className)} style={style} ref={ref}>
+    <Component
+      className={classNames(prefixCls, className)}
+      style={style}
+      ref={ref}
+    >
       {mergedData.map((item, index) => {
         const key = getKey(item, index);
 
@@ -268,7 +283,7 @@ function Overflow<ItemType = any>(
           {suffix}
         </Item>
       )}
-    </div>
+    </Component>
   );
 
   if (isResponsive) {

tests/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overflow customize component 1`] = `
+<ul
+  class="rc-overflow"
+>
+  <li
+    class="rc-overflow-item"
+    style="opacity: 1;"
+  >
+    Label 0
+  </li>
+</ul>
+`;

tests/index.spec.tsx

@@ -57,7 +57,7 @@ describe('Overflow', () => {
         <Overflow
           data={getData(6)}
           renderItem={renderItem}
-          renderRest={omittedItems => `Bamboo: ${omittedItems.length}`}
+          renderRest={(omittedItems) => `Bamboo: ${omittedItems.length}`}
           maxCount={3}
         />,
       );
@@ -92,11 +92,25 @@ describe('Overflow', () => {
         <Overflow
           data={getData(1)}
           renderItem={renderItem}
-          itemKey={item => `bamboo-${item.key}`}
+          itemKey={(item) => `bamboo-${item.key}`}
         />,
       );
 
       expect(wrapper.find('Item').key()).toEqual('bamboo-k-0');
     });
   });
+
+  it('customize component', () => {
+    const wrapper = mount(
+      <Overflow
+        data={getData(1)}
+        renderItem={renderItem}
+        itemKey={(item) => `bamboo-${item.key}`}
+        component="ul"
+        itemComponent="li"
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });