feat: Support prefix (#54)

* chore: support prefix

* test: add test case

* chore: ci

Author: zombieJ

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: '18'
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -35,7 +35,7 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -51,13 +51,13 @@ jobs:
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -74,13 +74,13 @@ jobs:
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -97,13 +97,13 @@ jobs:
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

docs/demo/prefix-suffix.md

@@ -0,0 +1,12 @@
+---
+title: prefix-suffix
+nav:
+  title: Demo
+  path: /demo
+---
+
+# Prefix & Suffix Demo
+
+This demo shows how to use `prefix` and `suffix` props with the Overflow component.
+
+<code src="../../examples/prefix-demo.tsx"></code>

examples/basic.tsx

@@ -48,6 +48,8 @@ function renderRest(items: ItemType[]) {
 const Demo = () => {
   const [responsive, setResponsive] = React.useState(true);
   const [data, setData] = React.useState(createData(1));
+  const [showPrefix, setShowPrefix] = React.useState(true);
+  const [showSuffix, setShowSuffix] = React.useState(true);
 
   return (
     <div style={{ padding: 32 }}>
@@ -59,6 +61,26 @@ const Demo = () => {
       >
         {responsive ? 'Responsive' : 'MaxCount: 6'}
       </button>
+      
+      <button
+        type="button"
+        onClick={() => {
+          setShowPrefix(!showPrefix);
+        }}
+        style={{ marginLeft: 8 }}
+      >
+        {showPrefix ? 'Hide Prefix' : 'Show Prefix'}
+      </button>
+      
+      <button
+        type="button"
+        onClick={() => {
+          setShowSuffix(!showSuffix);
+        }}
+        style={{ marginLeft: 8 }}
+      >
+        {showSuffix ? 'Hide Suffix' : 'Show Suffix'}
+      </button>
       <select
         style={{ width: 200, height: 32 }}
         value={data.length}
@@ -98,7 +120,30 @@ const Demo = () => {
           renderItem={renderItem}
           renderRest={renderRest}
           maxCount={responsive ? 'responsive' : 6}
-          // suffix={<span>1</span>}
+          prefix={showPrefix ? (
+            <div
+              style={{
+                margin: '0 8px 0 0',
+                padding: '4px 8px',
+                background: 'rgba(0, 255, 0, 0.3)',
+                border: '1px solid green',
+              }}
+            >
+              前缀:
+            </div>
+          ) : undefined}
+          suffix={showSuffix ? (
+            <div
+              style={{
+                margin: '0 0 0 8px',
+                padding: '4px 8px',
+                background: 'rgba(0, 0, 255, 0.3)',
+                border: '1px solid blue',
+              }}
+            >
+              后缀
+            </div>
+          ) : undefined}
         />
       </div>
     </div>