From b3c043c80f8c7a784f5c75338d7d87e8b52d8cab Mon Sep 17 00:00:00 2001 From: gooolh <57032082+gooolh@users.noreply.github.com> Date: Thu, 24 Mar 2022 17:52:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=BF=9B=E5=BA=A6?= =?UTF-8?q?=E6=9D=A1=E8=87=AA=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20(#3837)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: liujintao03 --- docs/zh-CN/components/progress.md | 62 +++++++++++++++--------- scss/components/_progress.scss | 10 ++-- src/components/Progress.tsx | 79 ++++++++++++++++++++++--------- src/renderers/Progress.tsx | 16 +++---- 4 files changed, 107 insertions(+), 60 deletions(-) diff --git a/docs/zh-CN/components/progress.md b/docs/zh-CN/components/progress.md index 203fce185..8f06edb97 100755 --- a/docs/zh-CN/components/progress.md +++ b/docs/zh-CN/components/progress.md @@ -22,10 +22,14 @@ order: 60 ## 颜色映射 -可以配置`map`，指定颜色映射，例如，默认的 map 配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` +可以配置`map`为单独颜色，例如：`#F96D3E` + +若配置为字符串数组，指定颜色映射，例如，默认的 map 配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` 它意味着将进度条分成了 5 份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果 +若配置为`[{value: 30, color: "#007bff"}, {value: 60, color: "#F96D3E"}]`, 表示为 value 小于`30`的区间显示`#007bff`, 大于等于`30`则显示`#F96D3E` + ```schema { "type": "page", @@ -33,7 +37,7 @@ order: 60 { "type": "progress", "value": 40, - "map": ["bg-danger", "bg-success"] + "map": "#F96D3E" }, { "type": "divider" @@ -48,8 +52,15 @@ order: 60 }, { "type": "progress", - "value": 60, - "map": ["bg-danger", "bg-success"], + "value": 20, + "map": [{ + value: 30, + color: "#007bff" + }, + { + value: 60, + color: "#fad733" + }], "mode": "circle" }, { @@ -57,8 +68,15 @@ order: 60 }, { "type": "progress", - "value": 10, - "map": ["bg-danger", "bg-success"], + "value": 50, + "map": [{ + value: 50, + color: "#007bff" + }, + { + value: 60, + color: "#fad733" + }], "mode": "circle" } ] @@ -226,20 +244,18 @@ List 的内容、Card 卡片的内容配置同上 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| -------------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------- | -| type | `string` | | 如果在 Form 中用作静态展示，为`"static-progress"` | -| mode | `string` | `line` | 进度「条」的类型，可选`line circle dashboard` | -| className | `string` | | 外层 CSS 类名 | -| progressClassName | `string` | `progress-xs progress-striped active m-b-none` | 进度条 CSS 类名 | -| progressBarClassName | `string` | | 完成进度条 CSS 类名 | -| value | `string` | | 进度值 | -| placeholder | `string` | `-` | 占位文本 | -| showLabel | `boolean` | `true` | 是否展示进度文本 | -| stripe | `boolean` | `false` | 背景是否显示条纹 | -| animate | `boolean` | `false` | type 为 line，可支持动画 | -| map | `Array` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 | -| valueTpl | `string` | `${value}%` | 自定义格式化内容 | -| strokeWidth | `number` | line 类型为`10`，circle、dashboard 类型为`6` | 进度条线宽度 | -| gapDegree | `number` | `75` | 仪表盘缺角角度，可取值 0 ~ 295 | -| gapPosition | `string` | `bottom` | 仪表盘进度条缺口位置，可选`top bottom left right` | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | ---------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------- | +| type | `string` | | 如果在 Form 中用作静态展示，为`"static-progress"` | +| mode | `string` | `line` | 进度「条」的类型，可选`line circle dashboard` | +| className | `string` | | 外层 CSS 类名 | +| value | `string` | | 进度值 | +| placeholder | `string` | `-` | 占位文本 | +| showLabel | `boolean` | `true` | 是否展示进度文本 | +| stripe | `boolean` | `false` | 背景是否显示条纹 | +| animate | `boolean` | `false` | type 为 line，可支持动画 | +| map | `string \| Array \| Array<{value:number, color:string}>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 | +| valueTpl | `string` | `${value}%` | 自定义格式化内容 | +| strokeWidth | `number` | line 类型为`10`，circle、dashboard 类型为`6` | 进度条线宽度 | +| gapDegree | `number` | `75` | 仪表盘缺角角度，可取值 0 ~ 295 | +| gapPosition | `string` | `bottom` | 仪表盘进度条缺口位置，可选`top bottom left right` | diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss index d0041f18d..48e1be557 100644 --- a/scss/components/_progress.scss +++ b/scss/components/_progress.scss @@ -1,12 +1,15 @@ .#{$ns}Progress { display: flex; align-items: center; + color: var(--text-color); + font-size: var(--fontSizeXs); &-line { display: inline-block; width: 100%; + height: 10px; &-inter { - height: 10px; + height: 100%; background-color: var(--Progress-bar-backgroundColor); overflow: hidden; border-radius: var(--Progress-borderRadius); @@ -16,8 +19,6 @@ display: inline-block; flex-grow: 1; margin-left: 8px; - color: var(--text-color); - font-size: var(--fontSizeXs); white-space: nowrap; text-align: left; word-break: normal; @@ -84,9 +85,6 @@ width: 100%; margin: 0; padding: 0; - color: var(--text-color); - font-size: 1em; - line-height: 1; white-space: normal; text-align: center; transform: translate(-50%, -50%); diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx index 784893efd..0c69db799 100644 --- a/src/components/Progress.tsx +++ b/src/components/Progress.tsx @@ -3,21 +3,26 @@ import cx from 'classnames'; import {Circle} from 'rc-progress'; import {ClassNamesFn, themeable, ThemeProps} from '../theme'; import {SchemaClassName} from '../Schema'; +interface ColorProps { + value: number; + color: string; +} + +export type ColorMapType = Array | Array | string; + interface ProgressProps extends ThemeProps { type: 'line' | 'circle' | 'dashboard'; showLabel: boolean; value: number; stripe?: boolean; animate?: boolean; - map?: Array; + map?: ColorMapType; placeholder?: string; format?: (value?: number) => JSX.Element; gapDegree?: number; gapPosition?: 'top' | 'bottom' | 'left' | 'right'; strokeWidth?: number; - classNames?: string; progressClassName?: SchemaClassName; - progressBarClassName?: SchemaClassName; classnames: ClassNamesFn; } export class Progress extends React.Component { @@ -25,19 +30,46 @@ export class Progress extends React.Component { type: 'line', placeholder: '-', progressClassName: '', - progressBarClassName: '', map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'], showLabel: true }; - autoClassName(value: number) { - const map = this.props.map; - if (!map || !map.length) { - return ''; + getCurrentColor() { + const color = this.props.map; + if (!color || !color.length) { + return 'bg-primary'; } - let index = Math.floor((value * map.length) / 100); - index = Math.max(0, Math.min(map.length - 1, index)); - return map[index]; + if (typeof color === 'string') { + return color; + } else { + return this.getLevelColor(color); + } + } + + getLevelColor(color: Array | Array) { + const value = this.props.value; + const colorArray = this.getColorArray(color).sort( + (a: {value: number}, b: {value: number}) => a.value - b.value + ); + for (let i = 0; i < colorArray.length; i++) { + if (colorArray[i].value > value) { + return colorArray[i].color; + } + } + return colorArray[colorArray.length - 1].color; + } + + getColorArray(color: Array | Array) { + const span = 100 / color.length; + return color.map((item, index) => { + if (typeof item === 'string') { + return { + color: item, + value: (index + 1) * span + }; + } + return item; + }); } getLabel(prefixCls: string) { @@ -56,15 +88,13 @@ export class Progress extends React.Component { render() { const { - classNames, + className, progressClassName, - progressBarClassName, type, value, placeholder, stripe, animate, - showLabel, gapDegree, gapPosition, strokeWidth, @@ -73,28 +103,33 @@ export class Progress extends React.Component { const isLineType = type === 'line'; const prefixCls = isLineType ? 'Progress-line' : 'Progress-circle'; + const bgColor = this.getCurrentColor(); + const isColorClass = /bg-/.test(bgColor); let viewValue: React.ReactNode; if (typeof value !== 'number') { viewValue = {placeholder}; } else if (type === 'line') { const style: any = {}; + const barStyle: any = { + width: `${value}%` + }; strokeWidth && (style.height = strokeWidth); + !isColorClass && (barStyle.backgroundColor = bgColor); + viewValue = [
, @@ -114,13 +149,13 @@ export class Progress extends React.Component { }; viewValue = [ -
+
@@ -129,7 +164,7 @@ export class Progress extends React.Component { ]; } - return
{viewValue}
; + return
{viewValue}
; } } diff --git a/src/renderers/Progress.tsx b/src/renderers/Progress.tsx index a0cf70a48..99b0762e3 100644 --- a/src/renderers/Progress.tsx +++ b/src/renderers/Progress.tsx @@ -6,6 +6,8 @@ import {autobind, getPropValue, createObject} from '../utils/helper'; import {filter} from '../utils/tpl'; import Progress from '../components/Progress'; +import {ColorMapType} from '../components/Progress'; + /** * 进度展示控件。 * 文档：https://baidu.gitee.io/amis/docs/components/progress @@ -29,14 +31,9 @@ export interface ProgressSchema extends BaseSchema { progressClassName?: SchemaClassName; /** - * 进度外层 CSS 类名 + * 配置不同的值段，用不同的样式提示用户 */ - progressBarClassName?: SchemaClassName; - - /** - * 配置不通的值段，用不通的样式提示用户 - */ - map?: Array; + map?: ColorMapType; /** * 是否显示值 @@ -62,14 +59,17 @@ export interface ProgressSchema extends BaseSchema { * 进度条线的宽度 */ strokeWidth?: number; + /** * 仪表盘进度条缺口角度，可取值 0 ~ 295 */ gapDegree?: number; + /** * 仪表盘进度条缺口位置 */ gapPosition?: 'top' | 'bottom' | 'left' | 'right'; + /** * 内容的模板函数 */ @@ -106,7 +106,6 @@ export class ProgressField extends React.Component { className, placeholder, progressClassName, - progressBarClassName, map, stripe, animate, @@ -137,7 +136,6 @@ export class ProgressField extends React.Component { gapPosition={gapPosition} className={className} progressClassName={progressClassName} - progressBarClassName={progressBarClassName} /> ); }