Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 c3bd6bb0 编写于 作者: E eiinu 提交者： GitHub
浏览文件
操作

chore(progress): icon 组件替换 (#769)

上级 a67dee05
隐藏空白更改
内联 并排
Showing with 86 addition and 100 deletion
src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap
浏览文件 @ c3bd6bb0
......@@ -4,14 +4,16 @@ exports[`should render progress when use props 1`] = `
<DocumentFragment>
<div
class="nut-progress "
iconclassprefix="nut-icon"
iconfontclassname="nutui-iconfont"
>
<div
class="nut-progress-outer nut-progress-base"
style="border-radius: 12px; background: rgb(243, 243, 243);"
style="background: rgb(243, 243, 243);"
>
<div
class="nut-progress-inner"
style="width: 100%; border-radius: 12px;"
style="width: 100%;"
/>
</div>
<div
......
src/packages/progress/__tests__/progress.spec.tsx
浏览文件 @ c3bd6bb0
......@@ -18,9 +18,7 @@ test('should render different height and color when use color height props', asy
/>
)
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(<Progress percentage={50} textInside />)
const { container } = render(
<Progress percentage={50} textInside>
test
</Progress>
)
const text = container.querySelector('.nut-progress-text')
expect(text).toHaveClass('nut-progress-text nut-progress-insidetext')
})
......
src/packages/progress/demo.taro.tsx
浏览文件 @ c3bd6bb0
......@@ -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 = () => {
<h2>{translated.customContent}</h2>
<Cell style={cellStyles}>
<Progress percentage={60} textInside>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red" />}
/>
</Cell>
<h2>{translated.dynamicChange}</h2>
......
src/packages/progress/demo.tsx
浏览文件 @ c3bd6bb0
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 = () => {
<h2>{translated.customContent}</h2>
<Cell style={cellStyles}>
<Progress percentage={60} textInside>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red" />}
/>
</Cell>
<h2>{translated.dynamicChange}</h2>
......
src/packages/progress/doc.en-US.md
浏览文件 @ c3bd6bb0
......@@ -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
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red" />}
/>
</Cell>
</>
......@@ -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 | `<Checked width={16} height={16} color="#439422"/>`
| 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`
......
src/packages/progress/doc.md
浏览文件 @ c3bd6bb0
......@@ -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
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red"/>}
/>
</Cell>
</>
......@@ -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 | `<Checked width={16} height={16} color="#439422"/>`
| 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`
## 主题定制
......
src/packages/progress/doc.taro.md
浏览文件 @ c3bd6bb0
......@@ -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
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red" />}
/>
</Cell>
</>
......@@ -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 | `<Checked width={16} height={16} color="#439422"/>`
| 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`
## 主题定制
......
src/packages/progress/doc.zh-TW.md
浏览文件 @ c3bd6bb0
......@@ -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
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -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={<Issue color="red" />}
/>
</Cell>
</>
......@@ -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 | `<Checked width={16} height={16} color="#439422"/>`
| 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`
## 主題定制
......
src/packages/progress/progress.taro.tsx
浏览文件 @ c3bd6bb0
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<
</span>
)}
{textType === 'icon' && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={iconSize}
name={iconName}
color={iconColor}
/>
<>{icon || <Checked width={16} height={16} color="#439422" />}</>
)}
</div>
)}
......
src/packages/progress/progress.tsx
浏览文件 @ c3bd6bb0
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<
</span>
)}
{textType === 'icon' && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={iconSize}
name={iconName}
color={iconColor}
/>
<>{icon || <Checked width={16} height={16} color="#439422" />}</>
)}
</div>
)}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或