refactor: rename related variables

Author: zombieJ

examples/basic.tsx

@@ -32,7 +32,7 @@ function renderItem(item: ItemType) {
 }
 
 const Demo = () => {
-  const [responsive, setResponsive] = React.useState(false);
+  const [responsive, setResponsive] = React.useState(true);
   const [data, setData] = React.useState(createData(5));
 
   return (

src/Item.tsx

@@ -7,7 +7,7 @@ export interface ItemProps<ItemType> {
   item?: ItemType;
   className?: string;
   renderItem?: (item: ItemType) => React.ReactNode;
-  disabled?: boolean;
+  responsive?: boolean;
   itemKey?: React.Key;
   registerSize: (key: React.Key, width: number) => void;
   children?: React.ReactNode;
@@ -20,7 +20,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     prefixCls,
     item,
     renderItem,
-    disabled,
+    responsive,
     registerSize,
     itemKey,
     className,
@@ -49,17 +49,17 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
       className={classNames(prefixCls, className)}
       style={{
         opacity: display ? 1 : 0.2,
-        // height: display ? undefined : 0,
-        // overflowY: disabled ? undefined : 'hidden',
-        order,
+        height: display ? undefined : 0,
+        overflowY: responsive ? 'hidden' : undefined,
+        order: responsive ? order : undefined,
         pointerEvents: 'none',
       }}
     >
       {childNode}
     </div>
   );
 
-  if (!disabled) {
+  if (responsive) {
     itemNode = (
       <ResizeObserver
         onResize={({ offsetWidth }) => {

src/Overflow.tsx

@@ -30,23 +30,33 @@ function Overflow<ItemType = any>(
     itemWidth = 10,
     style,
     className,
-    maxCount = RESPONSIVE,
+    maxCount,
   } = props;
 
   const createUseState = useBatchFrameState();
-  const disabled = maxCount !== RESPONSIVE;
+  // const disabled = maxCount !== RESPONSIVE;
 
   const [containerWidth, setContainerWidth] = createUseState(0);
   const [itemWidths, setItemWidths] = createUseState(
     new Map<React.Key, number>(),
   );
-  const [overflowWidth, setOverflowWidth] = createUseState(0);
+  const [restWidth, setRestWidth] = createUseState(0);
 
   const [displayCount, setDisplayCount] = React.useState(0);
   const [restReady, setRestReady] = React.useState(false);
 
   const itemPrefixCls = `${prefixCls}-item`;
 
+  // ================================= Data =================================
+  const isResponsive = maxCount === RESPONSIVE;
+
+  const mergedData = React.useMemo(() => {
+    if (isResponsive) {
+      return data.slice(0, Math.min(data.length, containerWidth / itemWidth));
+    }
+    return data;
+  }, [data, itemWidth, containerWidth, maxCount]);
+
   // ================================= Item =================================
   const getKey = React.useCallback(
     (item: ItemType, index: number) => {
@@ -89,18 +99,12 @@ function Overflow<ItemType = any>(
   }
 
   function registerOverflowSize(_: React.Key, width: number) {
-    setOverflowWidth(width);
+    setRestWidth(width);
   }
 
-  // ================================= Data =================================
-  const mergedData = React.useMemo(
-    () => data.slice(0, Math.min(data.length, containerWidth / itemWidth)),
-    [data, itemWidth, containerWidth],
-  );
-
   // ================================ Effect ================================
   React.useLayoutEffect(() => {
-    if (containerWidth && overflowWidth && mergedData) {
+    if (containerWidth && restWidth && mergedData) {
       let totalWidth = 0;
 
       const len = mergedData.length;
@@ -117,7 +121,7 @@ function Overflow<ItemType = any>(
         // Find best match
         totalWidth += currentItemWidth;
 
-        if (totalWidth + overflowWidth > containerWidth) {
+        if (totalWidth + restWidth > containerWidth) {
           updateDisplayCount(i - 1);
           break;
         } else if (i === len - 1) {
@@ -126,7 +130,7 @@ function Overflow<ItemType = any>(
         }
       }
     }
-  }, [containerWidth, itemWidths, overflowWidth, getKey, mergedData]);
+  }, [containerWidth, itemWidths, restWidth, getKey, mergedData]);
 
   // ================================ Render ================================
   let overflowNode = (
@@ -143,7 +147,7 @@ function Overflow<ItemType = any>(
             renderItem={mergedRenderItem}
             itemKey={key}
             registerSize={registerSize}
-            disabled={disabled}
+            responsive={isResponsive}
             display={index <= displayCount}
           />
         );
@@ -154,7 +158,7 @@ function Overflow<ItemType = any>(
         order={displayCount}
         prefixCls={itemPrefixCls}
         className={`${itemPrefixCls}-rest`}
-        disabled={disabled}
+        responsive={isResponsive}
         registerSize={registerOverflowSize}
         display={restReady}
       >
@@ -163,7 +167,7 @@ function Overflow<ItemType = any>(
     </div>
   );
 
-  if (!disabled) {
+  if (isResponsive) {
     overflowNode = (
       <ResizeObserver onResize={onOverflowResize}>
         {overflowNode}