Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
cd33630c
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,发现更多精彩内容 >>
未验证
提交
cd33630c
编写于
11月 21, 2022
作者:
S
simpleStyle
提交者:
GitHub
11月 21, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: range组件新增描述属性 (#471)
上级
ee7a142f
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
194 addition
and
8 deletion
+194
-8
src/packages/range/__test__/range.spec.tsx
src/packages/range/__test__/range.spec.tsx
+9
-0
src/packages/range/demo.taro.tsx
src/packages/range/demo.taro.tsx
+19
-0
src/packages/range/demo.tsx
src/packages/range/demo.tsx
+19
-0
src/packages/range/doc.en-US.md
src/packages/range/doc.en-US.md
+41
-0
src/packages/range/doc.md
src/packages/range/doc.md
+41
-0
src/packages/range/doc.zh-TW.md
src/packages/range/doc.zh-TW.md
+41
-0
src/packages/range/range.taro.tsx
src/packages/range/range.taro.tsx
+12
-4
src/packages/range/range.tsx
src/packages/range/range.tsx
+12
-4
未找到文件。
src/packages/range/__test__/range.spec.tsx
浏览文件 @
cd33630c
...
...
@@ -64,6 +64,15 @@ test('range test', () => {
},
300
)
})
test
(
'
range description test
'
,
()
=>
{
const
{
container
}
=
render
(
<
Range
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
"40%"
/>
)
expect
(
container
.
querySelector
(
'
.min
'
)?.
innerHTML
).
toBe
(
'
0%
'
)
expect
(
container
.
querySelector
(
'
.max
'
)?.
innerHTML
).
toBe
(
'
100%
'
)
expect
(
container
.
querySelector
(
'
.number
'
)?.
innerHTML
).
toBe
(
'
40%
'
)
})
test
(
'
disabled test
'
,
()
=>
{
const
state
=
{
value0
:
50
,
...
...
src/packages/range/demo.taro.tsx
浏览文件 @
cd33630c
...
...
@@ -15,6 +15,7 @@ interface T {
title8
:
string
title9
:
string
title10
:
string
title11
:
string
}
const
RangeDemo
=
()
=>
{
...
...
@@ -31,6 +32,7 @@ const RangeDemo = () => {
title8
:
'
自定义按钮
'
,
title9
:
'
垂直方向
'
,
title10
:
'
刻度标记
'
,
title11
:
'
自定义描述
'
,
},
'
en-US
'
:
{
title
:
'
Basic Usage
'
,
...
...
@@ -44,6 +46,7 @@ const RangeDemo = () => {
title8
:
'
Custom Button
'
,
title9
:
'
Vertical
'
,
title10
:
'
Marks
'
,
title11
:
'
Range Desc
'
,
},
})
const
cellStyle
=
{
...
...
@@ -62,6 +65,7 @@ const RangeDemo = () => {
const
[
value6
,
SetValue6
]
=
useState
([
20
,
80
])
const
[
value7
,
SetValue7
]
=
useState
(
60
)
const
[
value8
,
SetValue8
]
=
useState
([
20
,
80
])
const
[
value9
,
SetValue9
]
=
useState
(
40
)
const
[
marks
,
SetMarks
]
=
useState
({
0
:
0
,
20
:
20
,
...
...
@@ -107,6 +111,9 @@ const RangeDemo = () => {
case
'
value8
'
:
SetValue8
(
value
)
break
case
'
value9
'
:
SetValue9
(
value
)
break
default
:
break
}
...
...
@@ -119,6 +126,18 @@ const RangeDemo = () => {
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
40
}
/>
</
Cell
>
<
h2
>
{
translated
.
title11
}
</
h2
>
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
value9
}
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
{
`
${
value9
}
%`
}
onChange
=
{
(
value
:
any
)
=>
{
change
(
value
,
'
value9
'
)
}
}
/>
</
Cell
>
<
h2
>
{
translated
.
title1
}
</
h2
>
<
Cell
style
=
{
cellStyle
}
>
<
Range
...
...
src/packages/range/demo.tsx
浏览文件 @
cd33630c
...
...
@@ -17,6 +17,7 @@ interface T {
title8
:
string
title9
:
string
title10
:
string
title11
:
string
}
const
RangeDemo
=
()
=>
{
...
...
@@ -33,6 +34,7 @@ const RangeDemo = () => {
title8
:
'
自定义按钮
'
,
title9
:
'
垂直方向
'
,
title10
:
'
刻度标记
'
,
title11
:
'
自定义描述
'
,
},
'
en-US
'
:
{
title
:
'
Basic Usage
'
,
...
...
@@ -46,6 +48,7 @@ const RangeDemo = () => {
title8
:
'
Custom Button
'
,
title9
:
'
Vertical
'
,
title10
:
'
Marks
'
,
title11
:
'
Range Desc
'
,
},
})
const
cellStyle
=
{
...
...
@@ -64,6 +67,7 @@ const RangeDemo = () => {
const
[
value6
,
SetValue6
]
=
useState
([
20
,
80
])
const
[
value7
,
SetValue7
]
=
useState
(
60
)
const
[
value8
,
SetValue8
]
=
useState
([
20
,
80
])
const
[
value9
,
SetValue9
]
=
useState
(
40
)
const
[
marks
,
SetMarks
]
=
useState
({
0
:
0
,
20
:
20
,
...
...
@@ -102,6 +106,9 @@ const RangeDemo = () => {
case
'
value8
'
:
SetValue8
(
value
)
break
case
'
value9
'
:
SetValue9
(
value
)
break
default
:
break
}
...
...
@@ -114,6 +121,18 @@ const RangeDemo = () => {
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
40
}
/>
</
Cell
>
<
h2
>
{
translated
.
title11
}
</
h2
>
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
value9
}
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
{
`
${
value9
}
%`
}
onChange
=
{
(
value
:
any
)
=>
{
change
(
value
,
'
value9
'
)
}
}
/>
</
Cell
>
<
h2
>
{
translated
.
title1
}
</
h2
>
<
Cell
style
=
{
cellStyle
}
>
<
Range
...
...
src/packages/range/doc.en-US.md
浏览文件 @
cd33630c
...
...
@@ -37,6 +37,44 @@ export default App;
```
:::
### Range Desc
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Range
,
Cell
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
SetValue
]
=
useState
(
40
)
const
change
=
(
value
:
number
,
name
?:
string
)
=>
{
Toast
.
text
(
`value:
${
value
}
`
)
SetValue
(
value
)
}
const
cellStyle
=
{
padding
:
'
40px 18px
'
,
}
return
(
<>
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
value
}
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
{
`
${
value
}
%`
}
onChange
=
{
(
value
)
=>
{
change
(
value
)
}
}
/>
</
Cell
>
</>
)
};
export
default
App
;
```
:::
### Dual thumb
:::demo
...
...
@@ -480,6 +518,9 @@ export default App;
| range | Whether to enable dual slider mode | Boolean |
`false`
|
| max | maximum | Number、String |
`100`
|
| min | minimum | Number、String |
`0`
|
| maxDesc
`v1.3.12`
| maximum description | Number、String | - |
| minDesc
`v1.3.12`
| minimum description | Number、String | - |
| curValueDesc
`v1.3.12`
| current progress percentage description | Number、String |- |
| step | step size | Number、String |
`1`
|
| disabled | Whether to disable the slider | Boolean |
`false`
|
| vertical | Whether to display vertically | Boolean |
`false`
|
...
...
src/packages/range/doc.md
浏览文件 @
cd33630c
...
...
@@ -36,6 +36,44 @@ const App = () => {
export
default
App
;
```
:::
### 自定义描述
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Range
,
Cell
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
SetValue
]
=
useState
(
40
)
const
change
=
(
value
:
number
,
name
?:
string
)
=>
{
Toast
.
text
(
`当前值:
${
value
}
`
)
SetValue
(
value
)
}
const
cellStyle
=
{
padding
:
'
40px 18px
'
,
}
return
(
<>
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
value
}
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
{
`
${
value
}
%`
}
onChange
=
{
(
value
)
=>
{
change
(
value
)
}
}
/>
</
Cell
>
</>
)
};
export
default
App
;
```
:::
### 双滑块
:::demo
...
...
@@ -479,6 +517,9 @@ export default App;
| range | 是否开启双滑块模式 | Boolean |
`false`
|
| max | 最大值 | Number、String |
`100`
|
| min | 最小值 | Number、String |
`0`
|
| maxDesc
`v1.3.12`
| 最大值描述 | Number、String | - |
| minDesc
`v1.3.12`
| 最小值描述 | Number、String | - |
| curValueDesc
`v1.3.12`
| 当前值描述 | Number、String | - |
| step | 步长 | Number、String |
`1`
|
| disabled | 是否禁用滑块 | Boolean |
`false`
|
| vertical
`v1.2.2`
| 是否竖向展示 | Boolean |
`false`
|
...
...
src/packages/range/doc.zh-TW.md
浏览文件 @
cd33630c
...
...
@@ -36,6 +36,44 @@ const App = () => {
export
default
App
;
```
:::
### 自定义描述
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Range
,
Cell
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
SetValue
]
=
useState
(
40
)
const
change
=
(
value
:
number
,
name
?:
string
)
=>
{
Toast
.
text
(
`当前值:
${
value
}
`
)
SetValue
(
value
)
}
const
cellStyle
=
{
padding
:
'
40px 18px
'
,
}
return
(
<>
<
Cell
style
=
{
cellStyle
}
>
<
Range
modelValue
=
{
value
}
minDesc
=
"0%"
maxDesc
=
"100%"
curValueDesc
=
{
`
${
value
}
%`
}
onChange
=
{
(
value
)
=>
{
change
(
value
)
}
}
/>
</
Cell
>
</>
)
};
export
default
App
;
```
:::
### 双滑块
:::demo
...
...
@@ -479,6 +517,9 @@ export default App;
| range | 是否开启双滑块模式 | Boolean |
`false`
|
| max | 最大值 | Number、String |
`100`
|
| min | 最小值 | Number、String |
`0`
|
| maxDesc
`v1.3.12`
| 最大值描述 | Number、String | - |
| minDesc
`v1.3.12`
| 最小值描述 | Number、String | - |
| curValueDesc
`v1.3.12`
| 当前值描述 | Number、String | - |
| step | 步长 | Number、String |
`1`
|
| disabled | 是否禁用滑块 | Boolean |
`false`
|
| vertical
`v1.2.2`
| 是否竖向展示 | Boolean |
`false`
|
...
...
src/packages/range/range.taro.tsx
浏览文件 @
cd33630c
...
...
@@ -24,6 +24,9 @@ export interface RangeProps {
hiddenTag
:
boolean
min
:
number
|
string
max
:
number
|
string
minDesc
:
number
|
string
maxDesc
:
number
|
string
curValueDesc
:
number
|
string
step
:
number
|
string
modelValue
:
SliderValue
button
:
React
.
ReactNode
...
...
@@ -75,6 +78,9 @@ export const Range: FunctionComponent<
onChange
,
onDragStart
,
onDragEnd
,
minDesc
,
maxDesc
,
curValueDesc
,
}
=
{
...
defaultProps
,
...
props
}
let
{
min
,
max
,
step
}
=
{
...
defaultProps
,
...
props
}
...
...
@@ -377,7 +383,7 @@ export const Range: FunctionComponent<
return
(
<
div
className
=
{
`
${
containerName
}
`
}
>
{
!
hiddenRange
?
<
div
className
=
"min"
>
{
+
min
}
</
div
>
:
null
}
{
!
hiddenRange
?
<
div
className
=
"min"
>
{
minDesc
||
+
min
}
</
div
>
:
null
}
<
div
ref
=
{
root
}
style
=
{
wrapperStyle
()
}
...
...
@@ -442,7 +448,9 @@ export const Range: FunctionComponent<
{
button
||
(
<
div
className
=
"nut-range-button"
style
=
{
buttonStyle
()
}
>
{
!
hiddenTag
?
(
<
div
className
=
"number"
>
{
curValue
(
index
)
}
</
div
>
<
div
className
=
"number"
>
{
curValueDesc
||
curValue
(
index
)
}
</
div
>
)
:
null
}
</
div
>
)
}
...
...
@@ -477,7 +485,7 @@ export const Range: FunctionComponent<
{
button
||
(
<
div
className
=
"nut-range-button"
style
=
{
buttonStyle
()
}
>
{
!
hiddenTag
?
(
<
div
className
=
"number"
>
{
curValue
()
}
</
div
>
<
div
className
=
"number"
>
{
curValue
Desc
||
curValue
()
}
</
div
>
)
:
null
}
</
div
>
)
}
...
...
@@ -485,7 +493,7 @@ export const Range: FunctionComponent<
)
}
</
div
>
</
div
>
{
!
hiddenRange
?
<
div
className
=
"max"
>
{
+
max
}
</
div
>
:
null
}
{
!
hiddenRange
?
<
div
className
=
"max"
>
{
maxDesc
||
+
max
}
</
div
>
:
null
}
<
Toast
type
=
"text"
visible
=
{
show
}
...
...
src/packages/range/range.tsx
浏览文件 @
cd33630c
...
...
@@ -24,6 +24,9 @@ export interface RangeProps {
hiddenTag
:
boolean
min
:
number
|
string
max
:
number
|
string
minDesc
:
number
|
string
maxDesc
:
number
|
string
curValueDesc
:
number
|
string
step
:
number
|
string
modelValue
:
SliderValue
button
:
React
.
ReactNode
...
...
@@ -75,6 +78,9 @@ export const Range: FunctionComponent<
onChange
,
onDragStart
,
onDragEnd
,
minDesc
,
maxDesc
,
curValueDesc
,
}
=
{
...
defaultProps
,
...
props
}
let
{
min
,
max
,
step
}
=
{
...
defaultProps
,
...
props
}
...
...
@@ -369,7 +375,7 @@ export const Range: FunctionComponent<
return
(
<
div
className
=
{
`
${
containerName
}
`
}
>
{
!
hiddenRange
?
<
div
className
=
"min"
>
{
+
min
}
</
div
>
:
null
}
{
!
hiddenRange
?
<
div
className
=
"min"
>
{
minDesc
||
+
min
}
</
div
>
:
null
}
<
div
ref
=
{
root
}
style
=
{
wrapperStyle
()
}
...
...
@@ -434,7 +440,9 @@ export const Range: FunctionComponent<
{
button
||
(
<
div
className
=
"nut-range-button"
style
=
{
buttonStyle
()
}
>
{
!
hiddenTag
?
(
<
div
className
=
"number"
>
{
curValue
(
index
)
}
</
div
>
<
div
className
=
"number"
>
{
curValueDesc
||
curValue
(
index
)
}
</
div
>
)
:
null
}
</
div
>
)
}
...
...
@@ -469,7 +477,7 @@ export const Range: FunctionComponent<
{
button
||
(
<
div
className
=
"nut-range-button"
style
=
{
buttonStyle
()
}
>
{
!
hiddenTag
?
(
<
div
className
=
"number"
>
{
curValue
()
}
</
div
>
<
div
className
=
"number"
>
{
curValue
Desc
||
curValue
()
}
</
div
>
)
:
null
}
</
div
>
)
}
...
...
@@ -477,7 +485,7 @@ export const Range: FunctionComponent<
)
}
</
div
>
</
div
>
{
!
hiddenRange
?
<
div
className
=
"max"
>
{
+
max
}
</
div
>
:
null
}
{
!
hiddenRange
?
<
div
className
=
"max"
>
{
maxDesc
||
+
max
}
</
div
>
:
null
}
</
div
>
)
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录