fix: 添加Lottie形式loading新样式

src/packages/loading/demo.taro.tsx

@@ -10,6 +10,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const LoadingDemo = () => {
   const [translated] = useTranslate({
@@ -65,6 +66,7 @@ const LoadingDemo = () => {
         <Demo7 />
         <View className="h2">{translated.title8}</View>
         <Demo8 />
+        <Demo9 />
       </ScrollView>
     </>
   )

src/packages/loading/demo.tsx

@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const LoadingDemo = () => {
   const [translated] = useTranslate({
@@ -61,6 +62,7 @@ const LoadingDemo = () => {
         <Demo7 />
         <h2>{translated.title8}</h2>
         <Demo8 />
+        <Demo9 />
       </div>
     </>
   )

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Loading, Cell, Lottie } from '@nutui/nutui-react'
+import lightLoading from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json'
+
+const Demo9 = () => {
+  const WrapperStyle = {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: '#11141A05',
+  }
+
+  const WrapperTextStyle = {
+    height: 18,
+    padding: 0,
+  }
+
+  const lottie = (
+    <Lottie source={lightLoading} style={{ width: 40, height: 40 }} />
+  )
+
+  return (
+    <>
+      <Cell>
+        <Loading
+          style={WrapperStyle}
+          icon={lottie}
+          direction="vertical"
+          textStyle={WrapperTextStyle}
+        >
+          内容加载中
+        </Loading>
+      </Cell>
+    </>
+  )
+}
+export default Demo9

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Loading, Cell, Lottie } from '@nutui/nutui-react-taro'
+import lightLoading from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json'
+
+const Demo9 = () => {
+  const WrapperStyle = {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: '#11141A05',
+  }
+
+  const WrapperTextStyle = {
+    height: 18,
+    padding: 0,
+  }
+
+  const lottie = (
+    <Lottie source={lightLoading} style={{ width: 40, height: 40 }} />
+  )
+
+  return (
+    <>
+      <Cell>
+        <Loading
+          style={WrapperStyle}
+          icon={lottie}
+          direction="vertical"
+          textStyle={WrapperTextStyle}
+        >
+          内容加载中
+        </Loading>
+      </Cell>
+    </>
+  )
+}
+export default Demo9

src/packages/loading/loading.taro.tsx

@@ -23,10 +23,11 @@ const defaultProps = {
 
 export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
   (props, ref) => {
-    const { className, style, children, direction, icon, ...rest } = {
-      ...defaultProps,
-      ...props,
-    }
+    const { className, style, children, direction, icon, textStyle, ...rest } =
+      {
+        ...defaultProps,
+        ...props,
+      }
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
@@ -47,7 +48,9 @@ export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
       >
         <View className={iconboxClassName()}>{icon || getLoadingIcon()}</View>
         {children ? (
-          <View className={`${classPrefix}-text`}>{children}</View>
+          <View className={`${classPrefix}-text`} style={textStyle}>
+            {children}
+          </View>
         ) : null}
       </View>
     )

src/packages/loading/loading.tsx

@@ -19,14 +19,16 @@ const defaultProps = {
   type: 'circular',
   direction: 'horizontal',
   lottieProps: {},
+  textStyle: {},
 } as WebLoadingProps
 
 export const Loading = React.forwardRef<LoadingRef, Partial<WebLoadingProps>>(
   (props, ref) => {
-    const { className, style, children, direction, icon, ...rest } = {
-      ...defaultProps,
-      ...props,
-    }
+    const { className, style, children, direction, icon, textStyle, ...rest } =
+      {
+        ...defaultProps,
+        ...props,
+      }
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
@@ -47,7 +49,9 @@ export const Loading = React.forwardRef<LoadingRef, Partial<WebLoadingProps>>(
       >
         <div className={iconboxClassName()}>{icon || getLoadingIcon()}</div>
         {children ? (
-          <div className={`${classPrefix}-text`}>{children}</div>
+          <div className={`${classPrefix}-text`} style={textStyle}>
+            {children}
+          </div>
         ) : null}
       </div>
     )

src/types/spec/loading/base.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 import { BaseProps } from '../../base/props'
 import { Direction } from '../../base/atoms'
 
@@ -12,4 +12,5 @@ export interface BaseLoading<LOTTIE_PROPS = any> extends BaseProps {
 
   jsonData: any
   lottieProps: Partial<LOTTIE_PROPS>
+  textStyle?: CSSProperties
 }