Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

未验证 提交 cd33630c 编写于 作者: S simpleStyle 提交者： GitHub
浏览文件
操作

feat: range组件新增描述属性 (#471)

上级 ee7a142f
隐藏空白更改
内联 并排
Showing with 194 addition and 8 deletion
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">{curValueDesc || 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">{curValueDesc || 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.
先完成此消息的编辑！
想要评论请 注册 或