Skip to content

Commit

Permalink
Merge branch 'master' into chore-events
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsm-lv
hsm-lv authored Dec 28, 2023
2 parents bdd0121 + 8ed279a commit 4afa644
Show file tree
Hide file tree
Showing 13 changed files with 441 additions and 40 deletions.
46 changes: 35 additions & 11 deletions docs/zh-CN/components/form/input-range.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`可指定标签展示的位置。
Expand Down Expand Up @@ -288,17 +311,18 @@ order: 38
| showSteps | `boolean` | `false` | 是否显示步长 |
| parts | `number` or `number[]` | `1` | 分割的块数<br/>主持数组传入分块的节点 |
| marks | <code>{ [number &#124; string]: string &#124; number &#124; SchemaObject }</code> or <code>{ [number &#124; string]: { style: CSSProperties, label: string } }</code> | | 刻度标记<br/>- 支持自定义样式<br/>- 设置百分比 |
| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |
| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应<br/>前置条件：tooltipVisible 不为 false 时有效 |
| tipFormatter | `function` | | 控制滑块标签显隐函数<br/>前置条件：tooltipVisible 不为 false 时有效 |
| multiple | `boolean` | `false` | 支持选择范围 |
| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交<br/>前置条件：开启`multiple`时有效 |
| delimiter | `string` | `,` | 分隔符 |
| unit | `string` | | 单位 |
| clearable | `boolean` | `false` | 是否可清除<br/>前置条件：开启`showInput`时有效 |
| showInput | `boolean` | `false` | 是否显示输入框 |
| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |
| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |
| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |
| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应<br/>前置条件：tooltipVisible 不为 false 时有效 |
| tipFormatter | `function` | | 控制滑块标签显隐函数<br/>前置条件：tooltipVisible 不为 false 时有效 |
| multiple | `boolean` | `false` | 支持选择范围 |
| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交<br/>前置条件：开启`multiple`时有效 |
| delimiter | `string` | `,` | 分隔符 |
| 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` 触发时机一致，把当前值作为参数传入 |

## 事件表

Expand Down
72 changes: 72 additions & 0 deletions docs/zh-CN/components/progress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,3 +316,75 @@ List 的内容、Card 卡片的内容配置同上
| strokeWidth | `number` | line 类型为`10`，circle、dashboard 类型为`6` | 进度条线宽度 |
| gapDegree | `number` | `75` | 仪表盘缺角角度，可取值 0 ~ 295 |
| gapPosition | `string` | `bottom` | 仪表盘进度条缺口位置，可选`top bottom left right` |

## 动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。

| 动作名称 | 动作配置 | 说明 |
| -------- | ------------------------------------ | ------------ |
| reset | - | 将值重置为 0 |
| setValue | `value: string` \| `number` 更新的值 | 更新数据 |

### reset

```schema: scope="body"
{
"type": "page",
"body": [
{
"type": "progress",
"name": "progress",
"id": "progress",
"value": 67
},
{
"type": "button",
"label": "重置值",
"onEvent": {
"click": {
"actions": [
{
"actionType": "reset",
"componentId": "progress"
}
]
}
}
}
]
}
```

### setValue

```schema: scope="body"
{
"type": "page",
"body": [
{
"type": "progress",
"name": "progress",
"id": "progress",
"value": 67
},
{
"type": "button",
"label": "设置值",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "progress",
"args": {
"value": 20
}
}
]
}
}
}
]
}
```
8 changes: 6 additions & 2 deletions packages/amis-editor-core/scss/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,12 @@
z-index: 0;
}

> .cxd-Page > .cxd-Page-content {
height: auto;
> .cxd-Page {
// 这里主要是为了确保能撑开画布区
display: flex;
> .cxd-Page-content {
height: auto;
}
}
}
}
Expand Down
16 changes: 15 additions & 1 deletion packages/amis-editor/src/plugin/Progress.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {registerEditorPlugin, RendererPluginAction} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from 'amis-editor-core';
Expand Down Expand Up @@ -32,6 +32,20 @@ export class ProgressPlugin extends BasePlugin {
...this.scaffold
};

// 动作定义
actions: RendererPluginAction[] = [
{
actionType: 'reset',
actionLabel: '重置',
description: '重置为默认值'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];

panelTitle = '进度';

panelJustify = true;
Expand Down
82 changes: 82 additions & 0 deletions packages/amis-ui/scss/components/form/_range.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -234,6 +296,10 @@
border-radius: var(--InputRange-label-border-radius);
visibility: hidden;

span {
word-break: keep-all;
}

&-visible {
visibility: visible;
}
Expand Down Expand Up @@ -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%;
Expand Down
6 changes: 5 additions & 1 deletion packages/amis-ui/src/components/Progress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,11 @@ export class Progress extends React.Component<ProgressProps, Object> {
];
}

return <div className={cx('Progress', className)} style={style}>{viewValue}</div>;
return (
<div className={cx('Progress', className)} style={style}>
{viewValue}
</div>
);
}
}

Expand Down
11 changes: 8 additions & 3 deletions packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -1301,7 +1301,7 @@ exports[`Renderer:range with showInput 1`] = `
style="position: relative;"
>
<span>
7
7个
</span>
<div
class="resize-sensor"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
10 changes: 7 additions & 3 deletions packages/amis/__tests__/renderers/Form/range.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* 组件名称：InputRange 滑块
* 单测内容：
* 01. showInput
* 01. showInput & showInputUnit
* 02. multiple & clearable & delimiter
* 03. showSteps
* 04. marks
Expand All @@ -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(
{
Expand All @@ -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',
Expand All @@ -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: {
Expand All @@ -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();
});

Expand Down
Loading

0 comments on commit 4afa644

Please sign in to comment.