chore: Record items width

Author: zombieJ

assets/index.less

@@ -5,8 +5,10 @@
   flex-wrap: nowrap;
 
   &-item {
-    margin-right: 4px;
+    margin-left: 0.5em;
+    margin-right: 1em;
     background: rgba(0, 255, 0, 0.2);
     padding: 4px 8px;
+    border: 1px solid red;
   }
 }

examples/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Overflow from '../src';
 import '../assets/index.less';
+import './common.less';
 
 interface ItemType {
   value: string | number;
@@ -17,23 +18,32 @@ function createData(count: number): ItemType[] {
 }
 
 const Demo = () => {
-  const [data, setData] = React.useState(createData(10));
+  const [data, setData] = React.useState(createData(5));
 
   return (
-    <div>
+    <div style={{ padding: 32 }}>
       <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={5}>5</option>
         <option value={10}>10</option>
         <option value={20}>20</option>
       </select>
 
-      <div style={{ border: '5px solid green', padding: 8, maxWidth: 300 }}>
+      <div
+        style={{
+          border: '5px solid green',
+          padding: 8,
+          maxWidth: 300,
+          marginTop: 32,
+        }}
+      >
         <Overflow<ItemType> data={data} renderItem={(item) => item.label} />
       </div>
     </div>

examples/common.less

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package.json

@@ -42,7 +42,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.1",
-    "classnames": "^2.2.1"
+    "classnames": "^2.2.1",
+    "rc-resize-observer": "^0.3.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",

src/Item.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import { getFullWidth } from './util';
+
+export interface ItemProps<ItemType> {
+  prefixCls: string;
+  item?: ItemType;
+  className?: string;
+  renderItem?: (item: ItemType) => React.ReactNode;
+  disabled?: boolean;
+  itemKey?: React.Key;
+  registerSize: (key: React.Key, width: number) => void;
+  children?: React.ReactNode;
+}
+
+export default function Item<ItemType>(props: ItemProps<ItemType>) {
+  const {
+    prefixCls,
+    item,
+    renderItem,
+    disabled,
+    registerSize,
+    itemKey,
+    className,
+    children,
+  } = props;
+
+  // ================================ Effect ================================
+  function internalRegisterSize(width: number) {
+    registerSize(itemKey!, width);
+  }
+
+  React.useEffect(
+    () => () => {
+      internalRegisterSize(0);
+    },
+    [],
+  );
+
+  // ================================ Render ================================
+  const childNode = item !== undefined ? renderItem!(item) : children;
+
+  let itemNode = (
+    <div className={classNames(prefixCls, className)}>{childNode}</div>
+  );
+
+  if (!disabled) {
+    itemNode = (
+      <ResizeObserver
+        onResize={(_, element) => {
+          const width = getFullWidth(element);
+          internalRegisterSize(width);
+        }}
+      >
+        {itemNode}
+      </ResizeObserver>
+    );
+  }
+
+  return itemNode;
+}

src/Overflow.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import { getFullWidth } from './util';
+import Item from './Item';
 
 export interface OverflowProps<ItemType> {
   prefixCls?: string;
@@ -8,6 +11,8 @@ export interface OverflowProps<ItemType> {
   data?: ItemType[];
   itemKey?: React.Key | ((item: ItemType) => React.Key);
   renderItem?: (item: ItemType) => React.ReactNode;
+  disabled?: boolean;
+  maxCount?: number | 'responsive';
 }
 
 function Overflow<ItemType = any>(
@@ -21,8 +26,18 @@ function Overflow<ItemType = any>(
     itemKey,
     style,
     className,
+    disabled,
+    maxCount = 'responsive',
   } = props;
 
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [itemWidths, setItemWidths] = React.useState(
+    new Map<React.Key, number>(),
+  );
+  const [overflowWidth, setOverflowWidth] = React.useState(0);
+
+  const itemPrefixCls = `${prefixCls}-item`;
+
   // ================================= Item =================================
   const getKey = React.useCallback(
     (item: ItemType, index: number) => {
@@ -39,20 +54,68 @@ function Overflow<ItemType = any>(
     [renderItem],
   );
 
+  // ================================= Size =================================
+  function onOverflowResize(_: object, element: HTMLElement) {
+    setContainerWidth(element.clientWidth);
+  }
+
+  function registerSize(key: React.Key, width: number) {
+    const clone = new Map(itemWidths);
+    console.log('==>>>', key, width);
+
+    if (!width) {
+      clone.delete(key);
+    } else {
+      clone.set(key, width);
+    }
+
+    setItemWidths(clone);
+  }
+
+  function registerOverflowSize(_: React.Key, width: number) {
+    console.log('Overflow >>>', width);
+    setOverflowWidth(width);
+  }
+
   // ================================ Render ================================
-  return (
+  let overflowNode = (
     <div className={classNames(prefixCls, className)} style={style} ref={ref}>
       {data.map((item, index) => {
         const key = getKey(item, index);
 
         return (
-          <div className={`${prefixCls}-item`} key={key}>
-            {mergedRenderItem(item)}
-          </div>
+          <Item<ItemType>
+            key={key}
+            item={item}
+            prefixCls={itemPrefixCls}
+            renderItem={mergedRenderItem}
+            itemKey={key}
+            registerSize={registerSize}
+            disabled={disabled}
+          />
         );
       })}
+
+      <Item
+        prefixCls={itemPrefixCls}
+        className={`${itemPrefixCls}-overflow`}
+        disabled={disabled}
+        registerSize={registerOverflowSize}
+      >
+        Overflow
+      </Item>
     </div>
   );
+
+  if (!disabled) {
+    overflowNode = (
+      <ResizeObserver onResize={onOverflowResize}>
+        {overflowNode}
+      </ResizeObserver>
+    );
+  }
+
+  return overflowNode;
 }
 
 const ForwardOverflow = React.forwardRef(Overflow);

src/util.ts

@@ -0,0 +1,12 @@
+function px2num(value: string = '') {
+  return Number(`0${value}`.replace('px', ''));
+}
+
+export function getFullWidth(element: HTMLElement) {
+  const { offsetWidth } = element;
+  const { marginLeft, marginRight } = getComputedStyle(element);
+  const left = px2num(marginLeft);
+  const right = px2num(marginRight);
+
+  return left + offsetWidth + right;
+}