From c3bd6bb006a60cb235d8e77c59cf38b3524eb1dc Mon Sep 17 00:00:00 2001 From: eiinu <44915689+eiinu@users.noreply.github.com> Date: Mon, 13 Mar 2023 09:13:29 +0800 Subject: [PATCH] =?UTF-8?q?chore(progress):=20icon=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20(#769)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/progress.spec.tsx.snap | 6 +++-- .../progress/__tests__/progress.spec.tsx | 10 ++++---- src/packages/progress/demo.taro.tsx | 13 +++++----- src/packages/progress/demo.tsx | 13 +++++----- src/packages/progress/doc.en-US.md | 24 ++++++++++--------- src/packages/progress/doc.md | 24 ++++++++++--------- src/packages/progress/doc.taro.md | 24 ++++++++++--------- src/packages/progress/doc.zh-TW.md | 24 ++++++++++--------- src/packages/progress/progress.taro.tsx | 24 ++++--------------- src/packages/progress/progress.tsx | 24 ++++--------------- 10 files changed, 86 insertions(+), 100 deletions(-) diff --git a/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap b/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap index 284c70f..a6e0930 100644 --- a/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap +++ b/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap @@ -4,14 +4,16 @@ exports[`should render progress when use props 1`] = `
) const inner = container.querySelector('.nut-progress-inner') - expect(inner?.getAttribute('style')).toBe( - 'width: 50%; border-radius: 12px; background: blue;' - ) + expect(inner?.getAttribute('style')).toBe('width: 50%; background: blue;') const span = container.querySelector('.nut-progress-text span') expect(span?.getAttribute('style')).toBe('color: red;') }) @@ -32,7 +30,11 @@ test('should hide percentage when use showText props', () => { }) test('should render inside percentage when use textInside props', () => { - const { container } = render() + const { container } = render( + + test + + ) const text = container.querySelector('.nut-progress-text') expect(text).toHaveClass('nut-progress-text nut-progress-insidetext') }) diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx index b3ecadd..67cfbde 100644 --- a/src/packages/progress/demo.taro.tsx +++ b/src/packages/progress/demo.taro.tsx @@ -3,12 +3,13 @@ import Taro from '@tarojs/taro' import { useTranslate } from '@/sites/assets/locale/taro' import { Cell, - Icon, Progress, Button, Toast, + Image, } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' +import { Issue } from '@nutui/icons-react-taro' interface T { basic: string @@ -110,9 +111,10 @@ const ProgressDemo = () => {

{translated.customContent}

- @@ -143,8 +145,7 @@ const ProgressDemo = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} />

{translated.dynamicChange}

diff --git a/src/packages/progress/demo.tsx b/src/packages/progress/demo.tsx index 8f0194e..efffd09 100644 --- a/src/packages/progress/demo.tsx +++ b/src/packages/progress/demo.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react' +import { Issue } from '@nutui/icons-react' import { useTranslate } from '../../sites/assets/locale' import { Progress } from './progress' import { Cell } from '@/packages/cell/cell' -import { Icon } from '@/packages/icon/icon' +import { Image } from '@/packages/image/image' import { Button } from '@/packages/button/button' import Toast from '../toast' @@ -100,9 +101,10 @@ const ProgressDemo = () => {

{translated.customContent}

- @@ -133,8 +135,7 @@ const ProgressDemo = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} />

{translated.dynamicChange}

diff --git a/src/packages/progress/doc.en-US.md b/src/packages/progress/doc.en-US.md index fff5177..dce779d 100644 --- a/src/packages/progress/doc.en-US.md +++ b/src/packages/progress/doc.en-US.md @@ -8,7 +8,7 @@ Used to show the current progress of the operation. ```js // react -import { Progress, Icon } from '@nutui/nutui-react'; +import { Progress } from '@nutui/nutui-react'; ``` ## Demo @@ -123,7 +123,7 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Image, Cell } from '@nutui/nutui-react'; const App = () => { return ( @@ -133,9 +133,10 @@ const App = () => { percentage={60} textInside > - @@ -189,7 +190,8 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Cell } from '@nutui/nutui-react'; +import { Issue } from '@nutui/icons-react'; const App = () => { return ( @@ -213,8 +215,7 @@ const App = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} /> @@ -295,9 +296,10 @@ export default App; | textBackground | Progress bar text background color setting | string | 同进度条颜色 | textType | Progress bar text type setting，`text`(展示文字)/`icon`(展示icon标签) | string | `text` | status | The current state of the progress bar, `true`展示动画效果 | boolean | `false` -| iconName | Icon Name | string | `checked` -| iconColor | Icon Color | string | `#439422` -| iconSize | Icon Size | string | `16px` +| icon`1.5.0` | Custom Icon | ReactNode | `` +| iconName`v1.5.0 Abandon` | Icon Name | string | `checked` +| iconColor`v1.5.0 Abandon` | Icon Color | string | `#439422` +| iconSize`v1.5.0 Abandon` | Icon Size | string | `16px` | rounded `v1.4.7 Abandon`| Whether the corners are rounded | boolean \| string | `true` diff --git a/src/packages/progress/doc.md b/src/packages/progress/doc.md index 1d43e37..60718c8 100644 --- a/src/packages/progress/doc.md +++ b/src/packages/progress/doc.md @@ -8,7 +8,7 @@ ```js // react -import { Progress, Icon } from '@nutui/nutui-react'; +import { Progress } from '@nutui/nutui-react'; ``` ## 代码演示 @@ -123,7 +123,7 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Image, Cell } from '@nutui/nutui-react'; const App = () => { return ( @@ -132,9 +132,10 @@ const App = () => { percentage={60} textInside > - @@ -187,7 +188,8 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Cell } from '@nutui/nutui-react'; +import { Issue } from '@nutui/icons-react'; const App = () => { return ( @@ -211,8 +213,7 @@ const App = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} /> @@ -293,9 +294,10 @@ export default App; | textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色 | textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text` | status | 进度条当前状态，`true`展示动画效果 | boolean | `false` -| iconName | Icon 名称 | string | `checked` -| iconColor | Icon 颜色 | string | `#439422` -| iconSize | Icon 大小 | string | `16px` +| icon`1.5.0` | 自定义图标 | ReactNode | `` +| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked` +| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422` +| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px` | rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true` ## 主题定制 diff --git a/src/packages/progress/doc.taro.md b/src/packages/progress/doc.taro.md index c9431f8..ea1fe04 100644 --- a/src/packages/progress/doc.taro.md +++ b/src/packages/progress/doc.taro.md @@ -7,7 +7,7 @@ ### 安装 ```js -import { Progress, Icon } from '@nutui/nutui-react-taro'; +import { Progress } from '@nutui/nutui-react-taro'; ``` ## 代码演示 @@ -122,7 +122,7 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react-taro'; +import { Progress, Image, Cell } from '@nutui/nutui-react-taro'; const App = () => { return ( @@ -131,9 +131,10 @@ const App = () => { percentage={60} textInside > - @@ -186,7 +187,8 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react-taro'; +import { Progress, Cell } from '@nutui/nutui-react-taro'; +import { Issue } from '@nutui/icons-react-taro'; const App = () => { return ( @@ -210,8 +212,7 @@ const App = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} /> @@ -292,9 +293,10 @@ export default App; | textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色 | textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text` | status | 进度条当前状态，`true`展示动画效果 | boolean | `false` -| iconName | Icon 名称 | string | `checked` -| iconColor | Icon 颜色 | string | `#439422` -| iconSize | Icon 大小 | string | `16px` +| icon`1.5.0` | 自定义图标 | ReactNode | `` +| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked` +| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422` +| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px` | rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true` ## 主题定制 diff --git a/src/packages/progress/doc.zh-TW.md b/src/packages/progress/doc.zh-TW.md index 097a967..4252257 100644 --- a/src/packages/progress/doc.zh-TW.md +++ b/src/packages/progress/doc.zh-TW.md @@ -8,7 +8,7 @@ ```js // react -import { Progress, Icon } from '@nutui/nutui-react'; +import { Progress } from '@nutui/nutui-react'; ``` ## 代碼演示 @@ -123,7 +123,7 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Image, Cell } from '@nutui/nutui-react'; const App = () => { return ( @@ -132,9 +132,10 @@ const App = () => { percentage={60} textInside > - @@ -187,7 +188,8 @@ export default App; :::demo ```jsx import React from "react"; -import { Progress, Icon, Cell } from '@nutui/nutui-react'; +import { Progress, Cell } from '@nutui/nutui-react'; +import { Issue } from '@nutui/icons-react'; const App = () => { return ( @@ -211,8 +213,7 @@ const App = () => { strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)" strokeWidth="15" textType="icon" - iconName="issue" - iconColor="red" + icon={} /> @@ -293,9 +294,10 @@ export default App; | textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色 | textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text` | status | 进度条当前状态，`true`展示动画效果 | boolean | `false` -| iconName | Icon 名称 | string | `checked` -| iconColor | Icon 颜色 | string | `#439422` -| iconSize | Icon 大小 | string | `16px` +| icon`1.5.0` | 自定义图标 | ReactNode | `` +| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked` +| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422` +| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px` | rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true` ## 主題定制 diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx index 4a2c75f..f7294bd 100644 --- a/src/packages/progress/progress.taro.tsx +++ b/src/packages/progress/progress.taro.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent, CSSProperties, ReactNode } from 'react' import classNames from 'classnames' -import Icon from '@/packages/icon/index.taro' +import { Checked } from '@nutui/icons-react-taro' import bem from '@/utils/bem' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -24,9 +24,7 @@ export interface ProgressProps extends BasicComponent { textBackground: string textType: TextType status: boolean - iconName: string - iconColor: string - iconSize: string + icon: ReactNode children: ReactNode } @@ -46,9 +44,7 @@ const defaultProps = { textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)', textType: 'text', status: false, - iconName: 'checked', - iconColor: '#439422', - iconSize: '16px', + icon: null, children: undefined, } as ProgressProps @@ -71,12 +67,8 @@ export const Progress: FunctionComponent< textBackground, textType, status, - iconName, - iconColor, - iconSize, + icon, children, - iconClassPrefix, - iconFontClassName, ...rest } = { ...defaultProps, @@ -171,13 +163,7 @@ export const Progress: FunctionComponent< )} {textType === 'icon' && ( - + <>{icon || } )}
)} diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx index 26339bf..3824c74 100644 --- a/src/packages/progress/progress.tsx +++ b/src/packages/progress/progress.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent, CSSProperties, ReactNode } from 'react' import classNames from 'classnames' -import Icon from '@/packages/icon' +import { Checked } from '@nutui/icons-react' import bem from '@/utils/bem' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -24,9 +24,7 @@ export interface ProgressProps extends BasicComponent { textBackground: string textType: TextType status: boolean - iconName: string - iconColor: string - iconSize: string + icon: ReactNode children: ReactNode } @@ -46,9 +44,7 @@ const defaultProps = { textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)', textType: 'text', status: false, - iconName: 'checked', - iconColor: '#439422', - iconSize: '16px', + icon: null, children: undefined, } as ProgressProps @@ -71,12 +67,8 @@ export const Progress: FunctionComponent< textBackground, textType, status, - iconName, - iconColor, - iconSize, + icon, children, - iconClassPrefix, - iconFontClassName, ...rest } = { ...defaultProps, @@ -171,13 +163,7 @@ export const Progress: FunctionComponent< )} {textType === 'icon' && ( - + <>{icon || } )}
)} -- GitLab