feat: support INVALIDATE

Author: zombieJ

src/Item.tsx

@@ -16,11 +16,13 @@ export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   display: boolean;
   order: number;
   component?: ComponentType;
+  invalidate?: boolean;
 }
 
 export default function Item<ItemType>(props: ItemProps<ItemType>) {
   const {
     prefixCls,
+    invalidate,
     item,
     renderItem,
     responsive,
@@ -55,7 +57,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
 
   let itemNode = (
     <Component
-      className={classNames(prefixCls, className)}
+      className={classNames(!invalidate && prefixCls, className)}
       style={{
         opacity: mergedHidden ? 0 : 1,
         height: mergedHidden ? 0 : undefined,

src/Overflow.tsx

@@ -13,6 +13,8 @@ export const OverflowContext = React.createContext<{
   registerSize: (key: React.Key, width: number | null) => void;
   display: boolean;
 
+  invalidate: boolean;
+
   // Item Usage
   item?: any;
   itemKey?: React.Key;
@@ -22,6 +24,7 @@ export const OverflowContext = React.createContext<{
 }>(null);
 
 const RESPONSIVE = 'responsive' as const;
+const INVALIDATE = 'invalidate' as const;
 
 export type ComponentType =
   | React.ComponentType<any>
@@ -40,7 +43,7 @@ export interface OverflowProps<ItemType> extends React.HTMLAttributes<any> {
   renderItem?: (item: ItemType) => React.ReactNode;
   /** @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;
+  maxCount?: number | typeof RESPONSIVE | typeof INVALIDATE;
   renderRest?:
     | React.ReactNode
     | ((omittedItems: ItemType[]) => React.ReactNode);
@@ -104,6 +107,7 @@ function Overflow<ItemType = any>(
 
   // ================================= Data =================================
   const isResponsive = data.length && maxCount === RESPONSIVE;
+  const invalidate = maxCount === INVALIDATE;
 
   /**
    * When is `responsive`, we will always render rest node to get the real width of it for calculation
@@ -258,6 +262,7 @@ function Overflow<ItemType = any>(
     prefixCls: itemPrefixCls,
     responsive: isResponsive,
     component: itemComponent,
+    invalidate,
   };
 
   // >>>>> Choice render fun by `renderRawItem`
@@ -336,7 +341,7 @@ function Overflow<ItemType = any>(
 
   let overflowNode = (
     <Component
-      className={classNames(prefixCls, className)}
+      className={classNames(!invalidate && prefixCls, className)}
       style={style}
       ref={ref}
       {...restProps}
@@ -383,10 +388,16 @@ type ForwardOverflowType = <ItemType = any>(
 
 type FilledOverflowType = ForwardOverflowType & {
   Item: typeof RawItem;
+  RESPONSIVE: typeof RESPONSIVE;
+  /** Will work as normal `component`. Skip patch props like `prefixCls`. */
+  INVALIDATE: typeof INVALIDATE;
 };
 
 ForwardOverflow.displayName = 'Overflow';
+
 ((ForwardOverflow as unknown) as FilledOverflowType).Item = RawItem;
+((ForwardOverflow as unknown) as FilledOverflowType).RESPONSIVE = RESPONSIVE;
+((ForwardOverflow as unknown) as FilledOverflowType).INVALIDATE = INVALIDATE;
 
 // Convert to generic type
 export default (ForwardOverflow as unknown) as FilledOverflowType;

tests/__snapshots__/invalidate.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overflow.Invalidate render item 1`] = `
+<ul
+  class=""
+>
+  <li
+    class=""
+    style="opacity: 1;"
+  >
+    Label 0
+  </li>
+  <li
+    class=""
+    style="opacity: 1;"
+  >
+    Label 1
+  </li>
+</ul>
+`;
+
+exports[`Overflow.Invalidate render raw 1`] = `
+<ul
+  class=""
+>
+  <li
+    class=""
+    style="opacity: 1;"
+  >
+    Label 0
+  </li>
+  <li
+    class=""
+    style="opacity: 1;"
+  >
+    Label 1
+  </li>
+</ul>
+`;

tests/invalidate.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Overflow from '../src';
+import { mount } from './wrapper';
+
+interface ItemType {
+  label: React.ReactNode;
+  key: React.Key;
+}
+
+describe('Overflow.Invalidate', () => {
+  function getData(count: number) {
+    return new Array(count).fill(undefined).map((_, index) => ({
+      label: `Label ${index}`,
+      key: `k-${index}`,
+    }));
+  }
+
+  it('render item', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(2)}
+        renderItem={item => {
+          return item.label;
+        }}
+        itemKey={item => `bamboo-${item.key}`}
+        itemComponent="li"
+        component="ul"
+        maxCount={Overflow.INVALIDATE}
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('render raw', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(2)}
+        renderRawItem={item => {
+          return <Overflow.Item component="li">{item.label}</Overflow.Item>;
+        }}
+        itemKey={item => `bamboo-${item.key}`}
+        component="ul"
+        maxCount={Overflow.INVALIDATE}
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});