Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
b9da723e
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b9da723e
编写于
11月 01, 2021
作者:
Y
yewenwen3
浏览文件
操作
浏览文件
下载
差异文件
feat: review问题修改
上级
172793b3
31baa6c2
变更
13
隐藏空白更改
内联
并排
Showing
13 changed file
with
335 addition
and
13 deletion
+335
-13
src/config.json
src/config.json
+10
-0
src/packages/avatar/avatar.tsx
src/packages/avatar/avatar.tsx
+5
-2
src/packages/cell/demo.tsx
src/packages/cell/demo.tsx
+2
-1
src/packages/cell/doc.md
src/packages/cell/doc.md
+1
-1
src/packages/cricleprogress/circleprogress.scss
src/packages/cricleprogress/circleprogress.scss
+65
-0
src/packages/cricleprogress/circleprogress.tsx
src/packages/cricleprogress/circleprogress.tsx
+79
-0
src/packages/cricleprogress/demo.scss
src/packages/cricleprogress/demo.scss
+16
-0
src/packages/cricleprogress/demo.tsx
src/packages/cricleprogress/demo.tsx
+71
-0
src/packages/cricleprogress/doc.md
src/packages/cricleprogress/doc.md
+75
-0
src/packages/cricleprogress/index.ts
src/packages/cricleprogress/index.ts
+2
-0
src/packages/price/demo.tsx
src/packages/price/demo.tsx
+4
-4
src/packages/price/doc.md
src/packages/price/doc.md
+3
-3
src/packages/price/price.tsx
src/packages/price/price.tsx
+2
-2
未找到文件。
src/config.json
浏览文件 @
b9da723e
...
...
@@ -241,6 +241,16 @@
"sort"
:
8
,
"show"
:
false
,
"author"
:
"vickyYE"
},
{
"version"
:
"1.0.0"
,
"name"
:
"CircleProgress"
,
"type"
:
"component"
,
"cName"
:
"进度条"
,
"desc"
:
"展示操作或任务的当前进度。"
,
"sort"
:
7
,
"show"
:
true
,
"author"
:
"swag~jun"
}
]
},
...
...
src/packages/avatar/avatar.tsx
浏览文件 @
b9da723e
...
...
@@ -4,13 +4,16 @@ import classNames from 'classnames'
import
'
./avatar.scss
'
export
interface
AvatarProps
{
size
:
string
size
:
AvatarSize
icon
:
string
shape
:
string
shape
:
AvatarShape
bgColor
:
string
prefixCls
:
string
src
:
string
}
export
type
AvatarSize
=
'
large
'
|
'
normal
'
|
'
small
'
export
type
AvatarShape
=
'
round
'
|
'
square
'
const
defaultProps
:
AvatarProps
=
{
size
:
'
normal
'
,
icon
:
''
,
...
...
src/packages/cell/demo.tsx
浏览文件 @
b9da723e
import
React
,
{
MouseEvent
}
from
'
react
'
import
{
Cell
}
from
'
./cell
'
import
{
CellGroup
}
from
'
../cellgroup/cellgroup
'
import
{
Switch
}
from
'
../switch/switch
'
const
CellDemo
=
()
=>
{
const
testClick
=
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
{
...
...
@@ -29,7 +30,7 @@ const CellDemo = () => {
</
CellGroup
>
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
div
>
这里是switch组件
</
div
>
}
></
Cell
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
=
{
true
}
></
Switch
>
}
></
Cell
>
</
CellGroup
>
<
h2
>
展示图标
</
h2
>
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"张三"
isLink
=
{
true
}
></
Cell
>
...
...
src/packages/cell/doc.md
浏览文件 @
b9da723e
...
...
@@ -46,7 +46,7 @@ const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent
```
tsx
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
div
>
这里是switch组件
</
div
>
}
></
Cell
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
=
{
true
}
></
Switch
>
}
></
Cell
>
</
CellGroup
>
```
...
...
src/packages/cricleprogress/circleprogress.scss
0 → 100644
浏览文件 @
b9da723e
.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
);
}
}
src/packages/cricleprogress/circleprogress.tsx
0 → 100644
浏览文件 @
b9da723e
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
<
CircleProgressProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
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
(
<
div
className
=
{
`
${
b
()}
`
}
style
=
{
{
height
:
`
${
option
().
size
}
px`
,
width
:
`
${
option
().
size
}
px`
}
}
>
<
svg
height
=
{
option
().
size
}
width
=
{
option
().
size
}
x
-
mlns
=
"http://www.w3.org/200/svg"
>
<
circle
r
=
{
option
().
radius
}
cx
=
{
option
().
cx
}
cy
=
{
option
().
cy
}
stroke
=
{
option
().
backColor
}
strokeWidth
=
{
option
().
strokeOutWidth
}
fill
=
"none"
/>
<
circle
r
=
{
option
().
radius
}
cx
=
{
option
().
cx
}
cy
=
{
option
().
cy
}
stroke
=
{
option
().
progressColor
}
strokeWidth
=
{
strokeInnerWidth
}
strokeDasharray
=
{
arcLength
()
}
transform
=
{
option
().
startPosition
}
fill
=
"none"
strokeLinecap
=
"round"
style
=
{
{
transition
:
'
stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s
'
}
}
/>
</
svg
>
<
div
className
=
"nut-circleprogress-content"
>
{
!
isAuto
?
`
${
progress
}
%`
:
<>
{
children
}
</>
}
</
div
>
</
div
>
)
}
CircleProgress
.
defaultProps
=
defaultProps
CircleProgress
.
displayName
=
'
NutCircleProgress
'
src/packages/cricleprogress/demo.scss
0 → 100644
浏览文件 @
b9da723e
.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
);
}
src/packages/cricleprogress/demo.tsx
0 → 100644
浏览文件 @
b9da723e
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
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
div
className
=
"demo__piece"
>
<
CircleProgress
progress
=
{
10
}
></
CircleProgress
>
</
div
>
<
h2
>
环形进度条自定义样式
</
h2
>
<
div
className
=
"demo__piece"
>
<
CircleProgress
progress
=
{
50
}
progressOption
=
{
progressOption
}
></
CircleProgress
>
</
div
>
<
h2
>
环形进度条自定义内容
</
h2
>
<
div
className
=
"demo__piece"
>
<
CircleProgress
progress
=
{
50
}
isAuto
=
{
true
}
>
<
div
>
自定义
</
div
>
</
CircleProgress
>
</
div
>
<
h2
>
动态改变环形进度条的进度
</
h2
>
<
div
className
=
"demo__piece"
>
<
CircleProgress
progress
=
{
percent
}
progressOption
=
{
progressOption
}
strokeInnerWidth
=
{
strokeInnerWidth
}
></
CircleProgress
>
</
div
>
<
div
className
=
"demo__btn"
>
<
Button
type
=
"primary"
onClick
=
{
setReduceVal
}
>
减少
</
Button
>
<
Button
type
=
"primary"
onClick
=
{
setAddVal
}
>
增加
</
Button
>
</
div
>
</
div
>
</>
)
}
export
default
CricleProgressDemo
src/packages/cricleprogress/doc.md
0 → 100644
浏览文件 @
b9da723e
# CricleProgress 进度条
### 介绍
展示操作或任务的当前进度。
### 安装
```
javascript
import
{
CirecleProgress
}
from
'
@nutui/nutui
'
;
```
## 代码演示
### 基础用法
```
tsx
<
CircleProgress
progress
=
{
10
}
></
CircleProgress
>
```
### 环形进度条自定义样式
```
tsx
<
CircleProgress
progress
=
{
50
}
progressOption
=
{
progressOption
}
></
CircleProgress
>
```
### 环形进度条自定义内容
```
tsx
<
CircleProgress
progress
=
{
50
}
isAuto
=
{
true
}
>
<
div
>
自定义
</
div
>
</
CircleProgress
>
```
### 动态改变环形进度条的进度
```
tsx
<
CircleProgress
progress
=
{
percent
}
progressOption
=
{
progressOption
}
strokeInnerWidth
=
{
strokeInnerWidth
}
></
CircleProgress
>
```
```
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
src/packages/cricleprogress/index.ts
0 → 100644
浏览文件 @
b9da723e
import
{
CircleProgress
}
from
'
./circleprogress
'
export
default
CircleProgress
src/packages/price/demo.tsx
浏览文件 @
b9da723e
...
...
@@ -17,19 +17,19 @@ const PriceDemo = () => {
<
div
className
=
"demo"
>
<
h2
>
基本用法
</
h2
>
<
Cell
>
<
Price
price
=
{
0
}
need
-
s
ymbol
=
{
false
}
thousands
=
{
true
}
/>
<
Price
price
=
{
0
}
need
S
ymbol
=
{
false
}
thousands
=
{
true
}
/>
</
Cell
>
<
h2
>
有人民币符号,无千位分隔
</
h2
>
<
Cell
>
<
Price
price
=
{
10010.01
}
need
-
s
ymbol
=
{
true
}
thousands
=
{
false
}
/>
<
Price
price
=
{
10010.01
}
need
S
ymbol
=
{
true
}
thousands
=
{
false
}
/>
</
Cell
>
<
h2
>
带人民币符号,有千位分隔,保留小数点后三位
</
h2
>
<
Cell
>
<
Price
price
=
{
15213.1221
}
decimal
-
digits
=
{
3
}
need
-
s
ymbol
=
{
true
}
thousands
=
{
true
}
/>
<
Price
price
=
{
15213.1221
}
decimal
Digits
=
{
3
}
needS
ymbol
=
{
true
}
thousands
=
{
true
}
/>
</
Cell
>
<
h2
>
异步随机变更
</
h2
>
<
Cell
>
<
Price
price
=
{
price
}
decimal
-
digits
=
{
3
}
need
-
s
ymbol
=
{
true
}
thousands
=
{
true
}
/>
<
Price
price
=
{
price
}
decimal
Digits
=
{
3
}
needS
ymbol
=
{
true
}
thousands
=
{
true
}
/>
</
Cell
>
</
div
>
)
...
...
src/packages/price/doc.md
浏览文件 @
b9da723e
...
...
@@ -11,19 +11,19 @@
### 基本用法
```
tsx
<
Price
price
=
{
0
}
need
-
s
ymbol
=
{
false
}
thousands
=
{
true
}
/>
<
Price
price
=
{
0
}
need
S
ymbol
=
{
false
}
thousands
=
{
true
}
/>
```
### 有人民币符号,无千位分隔
```
tsx
<
Price
price
=
{
10010.01
}
need
-
s
ymbol
=
{
true
}
thousands
=
{
false
}
/>
<
Price
price
=
{
10010.01
}
need
S
ymbol
=
{
true
}
thousands
=
{
false
}
/>
```
### 带人民币符号,有千位分隔,保留小数点后三位
```
tsx
<
Price
price
=
{
15213.1221
}
decimal
-
digits
=
{
3
}
need
-
s
ymbol
=
{
true
}
thousands
=
{
true
}
/>
<
Price
price
=
{
15213.1221
}
decimal
Digits
=
{
3
}
needS
ymbol
=
{
true
}
thousands
=
{
true
}
/>
```
### 异步随机变更
...
...
src/packages/price/price.tsx
浏览文件 @
b9da723e
...
...
@@ -20,7 +20,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => {
const
{
price
,
needSymbol
,
symbol
,
decimalDigits
,
thousands
}
=
{
...
defaultProps
,
...
props
}
const
b
=
bem
(
'
price
'
)
const
showSymbol
=
()
=>
{
return
{
__html
:
(
props
.
needSymbol
?
props
.
symbol
:
''
)
||
''
}
return
{
__html
:
(
needSymbol
?
symbol
:
''
)
||
''
}
}
const
checkPoint
=
(
price
:
string
|
number
)
=>
{
return
String
(
price
).
indexOf
(
'
.
'
)
>
0
...
...
@@ -35,7 +35,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => {
}
else
{
num
=
num
.
toString
()
}
if
(
props
.
thousands
)
{
if
(
thousands
)
{
return
(
num
||
0
).
toString
().
replace
(
/
(\d)(?=(?:\d{3})
+$
)
/g
,
'
$1,
'
)
}
else
{
return
num
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录