feat(lottie): new component

package.json

@@ -113,6 +113,8 @@
     "classnames": "^2.5.1",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
+    "lottie-miniprogram": "^1.0.12",
+    "lottie-react": "^2.4.0",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
@@ -131,8 +133,8 @@
     "@swc/core": "^1.4.8",
     "@tarojs/components": "4.0.8-beta.1",
     "@tarojs/plugin-platform-alipay": "4.0.8-beta.1",
-    "@tarojs/plugin-platform-weapp": "4.0.8-beta.1",
     "@tarojs/plugin-platform-jd": "4.0.8-beta.1",
+    "@tarojs/plugin-platform-weapp": "4.0.8-beta.1",
     "@tarojs/react": "4.0.8-beta.1",
     "@tarojs/taro": "4.0.8-beta.1",
     "@testing-library/jest-dom": "^6.4.2",
@@ -228,6 +230,9 @@
   },
   "resolutions": {
     "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19"
+    "@types/react-dom": "^18.2.19",
+    "sass": "1.77.6",
+    "@tarojs/api": "4.0.8-beta.1",
+    "@tarojs/components": "4.0.8-beta.1"
   }
 }

packages/nutui-taro-demo/package.json

@@ -115,10 +115,5 @@
     "postcss": "^8.4.35",
     "stylelint": "^16.7.0",
     "typescript": "^5.3.3"
-  },
-  "resolutions": {
-    "sass": "1.77.6",
-    "@tarojs/api": "4.0.8-beta.1",
-    "@tarojs/components": "4.0.8-beta.1"
   }
 }

src/config.json

@@ -816,6 +816,7 @@
           "sort": 15,
           "show": true,
           "taro": true,
+          "v14":true,
           "author": "mike8625"
         },
         {
@@ -1051,6 +1052,17 @@
           "v15": true,
           "author": "liukun"
         },
+        {
+          "version": "3.0.0",
+          "name": "Lottie",
+          "type": "component",
+          "cName": "动画/动效",
+          "desc": "给子元素添加动画效果",
+          "sort": 27,
+          "show": true,
+          "taro": true,
+          "author": "swag~jun"
+        },
         {
           "version": "3.0.0",
           "name": "Pagination",

src/packages/configprovider/types.ts

@@ -817,6 +817,7 @@ export type NutCSSVariables =
   | 'nutuiLoadingIconSize'
   | 'nutuiLoadingColor'
   | 'nutuiLoadingFontSize'
+  | 'nutuiLoadingLottieBackground'
   | 'nutuiResultpageWidth'
   | 'nutuiResultpageIconSize'
   | 'nutuiResultpageIconMarginBottom'

src/packages/loading/__test__/loading.spec.tsx

@@ -2,9 +2,9 @@ import * as React from 'react'
 
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-
 import { Star } from '@nutui/icons-react'
 import { Loading } from '../loading'
+import data from '@/packages/lottie/animation/light/loading.json'
 
 test('type test', () => {
   const { container } = render(<Loading type="circular" />)
@@ -30,3 +30,19 @@ test('custom icon test', () => {
   )
   expect(container.querySelector('svg')).toHaveClass('nut-icon-Star')
 })
+
+test('use lottie', () => {
+  const { container } = render(
+    <Loading
+      direction="vertical"
+      type="lottie"
+      jsonData={data}
+      lottieProps={{ autoplay: false, loop: false }}
+    >
+      正在奋力加载中，感谢您的等待
+    </Loading>
+  )
+  expect(container.querySelectorAll('g')[0].getAttribute('id')).toContain(
+    'lottie'
+  )
+})

src/packages/loading/demos/h5/demo1.tsx

@@ -1,12 +1,30 @@
 import React from 'react'
-import { Loading, Cell } from '@nutui/nutui-react'
+import { Cell, Loading } from '@nutui/nutui-react'
+import data from '../../../lottie/animation/light/loading.json'
 
 const Demo1 = () => {
   return (
-    <Cell>
-      <Loading type="circular" />
-      <Loading type="spinner" />
-    </Cell>
+    <>
+      <Cell>
+        <Loading type="circular" />
+      </Cell>
+      <Cell>
+        <Loading type="spinner" />
+      </Cell>
+      <Cell>
+        <Loading direction="vertical" type="lottie" jsonData={data} />
+      </Cell>
+      <Cell>
+        <Loading
+          direction="vertical"
+          type="lottie"
+          jsonData={data}
+          lottieProps={{ autoplay: false, loop: false }}
+        >
+          正在奋力加载中，感谢您的等待
+        </Loading>
+      </Cell>
+    </>
   )
 }
 export default Demo1

src/packages/loading/demos/taro/demo1.tsx

@@ -1,12 +1,39 @@
 import React from 'react'
-import { Loading, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Loading } from '@nutui/nutui-react-taro'
+import data from '@/packages/lottie/animation/light/loading.json'
 
 const Demo1 = () => {
   return (
-    <Cell>
-      <Loading type="circular" />
-      <Loading type="spinner" />
-    </Cell>
+    <>
+      <Cell>
+        <Loading type="circular" />
+      </Cell>
+      <Cell>
+        <Loading type="spinner" />
+      </Cell>
+      <Cell>
+        <Loading
+          direction="vertical"
+          type="lottie"
+          jsonData={data}
+          lottieProps={{ style: { width: 56, height: 56 } }}
+        />
+      </Cell>
+      <Cell>
+        <Loading
+          direction="vertical"
+          type="lottie"
+          jsonData={data}
+          lottieProps={{
+            autoplay: false,
+            loop: false,
+            style: { width: 56, height: 56 },
+          }}
+        >
+          正在奋力加载中，感谢您的等待
+        </Loading>
+      </Cell>
+    </>
   )
 }
 export default Demo1

src/packages/loading/demos/taro/demo8.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Loading, Cell, Button, Overlay } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import { Button, Cell, Loading, Overlay } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
   const [visible, setVisible] = useState(false)
@@ -26,9 +27,9 @@ const Demo8 = () => {
         </Button>
       </Cell>
       <Overlay visible={visible}>
-        <div className="wrapper" style={WrapperStyle}>
+        <View className="wrapper" style={WrapperStyle}>
           <Loading direction="vertical">加载中</Loading>
-        </div>
+        </View>
       </Overlay>
     </>
   )

src/packages/loading/doc.en-US.md

@@ -1,7 +1,5 @@
 # Loading
 
-#
-
 A loading icon, Used to show the loading state
 
 ### Import

src/packages/loading/doc.md

@@ -1,7 +1,5 @@
 # Loading 加载中
 
-#
-
 加载图标，用于显示正在加载中的状态
 
 ### 引入

src/packages/loading/doc.taro.md

@@ -1,7 +1,5 @@
 # Loading 加载中
 
-#
-
 加载图标，用于显示正在加载中的状态
 
 ### 引入

src/packages/loading/doc.zh-TW.md

@@ -1,7 +1,5 @@
 # Loading 加載中
 
-#
-
 加載圖標，用於顯示正在加載中的狀態
 
 ### 引入
@@ -80,7 +78,7 @@ import { Loading } from '@nutui/nutui-react'
 
 ### Props
 
-| 属性 | 说明 | 类型 | 默认值 |
+| 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | type | loading图标的样式 | `circular \| spinner` | `circular` |
 | direction | loading图标和文字的排列方式 | `horizontal \| vertical` | `horizontal` |

src/packages/loading/index.taro.ts

@@ -1,8 +1,4 @@
 import { Loading } from './loading.taro'
 
-export type {
-  LoadingProps,
-  LoadingType,
-  LoadingDirection,
-} from './loading.taro'
+export type { LoadingProps, LoadingType, LoadingDirection } from './types'
 export default Loading

src/packages/loading/index.ts

@@ -1,4 +1,4 @@
 import { Loading } from './loading'
 
-export type { LoadingProps, LoadingType, LoadingDirection } from './loading'
+export type { LoadingProps, LoadingType, LoadingDirection } from './types'
 export default Loading

src/packages/loading/loading.scss

@@ -21,9 +21,15 @@
       font-size: $loading-icon-size;
     }
   }
+  .nut-loading-lottie-box {
+    width: 56px;
+    height: 56px;
+    border-radius: $radius-base;
+    background: $loading-lottie-background;
+  }
 
   .nut-loading-text {
-    padding: 8px;
+    padding-top: $spacing-base;
     color: $loading-color;
     font-size: $loading-font-size;
   }