feat(infiniteloading): add type props (#2027)

jdf2e · Mar 15, 2024 · 5616224 · 5616224
1 parent e44afe4
commit 5616224
Show file tree

Hide file tree

Showing 12 changed files with 378 additions and 13 deletions.
diff --git a/src/packages/infiniteloading/__tests__/__snapshots__/infiniteloading.spec.tsx.snap b/src/packages/infiniteloading/__tests__/__snapshots__/infiniteloading.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`infiniteloading base 01 1`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -28,7 +28,7 @@ exports[`infiniteloading base 01 1`] = `
 exports[`infiniteloading base 02 1`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -104,7 +104,7 @@ exports[`infiniteloading base 02 1`] = `
 exports[`pull base 01 1`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -129,7 +129,7 @@ exports[`pull base 01 1`] = `
 exports[`pull base 01 2`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -154,7 +154,7 @@ exports[`pull base 01 2`] = `
 exports[`pull base 03 1`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -179,7 +179,7 @@ exports[`pull base 03 1`] = `
 exports[`pull base 03 2`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -204,7 +204,7 @@ exports[`pull base 03 2`] = `
 exports[`pull base 1`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"
@@ -229,7 +229,7 @@ exports[`pull base 1`] = `
 exports[`pull base 2`] = `
 <div>
   <div
-    class="nut-infiniteloading"
+    class="nut-infiniteloading nut-infiniteloading-default"
   >
     <div
       class="nut-infinite-top"

diff --git a/src/packages/infiniteloading/demo.scss b/src/packages/infiniteloading/demo.scss
@@ -2,7 +2,8 @@
   min-height: 100vh;
 }
 
-.infiniteUl {
+.infiniteUl,
+.infiniteUl3 {
   height: 300px;
   width: 100%;
   padding: 0;
@@ -21,6 +22,13 @@
   }
 }
 
+.infiniteUl3 {
+  .infiniteLi {
+    margin: 10px 10px 0;
+    background-color: #fff;
+  }
+}
+
 .infiniteLi {
   margin-top: 10px;
   text-align: center;

diff --git a/src/packages/infiniteloading/demo.tsx b/src/packages/infiniteloading/demo.tsx
@@ -14,6 +14,7 @@ interface T {
   '9ed40460': string
   '1254a90a': string
   '1254a90n': string
+  '1254a90d': string
 }
 
 const InfiniteloadingDemo = () => {
@@ -25,6 +26,7 @@ const InfiniteloadingDemo = () => {
       '9ed40460': '自定义加载文案',
       '1254a90a': '没有啦~',
       '1254a90n': '基于window滚动',
+      '1254a90d': 'primary主题',
     },
     'zh-TW': {
       '83913e71': '刷新成功',
@@ -33,25 +35,29 @@ const InfiniteloadingDemo = () => {
       '9ed40460': '自定義加載文案',
       '1254a90a': '沒有啦~',
       '1254a90n': '基於window滾動',
+      '1254a90d': 'primary主題',
     },
     'en-US': {
       '83913e71': 'Refresh successfully',
       '84aa6bce': 'Basic usage',
       eb4236fe: 'Pull down to refresh',
       '9ed40460': 'custom loading text',
-      '1254a90a': 'nope~',
+      '1254a90a': 'none~',
       '1254a90n': 'window scroll',
+      '1254a90d': 'primary theme',
     },
   })
 
   const [defaultList, setDefaultList] = useState<string[]>([])
   const [customList, setCustomList] = useState<string[]>([])
   const [refreshList, setRefreshList] = useState<string[]>([])
   const [windowList, setWindowList] = useState<string[]>([])
+  const [primaryList, setPrimaryList] = useState<string[]>([])
   const [hasMore, setHasMore] = useState(true)
   const [customHasMore, setCustomHasMore] = useState(true)
   const [refreshHasMore, setRefreshHasMore] = useState(true)
   const [windownHasMore, setWindowHasMore] = useState(true)
+  const [primaryHasMore, setPrimaryHasMore] = useState(true)
 
   useEffect(() => {
     init()
@@ -111,6 +117,19 @@ const InfiniteloadingDemo = () => {
     }
   }
 
+  const primaryLoadMore = async () => {
+    await sleep(2000)
+    const curLen = primaryList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      primaryList.push(`${i}`)
+    }
+    if (primaryList.length >= 30) {
+      setPrimaryHasMore(false)
+    } else {
+      setPrimaryList([...primaryList])
+    }
+  }
+
   const refresh = async () => {
     await sleep(1000)
     Toast.show(translated['83913e71'])
@@ -122,11 +141,13 @@ const InfiniteloadingDemo = () => {
       customList.push(`${i}`)
       refreshList.push(`${i}`)
       windowList.push(`${i}`)
+      primaryList.push(`${i}`)
     }
     setDefaultList([...defaultList])
     setCustomList([...customList])
     setRefreshList([...refreshList])
-    setRefreshList([...windowList])
+    setWindowList([...windowList])
+    setPrimaryList([...primaryList])
   }
 
   return (
@@ -225,6 +246,38 @@ const InfiniteloadingDemo = () => {
           </ul>
         </Cell>
 
+        <h2>{translated['1254a90d']}</h2>
+        <Cell>
+          <ul className="infiniteUl3" id="primaryScroll">
+            <InfiniteLoading
+              target="primaryScroll"
+              type="primary"
+              loadingText={
+                <>
+                  <Loading className="nut-infinite-bottom-tips-icons" />
+                  loading
+                </>
+              }
+              loadMoreText={
+                <>
+                  <More className="nut-infinite-bottom-tips-icons" />
+                  {translated['1254a90a']}
+                </>
+              }
+              hasMore={primaryHasMore}
+              onLoadMore={primaryLoadMore}
+            >
+              {primaryList.map((item, index) => {
+                return (
+                  <li className="infiniteLi" key={index}>
+                    {item}
+                  </li>
+                )
+              })}
+            </InfiniteLoading>
+          </ul>
+        </Cell>
+
         <h2>{translated['1254a90n']}</h2>
         <Cell>
           <ul className="infiniteUl2">

diff --git a/src/packages/infiniteloading/doc.en-US.md b/src/packages/infiniteloading/doc.en-US.md
@@ -269,6 +269,101 @@ export default App
 
 :::
 
+### primary topic
+
+:::demo
+
+```tsx
+import React, { useState, useEffect } from 'react'
+import { Cell, InfiniteLoading } from '@nutui/nutui-react'
+import { Loading, More } from '@nutui/icons-react'
+
+const sleep = (time: number): Promise<unknown> =>
+  new Promise((resolve) => {setTimeout(resolve, time)})
+const InfiniteUlStyle = {
+  height: '300px',
+  width: '100%',
+  padding: '0',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+}
+
+const InfiniteLiStyle = {
+  marginTop: '10px 10px 0',
+  fontSize: '14px',
+  color: 'rgba(100, 100, 100, 1)',
+  textAlign: 'center',
+  backgroundColor: "#FFF"
+}
+const App = () => {
+  const [customList, setCustomList] = useState<string[]>([])
+  const [customHasMore, setCustomHasMore] = useState(true)
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const init = () => {
+    for (let i = 0; i < 10; i++) {
+      customList.push(`${i}`)
+    }
+    setCustomList([...customList])
+  }
+
+  const customLoadMore = async () => {
+    await sleep(2000)
+    const curLen = customList.length
+    for (let i = curLen; i < curLen + 10; i++) {
+      customList.push(`${i}`)
+    }
+    if (customList.length >= 30) {
+      setCustomHasMore(false)
+    } else {
+      setCustomList([...customList])
+    }
+  }
+
+  return (
+    <>
+      <h2>primary topic</h2>
+      <Cell>
+        <ul id="primaryScroll" style={InfiniteUlStyle}>
+          <InfiniteLoading
+            target="primaryScroll"
+            type="primary"
+            loadingText={
+                <>
+                  <Loading className="nut-infinite-bottom-tips-icons" />
+                  loading
+                </>
+              }
+              loadMoreText={
+                <>
+                  <More className="nut-infinite-bottom-tips-icons" />
+                  none~
+                </>
+              }
+            hasMore={customHasMore}
+            onLoadMore={customLoadMore}
+          >
+            {customList.map((item, index) => {
+              return (
+                <li key={index} style={InfiniteLiStyle}>
+                  {item}
+                </li>
+              )
+            })}
+          </InfiniteLoading>
+        </ul>
+      </Cell>
+    </>
+  )
+}
+export default App
+```
+
+:::
+
 
 ### Window Scroll
 
@@ -356,6 +451,7 @@ export default App
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| type | Topic type | `default`\| `primary` | `default` |
 | hasMore | Has more data | `boolean` | `true` |
 | threshold | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold | `number` | `200` |
 | capture | Whether to use capture mode | `boolean` | `false` |