Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

未验证 提交 12527126 编写于 作者: A ailululu 提交者： GitHub
浏览文件
操作

feat: progress 组件 (#187)

上级 18e16b3e
隐藏空白更改
内联 并排
Showing with 1419 addition and 0 deletion
src/config.json
浏览文件 @ 12527126
......@@ -708,6 +708,16 @@
"sort": 20,
"show": true,
"author": "swag~jun"
},
{
"version": "1.0.0",
"name": "Progress",
"type": "component",
"cName": "进度条",
"desc": "用来展示进度",
"sort": 20,
"show": true,
"author": "ailululu"
}
]
},
......
src/packages/progress/__tests__/progress.spec.tsx 0 → 100644
浏览文件 @ 12527126
import * as React from 'react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Progress } from '../progress'
test('should render progress when use props', async () => {
const { asFragment, container } = render(<Progress percentage={100} />)
expect(asFragment()).toMatchSnapshot()
})
test('should render different height and color when use color height props', async () => {
const { container } = render(
<Progress
percentage={50}
strokeColor="blue"
strokeWidth="20"
textColor="red"
/>
)
const inner = container.querySelector('.nut-progress-inner')
expect(inner?.getAttribute('style')).toBe(
'width: 50%; border-radius: 12px; background: blue;'
)
const span = container.querySelector('.nut-progress-text span')
expect(span?.getAttribute('style')).toBe('color: red;')
})
test('should hide percentage when use showText props', () => {
const { container } = render(<Progress percentage={30} showText={false} />)
const text = container.querySelector('.nut-progress-text')
expect(text).toBeNull()
})
test('should render inside percentage when use textInside props', () => {
const { container } = render(<Progress percentage={50} textInside />)
const text = container.querySelector('.nut-progress-text')
expect(text).toHaveClass('nut-progress-text nut-progress-insidetext')
})
test('should render custom size when use size props', () => {
const { container } = render(<Progress percentage={50} size="large" />)
expect(container.querySelector('.nut-progress-outer')).toHaveClass(
'nut-progress-large'
)
})
src/packages/progress/demo.tsx 0 → 100644
浏览文件 @ 12527126
import React, { useState } from 'react'
import { useTranslate } from '../../sites/assets/locale'
import { Progress } from './progress'
import { Cell } from '@/packages/cell/cell'
import { Icon } from '@/packages/icon/icon'
import { Button } from '@/packages/button/button'
import Toast from '../toast'
interface T {
basic: string
customStyle: string
noShowPercentage: string
showPercentage: string
showInsidePercentage: string
customContent: string
customSize: string
statusDisplay: string
dynamicChange: string
reduce: string
add: string
}
const ProgressDemo = () => {
const cellStyles = {
paddingRight: '30px',
}
const [translated] = useTranslate<T>({
'zh-CN': {
basic: '基础用法',
customStyle: '线形进度条-设置颜色高度',
noShowPercentage: '百分比不显示',
showPercentage: '百分比外显',
showInsidePercentage: '百分比内显',
customContent: '百分比内显自定义',
customSize: '自定义尺寸',
statusDisplay: '状态显示',
dynamicChange: '动态改变',
reduce: '减少',
add: '增加',
},
'zh-TW': {
basic: '基礎用法',
customStyle: '線形進度條-設置顏色高度',
noShowPercentage: '百分比不顯示',
showPercentage: '百分比外顯',
showInsidePercentage: '百分比內顯',
customContent: '百分比內顯自定義',
customSize: '自定義尺寸',
statusDisplay: '狀態顯示',
dynamicChange: '動態改變',
reduce: '減少',
add: '增加',
},
'en-US': {
basic: 'Basic Usage',
customStyle: 'Custom Style',
noShowPercentage: 'Don’t Show Percentage',
showPercentage: 'Percentage displayed outside',
showInsidePercentage: 'Percentage displayed inside',
customContent: 'Custom Content',
customSize: 'Custom Size',
statusDisplay: 'Status Display',
dynamicChange: 'Dynamic Change',
reduce: 'reduce',
add: 'add',
},
})
const [value, setValue] = useState(0)
return (
<>
<div className="demo">
<h2>{translated.basic}</h2>
<Cell style={cellStyles}>
<Progress percentage={30} />
</Cell>
<h2>{translated.customStyle}</h2>
<Cell style={cellStyles}>
<Progress
percentage={30}
strokeColor="rgba(250,44,25,0.47)"
stroke-width="20"
textColor="red"
/>
</Cell>
<h2>{translated.noShowPercentage}</h2>
<Cell style={cellStyles}>
<Progress percentage={50} showText={false} />
</Cell>
<h2>{translated.showPercentage}</h2>
<Cell style={cellStyles}>
<Progress percentage={30} />
</Cell>
<h2>{translated.showInsidePercentage}</h2>
<Cell style={cellStyles}>
<Progress percentage={60} textInside />
</Cell>
<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"
/>
</Progress>
</Cell>
<h2>{translated.customSize}</h2>
<Cell style={cellStyles}>
<Progress percentage={30} size="small" textInside />
</Cell>
<Cell style={cellStyles}>
<Progress percentage={50} size="base" textInside />
</Cell>
<Cell style={cellStyles}>
<Progress percentage={70} size="large" textInside />
</Cell>
<h2>{translated.statusDisplay}</h2>
<Cell style={cellStyles}>
<Progress
percentage={30}
strokeColor="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</Cell>
<Cell style={cellStyles}>
<Progress percentage={100} textType="icon" />
</Cell>
<Cell style={cellStyles}>
<Progress
percentage={100}
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
/>
</Cell>
<h2>{translated.dynamicChange}</h2>
<Cell style={cellStyles}>
<Progress percentage={value} />
</Cell>
<Cell style={cellStyles}>
<Button
type="default"
style={{ margin: 8 }}
// eslint-disable-next-line consistent-return
onClick={() => {
let num = value
if (value <= 0) {
Toast.text('进度已为0')
return false
}
num -= 10
setValue(num)
}}
>
{translated.reduce}
</Button>
<Button
type="primary"
style={{ margin: 8 }}
// eslint-disable-next-line consistent-return
onClick={() => {
let num = value
if (value >= 100) {
Toast.text('进度已为100%')
return false
}
num += 10
setValue(num)
}}
>
{translated.add}
</Button>
</Cell>
</div>
</>
)
}
export default ProgressDemo
src/packages/progress/doc.en-US.md 0 → 100644
浏览文件 @ 12527126
# Progress
### Introduce
Used to show the current progress of the operation.
### Install
```js
import { Progress, Icon } from '@nutui/nutui-react';
```
## Demo
### Basic Usage
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### Custom Style
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
strokeColor="rgba(250,44,25,0.47)"
stroke-width="20"
textColor="red"
/>
</Cell>
);
};
export default App;
```
:::
### Don't Show Percentage
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="50"
showText={false}
/>
</Cell>
);
};
export default App;
```
:::
### Show Percentage
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### Text Inside
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="60"
textInside
/>
</Cell>
);
};
export default App;
```
:::
### Custom Content
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
</>
);
};
export default App;
```
:::
## Custom Size
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
size="small"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="50"
size="base"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="70"
size="large"
textInside
/>
</Cell>
</>
);
};
export default App;
```
:::
### Status Display
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
strokeColor="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</Cell>
<Cell>
<Progress
percentage="100"
textType="icon"
/>
</Cell>
<Cell>
<Progress
percentage="100"
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
/>
</Cell>
</>
);
};
export default App;
```
:::
### Dynamic Change
:::demo
```jsx
import React from "react";
import { Progress, Cell, Button } from '@nutui/nutui-react';
const App = () => {
const [value, setValue] = useState(0);
return (
<>
<Cell>
<Progress
percentage={value}
/>
</Cell>
<Cell>
<Button
type="default"
style={{ margin: 8 }}
onClick={() => {
let num = value;
if (value <= 0) {
return false;
}
num -= 10;
setValue(num);
}}
>
减少
</Button>
<Button
type="primary"
onClick={() => {
let num = value;
if (value >= 100) {
return false;
}
num += 10;
setValue(num);
}}
>
增加
</Button>
</Cell>
</>
);
};
export default App;
```
:::
## API
### Props
| Props | Description | Type | Default
|----- | ----- | ----- | -----
| percentage | percentage | Number | 0
| isShowPercentage | Whether to display the percent sign | Boolean | true
| fillColor | Progress bar background color | String | #f3f3f3
| strokeColor | Stroke color | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | Stroke width | String | -
| size | Progress bar and text size, eg `small` `base` `large` | String | base
| showText | Whether to show text | Boolean | true
| textInside | Progress bar text display position(`false`外显，`true`内显) | Boolean | false
| textColor | Progress bar text color setting | String | 外显`#333` 内显`#fff`
| textWidth | Progress bar text width setting | String | 35px
| 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
| rounded | Whether the corners are rounded | boolean｜String | true
src/packages/progress/doc.md 0 → 100644
浏览文件 @ 12527126
# Progress 进度条
### 介绍
展示操作或任务的当前进度。
### 安装
```js
import { Progress, Icon } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### 设置高度和颜色
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
strokeColor="rgba(250,44,25,0.47)"
stroke-width="20"
textColor="red"
/>
</Cell>
);
};
export default App;
```
:::
### 设置百分比不显示
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="50"
showText={false}
/>
</Cell>
);
};
export default App;
```
:::
### 设置百分比外显
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### 设置百分比内显
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="60"
textInside
/>
</Cell>
);
};
export default App;
```
:::
### 设置内显自定义内容
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
);
};
export default App;
```
:::
### 自定义尺寸
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
size="small"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="50"
size="base"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="70"
size="large"
textInside
/>
</Cell>
</>
);
};
export default App;
```
:::
### 设置状态显示
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
strokeColor="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</Cell>
<Cell>
<Progress
percentage="100"
textType="icon"
/>
</Cell>
<Cell>
<Progress
percentage="100"
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
/>
</Cell>
</>
);
};
export default App;
```
:::
### 动态改变
:::demo
```jsx
import React from "react";
import { Progress, Cell, Button } from '@nutui/nutui-react';
const App = () => {
const [value, setValue] = useState(0);
return (
<>
<Cell>
<Progress
percentage={value}
/>
</Cell>
<Cell>
<Button
type="default"
style={{ margin: 8 }}
onClick={() => {
let num = value;
if (value <= 0) {
return false;
}
num -= 10;
setValue(num);
}}
>
减少
</Button>
<Button
type="primary"
onClick={() => {
let num = value;
if (value >= 100) {
return false;
}
num += 10;
setValue(num);
}}
>
增加
</Button>
</Cell>
</>
);
};
export default App;
```
:::
## API
### Props
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| percentage | 百分比 | Number | 0
| isShowPercentage | 是否需要展示百分号 | Boolean | true
| fillColor | 进度条填充颜色 | String | #f3f3f3
| strokeColor | 进度条线条背景色 | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | 进度条宽度 | String | -
| size | 进度条及文字尺寸，可选值`small` `base` `large` | String | base
| showText | 是否显示进度条文字内容 | Boolean | true
| textInside | 进度条文字显示位置(`false`外显，`true`内显) | Boolean | false
| textColor | 进度条文字颜色设置 | String | 外显`#333` 内显`#fff`
| textWidth | 进度条文字宽度 | String | 35px
| textBackground | 进度条文字背景颜色设置 | String | 同进度条颜色
| textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | String | text
| status | 进度条当前状态，`true`展示动画效果 | Boolean | false
| iconName | Icon 名称 | String | checked
| iconColor | Icon 颜色 | String | #439422
| iconSize | Icon 大小 | String | 16px
| rounded | 是否圆角 | boolean｜String | true
src/packages/progress/doc.zh-TW.md 0 → 100644
浏览文件 @ 12527126
# Progress 進度條
### 介紹
展示操作或任務的當前進度。
### 安裝
```js
import { Progress, Icon } from '@nutui/nutui-react';
```
## 代碼演示
### 基礎用法
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### 線形進度條-設置顏色高度
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
strokeColor="rgba(250,44,25,0.47)"
stroke-width="20"
textColor="red"
/>
</Cell>
);
};
export default App;
```
:::
### 百分比不顯示
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="50"
showText={false}
/>
</Cell>
);
};
export default App;
```
:::
### 百分比外顯
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="30"
/>
</Cell>
);
};
export default App;
```
:::
### 百分比內顯
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage="60"
textInside
/>
</Cell>
);
};
export default App;
```
:::
### 百分比內顯自定義
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<Cell>
<Progress
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
);
};
export default App;
```
:::
### 自定義尺寸
:::demo
```jsx
import React from "react";
import { Progress, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
size="small"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="50"
size="base"
textInside
/>
</Cell>
<Cell>
<Progress
percentage="70"
size="large"
textInside
/>
</Cell>
</>
);
};
export default App;
```
:::
### 狀態顯示
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Cell>
<Progress
percentage="30"
strokeColor="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</Cell>
<Cell>
<Progress
percentage="100"
textType="icon"
/>
</Cell>
<Cell>
<Progress
percentage="100"
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
/>
</Cell>
</>
);
};
export default App;
```
:::
### 動態改變
:::demo
```jsx
import React from "react";
import { Progress, Cell, Button } from '@nutui/nutui-react';
const App = () => {
const [value, setValue] = useState(0);
return (
<>
<Cell>
<Progress
percentage={value}
/>
</Cell>
<Cell>
<Button
type="default"
style={{ margin: 8 }}
onClick={() => {
let num = value;
if (value <= 0) {
return false;
}
num -= 10;
setValue(num);
}}
>
減少
</Button>
<Button
type="primary"
onClick={() => {
let num = value;
if (value >= 100) {
return false;
}
num += 10;
setValue(num);
}}
>
增加
</Button>
</Cell>
</>
);
};
export default App;
```
:::
## API
### Props
| 屬性 | 說明 | 類型 | 預設值
|----- | ----- | ----- | -----
| percentage | 百分比 | Number | 0
| isShowPercentage | 是否需要展示百分号 | Boolean | true
| fillColor | 进度条填充颜色 | String | #f3f3f3
| strokeColor | 进度条线条背景色 | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | 进度条宽度 | String | -
| size | 进度条及文字尺寸，可选值`small` `base` `large` | String | base
| showText | 是否显示进度条文字内容 | Boolean | true
| textInside | 进度条文字显示位置(`false`外显，`true`内显) | Boolean | false
| textColor | 进度条文字颜色设置 | String | 外显`#333` 内显`#fff`
| textWidth | 进度条文字宽度 | String | 35px
| textBackground | 进度条文字背景颜色设置 | String | 同进度条颜色
| textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | String | text
| status | 进度条当前状态，`true`展示动画效果 | Boolean | false
| iconName | Icon 名称 | String | checked
| iconColor | Icon 颜色 | String | #439422
| iconSize | Icon 大小 | String | 16px
| rounded | 是否圆角 | boolean｜String | true
src/packages/progress/index.ts 0 → 100644
浏览文件 @ 12527126
import { Progress } from './progress'
export default Progress
src/packages/progress/progress.scss 0 → 100644
浏览文件 @ 12527126
@import '../icon/icon.scss';
.nut-progress {
display: flex;
align-items: center;
position: relative;
width: 100%;
&-outer {
flex: auto;
.nut-progress-text {
}
.nut-progress-active:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: $progress-border-radius;
animation: progressActive 2s ease-in-out infinite;
}
}
&-small {
height: $progress-small-height;
.nut-progress-text {
font-size: $progress-small-font-size;
padding: $progress-small-padding;
}
}
&-base {
height: $progress-base-height;
.nut-progress-text {
font-size: $progress-base-font-size;
padding: $progress-base-padding;
}
}
&-large {
height: $progress-large-height;
.nut-progress-text {
font-size: $progress-large-font-size;
padding: $progress-large-padding;
}
}
&-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.4s;
}
&-text {
display: flex;
padding: $progress-text-padding;
font-size: $progress-text-font-size;
line-height: 1;
min-width: 35px;
}
&-insidetext {
position: absolute;
top: -4px;
bottom: -4px;
display: flex;
align-items: center;
min-width: 0px;
transition: all 0.4s;
transform: translate(-50%);
border-radius: $progress-insidetext-border-radius;
}
@keyframes progressActive {
0% {
background: rgba(255, 255, 255, 0.1);
width: 0;
}
20% {
background: rgba(255, 255, 255, 0.5);
width: 0;
}
to {
background: rgba(255, 255, 255, 0);
width: 100%;
}
}
}
src/packages/progress/progress.tsx 0 → 100644
浏览文件 @ 12527126
import React, { FunctionComponent, CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import { Icon } from '@/packages/icon/icon'
import bem from '@/utils/bem'
export type ProgressSize = 'small' | 'base' | 'large'
export type TextType = 'icon' | 'text'
export interface ProgressProps {
className: string
style: CSSProperties
isShowPercentage: boolean
percentage: number
fillColor: string
strokeColor: string
strokeWidth: string
size: ProgressSize
textColor: string
textWidth: string
showText: boolean
textInside: boolean
textBackground: string
textType: TextType
status: boolean
iconName: string
iconColor: string
iconSize: string
rounded: boolean | string
children: ReactNode
}
const defaultProps = {
className: '',
style: {},
isShowPercentage: true,
percentage: 0,
fillColor: '#f3f3f3',
strokeColor: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
strokeWidth: '',
textColor: '',
textWidth: '',
showText: true,
textInside: false,
textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
textType: 'text',
status: false,
iconName: 'checked',
iconColor: '#439422',
iconSize: '16px',
rounded: true,
children: undefined,
} as ProgressProps
export const Progress: FunctionComponent<
Partial<ProgressProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const {
className,
style,
isShowPercentage,
percentage,
fillColor,
strokeColor,
strokeWidth,
size,
textColor,
textWidth,
showText,
textInside,
textBackground,
textType,
status,
iconName,
iconColor,
iconSize,
rounded,
children,
...rest
} = { ...defaultProps, ...props }
const b = bem('progress')
const classes = classNames(b(''))
const classesOuter = classNames({
[`${b('')}-outer`]: true,
[`${b('')}-${size || 'base'}`]: true,
})
const classesInner = classNames({
[`${b('')}-inner`]: true,
[`${b('')}-active`]: status,
})
const classesText = classNames({
[`${b('')}-text`]: true,
})
const classesInsideText = classNames({
[`${b('')}-text`]: true,
[`${b('')}-insidetext`]: true,
})
const classesTextInner = classNames({
[`${b('')}-text__inner`]: true,
})
const stylesOuter: React.CSSProperties = {
height: `${strokeWidth}px`,
// eslint-disable-next-line no-nested-ternary
borderRadius: `${rounded ? (rounded === true ? '12px' : rounded) : 0}`,
background: `${fillColor}`,
}
const stylesInner: React.CSSProperties = {
width: `${percentage}%`,
// eslint-disable-next-line no-nested-ternary
borderRadius: `${rounded ? (rounded === true ? '12px' : rounded) : 0}`,
background: `${strokeColor}`,
}
const stylesInsideText: React.CSSProperties = {
width: `${textWidth}px`,
left: `${percentage}%`,
background: textBackground || strokeColor,
}
const stylesInsideIcon: React.CSSProperties = {
width: `${textWidth}px`,
left: `${percentage}%`,
}
const stylesText: React.CSSProperties = {
width: `${textWidth}px`,
}
return (
<div className={`${classes} ${className}`} style={style} {...rest}>
<div className={classesOuter} style={stylesOuter}>
<div className={classesInner} style={stylesInner}>
{showText && textInside && (
<>
{children ? (
<div className={classesInsideText} style={stylesInsideIcon}>
{children}
</div>
) : (
<div className={classesInsideText} style={stylesInsideText}>
<span
className={classesTextInner}
style={{ color: textColor || '#fff' }}
>
{percentage}
{isShowPercentage ? '%' : ''}
</span>
</div>
)}
</>
)}
</div>
</div>
{showText && !textInside && (
<div className={classesText} style={stylesText}>
{textType === 'text' && (
<span
className={classesTextInner}
style={{ color: textColor || '#333' }}
>
{percentage}
{isShowPercentage ? '%' : ''}
</span>
)}
{textType === 'icon' && (
<Icon size={iconSize} name={iconName} color={iconColor} />
)}
</div>
)}
</div>
)
}
Progress.defaultProps = defaultProps
Progress.displayName = 'NutProgress'
src/styles/variables.scss
浏览文件 @ 12527126
......@@ -548,6 +548,21 @@ $row-content-height: 50px !default;
$row-content-line-height: 40px !default;
$col-default-margin-bottom: 15px !default;
// progress
$progress-border-radius: 12px !default;
$progress-text-padding: 0 5px !default;
$progress-text-font-size: 13px !default;
$progress-insidetext-border-radius: 5px !default;
$progress-small-height: 5px !default;
$progress-base-height: 10px !default;
$progress-large-height: 15px !default;
$progress-small-padding: 0 4px !default;
$progress-base-padding: 0 5px !default;
$progress-large-padding: 0 5px !default;
$progress-small-font-size: 7px !default;
$progress-base-font-size: 9px !default;
$progress-large-font-size: 13px !default;
// animatingnumbers
$countup-height: 32px !default;
$countup-base-size: 18px !default;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或