From 94a4239d6f84597c68d90fba17cc69a65e1ed868 Mon Sep 17 00:00:00 2001 From: oasis Date: Tue, 15 Apr 2025 15:39:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor(loading):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=86=85=E7=BD=AE=E7=9A=84=20lottie=EF=BC=8C=E5=8F=AF=E9=80=9A?= =?UTF-8?q?=E8=BF=87=20icon=20=E5=B1=9E=E6=80=A7=E5=8A=A0=E8=BD=BD=20lotti?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../loading/__test__/loading.spec.tsx | 18 +-------- src/packages/loading/demos/h5/demo1.tsx | 22 ++++------- src/packages/loading/demos/taro/demo1.tsx | 29 ++++----------- src/packages/loading/loading.scss | 7 ---- src/packages/loading/loading.taro.tsx | 36 ++---------------- src/packages/loading/loading.tsx | 37 ++----------------- src/types/spec/loading/base.ts | 2 +- 7 files changed, 25 insertions(+), 126 deletions(-) diff --git a/src/packages/loading/__test__/loading.spec.tsx b/src/packages/loading/__test__/loading.spec.tsx index 74fb492abf..41986cec31 100644 --- a/src/packages/loading/__test__/loading.spec.tsx +++ b/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() @@ -30,19 +30,3 @@ test('custom icon test', () => { ) expect(container.querySelector('svg')).toHaveClass('nut-icon-Star') }) - -test('use lottie', () => { - const { container } = render( - - 正在奋力加载中，感谢您的等待 - - ) - expect(container.querySelectorAll('g')[0].getAttribute('id')).toContain( - 'lottie' - ) -}) diff --git a/src/packages/loading/demos/h5/demo1.tsx b/src/packages/loading/demos/h5/demo1.tsx index a15b66b067..b7e29de34f 100644 --- a/src/packages/loading/demos/h5/demo1.tsx +++ b/src/packages/loading/demos/h5/demo1.tsx @@ -1,28 +1,22 @@ import React from 'react' -import { Cell, Loading } from '@nutui/nutui-react' -import data from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json' +import { Cell, Loading, Lottie } from '@nutui/nutui-react' +import lightLoading from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json' const Demo1 = () => { return ( <> - - - - - - 正在奋力加载中，感谢您的等待 - + icon={ + <> + + + } + /> ) diff --git a/src/packages/loading/demos/taro/demo1.tsx b/src/packages/loading/demos/taro/demo1.tsx index 659f047f6c..39fd907989 100644 --- a/src/packages/loading/demos/taro/demo1.tsx +++ b/src/packages/loading/demos/taro/demo1.tsx @@ -1,38 +1,23 @@ import React from 'react' -import { Cell, Loading } from '@nutui/nutui-react-taro' -import data from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json' +import { Loading, Cell, Lottie } from '@nutui/nutui-react-taro' +import lightLoading from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json' const Demo1 = () => { return ( <> - - + + + } /> - - - 正在奋力加载中，感谢您的等待 - - ) } diff --git a/src/packages/loading/loading.scss b/src/packages/loading/loading.scss index 92415b4f76..9b4c694b4a 100644 --- a/src/packages/loading/loading.scss +++ b/src/packages/loading/loading.scss @@ -22,13 +22,6 @@ } } - .nut-loading-lottie-box { - width: 56px; - height: 56px; - border-radius: $radius-base; - background: $loading-lottie-background; - } - .nut-loading-text { color: $loading-color; font-size: $loading-font-size; diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx index 5405d58f57..1d9b3c27c0 100644 --- a/src/packages/loading/loading.taro.tsx +++ b/src/packages/loading/loading.taro.tsx @@ -1,15 +1,12 @@ -import React, { useRef } from 'react' +import React from 'react' import classNames from 'classnames' import { Loading as IconLoading, Loading1 as IconLoading1, } from '@nutui/icons-react-taro' import { View } from '@tarojs/components' -import Lottie from '../lottie/index.taro' import { ComponentDefaults } from '@/utils/typings' -import { TaroLoadingProps, LoadingRef, LoadingType } from '@/types' -import { mergeProps } from '@/utils/merge-props' -import { LottieProps } from '@/packages/lottie' // 方便以后扩展设置为键值对形式 +import { LoadingRef, LoadingType, TaroLoadingProps } from '@/types' // 方便以后扩展设置为键值对形式 const loadingMap: { [key in LoadingType]?: any } = { @@ -22,7 +19,6 @@ const defaultProps = { // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标 type: 'circular', direction: 'horizontal', - lottieProps: {}, } as TaroLoadingProps const defaultLottieProps = { loop: true, @@ -30,42 +26,18 @@ const defaultLottieProps = { } export const Loading = React.forwardRef>( (props, ref) => { - const { - className, - style, - children, - direction, - icon, - lottieProps, - ...rest - } = { + const { className, style, children, direction, icon, ...rest } = { ...defaultProps, ...props, } - // @ts-ignore - const loadingLottieRef: React.MutableRefObject = - useRef() - const mergedLottieProps = mergeProps(defaultLottieProps, lottieProps) - React.useImperativeHandle(ref, () => loadingLottieRef) const classPrefix = 'nut-loading' const getLoadingIcon = () => { - if (rest.type === 'lottie' && rest.jsonData) { - return ( - - ) - } const LoadingIcon = loadingMap[rest.type] || IconLoading1 return } const iconboxClassName = () => { - if (rest.type === 'lottie') return `${classPrefix}-lottie-box` - return `${classPrefix}-icon-box` + return !icon ? `${classPrefix}-icon-box` : '' } return ( >( (props, ref) => { - const { - className, - style, - children, - direction, - icon, - lottieProps, - ...rest - } = { + const { className, style, children, direction, icon, ...rest } = { ...defaultProps, ...props, } - const loadingLottieRef = useRef(null) - // @ts-ignore - // const loadingLottieRef: React.MutableRefObject = - // useRef() - const mergedLottieProps = mergeProps(defaultLottieProps, lottieProps) - React.useImperativeHandle(ref, () => loadingLottieRef) const classPrefix = 'nut-loading' const getLoadingIcon = () => { - if (!rest.jsonData) { - console.warn('Lottie animation requires jsonData prop') - } - if (rest.type === 'lottie') { - return ( - - ) - } const LoadingIcon = loadingMap[rest.type] || IconLoading1 return } const iconboxClassName = () => { - if (rest.type === 'lottie') return `${classPrefix}-lottie-box` - return `${classPrefix}-icon-box` + return !icon ? `${classPrefix}-icon-box` : '' } return (
extends BaseProps { type: LoadingType