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 { .#{$ns}Combo {
&-placeholder {
color: $text--muted-color;
}
&-toolbarBtn { &-toolbarBtn {
line-height: $Combo-toolbarBtn-lineHeight; line-height: $Combo-toolbarBtn-lineHeight;
height: $Combo-toolbarBtn-height; height: $Combo-toolbarBtn-height;
@ -105,6 +109,12 @@
> .#{$ns}Combo-items { > .#{$ns}Combo-items {
margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2) margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
0 (-$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 { .#{$ns}Combo-itemTag {

View File

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