combo 支持 placeholder

This commit is contained in:
2betop 2020-04-07 17:27:51 +08:00
parent 54a9a4e368
commit 5f4444b464
2 changed files with 18 additions and 4 deletions

View File

@ -1,4 +1,8 @@
.#{$ns}Combo {
&-placeholder {
color: $text--muted-color;
}
&-toolbarBtn {
line-height: $Combo-toolbarBtn-lineHeight;
height: $Combo-toolbarBtn-height;
@ -105,6 +109,12 @@
> .#{$ns}Combo-items {
margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
0 (-$Combo--vertical-item-gap * 2);
> .#{$ns}Combo-placeholder {
padding: ($Combo--vertical-item-gap * 2) ($Combo--vertical-item-gap * 2)
0 ($Combo--vertical-item-gap * 2);
margin-bottom: $Combo--vertical-item-gap * 2;
}
}
.#{$ns}Combo-itemTag {

View File

@ -94,7 +94,8 @@ export default class ComboControl extends React.Component<ComboProps> {
dragIcon: 'glyphicon glyphicon-sort',
deleteIcon: 'glyphicon glyphicon-remove',
tabsMode: false,
tabsStyle: ''
tabsStyle: '',
placeholder: '<空>'
};
static propsList: Array<string> = [
'minLength',
@ -865,7 +866,8 @@ export default class ComboControl extends React.Component<ComboProps> {
noBorder,
conditions,
lazyLoad,
changeImmediately
changeImmediately,
placeholder
} = this.props;
let controls = this.props.controls;
@ -890,7 +892,7 @@ export default class ComboControl extends React.Component<ComboProps> {
)}
>
<div className={cx(`Combo-items`)}>
{Array.isArray(value)
{Array.isArray(value) && value.length
? value.map((value, index, thelist) => {
const toolbar: Array<any> = [];
@ -1011,7 +1013,9 @@ export default class ComboControl extends React.Component<ComboProps> {
</div>
);
})
: null}
: placeholder ? (
<div className={cx(`Combo-placeholder`)}>{placeholder}</div>
) : null}
</div>
{!disabled ? (
<div className={cx(`Combo-toolbar`)}>