Merge pull request #1 from react-component/suffix

feat: Support suffix

Author: zombieJ

.gitignore

@@ -29,4 +29,5 @@ yarn.lock
 package-lock.json
 coverage/
 .doc
-.umi
+.umi
+dist/

assets/index.less

@@ -4,10 +4,12 @@
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
+  position: relative;
 
   &-item {
     background: rgba(0, 255, 0, 0.2);
     box-shadow: 0 0 1px black;
     flex: none;
+    max-width: 100%;
   }
 }

examples/fill-width.tsx

@@ -0,0 +1,150 @@
+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 renderItem(item: ItemType) {
+  return (
+    <div
+      style={{
+        margin: '0 16px 0 8px',
+        padding: '4px 8px',
+        background: 'rgba(255, 0, 0, 0.2)',
+      }}
+    >
+      {item.label}
+    </div>
+  );
+}
+
+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 inputStyle: React.CSSProperties = {
+  border: 'none',
+  fontSize: 12,
+  margin: 0,
+  outline: 'none',
+  lineHeight: '20px',
+  fontFamily: '-apple-system',
+  padding: '0 4px',
+};
+
+const Demo = () => {
+  const [responsive, setResponsive] = React.useState(true);
+  const [inputValue, setInputValue] = React.useState('');
+  const [inputWidth, setInputWidth] = React.useState(0);
+  const [data, setData] = React.useState(createData(3));
+  const inputRef = React.useRef<HTMLInputElement>();
+  const measureRef = React.useRef<HTMLDivElement>();
+
+  React.useLayoutEffect(() => {
+    setInputWidth(measureRef.current.offsetWidth);
+  }, [inputValue]);
+
+  React.useEffect(() => {
+    inputRef.current.focus();
+  }, []);
+
+  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}
+          renderItem={renderItem}
+          renderRest={renderRest}
+          maxCount={responsive ? 'responsive' : 6}
+          suffix={
+            <div style={{ position: 'relative', maxWidth: '100%' }}>
+              <input
+                style={{
+                  ...inputStyle,
+                  background: 'rgba(0, 0, 0, 0.1)',
+                  width: inputWidth,
+                  minWidth: 10,
+                  maxWidth: '100%',
+                }}
+                value={inputValue}
+                onChange={e => {
+                  setInputValue(e.target.value);
+                }}
+                ref={inputRef}
+              />
+              <div
+                style={{
+                  ...inputStyle,
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                  left: 0,
+                  top: `200%`,
+                }}
+                ref={measureRef}
+              >
+                {inputValue}
+              </div>
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

now.json

@@ -5,7 +5,7 @@
     {
       "src": "package.json",
       "use": "@now/static-build",
-      "config": { "distDir": ".doc" }
+      "config": { "distDir": "dist" }
     }
   ],
   "routes": [

src/Item.tsx

@@ -6,6 +6,7 @@ export interface ItemProps<ItemType> {
   prefixCls: string;
   item?: ItemType;
   className?: string;
+  style?: React.CSSProperties;
   renderItem?: (item: ItemType) => React.ReactNode;
   responsive?: boolean;
   itemKey?: React.Key;
@@ -24,6 +25,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     registerSize,
     itemKey,
     className,
+    style,
     children,
     display,
     order,
@@ -52,9 +54,10 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
       style={{
         opacity: mergedHidden ? 0.2 : 1,
         height: mergedHidden ? 0 : undefined,
-        overflowY: responsive ? 'hidden' : undefined,
+        overflowY: mergedHidden ? 'hidden' : undefined,
         order: responsive ? order : undefined,
         pointerEvents: mergedHidden ? 'none' : undefined,
+        ...style,
       }}
     >
       {childNode}

src/Overflow.tsx

@@ -20,6 +20,7 @@ export interface OverflowProps<ItemType> {
   renderRest?:
     | React.ReactNode
     | ((omittedItems: ItemType[]) => React.ReactNode);
+  suffix?: React.ReactNode;
 }
 
 function defaultRenderRest<ItemType>(omittedItems: ItemType[]) {
@@ -40,6 +41,7 @@ function Overflow<ItemType = any>(
     className,
     maxCount,
     renderRest = defaultRenderRest,
+    suffix,
   } = props;
 
   const createUseState = useBatchFrameState();
@@ -51,14 +53,18 @@ function Overflow<ItemType = any>(
 
   const [prevRestWidth, setPrevRestWidth] = createUseState(0);
   const [restWidth, setRestWidth] = createUseState(0);
-  // Always use the max width to avoid blink
-  const mergedRestWidth = Math.max(prevRestWidth, restWidth);
+
+  const [suffixWidth, setSuffixWidth] = createUseState(0);
+  const [suffixFixedStart, setSuffixFixedStart] = useState<number>(null);
 
   const [displayCount, setDisplayCount] = useState(0);
   const [restReady, setRestReady] = useState(false);
 
   const itemPrefixCls = `${prefixCls}-item`;
 
+  // Always use the max width to avoid blink
+  const mergedRestWidth = Math.max(prevRestWidth, restWidth);
+
   // ================================= Data =================================
   const isResponsive = maxCount === RESPONSIVE;
 
@@ -132,14 +138,18 @@ function Overflow<ItemType = any>(
     setPrevRestWidth(restWidth);
   }
 
+  function registerSuffixSize(_: React.Key, width: number | null) {
+    setSuffixWidth(width!);
+  }
+
   // ================================ Effect ================================
   function getItemWidth(index: number) {
     return itemWidths.get(getKey(mergedData[index], index));
   }
 
   React.useLayoutEffect(() => {
     if (containerWidth && mergedRestWidth && mergedData) {
-      let totalWidth = 0;
+      let totalWidth = suffixWidth;
 
       const len = mergedData.length;
       const lastIndex = len - 1;
@@ -162,21 +172,48 @@ function Overflow<ItemType = any>(
         ) {
           // Additional check if match the end
           updateDisplayCount(lastIndex);
+          setSuffixFixedStart(null);
           break;
         } else if (totalWidth + mergedRestWidth > containerWidth) {
           // Can not hold all the content to show rest
           updateDisplayCount(i - 1);
+          setSuffixFixedStart(
+            totalWidth - currentItemWidth - suffixWidth + mergedRestWidth,
+          );
           break;
         } else if (i === lastIndex) {
           // Reach the end
           updateDisplayCount(lastIndex);
+          setSuffixFixedStart(totalWidth - suffixWidth);
           break;
         }
       }
+
+      if (suffix && getItemWidth(0) + suffixWidth > containerWidth) {
+        setSuffixFixedStart(null);
+      }
     }
-  }, [containerWidth, itemWidths, mergedRestWidth, getKey, mergedData]);
+  }, [
+    containerWidth,
+    itemWidths,
+    mergedRestWidth,
+    suffixWidth,
+    getKey,
+    mergedData,
+  ]);
 
   // ================================ Render ================================
+  const displayRest = restReady && !!omittedItems.length;
+
+  let suffixStyle: React.CSSProperties = {};
+  if (suffixFixedStart !== null && isResponsive) {
+    suffixStyle = {
+      position: 'absolute',
+      left: suffixFixedStart,
+      top: 0,
+    };
+  }
+
   let overflowNode = (
     <div className={classNames(prefixCls, className)} style={style} ref={ref}>
       {mergedData.map((item, index) => {
@@ -200,18 +237,33 @@ function Overflow<ItemType = any>(
       {/* Rest Count Item */}
       {showRest ? (
         <Item
-          order={displayCount}
+          order={displayRest ? displayCount : mergedData.length}
           prefixCls={itemPrefixCls}
           className={`${itemPrefixCls}-rest`}
           responsive={isResponsive}
           registerSize={registerOverflowSize}
-          display={restReady && !!omittedItems.length}
+          display={displayRest}
         >
           {typeof renderRest === 'function'
             ? renderRest(omittedItems)
             : renderRest}
         </Item>
       ) : null}
+
+      {/* Suffix Node */}
+      {suffix && (
+        <Item
+          order={displayCount}
+          prefixCls={itemPrefixCls}
+          className={`${itemPrefixCls}-suffix`}
+          responsive={isResponsive}
+          registerSize={registerSuffixSize}
+          display
+          style={suffixStyle}
+        >
+          {suffix}
+        </Item>
+      )}
     </div>
   );