test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #9098 from yujinghan/feat-14711-inputrange-optimization

Browse Source 
feat: Inputrange组件支持单位显示;优化marks显示位置
This commit is contained in:
hsm-lv 2023-12-27 10:31:11 +08:00 committed by GitHub
commit e5f1f6defa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 141 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/zh-CN/components/form/input-range.md
View File

@ -230,6 +230,29 @@ order: 38
}
```
## 显示单位
在打开`showInput`输入框且设置了`unit`单位的前提下，开启`showInputUnit`可在input框中显示已配置的单位。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"value": 20,
"unit": "个",
"showInput": true,
"showInputUnit": true
}
]
}
```
## 显示标签
标签默认在 hover 和拖拽过程中展示，通过`tooltipVisible`或者`tipFormatter`可指定标签是否展示。标签默认展示在滑块上方，通过`tooltipPlacement`可指定标签展示的位置。
@ -297,6 +320,7 @@ order: 38
| unit | `string` | | 单位 |
| clearable | `boolean` | `false` | 是否可清除<br/>前置条件：开启`showInput`时有效 |
| showInput | `boolean` | `false` | 是否显示输入框 |
| showInputUnit | `boolean` | `false` | 是否显示输入框单位<br/>前置条件：开启`showInput`且配置了`unit`单位时有效 |`6.0.0`后支持变量
| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |
| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |

82
packages/amis-ui/scss/components/form/_range.scss
View File

@ -40,6 +40,68 @@
}
}
&-input-with-unit {
display: flex;
width: auto;
&:hover {
.#{$ns}Number,
.#{$ns}InputRange-unit {
border-width: var(--inputNumber-base-hover-top-border-width)
var(--inputNumber-base-hover-right-border-width)
var(--inputNumber-base-hover-bottom-border-width)
var(--inputNumber-base-hover-left-border-width);
border-style: var(--inputNumber-base-hover-top-border-style)
var(--inputNumber-base-hover-right-border-style)
var(--inputNumber-base-hover-bottom-border-style)
var(--inputNumber-base-hover-left-border-style);
border-color: var(--inputNumber-base-hover-top-border-color)
var(--inputNumber-base-hover-right-border-color)
var(--inputNumber-base-hover-bottom-border-color)
var(--inputNumber-base-hover-left-border-color);
border-radius: var(--inputNumber-base-hover-top-left-border-radius)
var(--inputNumber-base-hover-top-right-border-radius)
var(--inputNumber-base-hover-bottom-right-border-radius)
var(--inputNumber-base-hover-bottom-left-border-radius);
}
}
.#{$ns}Number-focused + .#{$ns}InputRange-unit {
border-width: var(--inputNumber-base-active-top-border-width)
var(--inputNumber-base-active-right-border-width)
var(--inputNumber-base-active-bottom-border-width)
var(--inputNumber-base-active-left-border-width);
border-style: var(--inputNumber-base-active-top-border-style)
var(--inputNumber-base-active-right-border-style)
var(--inputNumber-base-active-bottom-border-style)
var(--inputNumber-base-active-left-border-style);
border-color: var(--inputNumber-base-active-top-border-color)
var(--inputNumber-base-active-right-border-color)
var(--inputNumber-base-active-bottom-border-color)
var(--inputNumber-base-active-left-border-color);
border-radius: var(--inputNumber-base-active-top-left-border-radius)
var(--inputNumber-base-active-top-right-border-radius)
var(--inputNumber-base-active-bottom-right-border-radius)
var(--inputNumber-base-active-bottom-left-border-radius);
}
.#{$ns}Number {
width: px2rem(80px);
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
}
.#{$ns}InputRange-unit {
cursor: default;
text-align: center;
min-width: unset;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
background-color: var(--inputNumber-base-unit-bg-color);
}
}
&.is-mobile {
.#{$ns}InputRange-input {
width: var(--InputRange-input-mobile-width);
@ -234,6 +296,10 @@
border-radius: var(--InputRange-label-border-radius);
visibility: hidden;
span {
word-break: keep-all;
}
&-visible {
visibility: visible;
}
@ -330,6 +396,22 @@
top: 0;
transform: translateX(-50%);
&:first-child {
transform: translateX(-10%);
span {
left: 0;
transform: translateX(0%);
}
}
&:last-child {
transform: translateX(-90%);
span {
left: 100%;
transform: translateX(-100%);
}
}
span {
position: absolute;
left: 50%;

11
packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
View File

@ -1236,7 +1236,7 @@ exports[`Renderer:range with multiple & clearable & delimiter 1`] = `
</div>
`;
exports[`Renderer:range with showInput 1`] = `
exports[`Renderer:range with showInput & showInputUnit 1`] = `
<div>
<div
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
@ -1301,7 +1301,7 @@ exports[`Renderer:range with showInput 1`] = `
style="position: relative;"
>
<span>
7
7个
</span>
<div
class="resize-sensor"
@ -1386,7 +1386,7 @@ exports[`Renderer:range with showInput 1`] = `
</div>
</div>
<div
class="cxd-InputRange-input"
class="cxd-InputRange-input cxd-InputRange-input-with-unit"
>
<div
class="cxd-Number cxd-Number--borderFull"
@ -1434,6 +1434,11 @@ exports[`Renderer:range with showInput 1`] = `
/>
</div>
</div>
<div
class="cxd-InputRange-unit cxd-Select"
>
个
</div>
</div>
<a
class="cxd-InputRange-clear is-active"

10
packages/amis/__tests__/renderers/Form/range.test.tsx
View File

@ -1,7 +1,7 @@
/**
* 组件名称：InputRange 滑块
* 单测内容：
* 01. showInput
* 01. showInput & showInputUnit
* 02. multiple & clearable & delimiter
* 03. showSteps
* 04. marks
@ -16,7 +16,7 @@ import '../../../src';
import {render as amisRender} from '../../../src';
import {makeEnv, wait} from '../../helper';
test('Renderer:range with showInput', async () => {
test('Renderer:range with showInput & showInputUnit', async () => {
const {container} = render(
amisRender(
{
@ -27,7 +27,9 @@ test('Renderer:range with showInput', async () => {
type: 'input-range',
name: 'range',
value: 10,
showInput: true
showInput: true,
showInputUnit: true,
unit: '个'
}
],
title: 'The form',
@ -50,6 +52,7 @@ test('Renderer:range with showInput', async () => {
container.querySelector('.cxd-InputRange-input') as Element
).toBeInTheDocument();
const inputWrapper = container.querySelector('.cxd-InputRange-input');
const input = container.querySelector('.cxd-InputRange-input input');
fireEvent.change(input!, {
target: {
@ -64,6 +67,7 @@ test('Renderer:range with showInput', async () => {
).getAttribute('style')
).toContain('width: 7%');
expect(inputWrapper).toHaveClass('cxd-InputRange-input-with-unit');
expect(container).toMatchSnapshot();
});

22
packages/amis/src/renderers/Form/InputRange.tsx
View File

@ -203,6 +203,11 @@ export interface RangeProps extends FormControlProps {
*/
showInput: boolean;
/**
* 输入框是否显示单位
*/
showInputUnit?: boolean;
/**
* 是否禁用
*/
@ -238,6 +243,7 @@ export interface DefaultProps {
clearable: boolean;
disabled: boolean;
showInput: boolean;
showInputUnit: boolean;
multiple: boolean;
joinValues: boolean;
delimiter: string;
@ -472,7 +478,9 @@ export class Input extends React.Component<RangeItemProps, any> {
disabled,
max,
min,
mobileUI
mobileUI,
unit,
showInputUnit
} = this.props;
const _value = multiple
? type === 'min'
@ -480,7 +488,11 @@ export class Input extends React.Component<RangeItemProps, any> {
: Math.max((value as MultipleValue).min, (value as MultipleValue).max)
: value;
return (
<div className={cx(`${ns}InputRange-input`)}>
<div
className={cx(`${ns}InputRange-input`, {
[`${ns}InputRange-input-with-unit`]: unit && showInputUnit
})}
>
<NumberInput
value={+_value}
step={step}
@ -492,6 +504,11 @@ export class Input extends React.Component<RangeItemProps, any> {
onFocus={this.onFocus}
mobileUI={mobileUI}
/>
{unit && showInputUnit && (
<div className={cx(`${ns}InputRange-unit`, `${ns}Select`)}>
{unit}
</div>
)}
</div>
);
}
@ -512,6 +529,7 @@ export default class RangeControl extends React.PureComponent<
clearable: true,
disabled: false,
showInput: false,
showInputUnit: false,
multiple: false,
joinValues: true,
delimiter: ',',