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

styles: Transfer组件默认值与option不匹配时错误提示 (#5604)

Browse Source
This commit is contained in:
RUNZE LU 2022-11-01 12:19:04 +08:00 committed by GitHub
parent ede328d046
commit d0a03c58d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/amis-ui/scss/components/form/_result-list.scss
View File

@ -53,6 +53,10 @@
> label {
flex-basis: px2rem(50px);
flex-grow: 1;
&.is-invalid {
color: var(--Form-selectValue-onInvalid-color);
}
}
> .#{$ns}Selections-dragbar {

8
packages/amis-ui/scss/components/form/_selection.scss
View File

@ -100,6 +100,10 @@
span {
vertical-align: middle;
white-space: nowrap; // 避免在条件组合中折行
&.is-invalid {
color: var(--Form-selectValue-onInvalid-color);
}
}
}
@ -289,6 +293,10 @@
span {
margin-left: px2rem(10px);
vertical-align: middle;
&.is-invalid {
color: var(--Form-selectValue-onInvalid-color);
}
}
}

8
packages/amis-ui/scss/components/form/_transfer.scss
View File

@ -182,6 +182,10 @@
max-width: unset;
line-height: unset;
top: unset;
& > span.is-invalid {
color: var(--Form-selectValue-onInvalid-color);
}
}
}
}
@ -353,6 +357,10 @@
font-weight: var(--transfer-base-content-font-weight);
font-family: var(--transfer-base-content-font-family);
& > span.is-invalid {
color: var(--Form-selectValue-onInvalid-color);
}
&:last-child {
padding-right: var(--transfer-table-last-paddingRight);
}

6
packages/amis-ui/src/components/ResultList.tsx
View File

@ -255,7 +255,11 @@ export class ResultList extends React.Component<
/>
) : null}
<label>
<label
className={cx('Selections-label', {
'is-invalid': option?.__unmatched
})}
>
{itemRender(option, {
index,
disabled,

23
packages/amis-ui/src/components/Selection.tsx
View File

@ -5,16 +5,19 @@
*/
import React from 'react';
import {uncontrollable} from 'amis-core';
import Checkbox from './Checkbox';
import chunk from 'lodash/chunk';
import {ClassNamesFn, themeable, ThemeProps} from 'amis-core';
import {Option, value2array, Options} from './Select';
import find from 'lodash/find';
import {autobind, findTree} from 'amis-core';
import isEqual from 'lodash/isEqual';
import {LocaleProps, localeable} from 'amis-core';
// import isPlainObject from 'lodash/isPlainObject';
import cx from 'classnames';
import {
uncontrollable,
LocaleProps,
localeable,
themeable,
ThemeProps,
autobind,
findTree
} from 'amis-core';
import Checkbox from './Checkbox';
import {Option, Options} from './Select';
export interface BaseSelectionProps extends ThemeProps, LocaleProps {
options: Options;
@ -52,7 +55,7 @@ export class BaseSelection<
> extends React.Component<T, S> {
static itemRender(option: Option, states: ItemRenderStates) {
return (
<span>
<span className={cx({'is-invalid': option?.__unmatched})}>
{option[states?.labelField || 'label']}
{option.tip || ''}
</span>

48
packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransfer.test.tsx.snap
View File

@ -204,7 +204,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
法师
</span>
</div>
@ -232,7 +234,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
诸葛亮
</span>
</div>
@ -268,7 +272,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
战士
</span>
</div>
@ -296,7 +302,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
曹操
</span>
</div>
@ -322,7 +330,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
钟无艳
</span>
</div>
@ -358,7 +368,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
打野
</span>
</div>
@ -386,7 +398,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
李白
</span>
</div>
@ -412,7 +426,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
韩信
</span>
</div>
@ -438,7 +454,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-TreeSelection-itemLabel"
>
<span>
<span
class=""
>
云中君
</span>
</div>
@ -463,7 +481,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
法师
</span>
</div>
@ -474,7 +494,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
战士
</span>
</div>
@ -485,7 +507,9 @@ exports[`Renderer:tabs-transfer 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
打野
</span>
</div>

72
packages/amis/__tests__/renderers/Form/__snapshots__/transfer.test.tsx.snap
View File

@ -115,7 +115,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
诸葛亮
</span>
</div>
@ -137,7 +139,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
曹操
</span>
</div>
@ -159,7 +163,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
钟无艳
</span>
</div>
@ -181,7 +187,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
李白
</span>
</div>
@ -203,7 +211,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
韩信
</span>
</div>
@ -225,7 +235,9 @@ exports[`Renderer:transfer 1`] = `
<div
class="cxd-GroupedSelection-itemLabel"
>
<span>
<span
class=""
>
云中君
</span>
</div>
@ -453,7 +465,9 @@ exports[`Renderer:transfer chained 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
法师
</span>
</div>
@ -464,7 +478,9 @@ exports[`Renderer:transfer chained 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
战士
</span>
</div>
@ -475,7 +491,9 @@ exports[`Renderer:transfer chained 1`] = `
<div
class="cxd-ChainedSelection-itemLabel"
>
<span>
<span
class=""
>
打野
</span>
</div>
@ -1697,7 +1715,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="法师"
>
<span>
<span
class=""
>
法师
</span>
</span>
@ -1736,7 +1756,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="诸葛亮"
>
<span>
<span
class=""
>
诸葛亮
</span>
</span>
@ -1780,7 +1802,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="战士"
>
<span>
<span
class=""
>
战士
</span>
</span>
@ -1819,7 +1843,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="曹操"
>
<span>
<span
class=""
>
曹操
</span>
</span>
@ -1856,7 +1882,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="钟无艳"
>
<span>
<span
class=""
>
钟无艳
</span>
</span>
@ -1900,7 +1928,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="打野"
>
<span>
<span
class=""
>
打野
</span>
</span>
@ -1939,7 +1969,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="李白"
>
<span>
<span
class=""
>
李白
</span>
</span>
@ -1976,7 +2008,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="韩信"
>
<span>
<span
class=""
>
韩信
</span>
</span>
@ -2013,7 +2047,9 @@ exports[`Renderer:transfer tree 1`] = `
class="cxd-Tree-itemText"
title="云中君"
>
<span>
<span
class=""
>
云中君
</span>
</span>

3
packages/amis/src/renderers/Form/Transfer.tsx
View File

@ -374,11 +374,12 @@ export class BaseTransferRenderer<
colIndex: number,
rowIndex: number
) {
const {render, data} = this.props;
const {render, data, classnames: cx} = this.props;
return render(
`cell/${colIndex}/${rowIndex}`,
{
type: 'text',
className: cx({'is-invalid': option?.__unmatched}),
...column
},
{