From c2d314b44d96538769bc55e36d13cc5909b6197f Mon Sep 17 00:00:00 2001 From: yujinghan <1341009787@qq.com> Date: Mon, 11 Dec 2023 14:43:58 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:inputrange=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=8D=95=E4=BD=8D=E6=98=BE=E7=A4=BA;=E4=BC=98?= =?UTF-8?q?=E5=8C=96marks=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/input-range.md | 24 ++++++ .../amis-ui/scss/components/form/_range.scss | 78 +++++++++++++++++++ .../Form/__snapshots__/range.test.tsx.snap | 11 ++- .../__tests__/renderers/Form/range.test.tsx | 10 ++- .../amis/src/renderers/Form/InputRange.tsx | 22 +++++- 5 files changed, 137 insertions(+), 8 deletions(-) diff --git a/docs/zh-CN/components/form/input-range.md b/docs/zh-CN/components/form/input-range.md index 15a908c4e..640fd6689 100755 --- a/docs/zh-CN/components/form/input-range.md +++ b/docs/zh-CN/components/form/input-range.md @@ -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` | 是否可清除
前置条件：开启`showInput`时有效 | | showInput | `boolean` | `false` | 是否显示输入框 | +| showInputUnit | `boolean` | `false` | 是否显示输入框单位 |`3.6.0`后支持变量 | onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | | onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | diff --git a/packages/amis-ui/scss/components/form/_range.scss b/packages/amis-ui/scss/components/form/_range.scss index c235ccac7..0afd3a0b1 100644 --- a/packages/amis-ui/scss/components/form/_range.scss +++ b/packages/amis-ui/scss/components/form/_range.scss @@ -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); @@ -330,6 +392,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%; diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap index f6dee72b4..88a042df4 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap @@ -1236,7 +1236,7 @@ exports[`Renderer:range with multiple & clearable & delimiter 1`] = ` `; -exports[`Renderer:range with showInput 1`] = ` +exports[`Renderer:range with showInput & showInputUnit 1`] = `
- 7 + 7个
+
+ 个 +
{ +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(); }); diff --git a/packages/amis/src/renderers/Form/InputRange.tsx b/packages/amis/src/renderers/Form/InputRange.tsx index f861b12d2..4d2f14f5d 100644 --- a/packages/amis/src/renderers/Form/InputRange.tsx +++ b/packages/amis/src/renderers/Form/InputRange.tsx @@ -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 { disabled, max, min, - mobileUI + mobileUI, + unit, + showInputUnit } = this.props; const _value = multiple ? type === 'min' @@ -480,7 +488,11 @@ export class Input extends React.Component { : Math.max((value as MultipleValue).min, (value as MultipleValue).max) : value; return ( -
+
{ onFocus={this.onFocus} mobileUI={mobileUI} /> + {unit && showInputUnit && ( +
+ {unit} +
+ )}
); } @@ -512,6 +529,7 @@ export default class RangeControl extends React.PureComponent< clearable: true, disabled: false, showInput: false, + showInputUnit: false, multiple: false, joinValues: true, delimiter: ',', From a000b9cffdf02520e111ee5ba3f367591f360d32 Mon Sep 17 00:00:00 2001 From: yujinghan <1341009787@qq.com> Date: Mon, 11 Dec 2023 16:11:32 +0800 Subject: [PATCH 2/3] fix:fix inputrange label css --- packages/amis-ui/scss/components/form/_range.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/amis-ui/scss/components/form/_range.scss b/packages/amis-ui/scss/components/form/_range.scss index 0afd3a0b1..b0b0d5378 100644 --- a/packages/amis-ui/scss/components/form/_range.scss +++ b/packages/amis-ui/scss/components/form/_range.scss @@ -296,6 +296,10 @@ border-radius: var(--InputRange-label-border-radius); visibility: hidden; + span { + word-break: keep-all; + } + &-visible { visibility: visible; } From 439a071f32e262346c245e58a874aca3171481ef Mon Sep 17 00:00:00 2001 From: yujinghan <1341009787@qq.com> Date: Fri, 15 Dec 2023 16:13:01 +0800 Subject: [PATCH 3/3] fix:fix inputrange md --- docs/zh-CN/components/form/input-range.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-CN/components/form/input-range.md b/docs/zh-CN/components/form/input-range.md index 640fd6689..7c202eba1 100755 --- a/docs/zh-CN/components/form/input-range.md +++ b/docs/zh-CN/components/form/input-range.md @@ -320,7 +320,7 @@ order: 38 | unit | `string` | | 单位 | | clearable | `boolean` | `false` | 是否可清除
前置条件：开启`showInput`时有效 | | showInput | `boolean` | `false` | 是否显示输入框 | -| showInputUnit | `boolean` | `false` | 是否显示输入框单位 |`3.6.0`后支持变量 +| showInputUnit | `boolean` | `false` | 是否显示输入框单位
前置条件：开启`showInput`且配置了`unit`单位时有效 |`6.0.0`后支持变量 | onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | | onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |