From 30faa57395f698e20fe2ae16177bc70314d38fda Mon Sep 17 00:00:00 2001 From: liuyijun <3476078473@qq.com> Date: Mon, 18 Oct 2021 17:47:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91circleprogress?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.json | 10 +++ .../cricleprogress/circleprogress.scss | 65 +++++++++++++++ .../cricleprogress/circleprogress.tsx | 79 +++++++++++++++++++ src/packages/cricleprogress/demo.scss | 16 ++++ src/packages/cricleprogress/demo.tsx | 71 +++++++++++++++++ src/packages/cricleprogress/doc.md | 75 ++++++++++++++++++ src/packages/cricleprogress/index.ts | 2 + 7 files changed, 318 insertions(+) create mode 100644 src/packages/cricleprogress/circleprogress.scss create mode 100644 src/packages/cricleprogress/circleprogress.tsx create mode 100644 src/packages/cricleprogress/demo.scss create mode 100644 src/packages/cricleprogress/demo.tsx create mode 100644 src/packages/cricleprogress/doc.md create mode 100644 src/packages/cricleprogress/index.ts diff --git a/src/config.json b/src/config.json index e2f58a3..c33d9e3 100644 --- a/src/config.json +++ b/src/config.json @@ -211,6 +211,16 @@ "sort": 7, "show": true, "author": "swag~jun" + }, + { + "version": "1.0.0", + "name": "CircleProgress", + "type": "component", + "cName": "进度条", + "desc": "展示操作或任务的当前进度。", + "sort": 7, + "show": true, + "author": "swag~jun" } ] }, diff --git a/src/packages/cricleprogress/circleprogress.scss b/src/packages/cricleprogress/circleprogress.scss new file mode 100644 index 0000000..75742c2 --- /dev/null +++ b/src/packages/cricleprogress/circleprogress.scss @@ -0,0 +1,65 @@ +.nut-circleprogress { + position: relative; + + .nut-circleprogress-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .nut-circleprogress__right { + width: 50%; + height: 100%; + position: relative; + overflow: hidden; + float: right; + } + .nut-circleprogress__left { + width: 50%; + height: 100%; + position: relative; + overflow: hidden; + float: left; + } + + .nut-circleprogress__line { + position: absolute; + width: 100%; + height: 100%; + top: 0; + overflow: hidden; + &.nut-circleprogress__l { + top: 0px; + transform: rotate(0deg); + left: 0px; + } + + &.nut-circleprogress__r { + top: 0px; + transform: rotate(180deg); + right: 0px; + } + } + + .nut-circleprogress__progress { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 16px; + font-family: PingFangSC; + font-weight: normal; + color: rgba(29, 29, 33, 1); + } + + .nut-circleprogress__line__c { + width: 200%; + height: 100%; + border: 10px solid transparent; + border-radius: 50%; + position: absolute; + box-sizing: border-box; + top: 0; + transform: rotate(-45deg); + } +} diff --git a/src/packages/cricleprogress/circleprogress.tsx b/src/packages/cricleprogress/circleprogress.tsx new file mode 100644 index 0000000..7d8c37b --- /dev/null +++ b/src/packages/cricleprogress/circleprogress.tsx @@ -0,0 +1,79 @@ +import React, { FunctionComponent } from 'react' +import bem from '@/utils/bem' +import './circleprogress.scss' + +export interface CircleProgressProps { + strokeInnerWidth: string | number + progress: string | number + isAuto: boolean + progressOption: object +} +const defaultProps = { + strokeInnerWidth: 10, + progress: 10, + isAuto: false, + progressOption: {}, +} as CircleProgressProps +export const CircleProgress: FunctionComponent< + Partial & React.HTMLAttributes +> = (props) => { + const { children, strokeInnerWidth, progress, isAuto, progressOption } = { + ...defaultProps, + ...props, + } + const b = bem('circleprogress') + const option = () => { + // 所有进度条的可配置项 + let baseOption = { + radius: 50, + strokeOutWidth: 10, + backColor: '#d9d9d9', + progressColor: 'red', + cy: 1, + cx: 1, + size: 1, + startPosition: '', + } + Object.assign(baseOption, progressOption) + // 圆心位置自动生成 + baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth + baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2 + baseOption.startPosition = 'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')' + return baseOption + } + const arcLength = () => { + let circleLength = Math.floor(2 * Math.PI * option().radius) + let progressLength = ((progress as number) / 100) * circleLength + return `${progressLength},${circleLength}` + } + return ( +
+ + + + +
{!isAuto ? `${progress}%` : <>{children}}
+
+ ) +} + +CircleProgress.defaultProps = defaultProps +CircleProgress.displayName = 'NutCircleProgress' diff --git a/src/packages/cricleprogress/demo.scss b/src/packages/cricleprogress/demo.scss new file mode 100644 index 0000000..f3421c1 --- /dev/null +++ b/src/packages/cricleprogress/demo.scss @@ -0,0 +1,16 @@ +.demo__btn { + text-align: center; + width: 100%; + height: 50px; + border-top: 1px solid rgba(234, 240, 251, 1); + padding-top: 6px; + background: rgba(255, 255, 255, 1); + .nut-button { + margin-right: 10px; + } +} +.demo__piece { + display: flex; + justify-content: center; + background: rgba(255, 255, 255, 1); +} diff --git a/src/packages/cricleprogress/demo.tsx b/src/packages/cricleprogress/demo.tsx new file mode 100644 index 0000000..1a67a31 --- /dev/null +++ b/src/packages/cricleprogress/demo.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react' +import { CircleProgress } from './circleprogress' +import Button from '@/packages/button' +import './demo.scss' + +const CricleProgressDemo = () => { + const [percent, setPercent] = useState(50) + const [strokeInnerWidth, setStrokeInnerWidth] = useState(10) + const progressOption = { + radius: 50, + strokeOutWidth: 10, + backColor: '#d9d9d9', + progressColor: 'red', + } + const setReduceVal = () => { + if (percent - 10 <= 0) { + setStrokeInnerWidth(0) + setPercent(0) + return + } + setPercent(percent - 10) + } + const setAddVal = () => { + setStrokeInnerWidth(10) + if (percent >= 100) { + return + } + setPercent(percent + 10) + } + return ( + <> +
+

基础用法

+
+ +
+ +

环形进度条自定义样式

+
+ +
+ +

环形进度条自定义内容

+
+ +
自定义
+ +
+ +

动态改变环形进度条的进度

+
+ +
+
+ + +
+
+ + ) +} + +export default CricleProgressDemo diff --git a/src/packages/cricleprogress/doc.md b/src/packages/cricleprogress/doc.md new file mode 100644 index 0000000..6116415 --- /dev/null +++ b/src/packages/cricleprogress/doc.md @@ -0,0 +1,75 @@ +# CricleProgress 进度条 + +### 介绍 + +展示操作或任务的当前进度。 + +### 安装 + +``` javascript +import { CirecleProgress } from '@nutui/nutui'; +``` + +## 代码演示 + +### 基础用法 + +```tsx + +``` +### 环形进度条自定义样式 + +```tsx + +``` +### 环形进度条自定义内容 + +```tsx + +
自定义
+ +``` +### 动态改变环形进度条的进度 + +```tsx + +``` +```tsx +const [percent, setPercent] = useState(50) +const [strokeInnerWidth, setStrokeInnerWidth] = useState(10) +const progressOption = { + radius: 50, + strokeOutWidth: 10, + backColor: '#d9d9d9', + progressColor: 'red', +} +const setReduceVal = () => { + if (percent - 10 <= 0) { + setStrokeInnerWidth(0) + setPercent(0) + return + } + setPercent(percent - 10) +} +const setAddVal = () => { + setStrokeInnerWidth(10) + if (percent >= 100) { + return + } + setPercent(percent + 10) +} +``` + + +## Prop + +| 字段 | 说明 | 类型 | 默认值 +|----- | ----- | ----- | ----- +| progress | 百分比 | Number,String | 必传项，无默认值 +| strokeInnerWidth | 圆弧的宽度 | Number,String | 10 +| isAuto | 是否自定义内容显示（taro暂不支持） | Boolean | false +| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'} \ No newline at end of file diff --git a/src/packages/cricleprogress/index.ts b/src/packages/cricleprogress/index.ts new file mode 100644 index 0000000..cb89582 --- /dev/null +++ b/src/packages/cricleprogress/index.ts @@ -0,0 +1,2 @@ +import { CircleProgress } from './circleprogress' +export default CircleProgress -- GitLab