fix(infiniteLoading): demo拆解与规范+增加joy logo的demo (#2081)

* fix(infiniteLoading): demo拆解与规范+增加joy logo的demo

* fix(pulltorefresh): 反白demo下拉图标修改为joy和lading logo

* docs(pulltorefresh): 增加taro demo展示

src/packages/infiniteloading/demo.taro.tsx

@@ -1,125 +1,54 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
-import { Loading, More } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import { InfiniteLoading, Cell } from '@/packages/nutui.react.taro'
-import '@/packages/infiniteloading/demo.scss'
 import Header from '@/sites/components/header'
-import { sleep } from '@/utils/sleep'
+
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
 
 interface T {
-  '83913e71': string
   '84aa6bce': string
   eb4236fe: string
-  '1254a90a': string
+  '9ed40460': string
+  '1254a90d': string
 }
 
 const InfiniteLoadingDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
-      '83913e71': '刷新成功',
-      '84aa6bce': '基础演示',
+      '84aa6bce': '基础用法',
       eb4236fe: '下拉刷新',
-      '1254a90a': '没有啦~',
+      '9ed40460': '自定义加载文案',
+      '1254a90d': 'primary主题',
     },
     'zh-TW': {
-      '83913e71': '刷新成功',
-      '84aa6bce': '基礎演示',
+      '84aa6bce': '基礎用法',
       eb4236fe: '下拉刷新',
-      '1254a90a': '沒有啦~',
+      '9ed40460': '自定義加載文案',
+      '1254a90d': 'primary主題',
     },
     'en-US': {
-      '83913e71': 'Refresh successfully',
-      '84aa6bce': 'Basic demo',
+      '84aa6bce': 'Basic usage',
       eb4236fe: 'Pull down to refresh',
-      '1254a90a': 'nope~',
+      '9ed40460': 'Custom loading text',
+      '1254a90d': 'Primary theme',
     },
   })
 
-  const [defaultList, setDefaultList] = useState<string[]>([])
-  const [hasMore, setHasMore] = useState(true)
-
-  useEffect(() => {
-    init()
-  }, [])
-
-  const loadMore = async () => {
-    await sleep(2000)
-    const curLen = defaultList.length
-    for (let i = curLen; i < curLen + 10; i++) {
-      defaultList.push(`${i}`)
-    }
-    if (defaultList.length >= 100) {
-      setHasMore(false)
-    } else {
-      setDefaultList([...defaultList])
-    }
-  }
-
-  const refresh = async () => {
-    await sleep(2000)
-    Taro.showToast({
-      title: translated['83913e71'],
-      icon: 'success',
-      duration: 2000,
-    })
-  }
-
-  const init = () => {
-    for (let i = 0; i < 20; i++) {
-      defaultList.push(`${i}`)
-    }
-    setDefaultList([...defaultList])
-  }
-
   return (
     <>
       <Header />
-      <div
-        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} demo-infinite`}
-      >
+      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated['84aa6bce']}</h2>
-        <Cell>
-          <ul
-            className="infiniteUl"
-            id="scrollDemo"
-            style={{ height: '500px' }}
-          >
-            <InfiniteLoading
-              pullRefresh
-              target="scrollDemo"
-              hasMore={hasMore}
-              onLoadMore={loadMore}
-              onRefresh={refresh}
-              pullingText={
-                <>
-                  <Loading className="nut-infinite-top-tips-icons" />
-                  松开刷新
-                </>
-              }
-              loadingText={
-                <>
-                  <Loading className="nut-infinite-bottom-tips-icons" />
-                  加载中
-                </>
-              }
-              loadMoreText={
-                <>
-                  <More className="nut-infinite-bottom-tips-icons" />
-                  没有更多了
-                </>
-              }
-            >
-              {defaultList.map((item, index) => {
-                return (
-                  <li className="infiniteLi" key={index}>
-                    {item}
-                  </li>
-                )
-              })}
-            </InfiniteLoading>
-          </ul>
-        </Cell>
+        <Demo1 />
+        <h2>{translated.eb4236fe}</h2>
+        <Demo2 />
+        <h2>{translated['9ed40460']}</h2>
+        <Demo3 />
+        <h2>{translated['1254a90d']}</h2>
+        <Demo4 />
       </div>
     </>
   )