liaoxuezhi
GitHub
commit
2529cfe18d
|
|
@ -146,6 +146,9 @@ $gap-base: px2rem(15px) !default;
|
|||
$gap-md: px2rem(20px) !default;
|
||||
$gap-lg: px2rem(30px) !default;
|
||||
|
||||
$icon-color: $gray600 !default;
|
||||
$icon-onHover-color: $gray900 !default;
|
||||
|
||||
// Components
|
||||
$scrollbar-width: px2rem(17px) !default;
|
||||
|
||||
|
|
@ -446,7 +449,7 @@ $Table-thead-fontSize: $fontSizeBase !default;
|
|||
$Table-thead-color: $text--loud-color !default;
|
||||
$Table-thead-borderColor: $Table-borderColor !default;
|
||||
$Table-thead-borderWidth: $Table-borderWidth !default;
|
||||
$Table-thead-iconColor: $text--muted-color !default;
|
||||
$Table-thead-iconColor: $icon-color !default;
|
||||
$TableCell-height: px2rem(40px) !default;
|
||||
$TableCell-paddingX: $gap-sm !default;
|
||||
$TableCell--edge-paddingX: $gap-md !default;
|
||||
|
|
@ -554,19 +557,19 @@ $ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;
|
|||
$ListItem-onDragging-opacity: 0.1 !default;
|
||||
|
||||
// QuickEdit
|
||||
$QuickEdit-iconColor: $text--muted-color !default;
|
||||
$QuickEdit-onHover-iconColor: $text-color !default;
|
||||
$QuickEdit-iconColor: $icon-color !default;
|
||||
$QuickEdit-onHover-iconColor: $icon-onHover-color !default;
|
||||
$QuickEdit-onFocus-borderColor: $info !default;
|
||||
$QuickEdit-onFocus-borderWidth: $borderWidth !default;
|
||||
|
||||
// Copyable
|
||||
$Copyable-iconColor: $text--muted-color !default;
|
||||
$Copyable-onHover-iconColor: $text-color !default;
|
||||
$Copyable-iconColor: $icon-color !default;
|
||||
$Copyable-onHover-iconColor: $icon-onHover-color !default;
|
||||
|
||||
// PopOverAble
|
||||
|
||||
$PopOverAble-iconColor: $text--muted-color !default;
|
||||
$PopOverAble-onHover-iconColor: $text-color !default;
|
||||
$PopOverAble-iconColor: $icon-color !default;
|
||||
$PopOverAble-onHover-iconColor: $icon-onHover-color !default;
|
||||
|
||||
// PopOver
|
||||
$PopOver-bg: white !default;
|
||||
|
|
@ -574,8 +577,8 @@ $PopOver-bg: white !default;
|
|||
// Remark
|
||||
$Remark-width: 1rem !default;
|
||||
$Remark-icon-fontSize: $fontSizeBase !default;
|
||||
$Remark-iconColor: $text--muted-color !default;
|
||||
$Remark-onHover-iconColor: $text-color !default;
|
||||
$Remark-iconColor: $icon-color !default;
|
||||
$Remark-onHover-iconColor: $icon-onHover-color !default;
|
||||
$Remark-bg: transparent !default;
|
||||
$Remark-onHover-bg: transparent !default;
|
||||
$Remark-borderWidth: 0 !default;
|
||||
|
|
@ -618,7 +621,7 @@ $Form-input-onActive-color: $info !default;
|
|||
$Form-input-borderRadius: $borderRadius !default;
|
||||
$Form-input-borderColor: $borderColor !default;
|
||||
$Form-input-borderWidth: px2rem(1px) !default;
|
||||
$Form-input-iconColor: #999 !default;
|
||||
$Form-input-iconColor: $icon-color !default;
|
||||
$Form-input-onFocused-borderColor: $info !default;
|
||||
$Form-input-onFocused-bg: $Form-input-bg !default;
|
||||
$Form-input-onError-borderColor: $danger !default;
|
||||
|
|
@ -674,18 +677,18 @@ $Form-select-onFocused-color: $Form-select-color !default;
|
|||
$Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
|
||||
$Form-selectOption-height: $Form-input-height !default;
|
||||
$Form-selectValue-color: #007eff !default;
|
||||
$Form-selectValue-color: $info !default;
|
||||
$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
|
||||
$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
|
||||
$Form-selectValue-fontSize: $fontSizeSm !default;
|
||||
$Form-select-caret-vender: 'FontAwesome' !default;
|
||||
$Form-select-caret-icon: '\f0d7' !default;
|
||||
$Form-select-caret-fontSize: $fontSizeBase !default;
|
||||
$Form-select-caret-iconColor: $Form-input-iconColor !default;
|
||||
$Form-select-caret-onHover-iconColor: $Form-input-iconColor !default;
|
||||
$Form-select-caret-iconColor: $icon-color !default;
|
||||
$Form-select-caret-onHover-iconColor: $icon-onHover-color !default;
|
||||
$Form-select-outer-borderWidth: px2rem(1px) !default;
|
||||
$Form-select-outer-boxShadow: none !default;
|
||||
$Form-select-outer-top: 100% !default;
|
||||
$Form-select-input-fontSize: $fontSizeSm !default;
|
||||
$Form-select-menu-height: $Form-input-height !default;
|
||||
$Form-select-menu-bg: $white !default;
|
||||
$Form-select-menu-color: $Form-select-color !default;
|
||||
|
|
@ -696,6 +699,8 @@ $Form-select-menu-onActive-bg: transparent !default;
|
|||
$Form-select-menu-onDisabled-color: $text--muted-color !default;
|
||||
$Form-select-menu-onDisabled-bg: transparent !default;
|
||||
$Form-select-checkall-bottomBorder: #eceff8 !default;
|
||||
$Form-select-popoverGap: 0 !default;
|
||||
$Form-select-search-height: $Form-select-menu-height !default;
|
||||
|
||||
// InputGroup
|
||||
$InputGroup-height: $Form-input-height !default;
|
||||
|
|
@ -713,8 +718,8 @@ $InputGroup-select-bg: $white !default;
|
|||
$InputGroup-select-onFocused-bg: $white !default;
|
||||
$InputGroup-select-color: $Form-select-color !default;
|
||||
$InputGroup-select-onFocused-color: $Form-select-onFocused-color !default;
|
||||
$InputGroup-select-arrowColor: $Form-select-caret-iconColor !default;
|
||||
$InputGroup-select-onFocused-arrowColor: $Form-select-caret-iconColor !default;
|
||||
$InputGroup-select-arrowColor: $icon-color !default;
|
||||
$InputGroup-select-onFocused-arrowColor: $icon-onHover-color !default;
|
||||
$InputGroup-button-borderWidth: $borderWidth !default;
|
||||
$InputGroup-button-borderColor: $Form-input-borderColor !default;
|
||||
$InputGroup-button-borderRadius: $borderRadius !default;
|
||||
|
|
@ -892,6 +897,8 @@ $Checkbox-color: $Form-input-borderColor !default;
|
|||
$Checkbox-onHover-color: $info !default;
|
||||
|
||||
$Checkbox--sm-size: px2rem(16px) !default;
|
||||
$Checkbox--sm-inner-size: $Checkbox--sm-size/2 !default;
|
||||
$Checkbox--sm--full-inner-size: px2rem(10px) !default;
|
||||
$Checkbox-gb: #fff !default;
|
||||
$Checkbox-borderRadius: $borderRadius !default;
|
||||
|
||||
|
|
@ -949,8 +956,8 @@ $DatePicker-fontSize: $Form-input-fontSize !default;
|
|||
$DatePicker-paddingX: px2rem(12px) !default;
|
||||
$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
|
||||
$DatePicker-placeholderColor: $Form-input-placeholderColor !default;
|
||||
$DatePicker-iconColor: $gray600 !default;
|
||||
$DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;
|
||||
$DatePicker-iconColor: $icon-color !default;
|
||||
$DatePicker-onHover-iconColor: $icon-onHover-color !default;
|
||||
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$DatePicker-toggler-vendor: 'FontAwesome' !default;
|
||||
$DatePicker-toggler-fontSize: $Form-fontSize !default;
|
||||
|
|
@ -1041,7 +1048,7 @@ $ListControl-item-onDisabled-bg: $ListControl-item-bg !default;
|
|||
// Combo
|
||||
$Combo-toolbarBtn-lineHeight: 1 !default;
|
||||
$Combo-toolbarBtn-height: px2rem(20px) !default;
|
||||
$Combo-toolbarBtn-color: $Form-input-iconColor !default;
|
||||
$Combo-toolbarBtn-color: $icon-color !default;
|
||||
$Combo-toolbarBtn-paddingX: px2rem(5px) !default;
|
||||
$Combo-toolbarBtn-paddingY: px2rem(2px) !default;
|
||||
|
||||
|
|
@ -1261,7 +1268,7 @@ $TransferSelect-heading-borderBottom: $borderWidth solid $borderColor !default;
|
|||
// Tree
|
||||
$TreeSelect-popover-bg: #fff !default;
|
||||
$Tree-indent: px2rem(20px) !default;
|
||||
$Tree-itemArrowWidth: px2rem(10px) !default;
|
||||
$Tree-itemArrowWidth: px2rem(16px) !default;
|
||||
$Tree-arrowVendor: 'FontAwesome' !default;
|
||||
$Tree-unfoldedArrowContent: '\f107' !default;
|
||||
$Tree-foldedArrowContent: '\f105' !default;
|
||||
|
|
@ -1271,7 +1278,10 @@ $Tree-leafIconVendor: 'FontAwesome' !default;
|
|||
$Tree-leafIconContent: '\f15b' !default;
|
||||
$Tree-folderIconVendor: 'FontAwesome' !default;
|
||||
$Tree-folderIconContent: '\f07b' !default;
|
||||
$Tree-itemText--onChecked-color: $Form-selectValue-color !default;
|
||||
$Tree-itemLabel--onChecked-color: $Form-selectValue-color !default;
|
||||
$Tree-itemHeight: px2rem(30px) !default;
|
||||
$Tree-item-onHover-bg: rgba(0, 126, 255, 0.08) !default;
|
||||
$Tree-inputHeight: $Form-input-height * 0.85 !default;
|
||||
|
||||
// IconPicker
|
||||
$IconPicker-tabs-bg: #f0f3f4 !default;
|
||||
|
|
@ -1339,8 +1349,8 @@ $Carousel-imageTitle-bottom: px2rem(45px) !default;
|
|||
$Carousel-imageDescription-bottom: px2rem(25px) !default;
|
||||
|
||||
// Picker
|
||||
$Picker-iconColor: $gray600 !default;
|
||||
$Picker-onHover-iconColor: darken($Picker-iconColor, 10%) !default;
|
||||
$Picker-iconColor: $icon-color !default;
|
||||
$Picker-onHover-iconColor: $icon-onHover-color !default;
|
||||
$Picker-btn-vendor: 'FontAwesome' !default;
|
||||
$Picker-btn-fontSize: $Form-fontSize !default;
|
||||
$Picker-btn-icon: '\f2d2' !default;
|
||||
|
|
@ -8,12 +8,12 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover input:not(:disabled) + i {
|
||||
&:hover input:not(:disabled)+i {
|
||||
border-color: $Checkbox-onHover-color;
|
||||
// box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
|
||||
}
|
||||
|
||||
> i {
|
||||
>i {
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
background: $Checkbox-gb;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
||||
+ span {
|
||||
+span {
|
||||
margin-left: $Checkbox-gap;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -39,6 +39,8 @@
|
|||
height: 0px;
|
||||
background-color: transparent;
|
||||
transition: all 0.2s;
|
||||
transform-origin: 50% 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,19 +50,17 @@
|
|||
input {
|
||||
margin-left: -$Checkbox-size;
|
||||
|
||||
&:checked + i {
|
||||
&:checked+i {
|
||||
border-color: $Checkbox-onHover-color;
|
||||
|
||||
&:before {
|
||||
left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
|
||||
top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
|
||||
width: $Checkbox-inner-size;
|
||||
height: $Checkbox-inner-size;
|
||||
background: $Checkbox-onHover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] + i {
|
||||
&[disabled]+i {
|
||||
border-color: lighten($Checkbox-color, 5%);
|
||||
cursor: not-allowed;
|
||||
|
||||
|
|
@ -70,13 +70,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[disabled] + i + span {
|
||||
&[disabled]+i+span {
|
||||
cursor: not-allowed;
|
||||
color: $text--muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
>i {
|
||||
width: $Checkbox-size;
|
||||
height: $Checkbox-size;
|
||||
border: px2rem(1px) solid $Checkbox-color;
|
||||
|
|
@ -87,25 +87,16 @@
|
|||
}
|
||||
|
||||
&--full.#{$ns}Checkbox--checkbox {
|
||||
&:not(:disabled) + i:hover {
|
||||
&:not(:disabled)+i:hover {
|
||||
border-color: $Checkbox-color;
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + i {
|
||||
&:checked+i {
|
||||
border-color: $Checkbox-onHover-color;
|
||||
background: $Checkbox-onHover-color;
|
||||
|
||||
&:before {
|
||||
// todo 后面自动计算
|
||||
@if $ns== 'cxd-' {
|
||||
top: px2rem(2px);
|
||||
left: px2rem(1px);
|
||||
} @else {
|
||||
top: px2rem(5px);
|
||||
left: ($Checkbox-size - $Checkbox--full-inner-size) /2;
|
||||
}
|
||||
|
||||
width: $Checkbox--full-inner-size;
|
||||
height: $Checkbox--full-inner-size / 2;
|
||||
border-color: $white;
|
||||
|
|
@ -120,13 +111,13 @@
|
|||
// }
|
||||
// }
|
||||
|
||||
&:checked[disabled] + i {
|
||||
&:checked[disabled]+i {
|
||||
border-color: lighten($Checkbox-color, 5%);
|
||||
background-color: lighten($Checkbox-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
>i {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -138,9 +129,9 @@
|
|||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
transition: all 0.2s;
|
||||
transition: width 0.2s, height 0.2s, transform 0.2s;
|
||||
border-width: 0 0 px2rem(2px) px2rem(2px);
|
||||
transform: rotate(-40deg);
|
||||
transform: translate(-50%, -60%) rotate(-40deg);
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,12 +143,10 @@
|
|||
input {
|
||||
margin-left: -$Radio-size;
|
||||
|
||||
&:checked + i {
|
||||
&:checked+i {
|
||||
border-color: $Radio-onHover-color;
|
||||
|
||||
&:before {
|
||||
left: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
|
||||
top: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
|
||||
width: $Radio-inner-size;
|
||||
height: $Radio-inner-size;
|
||||
background-color: $Radio-onHover-color;
|
||||
|
|
@ -165,7 +154,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[disabled] + i {
|
||||
&[disabled]+i {
|
||||
border-color: lighten($Radio-color, 5%);
|
||||
cursor: not-allowed;
|
||||
|
||||
|
|
@ -174,13 +163,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[disabled] + i + span {
|
||||
&[disabled]+i+span {
|
||||
cursor: not-allowed;
|
||||
color: $text--muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
>i {
|
||||
cursor: pointer;
|
||||
width: $Radio-size;
|
||||
height: $Radio-size;
|
||||
|
|
@ -192,30 +181,41 @@
|
|||
}
|
||||
|
||||
&--sm {
|
||||
margin-right: px2rem(5px);
|
||||
padding-left: $Checkbox--sm-size;
|
||||
|
||||
input {
|
||||
&:checked + i {
|
||||
margin-left: -$Checkbox--sm-size;
|
||||
|
||||
&:checked+i {
|
||||
&:before {
|
||||
left: $Checkbox--sm-size / 4 - px2rem(1px);
|
||||
top: $Checkbox--sm-size / 4 - px2rem(1px);
|
||||
width: $Checkbox--sm-size / 2;
|
||||
height: $Checkbox--sm-size / 2;
|
||||
width: $Checkbox--sm-inner-size;
|
||||
height: $Checkbox--sm-inner-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
>i {
|
||||
width: $Checkbox--sm-size;
|
||||
height: $Checkbox--sm-size;
|
||||
margin-left: -$Checkbox--sm-size;
|
||||
|
||||
+ span {
|
||||
+span {
|
||||
margin-left: $gap-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sm.#{$ns}Checkbox--full {
|
||||
input {
|
||||
&:checked+i {
|
||||
&:before {
|
||||
width: $Checkbox--sm--full-inner-size;
|
||||
height: $Checkbox--sm--full-inner-size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: $text--muted-color;
|
||||
margin-left: $Checkbox-gap;
|
||||
|
|
@ -244,13 +244,14 @@
|
|||
|
||||
.#{$ns}RadiosControl-group,
|
||||
.#{$ns}CheckboxesControl-group {
|
||||
|
||||
.#{$ns}RadiosControl-group,
|
||||
.#{$ns}CheckboxesControl-group {
|
||||
padding-left: px2rem(80px);
|
||||
@include clearfix();
|
||||
|
||||
> .#{$ns}RadiosControl-groupLabel,
|
||||
> .#{$ns}CheckboxesControl-groupLabel {
|
||||
>.#{$ns}RadiosControl-groupLabel,
|
||||
>.#{$ns}CheckboxesControl-groupLabel {
|
||||
float: left;
|
||||
width: px2rem(80px);
|
||||
margin-left: px2rem(-80px);
|
||||
|
|
@ -261,4 +262,4 @@
|
|||
.#{$ns}RadiosControl-groupLabel,
|
||||
.#{$ns}CheckboxesControl-groupLabel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,10 +8,7 @@
|
|||
background: $Form-select-bg;
|
||||
border-radius: $Form-select-borderRadius;
|
||||
height: $Form-selectOption-height;
|
||||
$paddingY: (
|
||||
$Form-selectOption-height - $Form-input-lineHeight *
|
||||
$Form-input-fontSize - $Form-select-borderWidth * 2
|
||||
)/2;
|
||||
$paddingY: ($Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - $Form-select-borderWidth * 2)/2;
|
||||
padding: $paddingY 0 $paddingY $Form-select-paddingX;
|
||||
cursor: pointer;
|
||||
color: $Form-select-color;
|
||||
|
|
@ -46,17 +43,7 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
&-input {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
line-height: $Form-input-lineHeight;
|
||||
height: $Form-input-lineHeight * $Form-input-fontSize;
|
||||
}
|
||||
|
||||
|
||||
&-value {
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize;
|
||||
|
|
@ -64,6 +51,7 @@
|
|||
}
|
||||
|
||||
&--searchable {
|
||||
|
||||
.#{$ns}Select-placeholder,
|
||||
.#{$ns}Select-value {
|
||||
position: absolute;
|
||||
|
|
@ -79,22 +67,21 @@
|
|||
.#{$ns}Select-valueWrap {
|
||||
margin-bottom: -$gap-xs;
|
||||
|
||||
> input {
|
||||
>input {
|
||||
display: inline-block;
|
||||
width: px2rem(100px);
|
||||
margin-bottom: $gap-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Select-values + .#{$ns}Select-input {
|
||||
.#{$ns}Select-values+.#{$ns}Select-input {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.#{$ns}Select-value {
|
||||
position: static;
|
||||
user-select: none;
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px);
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: $Form-selectValue-fontSize;
|
||||
|
|
@ -145,44 +132,50 @@
|
|||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&-menuOuter {
|
||||
position: absolute;
|
||||
background: $Form-select-menu-bg;
|
||||
color: $Form-select-menu-color;
|
||||
border: $Form-select-outer-borderWidth solid
|
||||
$Form-input-onFocused-borderColor;
|
||||
left: px2rem(-1px);
|
||||
right: px2rem(-1px);
|
||||
min-width: 100%;
|
||||
top: $Form-select-outer-top;
|
||||
z-index: 10;
|
||||
box-shadow: $Form-select-outer-boxShadow;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
max-height: px2rem(300px);
|
||||
overflow: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-checkAll {
|
||||
padding: (
|
||||
$Form-select-menu-height - $Form-input-lineHeight *
|
||||
$Form-input-fontSize - px2rem(2px)
|
||||
)/2 $Form-select-paddingX;
|
||||
border-bottom: px2rem(1px) solid $Form-select-checkall-bottomBorder;
|
||||
min-width: px2rem(100px);
|
||||
&-input {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin: 0 $Form-select-paddingX;
|
||||
height: $Form-select-search-height;
|
||||
font-size: $Form-select-input-fontSize;
|
||||
border-bottom: 1px solid $borderColor;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
// &.is-focused {
|
||||
// border-color: $Form-input-onFocused-borderColor;
|
||||
// }
|
||||
|
||||
>svg {
|
||||
fill: #999;
|
||||
width: px2rem(14px);
|
||||
min-width: px2rem(14px);
|
||||
height: px2rem(14px);
|
||||
margin-right: px2rem(5px);
|
||||
}
|
||||
|
||||
>input {
|
||||
outline: none;
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
top: 0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
&-option {
|
||||
padding: (
|
||||
$Form-select-menu-height - $Form-input-lineHeight *
|
||||
$Form-input-fontSize - px2rem(2px)
|
||||
)/2 $Form-select-paddingX;
|
||||
cursor: pointer;
|
||||
min-width: px2rem(150px);
|
||||
padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize)/2 $Form-select-paddingX;
|
||||
|
||||
&.is-active {
|
||||
color: $Form-select-menu-onActive-color;
|
||||
|
|
@ -202,12 +195,50 @@
|
|||
&--placeholder {
|
||||
color: $Form-input-placeholderColor;
|
||||
}
|
||||
|
||||
>label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>a {
|
||||
float: right;
|
||||
margin-left: px2rem(5px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-highlight>a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-noResult {
|
||||
color: $Form-select-placeholderColor;
|
||||
line-height: $Form-input-lineHeight;
|
||||
font-size: $Form-select-input-fontSize;
|
||||
user-select: none;
|
||||
padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize)/2 $Form-select-paddingX;
|
||||
}
|
||||
|
||||
&-option-hl {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&-addBtn {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize)/2 $Form-select-paddingX;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
>svg {
|
||||
width: px2rem(14px);
|
||||
height: px2rem(14px);
|
||||
margin-right: $Checkbox-gap;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused,
|
||||
&.is-opened {
|
||||
border-color: $Form-input-onFocused-borderColor;
|
||||
|
|
@ -243,28 +274,34 @@
|
|||
}
|
||||
|
||||
.#{$ns}Select-popover {
|
||||
margin-top: -$Form-select-borderWidth;
|
||||
margin-top: $Form-select-popoverGap - $Form-select-outer-borderWidth;
|
||||
|
||||
background: $Form-select-menu-bg;
|
||||
color: $Form-select-menu-color;
|
||||
border: $Form-select-outer-borderWidth solid
|
||||
$Form-input-onFocused-borderColor;
|
||||
border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
|
||||
box-shadow: $Form-select-outer-boxShadow;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
min-width: px2rem(100px);
|
||||
z-index: 2;
|
||||
|
||||
&.#{$ns}PopOver--leftTopLeftBottom {
|
||||
margin-top: -($Form-select-popoverGap - $Form-select-outer-borderWidth);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}SelectControl:not(.is-inline) > .#{$ns}Select {
|
||||
.#{$ns}SelectControl:not(.is-inline)>.#{$ns}Select {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// 需要能撑开
|
||||
@include media-breakpoint-up(sm) {
|
||||
.#{$ns}Form-control--sizeXs > .#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeSm > .#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeMd > .#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeLg > .#{$ns}Select {
|
||||
|
||||
.#{$ns}Form-control--sizeXs>.#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeSm>.#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeMd>.#{$ns}Select,
|
||||
.#{$ns}Form-control--sizeLg>.#{$ns}Select {
|
||||
min-width: 100%;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +1,3 @@
|
|||
@mixin tree-input {
|
||||
> svg {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: px2rem(16px);
|
||||
height: px2rem(16px);
|
||||
margin-left: px2rem(5px);
|
||||
}
|
||||
|
||||
> input {
|
||||
margin-left: px2rem(15px);
|
||||
padding: px2rem(5px);
|
||||
width: px2rem(150px);
|
||||
height: px2rem(25px);
|
||||
color: $Form-input-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $Form-input-placeholderColor;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $borderWidth solid $info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// todo
|
||||
.#{$ns}TreeControl {
|
||||
border: 1px solid $Form-input-borderColor;
|
||||
padding: 6px 12px;
|
||||
|
|
@ -46,6 +15,7 @@
|
|||
}
|
||||
|
||||
.#{$ns}Tree {
|
||||
|
||||
&-list,
|
||||
&-sublist {
|
||||
list-style: none;
|
||||
|
|
@ -53,39 +23,24 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
&-sublist {
|
||||
padding-left: $Tree-indent;
|
||||
|
||||
&.is-folded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li {
|
||||
@include tree-input;
|
||||
}
|
||||
&-sublist.is-folded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-item {
|
||||
line-height: px2rem(30px);
|
||||
line-height: $Tree-itemHeight;
|
||||
position: relative;
|
||||
|
||||
.#{$ns}Tree-item-icons {
|
||||
visibility: hidden;
|
||||
transition: visibility .1s ease;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
|
||||
>div {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
> span.#{$ns}Tree-item-icons {
|
||||
>.#{$ns}Tree-item-icons {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> span > svg {
|
||||
>span>svg {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -95,49 +50,114 @@
|
|||
margin-left: px2rem(5px);
|
||||
}
|
||||
}
|
||||
|
||||
&--isLeaf > a {
|
||||
padding-left: $Tree-itemArrowWidth + $gap-xs;
|
||||
}
|
||||
|
||||
&--isEdit {
|
||||
display: inline-block;
|
||||
@include tree-input;
|
||||
}
|
||||
}
|
||||
|
||||
&-rootItem {
|
||||
> a > i {
|
||||
margin-left: 0 !important;
|
||||
line-height: $Tree-itemHeight;
|
||||
}
|
||||
|
||||
&-item>div:hover>.#{$ns}Tree-item-icons,
|
||||
&-rootItem>div:hover>.#{$ns}Tree-item-icons {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&-itemLabel {
|
||||
&:hover {
|
||||
background: $Tree-item-onHover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-icons {
|
||||
visibility: hidden;
|
||||
transition: visibility .1s ease;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: $Tree-itemHeight;
|
||||
line-height: $Tree-itemHeight;
|
||||
|
||||
>a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: $gap-xs;
|
||||
cursor: pointer;
|
||||
|
||||
>svg {
|
||||
$svgSize: px2rem(16px);
|
||||
width: $svgSize;
|
||||
height: $svgSize;
|
||||
top: 0.125 * $svgSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-itemInput {
|
||||
padding-left: $Tree-itemArrowWidth;
|
||||
|
||||
>a {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-left: $gap-sm;
|
||||
color: $icon-color;
|
||||
|
||||
&:hover {
|
||||
color: $icon-onHover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Tree-addTop {
|
||||
height: px2rem(25px);
|
||||
line-height: px2rem(25px);
|
||||
cursor: pointer;
|
||||
padding-left: $Tree-indent;
|
||||
> p {
|
||||
> svg {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: px2rem(16px);
|
||||
height: px2rem(16px);
|
||||
}
|
||||
> span {
|
||||
padding-left: px2rem(5px);
|
||||
}
|
||||
>input {
|
||||
outline: none;
|
||||
background-color: $Form-input-bg;
|
||||
border: $Form-input-borderWidth solid $Form-input-borderColor;
|
||||
border-radius: $Form-input-borderRadius;
|
||||
line-height: $Form-input-lineHeight;
|
||||
padding: ($Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-input-paddingX;
|
||||
font-size: $Form-input-fontSize;
|
||||
|
||||
&::placeholder {
|
||||
color: $Form-input-placeholderColor;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-input {
|
||||
@include tree-input
|
||||
&:focus {
|
||||
border-color: $Form-input-onFocused-borderColor;
|
||||
box-shadow: $Form-input-boxShadow;
|
||||
|
||||
@if $Form-input-onFocused-bg !=$Form-input-bg {
|
||||
background-color: $Form-input-onFocused-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-addTopBtn {
|
||||
cursor: pointer;
|
||||
height: $Tree-itemHeight;
|
||||
line-height: $Tree-itemHeight;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
color: $text--muted-color;
|
||||
}
|
||||
|
||||
>svg {
|
||||
$svgSize: px2rem(14px);
|
||||
width: $svgSize;
|
||||
height: $svgSize;
|
||||
top: $svgSize * 0.125;
|
||||
margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
|
||||
}
|
||||
}
|
||||
|
||||
&-itemArrow {
|
||||
cursor: pointer;
|
||||
width: $Tree-itemArrowWidth;
|
||||
margin-right: $gap-xs;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
|
|
@ -151,9 +171,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-itemArrowPlaceholder {
|
||||
display: inline-block;
|
||||
width: $Tree-itemArrowWidth;
|
||||
}
|
||||
|
||||
&-itemIcon {
|
||||
display: inline-block;
|
||||
margin-right: $gap-xs;
|
||||
margin-right: px2rem(3px);
|
||||
}
|
||||
|
||||
&-rootIcon {
|
||||
|
|
@ -180,13 +205,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-itemText {
|
||||
&-itemLabel {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-checked,
|
||||
&.is-children-checked {
|
||||
color: $Tree-itemText--onChecked-color;
|
||||
color: $Tree-itemLabel--onChecked-color;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
|
|
@ -194,7 +218,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-itemText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
color: $text--muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-item &-item>&-itemLabel,
|
||||
&-item>&-placeholder {
|
||||
padding-left: $Tree-indent;
|
||||
}
|
||||
|
||||
&-item &-item &-item>&-itemLabel,
|
||||
&-item &-item>&-placeholder {
|
||||
padding-left: $Tree-indent * 2;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 3;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 4;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 5;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 6;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 7;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 8;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 9;
|
||||
}
|
||||
|
||||
&-item &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
|
||||
padding-left: $Tree-indent * 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,9 @@ $borderColor: #e8ebee;
|
|||
|
||||
$link-onHover-decoration: none;
|
||||
|
||||
$icon-color: #999;
|
||||
$icon-onHover-color: $primary;
|
||||
|
||||
$Layout-header-boxShadow: none;
|
||||
$Layout-header-bg: #F5F5F5;
|
||||
$Layout-aside-width: px2rem(180px);
|
||||
|
|
@ -102,6 +105,10 @@ $Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) rgba(0, 0, 0,
|
|||
$Form-select-menu-color: #333;
|
||||
$Form-select-menu-onHover-color: #000;
|
||||
$Form-select-menu-onHover-bg: #eaf6fe;
|
||||
$Form-select-menu-height: px2rem(24px);
|
||||
$Form-select-popoverGap: px2rem(3px);
|
||||
$Form-select-search-height: px2rem(30px);
|
||||
$Form-selectValue-color: $primary !default;
|
||||
|
||||
$InputGroup-select-borderWidth: px2rem(1px);
|
||||
$InputGroup-select-bg: #f6f7fb;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ interface CheckboxProps {
|
|||
id?: string;
|
||||
key?: string | number;
|
||||
style?: React.CSSProperties;
|
||||
type?: string;
|
||||
type: 'checkbox' | 'radio';
|
||||
size?: 'sm' | 'lg' | 'small' | 'large';
|
||||
label?: string;
|
||||
labelClassName?: string;
|
||||
|
|
@ -80,19 +80,12 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
|||
labelClassName
|
||||
} = this.props;
|
||||
|
||||
className =
|
||||
(className ? className : '') +
|
||||
(size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||
|
||||
return (
|
||||
<label
|
||||
className={cx(
|
||||
`Checkbox Checkbox--${type}`,
|
||||
{
|
||||
'Checkbox--full': !partial
|
||||
},
|
||||
className
|
||||
)}
|
||||
className={cx(`Checkbox Checkbox--${type}`, className, {
|
||||
'Checkbox--full': !partial,
|
||||
[`Checkbox--${size}`]: size
|
||||
})}
|
||||
>
|
||||
<input
|
||||
type={type}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,9 @@ interface OverlayProps {
|
|||
target?: React.ReactNode | Function;
|
||||
}
|
||||
export default class Overlay extends React.Component<OverlayProps> {
|
||||
static defaultProps = {
|
||||
placement: 'auto'
|
||||
};
|
||||
constructor(props: OverlayProps) {
|
||||
super(props as any);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
|
|||
y: 0
|
||||
},
|
||||
overlay: false,
|
||||
placement: 'bottom'
|
||||
placement: 'auto'
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import 'react-datetime/css/react-datetime.css';
|
|||
import Overlay from './Overlay';
|
||||
import PopOver from './PopOver';
|
||||
import Downshift, {ControllerStateAndHelpers} from 'downshift';
|
||||
import cx from 'classnames';
|
||||
import {closeIcon, Icon} from './icons';
|
||||
// @ts-ignore
|
||||
import matchSorter from 'match-sorter';
|
||||
import {noop} from '../utils/helper';
|
||||
import find = require('lodash/find');
|
||||
|
|
@ -46,6 +46,18 @@ export interface OptionProps {
|
|||
clearable?: boolean;
|
||||
placeholder?: string;
|
||||
autoFill?: {[propName: string]: any};
|
||||
creatable?: boolean;
|
||||
onAdd?: (
|
||||
idx?: number | Array<number>,
|
||||
value?: any,
|
||||
skipForm?: boolean
|
||||
) => void;
|
||||
addControls?: Array<any>;
|
||||
editable?: boolean;
|
||||
editControls?: Array<any>;
|
||||
onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
|
||||
removable?: boolean;
|
||||
onDelete?: (value: Option) => void;
|
||||
}
|
||||
|
||||
export type OptionValue = string | number | null | undefined | Option;
|
||||
|
|
@ -143,11 +155,14 @@ export function normalizeOptions(
|
|||
return [];
|
||||
}
|
||||
|
||||
interface SelectProps {
|
||||
const DownshiftChangeTypes = Downshift.stateChangeTypes;
|
||||
|
||||
interface SelectProps extends OptionProps {
|
||||
classPrefix: string;
|
||||
classnames: ClassNamesFn;
|
||||
className?: string;
|
||||
creatable: boolean;
|
||||
createBtnLabel: string;
|
||||
multiple: boolean;
|
||||
valueField: string;
|
||||
labelField: string;
|
||||
|
|
@ -167,9 +182,7 @@ interface SelectProps {
|
|||
inline: boolean;
|
||||
disabled: boolean;
|
||||
popOverContainer?: any;
|
||||
promptTextCreator: (label: string) => string;
|
||||
onChange: (value: void | string | Option | Array<Option>) => void;
|
||||
onNewOptionClick: (value: Option) => void;
|
||||
onFocus?: Function;
|
||||
onBlur?: Function;
|
||||
checkAll?: boolean;
|
||||
|
|
@ -191,17 +204,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
multiple: false,
|
||||
clearable: true,
|
||||
creatable: false,
|
||||
createBtnLabel: '新增选项',
|
||||
searchPromptText: '输入内容进行检索',
|
||||
loadingPlaceholder: '加载中..',
|
||||
noResultsText: '没有结果',
|
||||
noResultsText: '未找到任何结果',
|
||||
clearAllText: '移除所有',
|
||||
clearValueText: '移除',
|
||||
placeholder: '请选择',
|
||||
valueField: 'value',
|
||||
labelField: 'label',
|
||||
spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
|
||||
promptTextCreator: (label: string) => `新增：${label}`,
|
||||
onNewOptionClick: noop,
|
||||
inline: false,
|
||||
disabled: false,
|
||||
checkAll: false,
|
||||
|
|
@ -229,6 +241,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
this.handleKeyPress = this.handleKeyPress.bind(this);
|
||||
this.getTarget = this.getTarget.bind(this);
|
||||
this.toggleCheckAll = this.toggleCheckAll.bind(this);
|
||||
this.handleAddClick = this.handleAddClick.bind(this);
|
||||
this.handleEditClick = this.handleEditClick.bind(this);
|
||||
this.handleDeleteClick = this.handleDeleteClick.bind(this);
|
||||
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
|
|
@ -244,22 +259,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
loadOptions,
|
||||
options,
|
||||
multiple,
|
||||
checkAll,
|
||||
defaultCheckAll,
|
||||
onChange,
|
||||
simpleValue
|
||||
} = this.props;
|
||||
let {selection} = this.state;
|
||||
|
||||
if (multiple && checkAll && defaultCheckAll && options.length) {
|
||||
if (multiple && defaultCheckAll && options.length) {
|
||||
selection = union(options, selection);
|
||||
this.setState(
|
||||
{
|
||||
selection: selection
|
||||
},
|
||||
() =>
|
||||
onChange(simpleValue ? selection.map(item => item.value) : selection)
|
||||
);
|
||||
this.setState({
|
||||
selection: selection
|
||||
});
|
||||
|
||||
// 因为等 State 设置完后再 onChange，会让 form 再 didMount 中的
|
||||
// onInit 出去的数据没有包含这部分，所以从 state 回调中拿出来了
|
||||
// 存在风险
|
||||
onChange(simpleValue ? selection.map(item => item.value) : selection);
|
||||
}
|
||||
|
||||
loadOptions && loadOptions('');
|
||||
|
|
@ -280,9 +295,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
|
||||
open() {
|
||||
this.props.disabled ||
|
||||
this.setState({
|
||||
isOpen: true
|
||||
});
|
||||
this.setState(
|
||||
{
|
||||
isOpen: true,
|
||||
highlightedIndex: -1
|
||||
},
|
||||
() => setTimeout(this.focus, 500)
|
||||
);
|
||||
}
|
||||
|
||||
close() {
|
||||
|
|
@ -301,9 +320,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
this.props.disabled ||
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen
|
||||
});
|
||||
this.setState(
|
||||
{
|
||||
isOpen: !this.state.isOpen,
|
||||
highlightedIndex: -1
|
||||
},
|
||||
this.state.isOpen ? undefined : () => setTimeout(this.focus, 500)
|
||||
);
|
||||
}
|
||||
|
||||
onFocus(e: any) {
|
||||
|
|
@ -389,14 +412,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
handleChange(selectItem: any) {
|
||||
const {onChange, multiple, onNewOptionClick, simpleValue} = this.props;
|
||||
const {onChange, multiple, simpleValue} = this.props;
|
||||
let {selection} = this.state;
|
||||
|
||||
if (selectItem.isNew) {
|
||||
delete selectItem.isNew;
|
||||
onNewOptionClick(selectItem);
|
||||
}
|
||||
|
||||
if (multiple) {
|
||||
selection = selection.concat();
|
||||
const idx = selection.indexOf(selectItem);
|
||||
|
|
@ -417,27 +435,26 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
const loadOptions = this.props.loadOptions;
|
||||
let doLoad = false;
|
||||
|
||||
if (changes.isOpen !== void 0) {
|
||||
update.isOpen = changes.isOpen;
|
||||
}
|
||||
|
||||
if (changes.highlightedIndex !== void 0) {
|
||||
update.highlightedIndex = changes.highlightedIndex;
|
||||
}
|
||||
|
||||
switch (changes.type) {
|
||||
case Downshift.stateChangeTypes.keyDownEnter:
|
||||
case Downshift.stateChangeTypes.clickItem:
|
||||
case DownshiftChangeTypes.keyDownEnter:
|
||||
case DownshiftChangeTypes.clickItem:
|
||||
update = {
|
||||
...update,
|
||||
inputValue: '',
|
||||
isOpen: multiple && checkAll ? true : false,
|
||||
isOpen: multiple ? true : false,
|
||||
isFocused: multiple && checkAll ? true : false
|
||||
};
|
||||
doLoad = true;
|
||||
break;
|
||||
case Downshift.stateChangeTypes.changeInput:
|
||||
case DownshiftChangeTypes.changeInput:
|
||||
update.highlightedIndex = 0;
|
||||
case DownshiftChangeTypes.keyDownArrowDown:
|
||||
case DownshiftChangeTypes.keyDownArrowUp:
|
||||
case DownshiftChangeTypes.itemMouseEnter:
|
||||
update = {
|
||||
...update,
|
||||
...changes
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -462,30 +479,38 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
onChange('');
|
||||
}
|
||||
|
||||
handleAddClick() {
|
||||
const {onAdd} = this.props;
|
||||
onAdd && onAdd();
|
||||
}
|
||||
|
||||
handleEditClick(e: Event, item: any) {
|
||||
const {onEdit} = this.props;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit && onEdit(item);
|
||||
}
|
||||
|
||||
handleDeleteClick(e: Event, item: any) {
|
||||
const {onDelete} = this.props;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete && onDelete(item);
|
||||
}
|
||||
|
||||
renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
|
||||
const {
|
||||
multiple,
|
||||
placeholder,
|
||||
classPrefix: ns,
|
||||
labelField,
|
||||
searchable,
|
||||
creatable,
|
||||
disabled
|
||||
} = this.props;
|
||||
|
||||
const selection = this.state.selection;
|
||||
|
||||
if (
|
||||
searchable &&
|
||||
!creatable &&
|
||||
inputValue &&
|
||||
(multiple ? !selection.length : true)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!selection.length) {
|
||||
return creatable && inputValue ? null : (
|
||||
return (
|
||||
<div key="placeholder" className={`${ns}Select-placeholder`}>
|
||||
{placeholder}
|
||||
</div>
|
||||
|
|
@ -505,21 +530,24 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
{item[labelField || 'label']}
|
||||
</span>
|
||||
</div>
|
||||
) : inputValue && isOpen ? null : (
|
||||
) : (
|
||||
<div className={`${ns}Select-value`} key={index}>
|
||||
{item.label}
|
||||
{item[labelField || 'label']}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
renderOuter({
|
||||
selectedItem,
|
||||
getItemProps,
|
||||
highlightedIndex,
|
||||
inputValue,
|
||||
isOpen
|
||||
}: ControllerStateAndHelpers<any>) {
|
||||
renderOuter(
|
||||
{
|
||||
selectedItem,
|
||||
getItemProps,
|
||||
highlightedIndex,
|
||||
inputValue,
|
||||
isOpen
|
||||
}: ControllerStateAndHelpers<any>,
|
||||
getInputProps: any
|
||||
) {
|
||||
const {
|
||||
popOverContainer,
|
||||
options,
|
||||
|
|
@ -528,11 +556,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
noResultsText,
|
||||
loadOptions,
|
||||
creatable,
|
||||
promptTextCreator,
|
||||
multiple,
|
||||
classnames: cx,
|
||||
checkAll,
|
||||
checkAllLabel
|
||||
checkAllLabel,
|
||||
searchable,
|
||||
createBtnLabel,
|
||||
disabled,
|
||||
searchPromptText,
|
||||
editable,
|
||||
removable
|
||||
} = this.props;
|
||||
const {selection} = this.state;
|
||||
|
||||
|
|
@ -545,39 +578,41 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
})
|
||||
: options.concat();
|
||||
|
||||
if (multiple) {
|
||||
if (checkAll) {
|
||||
const optionsValues = options.map(option => option.value);
|
||||
const selectionValues = selection.map(select => select.value);
|
||||
checkedAll = optionsValues.every(
|
||||
option => selectionValues.indexOf(option) > -1
|
||||
);
|
||||
checkedPartial = optionsValues.some(
|
||||
option => selectionValues.indexOf(option) > -1
|
||||
);
|
||||
} else {
|
||||
filtedOptions = filtedOptions.filter(
|
||||
(option: any) => !~selectedItem.indexOf(option)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
inputValue &&
|
||||
creatable &&
|
||||
!find(options, item => item[labelField || 'label'] == inputValue)
|
||||
) {
|
||||
filtedOptions.unshift({
|
||||
[labelField]: inputValue,
|
||||
[valueField]: inputValue,
|
||||
isNew: true
|
||||
});
|
||||
if (multiple && checkAll) {
|
||||
const optionsValues = options.map(option => option.value);
|
||||
const selectionValues = selection.map(select => select.value);
|
||||
checkedAll = optionsValues.every(
|
||||
option => selectionValues.indexOf(option) > -1
|
||||
);
|
||||
checkedPartial = optionsValues.some(
|
||||
option => selectionValues.indexOf(option) > -1
|
||||
);
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<div ref={this.menu} className={cx('Select-menu')}>
|
||||
{multiple && checkAll ? (
|
||||
<div className={cx('Select-checkAll')}>
|
||||
{searchable ? (
|
||||
<div
|
||||
className={cx(`Select-input`, {
|
||||
'is-focused': this.state.isFocused
|
||||
})}
|
||||
>
|
||||
<Icon icon="search" className="icon" />
|
||||
<input
|
||||
{...getInputProps({
|
||||
onFocus: this.onFocus,
|
||||
onBlur: this.onBlur,
|
||||
disabled: disabled,
|
||||
placeholder: searchPromptText,
|
||||
onChange: this.handleInputChange,
|
||||
ref: this.inputRef
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{multiple && checkAll && filtedOptions.length ? (
|
||||
<div className={cx('Select-option')}>
|
||||
<Checkbox
|
||||
checked={checkedPartial}
|
||||
partial={checkedPartial && !checkedAll}
|
||||
|
|
@ -587,11 +622,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
</Checkbox>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{filtedOptions.length ? (
|
||||
filtedOptions.map((item, index) => {
|
||||
const checked = checkAll
|
||||
? selection.some((o: Option) => o.value == item.value)
|
||||
: false;
|
||||
: !!~selectedItem.indexOf(item);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -609,15 +645,32 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
(Array.isArray(selectedItem) && ~selectedItem.indexOf(item))
|
||||
})}
|
||||
>
|
||||
{checkAll ? (
|
||||
{removable ? (
|
||||
<a data-tooltip="移除" data-position="left">
|
||||
<Icon
|
||||
icon="minus"
|
||||
className="icon"
|
||||
onClick={(e: any) => this.handleDeleteClick(e, item)}
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
{editable ? (
|
||||
<a data-tooltip="编辑" data-position="left">
|
||||
<Icon
|
||||
icon="pencil"
|
||||
className="icon"
|
||||
onClick={(e: any) => this.handleEditClick(e, item)}
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
{checkAll || multiple ? (
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
trueValue={item.value}
|
||||
onChange={() => this.handleChange(item)}
|
||||
>
|
||||
{item.isNew
|
||||
? promptTextCreator(item.label as string)
|
||||
: item.disabled
|
||||
{item.disabled
|
||||
? item[labelField]
|
||||
: highlight(
|
||||
item[labelField],
|
||||
|
|
@ -625,8 +678,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
cx('Select-option-hl')
|
||||
)}
|
||||
</Checkbox>
|
||||
) : item.isNew ? (
|
||||
promptTextCreator(item.label as string)
|
||||
) : (
|
||||
<span>
|
||||
{item.disabled
|
||||
|
|
@ -643,32 +694,56 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<div className={cx('Select-option Select-option--placeholder')}>
|
||||
{noResultsText}
|
||||
</div>
|
||||
<div className={cx('Select-noResult')}>{noResultsText}</div>
|
||||
)}
|
||||
|
||||
{creatable && !disabled ? (
|
||||
<a className={cx('Select-addBtn')} onClick={this.handleAddClick}>
|
||||
<Icon icon="plus" className="icon" />
|
||||
{createBtnLabel}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (popOverContainer) {
|
||||
return (
|
||||
<Overlay
|
||||
container={popOverContainer}
|
||||
placement="left-bottom-left-top"
|
||||
target={this.getTarget}
|
||||
show
|
||||
return (
|
||||
<Overlay
|
||||
container={popOverContainer || this.getTarget}
|
||||
target={this.getTarget}
|
||||
show
|
||||
>
|
||||
<PopOver
|
||||
overlay
|
||||
className={cx('Select-popover')}
|
||||
style={{width: this.target ? this.target.offsetWidth : 'auto'}}
|
||||
onHide={this.close}
|
||||
>
|
||||
<PopOver
|
||||
className={cx('Select-popover')}
|
||||
style={{width: this.target ? this.target.offsetWidth : 'auto'}}
|
||||
>
|
||||
{menu}
|
||||
</PopOver>
|
||||
</Overlay>
|
||||
);
|
||||
} else {
|
||||
return <div className={cx('Select-menuOuter')}>{menu}</div>;
|
||||
}
|
||||
{menu}
|
||||
</PopOver>
|
||||
</Overlay>
|
||||
);
|
||||
|
||||
// if (popOverContainer) {
|
||||
// return (
|
||||
// <Overlay
|
||||
// container={popOverContainer}
|
||||
// placement="left-bottom-left-top"
|
||||
// target={this.getTarget}
|
||||
// show
|
||||
// >
|
||||
// <PopOver
|
||||
// overlay
|
||||
// className={cx('Select-popover')}
|
||||
// style={{width: this.target ? this.target.offsetWidth : 'auto'}}
|
||||
// onHide={this.close}
|
||||
// >
|
||||
// {menu}
|
||||
// </PopOver>
|
||||
// </Overlay>
|
||||
// );
|
||||
// } else {
|
||||
// return <div className={cx('Select-menuOuter')}>{menu}</div>;
|
||||
// }
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -697,14 +772,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
inputValue={inputValue}
|
||||
onChange={this.handleChange}
|
||||
onStateChange={this.handleStateChange}
|
||||
onOuterClick={this.close}
|
||||
// onOuterClick={this.close}
|
||||
itemToString={item => (item ? item[labelField] : '')}
|
||||
>
|
||||
{(options: ControllerStateAndHelpers<any>) => {
|
||||
const {isOpen, getInputProps} = options;
|
||||
return (
|
||||
<div
|
||||
tabIndex={searchable || disabled ? -1 : 0}
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
onClick={this.toggle}
|
||||
onFocus={this.onFocus}
|
||||
|
|
@ -724,22 +799,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
>
|
||||
<div className={cx(`Select-valueWrap`)}>
|
||||
{this.renderValue(options)}
|
||||
{searchable && !disabled ? (
|
||||
<input
|
||||
{...getInputProps({
|
||||
className: cx(`Select-input`),
|
||||
onFocus: this.onFocus,
|
||||
onBlur: this.onBlur,
|
||||
onKeyDown: event => {
|
||||
if (event.key === 'Backspace' && !inputValue) {
|
||||
this.removeItem(value.length - 1);
|
||||
}
|
||||
},
|
||||
onChange: this.handleInputChange,
|
||||
ref: this.inputRef
|
||||
})}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
{clearable && !disabled && value && value.length ? (
|
||||
<a onClick={this.clearValue} className={cx('Select-clear')}>
|
||||
|
|
@ -753,7 +812,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
) : null}
|
||||
|
||||
<span className={cx('Select-arrow')} />
|
||||
{isOpen ? this.renderOuter(options) : null}
|
||||
{isOpen ? this.renderOuter(options, getInputProps) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,19 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {eachTree, isVisible, isObject, autobind} from '../utils/helper';
|
||||
import {
|
||||
eachTree,
|
||||
isVisible,
|
||||
autobind,
|
||||
findTreeIndex,
|
||||
hasAbility,
|
||||
createObject
|
||||
} from '../utils/helper';
|
||||
import {Option, Options, value2array} from './Checkboxes';
|
||||
import {ClassNamesFn, themeable} from '../theme';
|
||||
import {highlight} from '../renderers/Form/Options';
|
||||
import {Icon} from './icons';
|
||||
import Checkbox from './Checkbox';
|
||||
|
||||
interface TreeSelectorProps {
|
||||
classPrefix: string;
|
||||
|
|
@ -32,18 +40,19 @@ interface TreeSelectorProps {
|
|||
// 多选时，选中父节点时，是否只将起子节点加入到值中。
|
||||
onlyChildren?: boolean;
|
||||
// 名称、取值等字段名映射
|
||||
nameField?: string;
|
||||
valueField?: string;
|
||||
iconField?: string;
|
||||
unfoldedField?: string;
|
||||
foldedField?: string;
|
||||
disabledField?: string;
|
||||
labelField: string;
|
||||
valueField: string;
|
||||
iconField: string;
|
||||
unfoldedField: string;
|
||||
foldedField: string;
|
||||
disabledField: string;
|
||||
|
||||
className?: string;
|
||||
itemClassName?: string;
|
||||
joinValues?: boolean;
|
||||
extractValue?: boolean;
|
||||
delimiter?: string;
|
||||
data: Options;
|
||||
options: Options;
|
||||
value: any;
|
||||
onChange: Function;
|
||||
placeholder?: string;
|
||||
|
|
@ -54,26 +63,31 @@ interface TreeSelectorProps {
|
|||
selfDisabledAffectChildren?: boolean;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
addMode?: 'dialog' | 'normal';
|
||||
addable?: boolean;
|
||||
onAdd?: Function;
|
||||
openAddDialog?: Function;
|
||||
editMode?: 'dialog' | 'normal';
|
||||
onEdit?: Function;
|
||||
|
||||
// 是否为内建 增、改、删。当有复杂表单的时候直接抛出去让外层能统一处理
|
||||
bultinCUD?: boolean;
|
||||
rootCreatable?: boolean;
|
||||
creatable?: boolean;
|
||||
onAdd?: (
|
||||
idx?: number | Array<number>,
|
||||
value?: any,
|
||||
skipForm?: boolean
|
||||
) => void;
|
||||
editable?: boolean;
|
||||
openEditDialog?: Function;
|
||||
onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
|
||||
removable?: boolean;
|
||||
onRemove?: Function;
|
||||
onDelete?: (value: Option) => void;
|
||||
}
|
||||
|
||||
interface TreeSelectorState {
|
||||
value: Array<any>;
|
||||
unfolded: {[propName: string]: string};
|
||||
editItem: Option | null;
|
||||
addItem: Option | null;
|
||||
addingItem: Option | null;
|
||||
|
||||
inputValue: string;
|
||||
addingParent: Option | null;
|
||||
isAdding: boolean;
|
||||
isEditing: boolean;
|
||||
editingItem: Option | null;
|
||||
addTop: boolean;
|
||||
}
|
||||
|
||||
export class TreeSelector extends React.Component<
|
||||
|
|
@ -89,7 +103,7 @@ export class TreeSelector extends React.Component<
|
|||
disabled: false,
|
||||
withChildren: false,
|
||||
onlyChildren: false,
|
||||
nameField: 'name',
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
iconField: 'icon',
|
||||
unfoldedField: 'unfolded',
|
||||
|
|
@ -115,14 +129,15 @@ export class TreeSelector extends React.Component<
|
|||
multiple: props.multiple,
|
||||
delimiter: props.delimiter,
|
||||
valueField: props.valueField,
|
||||
options: props.data
|
||||
options: props.options
|
||||
}),
|
||||
unfolded: this.syncUnFolded(props),
|
||||
editItem: null, // 点击编辑时的 item
|
||||
addItem: null, // 点击添加时的 item
|
||||
addingItem: null, // 添加后的 item
|
||||
editingItem: null, // 编辑后的 item
|
||||
addTop: false // 添加一级
|
||||
|
||||
inputValue: '',
|
||||
addingParent: null,
|
||||
isAdding: false,
|
||||
isEditing: false,
|
||||
editingItem: null
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +146,7 @@ export class TreeSelector extends React.Component<
|
|||
|
||||
if (
|
||||
this.props.value !== nextProps.value ||
|
||||
this.props.data !== nextProps.data
|
||||
this.props.options !== nextProps.options
|
||||
) {
|
||||
toUpdate.value = value2array(nextProps.value, {
|
||||
joinValues: nextProps.joinValues,
|
||||
|
|
@ -139,11 +154,11 @@ export class TreeSelector extends React.Component<
|
|||
multiple: nextProps.multiple,
|
||||
delimiter: nextProps.delimiter,
|
||||
valueField: nextProps.valueField,
|
||||
options: nextProps.data
|
||||
options: nextProps.options
|
||||
});
|
||||
}
|
||||
|
||||
if (this.props.data !== nextProps.data) {
|
||||
if (this.props.options !== nextProps.options) {
|
||||
toUpdate.unfolded = this.syncUnFolded(nextProps);
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +170,7 @@ export class TreeSelector extends React.Component<
|
|||
let unfolded: {[propName: string]: string} = {};
|
||||
const {foldedField, unfoldedField} = this.props;
|
||||
|
||||
eachTree(props.data, (node: Option, index, level) => {
|
||||
eachTree(props.options, (node: Option, index, level) => {
|
||||
if (node.children && node.children.length) {
|
||||
let ret: any = true;
|
||||
|
||||
|
|
@ -179,7 +194,6 @@ export class TreeSelector extends React.Component<
|
|||
@autobind
|
||||
toggleUnfolded(node: any) {
|
||||
this.setState({
|
||||
addItem: null,
|
||||
unfolded: {
|
||||
...this.state.unfolded,
|
||||
[node[this.props.valueField as string]]: !this.state.unfolded[
|
||||
|
|
@ -308,128 +322,124 @@ export class TreeSelector extends React.Component<
|
|||
}
|
||||
|
||||
@autobind
|
||||
handleAdd(item: Option | null, isFolder: boolean) {
|
||||
const {addMode, openAddDialog, valueField} = this.props;
|
||||
let {unfolded} = this.state;
|
||||
if (addMode === 'dialog') {
|
||||
openAddDialog && openAddDialog(item ? item : null);
|
||||
} else if (addMode === 'normal') {
|
||||
// item 为 null 时为添加一级
|
||||
if (item) {
|
||||
// 添加时，默认折叠的文件夹需要展开
|
||||
if (isFolder && !unfolded[item[valueField as string]]) {
|
||||
unfolded = {
|
||||
...unfolded,
|
||||
[item[valueField as string]]: !unfolded[item[valueField as string]]
|
||||
};
|
||||
}
|
||||
handleAdd(parent: Option | null = null) {
|
||||
const {bultinCUD, onAdd, options} = this.props;
|
||||
let idx: Array<number> | undefined = undefined;
|
||||
|
||||
this.setState({
|
||||
addItem: item,
|
||||
editItem: null,
|
||||
unfolded
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
addTop: true,
|
||||
editItem: null,
|
||||
addItem: null
|
||||
});
|
||||
}
|
||||
if (!bultinCUD) {
|
||||
idx = parent
|
||||
? findTreeIndex(options, item => item === parent)
|
||||
: undefined;
|
||||
return onAdd && onAdd(idx);
|
||||
} else {
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
isAdding: true,
|
||||
addingParent: parent
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleEdit(item: Option) {
|
||||
const {editMode, openEditDialog} = this.props;
|
||||
const {addItem} = this.state;
|
||||
if (editMode === 'dialog') {
|
||||
openEditDialog && openEditDialog(item);
|
||||
addItem &&
|
||||
this.setState({
|
||||
addItem: null
|
||||
});
|
||||
} else if (editMode === 'normal') {
|
||||
this.setState({
|
||||
editItem: item,
|
||||
addItem: null
|
||||
});
|
||||
}
|
||||
const labelField = this.props.labelField;
|
||||
this.setState({
|
||||
isEditing: true,
|
||||
isAdding: false,
|
||||
editingItem: item,
|
||||
inputValue: item[labelField]
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleRemove(item: Option) {
|
||||
const {onRemove} = this.props;
|
||||
onRemove && onRemove(item);
|
||||
const {onDelete} = this.props;
|
||||
|
||||
onDelete && onDelete(item);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleConfirmOnAdd() {
|
||||
const {onAdd} = this.props;
|
||||
const {addItem: parent, addingItem} = this.state;
|
||||
onAdd &&
|
||||
onAdd({
|
||||
...addingItem,
|
||||
parent: parent
|
||||
});
|
||||
|
||||
handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({
|
||||
addingItem: null,
|
||||
addItem: null,
|
||||
addTop: false
|
||||
inputValue: e.currentTarget.value
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleCancelOnAdd() {
|
||||
this.setState({
|
||||
addItem: null,
|
||||
addTop: false
|
||||
});
|
||||
}
|
||||
handleConfirm() {
|
||||
const {
|
||||
inputValue: value,
|
||||
isAdding,
|
||||
addingParent,
|
||||
editingItem,
|
||||
isEditing
|
||||
} = this.state;
|
||||
|
||||
@autobind
|
||||
handleConfirmOnEdit() {
|
||||
const {onEdit} = this.props;
|
||||
let {editingItem, editItem: prevItem} = this.state;
|
||||
onEdit &&
|
||||
onEdit({
|
||||
...editingItem,
|
||||
prev: prevItem
|
||||
});
|
||||
this.setState({
|
||||
editingItem: null,
|
||||
editItem: null
|
||||
});
|
||||
}
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleCancelOnEdit() {
|
||||
this.setState({
|
||||
editItem: null
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleChangeOnAdd(value: string) {
|
||||
this.setState({
|
||||
addingItem: {
|
||||
label: value
|
||||
const {labelField, onAdd, options, onEdit} = this.props;
|
||||
this.setState(
|
||||
{
|
||||
inputValue: '',
|
||||
isAdding: false,
|
||||
isEditing: false
|
||||
},
|
||||
() => {
|
||||
if (isAdding && onAdd) {
|
||||
let idx =
|
||||
(addingParent &&
|
||||
findTreeIndex(options, item => item === addingParent)) ||
|
||||
[];
|
||||
onAdd(idx.concat(0), {[labelField]: value}, true);
|
||||
} else if (isEditing && onEdit) {
|
||||
onEdit(
|
||||
{
|
||||
...editingItem,
|
||||
[labelField]: value
|
||||
},
|
||||
editingItem!,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleChangeOnEdit(item: Option, value: string) {
|
||||
let {editItem} = this.state;
|
||||
handleCancel() {
|
||||
this.setState({
|
||||
editingItem: {
|
||||
...item,
|
||||
label: value || (editItem as Option)['label']
|
||||
}
|
||||
inputValue: '',
|
||||
isAdding: false,
|
||||
isEditing: false
|
||||
});
|
||||
}
|
||||
|
||||
renderInput(prfix: JSX.Element | null = null) {
|
||||
const {classnames: cx} = this.props;
|
||||
const {inputValue} = this.state;
|
||||
|
||||
return (
|
||||
<div className={cx('Tree-itemLabel')}>
|
||||
<div className={cx('Tree-itemInput')}>
|
||||
{prfix}
|
||||
<input
|
||||
onChange={this.handleInputChange}
|
||||
value={inputValue}
|
||||
placeholder="请输入"
|
||||
/>
|
||||
<a data-tooltip="取消" onClick={this.handleCancel}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
<a data-tooltip="确认" onClick={this.handleConfirm}>
|
||||
<Icon icon="check" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
renderList(
|
||||
list: Options,
|
||||
|
|
@ -442,27 +452,34 @@ export class TreeSelector extends React.Component<
|
|||
showRadio,
|
||||
multiple,
|
||||
disabled,
|
||||
nameField = '',
|
||||
valueField = '',
|
||||
iconField = '',
|
||||
disabledField = '',
|
||||
labelField,
|
||||
valueField,
|
||||
iconField,
|
||||
disabledField,
|
||||
cascade,
|
||||
selfDisabledAffectChildren,
|
||||
onlyChildren,
|
||||
classnames: cx,
|
||||
highlightTxt,
|
||||
data,
|
||||
options,
|
||||
maxLength,
|
||||
minLength,
|
||||
addable,
|
||||
creatable,
|
||||
editable,
|
||||
removable
|
||||
} = this.props;
|
||||
const {addItem, editItem, unfolded, addTop, value: stateValue} = this.state;
|
||||
const {
|
||||
unfolded,
|
||||
value: stateValue,
|
||||
isAdding,
|
||||
addingParent,
|
||||
editingItem,
|
||||
isEditing
|
||||
} = this.state;
|
||||
|
||||
let childrenChecked = 0;
|
||||
let ret = list.map((item, key) => {
|
||||
if (!isVisible(item as any, data)) {
|
||||
if (!isVisible(item as any, options)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -508,25 +525,19 @@ export class TreeSelector extends React.Component<
|
|||
}
|
||||
|
||||
const checkbox: JSX.Element | null = multiple ? (
|
||||
<label className={cx(`Checkbox Checkbox--checkbox Checkbox--sm`)}>
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={nodeDisabled}
|
||||
checked={selfChecked}
|
||||
onChange={e => this.handleCheck(item, e.currentTarget.checked)}
|
||||
/>
|
||||
<i />
|
||||
</label>
|
||||
<Checkbox
|
||||
size="sm"
|
||||
disabled={nodeDisabled}
|
||||
checked={checked}
|
||||
onChange={this.handleCheck.bind(this, item)}
|
||||
/>
|
||||
) : showRadio ? (
|
||||
<label className={cx(`Checkbox Checkbox--radio Checkbox--sm`)}>
|
||||
<input
|
||||
type="radio"
|
||||
disabled={nodeDisabled}
|
||||
checked={checked}
|
||||
onChange={() => this.handleSelect(item)}
|
||||
/>
|
||||
<i />
|
||||
</label>
|
||||
<Checkbox
|
||||
size="sm"
|
||||
disabled={nodeDisabled}
|
||||
checked={checked}
|
||||
onChange={this.handleSelect.bind(this, item)}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const isLeaf = !item.children || !item.children.length;
|
||||
|
|
@ -538,10 +549,17 @@ export class TreeSelector extends React.Component<
|
|||
'Tree-item--isLeaf': isLeaf
|
||||
})}
|
||||
>
|
||||
{!editItem ||
|
||||
(isObject(editItem) &&
|
||||
(editItem as Option)[valueField] !== item[valueField]) ? (
|
||||
<a>
|
||||
{isEditing && editingItem === item ? (
|
||||
this.renderInput(checkbox)
|
||||
) : (
|
||||
<div
|
||||
className={cx('Tree-itemLabel', {
|
||||
'is-children-checked':
|
||||
multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
|
||||
'is-checked': checked,
|
||||
'is-disabled': nodeDisabled
|
||||
})}
|
||||
>
|
||||
{!isLeaf ? (
|
||||
<i
|
||||
onClick={() => this.toggleUnfolded(item)}
|
||||
|
|
@ -549,26 +567,14 @@ export class TreeSelector extends React.Component<
|
|||
'is-folded': !unfolded[item[valueField]]
|
||||
})}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{showIcon ? (
|
||||
<i
|
||||
className={cx(
|
||||
`Tree-itemIcon ${item[iconField] ||
|
||||
(childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
) : (
|
||||
<span className={cx('Tree-itemArrowPlaceholder')} />
|
||||
)}
|
||||
|
||||
{checkbox}
|
||||
|
||||
<span
|
||||
className={cx('Tree-itemText', {
|
||||
'is-children-checked':
|
||||
multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
|
||||
'is-checked': checked,
|
||||
'is-disabled': nodeDisabled
|
||||
})}
|
||||
className={cx('Tree-itemText')}
|
||||
onClick={() =>
|
||||
!nodeDisabled &&
|
||||
(multiple
|
||||
|
|
@ -576,81 +582,72 @@ export class TreeSelector extends React.Component<
|
|||
: this.handleSelect(item))
|
||||
}
|
||||
>
|
||||
{showIcon ? (
|
||||
<i
|
||||
className={cx(
|
||||
`Tree-itemIcon ${item[iconField] ||
|
||||
(childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{highlightTxt
|
||||
? highlight(item[nameField], highlightTxt)
|
||||
: item[nameField]}
|
||||
? highlight(item[labelField], highlightTxt)
|
||||
: item[labelField]}
|
||||
</span>
|
||||
{!nodeDisabled && !addTop && !addItem && !editItem ? (
|
||||
<span className={cx('Tree-item-icons')}>
|
||||
{addable ? (
|
||||
<Icon
|
||||
icon="plus"
|
||||
className="icon"
|
||||
onClick={() => this.handleAdd(item, !isLeaf)}
|
||||
/>
|
||||
|
||||
{!nodeDisabled && !isAdding && !isEditing ? (
|
||||
<div className={cx('Tree-item-icons')}>
|
||||
{creatable && hasAbility(item, 'creatable') ? (
|
||||
<a
|
||||
onClick={this.handleAdd.bind(this, item)}
|
||||
data-tooltip="添加孩子节点"
|
||||
>
|
||||
<Icon icon="plus" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
{removable ? (
|
||||
<Icon
|
||||
icon="minus"
|
||||
className="icon"
|
||||
onClick={() => this.handleRemove(item)}
|
||||
/>
|
||||
|
||||
{removable && hasAbility(item, 'removable') ? (
|
||||
<a
|
||||
onClick={this.handleRemove.bind(this, item)}
|
||||
data-tooltip="移除该节点"
|
||||
>
|
||||
<Icon icon="minus" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
{editable ? (
|
||||
<Icon
|
||||
icon="pencil"
|
||||
className="icon"
|
||||
onClick={() => this.handleEdit(item)}
|
||||
/>
|
||||
|
||||
{editable && hasAbility(item, 'editable') ? (
|
||||
<a
|
||||
onClick={this.handleEdit.bind(this, item)}
|
||||
data-tooltip="编辑该节点"
|
||||
>
|
||||
<Icon icon="pencil" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</a>
|
||||
) : (
|
||||
<div className={cx('Tree-item--isEdit')}>
|
||||
<input
|
||||
defaultValue={item['label']}
|
||||
onChange={e =>
|
||||
this.handleChangeOnEdit(item, e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<Icon
|
||||
icon="check"
|
||||
className="icon"
|
||||
onClick={this.handleConfirmOnEdit}
|
||||
/>
|
||||
<Icon
|
||||
icon="close"
|
||||
className="icon"
|
||||
onClick={this.handleCancelOnEdit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* 有children而且为展开状态 或者 添加child时 */}
|
||||
{(childrenItems && unfolded[item[valueField]]) ||
|
||||
(addItem && addItem[valueField] === item[valueField]) ? (
|
||||
(isAdding && addingParent === item) ? (
|
||||
<ul className={cx('Tree-sublist')}>
|
||||
{addItem && addItem[valueField] === item[valueField] ? (
|
||||
<li>
|
||||
<input
|
||||
onChange={e =>
|
||||
this.handleChangeOnAdd(e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<Icon
|
||||
icon="check"
|
||||
className="icon"
|
||||
onClick={this.handleConfirmOnAdd}
|
||||
/>
|
||||
<Icon
|
||||
icon="close"
|
||||
className="icon"
|
||||
onClick={this.handleCancelOnAdd}
|
||||
/>
|
||||
{isAdding && addingParent === item ? (
|
||||
<li className={cx('Tree-item')}>
|
||||
{this.renderInput(
|
||||
checkbox
|
||||
? React.cloneElement(checkbox, {
|
||||
checked: false,
|
||||
disabled: true
|
||||
})
|
||||
: null
|
||||
)}
|
||||
</li>
|
||||
) : null}
|
||||
{childrenItems}
|
||||
</ul>
|
||||
) : !childrenItems && item.placeholder ? (
|
||||
<div className={cx('Tree-placeholder')}>{item.placeholder}</div>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
|
|
@ -670,68 +667,76 @@ export class TreeSelector extends React.Component<
|
|||
rootLabel,
|
||||
showIcon,
|
||||
classnames: cx,
|
||||
addable
|
||||
creatable,
|
||||
rootCreatable,
|
||||
disabled
|
||||
} = this.props;
|
||||
let data = this.props.data;
|
||||
const {value, addTop} = this.state;
|
||||
let options = this.props.options;
|
||||
const {value, isAdding, addingParent, isEditing, inputValue} = this.state;
|
||||
|
||||
let addBtn = null;
|
||||
|
||||
if (creatable && rootCreatable !== false && hideRoot) {
|
||||
addBtn = (
|
||||
<a
|
||||
className={cx('Tree-addTopBtn', {
|
||||
'is-disabled': isAdding || isEditing
|
||||
})}
|
||||
onClick={this.handleAdd.bind(this, null)}
|
||||
>
|
||||
<Icon icon="plus" className="icon" />
|
||||
<span>添加一级节点</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cx(`Tree ${className || ''}`)}>
|
||||
{data && data.length ? (
|
||||
{options && options.length ? (
|
||||
<ul className={cx('Tree-list')}>
|
||||
{hideRoot ? (
|
||||
this.renderList(data, value, false).dom
|
||||
) : (
|
||||
<li className={cx('Tree-item Tree-rootItem')}>
|
||||
<a>
|
||||
{showIcon ? (
|
||||
<i className={cx('Tree-itemIcon Tree-rootIcon')} />
|
||||
) : null}
|
||||
|
||||
<label
|
||||
className={cx('Tree-itemLabel', {
|
||||
'is-checked': !value || !value.length
|
||||
})}
|
||||
>
|
||||
<span
|
||||
className={cx('Tree-itemText')}
|
||||
onClick={this.clearSelect}
|
||||
>
|
||||
{rootLabel}
|
||||
</span>
|
||||
</label>
|
||||
</a>
|
||||
{addable ? (
|
||||
<div className={cx('Tree-addTop')}>
|
||||
{!addTop ? (
|
||||
<p onClick={() => this.handleAdd(null, false)}>
|
||||
<Icon icon="plus" className="icon" />
|
||||
<span>添加一级</span>
|
||||
</p>
|
||||
) : null}
|
||||
{addTop ? (
|
||||
<div className={cx('Tree-addTop-input')}>
|
||||
<input
|
||||
onChange={e =>
|
||||
this.handleChangeOnAdd(e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<Icon
|
||||
icon="check"
|
||||
className="icon"
|
||||
onClick={this.handleConfirmOnAdd}
|
||||
/>
|
||||
<Icon
|
||||
icon="close"
|
||||
className="icon"
|
||||
onClick={this.handleCancelOnAdd}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<>
|
||||
{addBtn}
|
||||
{isAdding && !addingParent ? (
|
||||
<li className={cx('Tree-item')}>{this.renderInput()}</li>
|
||||
) : null}
|
||||
{this.renderList(options, value, false).dom}
|
||||
</>
|
||||
) : (
|
||||
<li
|
||||
className={cx('Tree-rootItem', {
|
||||
'is-checked': !value || !value.length
|
||||
})}
|
||||
>
|
||||
<div className={cx('Tree-itemLabel')}>
|
||||
<span className={cx('Tree-itemText')}>
|
||||
{showIcon ? (
|
||||
<i className={cx('Tree-itemIcon Tree-rootIcon')} />
|
||||
) : null}
|
||||
{rootLabel}
|
||||
</span>
|
||||
{!disabled &&
|
||||
creatable &&
|
||||
rootCreatable !== false &&
|
||||
!isAdding &&
|
||||
!isEditing ? (
|
||||
<div className={cx('Tree-item-icons')}>
|
||||
{creatable ? (
|
||||
<a
|
||||
onClick={this.handleAdd.bind(this, null)}
|
||||
data-tooltip="添加一级节点"
|
||||
>
|
||||
<Icon icon="plus" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<ul className={cx('Tree-sublist')}>
|
||||
{this.renderList(data, value, false).dom}
|
||||
{isAdding && !addingParent ? (
|
||||
<li className={cx('Tree-item')}>{this.renderInput()}</li>
|
||||
) : null}
|
||||
{this.renderList(options, value, false).dom}
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,9 @@ import SuccessIcon from '../icons/success.svg';
|
|||
// @ts-ignore
|
||||
import FailIcon from '../icons/fail.svg';
|
||||
|
||||
// @ts-ignore
|
||||
import SearchIcon from '../icons/search.svg';
|
||||
|
||||
// 兼容原来的用法，后续不直接试用。
|
||||
// @ts-ignore
|
||||
export const closeIcon = <CloseIcon />;
|
||||
|
|
@ -103,6 +106,7 @@ registerIcon('upload', UploadIcon);
|
|||
registerIcon('file', FileIcon);
|
||||
registerIcon('success', SuccessIcon);
|
||||
registerIcon('fail', FailIcon);
|
||||
registerIcon('search', SearchIcon);
|
||||
|
||||
export function Icon({
|
||||
icon,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3506" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M972.544 175.189333a31.658667 31.658667 0 0 1 15.701333 5.162667 31.872 31.872 0 0 1 7.296 46.976c-0.682667 0.896-1.493333 1.664-2.218666 2.474667L343.082667 876.032a32.341333 32.341333 0 0 1-37.546667 5.589333 37.504 37.504 0 0 1-8.064-6.101333L30.208 597.845333c-0.768-0.810667-1.536-1.621333-2.218667-2.517333a32.256 32.256 0 0 1 14.378667-49.749333 32 32 0 0 1 28.8 3.584c2.474667 1.664 2.944 2.304 5.12 4.309333l244.736 254.250667L948.181333 184.448l2.517334-2.261333a36.693333 36.693333 0 0 1 11.861333-6.016c2.901333-0.725333 3.669333-0.725333 6.613333-1.024l3.370667 0.042666z" p-id="3507"></path>
|
||||
</svg>
|
||||
<svg viewBox="0 0 13 9" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="3506"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g transform="translate(6.656854, 2.656854) scale(-1, 1) rotate(-315.000000) translate(-6.656854, -2.656854) ">
|
||||
<polygon id="path-1" points="11.1568542 5.15685425 11.1568542 -0.843145751 12.1568542 -0.843145751 12.1568542 6.15685425 1.15685425 6.15685425 1.15685425 5.15685425"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 759 B After Width: | Height: | Size: 458 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
|
||||
<path d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z" p-id="1464" data-spm-anchor-id="a313x.7781069.0.i0" />
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" version="1.1">
|
||||
<polygon id="path-1" points="6.0003653 5.2970518 10.5993691 0.6980479600000002 11.3064759 1.4051547400000004 6.7074721 6.0041586 11.3009516 10.5976381 10.5938448 11.3047449 6.0003653 6.7112654 1.4056713299999997 11.3059593 0.6985645500000004 10.5988525 5.2932585 6.0041586 0.6956119200000002 1.4065120000000002 1.4027187000000003 0.69940522"></polygon>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 439 B After Width: | Height: | Size: 486 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" version="1.1">
|
||||
<path d="M2,8 C2,4.691 4.691,2 8,2 C11.309,2 14,4.691 14,8 C14,11.309 11.309,14 8,14 C4.691,14 2,11.309 2,8 L2,8 Z M18,16.586 L14.314,12.9 C15.367,11.545 16,9.849 16,8 C16,3.582 12.418,0 8,0 C3.582,0 0,3.582 0,8 C0,12.418 3.582,16 8,16 C9.849,16 11.545,15.367 12.9,14.314 L16.586,18 L18,16.586 Z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 438 B |
|
|
@ -135,7 +135,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
|||
control: any;
|
||||
lastQuery: any;
|
||||
dataInvalid: boolean = false;
|
||||
timer: number;
|
||||
timer: NodeJS.Timeout;
|
||||
mounted: boolean;
|
||||
constructor(props: CRUDProps) {
|
||||
super(props);
|
||||
|
|
@ -331,7 +331,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
|||
env.jumpTo(filter(action.redirect, data), action);
|
||||
|
||||
return store
|
||||
.saveRemote(action.api, data, {
|
||||
.saveRemote(action.api!, data, {
|
||||
successMessage:
|
||||
(action.messages && action.messages.success) ||
|
||||
(messages && messages.saveSuccess),
|
||||
|
|
|
|||
|
|
@ -118,16 +118,7 @@ export default class DropDownButton extends React.Component<
|
|||
|
||||
if (popOverContainer) {
|
||||
return (
|
||||
<Overlay
|
||||
container={popOverContainer}
|
||||
placement={
|
||||
align === 'right'
|
||||
? 'right-bottom-right-top'
|
||||
: 'left-bottom-left-top'
|
||||
}
|
||||
target={() => this.target}
|
||||
show
|
||||
>
|
||||
<Overlay container={popOverContainer} target={() => this.target} show>
|
||||
<PopOver
|
||||
overlay
|
||||
onHide={this.close}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {IFormStore, IFormItemStore} from '../../store/form';
|
||||
import debouce = require('lodash/debounce');
|
||||
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ import {
|
|||
RendererConfig,
|
||||
HocStoreFactory
|
||||
} from '../../factory';
|
||||
import {anyChanged, ucFirst, getWidthRate} from '../../utils/helper';
|
||||
import {anyChanged, ucFirst, getWidthRate, autobind} from '../../utils/helper';
|
||||
import {observer} from 'mobx-react';
|
||||
import {FormHorizontal, FormSchema} from '.';
|
||||
import {Schema} from '../../types';
|
||||
|
||||
export interface FormItemBasicConfig extends Partial<RendererConfig> {
|
||||
type?: string;
|
||||
|
|
@ -33,13 +34,11 @@ export interface FormItemBasicConfig extends Partial<RendererConfig> {
|
|||
validate?: (values: any, value: any) => string | boolean;
|
||||
}
|
||||
|
||||
export interface FormItemState {
|
||||
isFocused: boolean;
|
||||
}
|
||||
|
||||
// 自己接收到属性。
|
||||
export interface FormItemProps extends RendererProps {
|
||||
name?: string;
|
||||
formStore?: IFormStore;
|
||||
formItem?: IFormItemStore;
|
||||
formInited: boolean;
|
||||
formMode: 'normal' | 'horizontal' | 'inline' | 'row' | 'default';
|
||||
formHorizontal: FormHorizontal;
|
||||
|
|
@ -56,7 +55,7 @@ export interface FormItemProps extends RendererProps {
|
|||
values: {[propName: string]: any},
|
||||
submitOnChange?: boolean
|
||||
) => void;
|
||||
addHook: (fn: Function, mode?: 'validate' | 'init') => void;
|
||||
addHook: (fn: Function, mode?: 'validate' | 'init') => () => void;
|
||||
removeHook: (fn: Function, mode?: 'validate' | 'init') => void;
|
||||
renderFormItems: (
|
||||
schema: FormSchema,
|
||||
|
|
@ -89,8 +88,10 @@ export interface FormItemProps extends RendererProps {
|
|||
error?: string;
|
||||
}
|
||||
|
||||
export type FormControlProps = RendererProps &
|
||||
Exclude<
|
||||
// 下发下去的属性
|
||||
export type FormControlProps = RendererProps & {
|
||||
onOpenDialog: (schema: Schema, data: any) => Promise<any>;
|
||||
} & Exclude<
|
||||
FormItemProps,
|
||||
| 'inputClassName'
|
||||
| 'renderControl'
|
||||
|
|
@ -114,29 +115,15 @@ export interface FormItemConfig extends FormItemBasicConfig {
|
|||
component: FormControlComponent;
|
||||
}
|
||||
|
||||
export class FormItemWrap extends React.Component<
|
||||
FormItemProps,
|
||||
FormItemState
|
||||
> {
|
||||
export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
reaction: any;
|
||||
|
||||
constructor(props: FormItemProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isFocused: false
|
||||
};
|
||||
|
||||
this.handleFocus = this.handleFocus.bind(this);
|
||||
this.handleBlur = this.handleBlur.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const {formItem: model} = this.props;
|
||||
|
||||
if (model) {
|
||||
this.reaction = reaction(
|
||||
() => model.errors.join(''),
|
||||
() => `${model.errors.join('')}${model.isFocused}${model.dialogOpen}`,
|
||||
() => this.forceUpdate()
|
||||
);
|
||||
}
|
||||
|
|
@ -146,20 +133,51 @@ export class FormItemWrap extends React.Component<
|
|||
this.reaction && this.reaction();
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleFocus(e: any) {
|
||||
this.setState({
|
||||
isFocused: true
|
||||
});
|
||||
const {formItem: model} = this.props;
|
||||
model && model.focus();
|
||||
this.props.onFocus && this.props.onFocus(e);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleBlur(e: any) {
|
||||
this.setState({
|
||||
isFocused: false
|
||||
});
|
||||
const {formItem: model} = this.props;
|
||||
model && model.blur();
|
||||
this.props.onBlur && this.props.onBlur(e);
|
||||
}
|
||||
|
||||
@autobind
|
||||
async handleOpenDialog(schema: Schema, data: any) {
|
||||
const {formItem: model} = this.props;
|
||||
if (!model) {
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise(resolve =>
|
||||
model.openDialog(schema, data, (result?: any) => resolve(result))
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleDialogConfirm([values]: Array<any>) {
|
||||
const {formItem: model} = this.props;
|
||||
if (!model) {
|
||||
return;
|
||||
}
|
||||
|
||||
model.closeDialog(values);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleDialogClose() {
|
||||
const {formItem: model} = this.props;
|
||||
if (!model) {
|
||||
return;
|
||||
}
|
||||
model.closeDialog();
|
||||
}
|
||||
|
||||
renderControl() {
|
||||
const {
|
||||
inputClassName,
|
||||
|
|
@ -179,6 +197,7 @@ export class FormItemWrap extends React.Component<
|
|||
const controlSize = size || defaultSize;
|
||||
return renderControl({
|
||||
...rest,
|
||||
onOpenDialog: this.handleOpenDialog,
|
||||
type,
|
||||
classnames: cx,
|
||||
formItem: model,
|
||||
|
|
@ -299,7 +318,7 @@ export class FormItemWrap extends React.Component<
|
|||
})
|
||||
: null}
|
||||
|
||||
{hint && this.state.isFocused
|
||||
{hint && model && model.isFocused
|
||||
? render('hint', hint, {
|
||||
className: cx(`Form-hint`)
|
||||
})
|
||||
|
|
@ -395,7 +414,7 @@ export class FormItemWrap extends React.Component<
|
|||
})
|
||||
: null}
|
||||
|
||||
{hint && this.state.isFocused
|
||||
{hint && model && model.isFocused
|
||||
? render('hint', hint, {
|
||||
className: cx(`Form-hint`)
|
||||
})
|
||||
|
|
@ -490,7 +509,7 @@ export class FormItemWrap extends React.Component<
|
|||
})
|
||||
: null}
|
||||
|
||||
{hint && this.state.isFocused
|
||||
{hint && model && model.isFocused
|
||||
? render('hint', hint, {
|
||||
className: cx(`Form-hint`)
|
||||
})
|
||||
|
|
@ -588,7 +607,7 @@ export class FormItemWrap extends React.Component<
|
|||
: null}
|
||||
</div>
|
||||
|
||||
{hint && this.state.isFocused
|
||||
{hint && model && model.isFocused
|
||||
? render('hint', hint, {
|
||||
className: cx(`Form-hint`)
|
||||
})
|
||||
|
|
@ -612,19 +631,38 @@ export class FormItemWrap extends React.Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
const {formMode, inputOnly, wrap} = this.props;
|
||||
const {formMode, inputOnly, wrap, render, formItem: model} = this.props;
|
||||
|
||||
if (wrap === false || inputOnly) {
|
||||
return this.renderControl();
|
||||
}
|
||||
|
||||
return formMode === 'inline'
|
||||
? this.renderInline()
|
||||
: formMode === 'horizontal'
|
||||
? this.renderHorizontal()
|
||||
: formMode === 'row'
|
||||
? this.renderRow()
|
||||
: this.renderNormal();
|
||||
return (
|
||||
<>
|
||||
{formMode === 'inline'
|
||||
? this.renderInline()
|
||||
: formMode === 'horizontal'
|
||||
? this.renderHorizontal()
|
||||
: formMode === 'row'
|
||||
? this.renderRow()
|
||||
: this.renderNormal()}
|
||||
{model
|
||||
? render(
|
||||
'modal',
|
||||
{
|
||||
type: 'dialog',
|
||||
...model.dialogSchema
|
||||
},
|
||||
{
|
||||
show: model.dialogOpen,
|
||||
onClose: this.handleDialogClose,
|
||||
onConfirm: this.handleDialogConfirm,
|
||||
data: model.dialogData
|
||||
}
|
||||
)
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -796,6 +834,7 @@ export function registerFormItem(config: FormItemConfig): RendererConfig {
|
|||
return (
|
||||
<Control
|
||||
{...rest}
|
||||
onOpenDialog={this.handleOpenDialog}
|
||||
size={config.sizeMutable !== false ? undefined : size}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import cx from 'classnames';
|
|||
import {FormControlProps, FormItem} from './Item';
|
||||
import {buildApi, isValidApi, isEffectiveApi} from '../../utils/api';
|
||||
import {Checkbox, Spinner} from '../../components';
|
||||
import {autobind, setVariable} from '../../utils/helper';
|
||||
|
||||
export interface Column {
|
||||
label: string;
|
||||
|
|
@ -50,6 +51,8 @@ export default class MatrixCheckbox extends React.Component<
|
|||
|
||||
state: MatrixState;
|
||||
sourceInvalid: boolean = false;
|
||||
mounted: boolean = false;
|
||||
|
||||
constructor(props: MatrixProps) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -61,12 +64,17 @@ export default class MatrixCheckbox extends React.Component<
|
|||
|
||||
this.toggleItem = this.toggleItem.bind(this);
|
||||
this.reload = this.reload.bind(this);
|
||||
this.initOptions = this.initOptions.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.mounted = true;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {formInited, addHook} = this.props;
|
||||
|
||||
formInited ? this.reload() : addHook(this.reload, 'init');
|
||||
formInited ? this.reload() : addHook(this.initOptions, 'init');
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: MatrixProps) {
|
||||
|
|
@ -104,7 +112,24 @@ export default class MatrixCheckbox extends React.Component<
|
|||
}
|
||||
}
|
||||
|
||||
reload() {
|
||||
componentWillUnmount() {
|
||||
this.mounted = false;
|
||||
const {removeHook} = this.props;
|
||||
removeHook(this.initOptions, 'init');
|
||||
}
|
||||
|
||||
async initOptions(data: any) {
|
||||
await this.reload();
|
||||
const {formItem, name} = this.props;
|
||||
if (!formItem) {
|
||||
return;
|
||||
}
|
||||
if (formItem.value) {
|
||||
setVariable(data, name!, formItem.value);
|
||||
}
|
||||
}
|
||||
|
||||
async reload() {
|
||||
const {source, data, env, onChange} = this.props;
|
||||
|
||||
if (!isEffectiveApi(source, data) || this.state.loading) {
|
||||
|
|
@ -115,45 +140,61 @@ export default class MatrixCheckbox extends React.Component<
|
|||
throw new Error('fetcher is required');
|
||||
}
|
||||
|
||||
// 需要联动加载吗？我看不一定会用到，先这样吧。
|
||||
this.setState(
|
||||
{
|
||||
loading: true
|
||||
},
|
||||
() => {
|
||||
env
|
||||
.fetcher(source, data)
|
||||
.then(ret => {
|
||||
if (!ret.ok) {
|
||||
throw new Error(ret.msg || '数据请求错误');
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
loading: false,
|
||||
rows: (ret.data as any).rows || [],
|
||||
columns: (ret.data as any).columns || []
|
||||
},
|
||||
() => {
|
||||
let value = (ret.data as any).value;
|
||||
if (value) {
|
||||
value = mergeValue(
|
||||
value,
|
||||
this.state.columns,
|
||||
this.state.rows
|
||||
);
|
||||
onChange(value);
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(reason =>
|
||||
this.setState({
|
||||
error: reason,
|
||||
loading: false
|
||||
})
|
||||
);
|
||||
// todo 优化这块
|
||||
return await new Promise((resolve, reject) => {
|
||||
if (!this.mounted) {
|
||||
return resolve();
|
||||
}
|
||||
);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
loading: true
|
||||
},
|
||||
() => {
|
||||
if (!this.mounted) {
|
||||
return resolve();
|
||||
}
|
||||
env
|
||||
.fetcher(source, data)
|
||||
.then(ret => {
|
||||
if (!ret.ok) {
|
||||
throw new Error(ret.msg || '数据请求错误');
|
||||
}
|
||||
if (!this.mounted) {
|
||||
return resolve();
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
loading: false,
|
||||
rows: (ret.data as any).rows || [],
|
||||
columns: (ret.data as any).columns || []
|
||||
},
|
||||
() => {
|
||||
let value = (ret.data as any).value;
|
||||
if (value) {
|
||||
value = mergeValue(
|
||||
value,
|
||||
this.state.columns,
|
||||
this.state.rows
|
||||
);
|
||||
onChange(value);
|
||||
}
|
||||
resolve();
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(reason =>
|
||||
this.setState(
|
||||
{
|
||||
error: reason,
|
||||
loading: false
|
||||
},
|
||||
resolve
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
toggleItem(checked: boolean, x: number, y: number) {
|
||||
|
|
|
|||
|
|
@ -308,12 +308,7 @@ export default class NestedSelectControl extends React.Component<
|
|||
|
||||
if (popOverContainer) {
|
||||
return (
|
||||
<Overlay
|
||||
container={popOverContainer}
|
||||
placement="left-bottom-left-top right-bottom-right-top"
|
||||
target={() => this.target}
|
||||
show
|
||||
>
|
||||
<Overlay container={popOverContainer} target={() => this.target} show>
|
||||
<PopOver
|
||||
className={cx('NestedSelect-popover')}
|
||||
style={{minWidth: this.target.offsetWidth}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
/**
|
||||
* @file 所有列表选择类控件的父级，比如 Select、Radios、Checkboxes、
|
||||
* List、ButtonGroup 等等
|
||||
*/
|
||||
import {Api, Schema} from '../../types';
|
||||
import {isEffectiveApi, isApiOutdated} from '../../utils/api';
|
||||
import {
|
||||
buildApi,
|
||||
isEffectiveApi,
|
||||
isValidApi,
|
||||
isApiOutdated
|
||||
} from '../../utils/api';
|
||||
import {anyChanged, autobind} from '../../utils/helper';
|
||||
anyChanged,
|
||||
autobind,
|
||||
createObject,
|
||||
setVariable,
|
||||
spliceTree,
|
||||
findTreeIndex,
|
||||
getTree
|
||||
} from '../../utils/helper';
|
||||
import {reaction} from 'mobx';
|
||||
import {FormControlProps, registerFormItem, FormItemBasicConfig} from './Item';
|
||||
import {IFormItemStore} from '../../store/formItem';
|
||||
|
|
@ -13,8 +20,9 @@ export type OptionsControlComponent = React.ComponentType<FormControlProps>;
|
|||
|
||||
import React from 'react';
|
||||
import {resolveVariableAndFilter} from '../../utils/tpl-builtin';
|
||||
import {evalExpression} from '../../utils/tpl';
|
||||
import {Option, OptionProps, normalizeOptions} from '../../components/Select';
|
||||
import {filter} from '../../utils/tpl';
|
||||
import findIndex from 'lodash/findIndex';
|
||||
|
||||
export {Option};
|
||||
|
||||
|
|
@ -26,6 +34,7 @@ export interface OptionsConfig extends OptionsBasicConfig {
|
|||
component: React.ComponentType<OptionsControlProps>;
|
||||
}
|
||||
|
||||
// 下发给注册进来的组件的属性。
|
||||
export interface OptionsControlProps extends FormControlProps, OptionProps {
|
||||
source?: Api;
|
||||
name?: string;
|
||||
|
|
@ -35,30 +44,36 @@ export interface OptionsControlProps extends FormControlProps, OptionProps {
|
|||
setOptions: (value: Array<any>) => void;
|
||||
setLoading: (value: boolean) => void;
|
||||
reloadOptions: () => void;
|
||||
addable?: boolean;
|
||||
onAdd?: () => void;
|
||||
creatable?: boolean;
|
||||
onAdd?: (
|
||||
idx?: number | Array<number>,
|
||||
value?: any,
|
||||
skipForm?: boolean
|
||||
) => void;
|
||||
addControls?: Array<any>;
|
||||
editable?: boolean;
|
||||
onEdit?: (value: Option) => void;
|
||||
editControls?: Array<any>;
|
||||
onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
|
||||
removable?: boolean;
|
||||
onDelete?: (value: Option) => void;
|
||||
}
|
||||
|
||||
// 自己接收的属性。
|
||||
export interface OptionsProps extends FormControlProps, OptionProps {
|
||||
sourcce?: Api;
|
||||
source?: Api;
|
||||
creatable?: boolean;
|
||||
addApi?: Api;
|
||||
addMode?: 'dialog' | 'normal';
|
||||
addDialog?: Schema;
|
||||
addControls?: Array<any>;
|
||||
editApi?: Api;
|
||||
editMode?: 'dialog' | 'normal';
|
||||
editDialog?: Schema;
|
||||
editControls?: Array<any>;
|
||||
deleteApi?: Api;
|
||||
deleteConfirmText?: string;
|
||||
optionLabel?: string;
|
||||
}
|
||||
|
||||
export function registerOptionsControl(config: OptionsConfig) {
|
||||
const Control = config.component;
|
||||
|
||||
// @observer
|
||||
class FormOptionsItem extends React.Component<OptionsProps, any> {
|
||||
static displayName = `OptionsControl(${config.type})`;
|
||||
static defaultProps = {
|
||||
|
|
@ -70,6 +85,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
multiple: false,
|
||||
placeholder: '请选择',
|
||||
resetValue: '',
|
||||
deleteConfirmText: '确定要删除？',
|
||||
...Control.defaultProps
|
||||
};
|
||||
static propsList: any = (Control as any).propsList
|
||||
|
|
@ -113,10 +129,10 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
|
||||
let loadOptions: boolean = initFetch !== false;
|
||||
|
||||
if (/^\$(?:([a-z0-9_.]+)|{.+})$/.test(source) && formItem) {
|
||||
if (/^\$(?:([a-z0-9_.]+)|{.+})$/.test(source as string) && formItem) {
|
||||
formItem.setOptions(
|
||||
normalizeOptions(
|
||||
resolveVariableAndFilter(source, data, '| raw') || []
|
||||
resolveVariableAndFilter(source as string, data, '| raw') || []
|
||||
)
|
||||
);
|
||||
loadOptions = false;
|
||||
|
|
@ -134,7 +150,9 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
}
|
||||
|
||||
loadOptions &&
|
||||
(formInited ? this.reload() : addHook && addHook(this.reload, 'init'));
|
||||
(formInited
|
||||
? this.reload()
|
||||
: addHook && addHook(this.initOptions, 'init'));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -207,7 +225,7 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
) {
|
||||
if (/^\$(?:([a-z0-9_.]+)|{.+})$/.test(props.source as string)) {
|
||||
const prevOptions = resolveVariableAndFilter(
|
||||
prevProps.source,
|
||||
prevProps.source as string,
|
||||
prevProps.data,
|
||||
'| raw'
|
||||
);
|
||||
|
|
@ -417,6 +435,18 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
return formItem.loadOptions(source, data, undefined, false, onChange);
|
||||
}
|
||||
|
||||
@autobind
|
||||
async initOptions(data: any) {
|
||||
await this.reload();
|
||||
const {formItem, name} = this.props;
|
||||
if (!formItem) {
|
||||
return;
|
||||
}
|
||||
if (formItem.value) {
|
||||
setVariable(data, name!, formItem.value);
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.input && this.input.focus && this.input.focus();
|
||||
}
|
||||
|
|
@ -439,8 +469,280 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
formItem && formItem.setLoading(value);
|
||||
}
|
||||
|
||||
@autobind
|
||||
async handleOptionAdd(
|
||||
idx: number | Array<number> = -1,
|
||||
value: any,
|
||||
skipForm: boolean = false
|
||||
) {
|
||||
let {
|
||||
addControls,
|
||||
disabled,
|
||||
labelField,
|
||||
onOpenDialog,
|
||||
optionLabel,
|
||||
addApi,
|
||||
source,
|
||||
data,
|
||||
valueField,
|
||||
formItem: model,
|
||||
createBtnLabel,
|
||||
env
|
||||
} = this.props;
|
||||
|
||||
// 禁用或者没有配置 name
|
||||
if (disabled || !model) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 用户没有配置表单项，则自动创建一个 label 输入
|
||||
if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
|
||||
addControls = [
|
||||
{
|
||||
type: 'text',
|
||||
name: labelField || 'label',
|
||||
label: false,
|
||||
placeholder: '请输入名称'
|
||||
}
|
||||
];
|
||||
}
|
||||
const ctx = createObject(
|
||||
data,
|
||||
Array.isArray(idx)
|
||||
? {
|
||||
parent: getTree(model.options, idx.slice(0, idx.length - 1)),
|
||||
...value
|
||||
}
|
||||
: value
|
||||
);
|
||||
|
||||
let result: any = skipForm
|
||||
? ctx
|
||||
: await onOpenDialog(
|
||||
{
|
||||
type: 'dialog',
|
||||
title: createBtnLabel || `新增${optionLabel || '选项'}`,
|
||||
body: {
|
||||
type: 'form',
|
||||
api: addApi,
|
||||
controls: addControls
|
||||
}
|
||||
},
|
||||
ctx
|
||||
);
|
||||
|
||||
// 单独发请求
|
||||
if (skipForm && addApi) {
|
||||
try {
|
||||
const payload = await env.fetcher(addApi!, result, {
|
||||
method: 'post'
|
||||
});
|
||||
|
||||
if (!payload.ok) {
|
||||
env.notify('error', payload.msg || '新增失败，请仔细检查');
|
||||
} else {
|
||||
result = payload.data || result;
|
||||
}
|
||||
} catch (e) {
|
||||
result = null;
|
||||
console.error(e);
|
||||
env.notify('error', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 有 result 说明弹框点了确认。否则就是取消了。
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 没走服务端的。
|
||||
if (!result.__saved) {
|
||||
result = {
|
||||
...result,
|
||||
[valueField || 'value']: result[labelField || 'label']
|
||||
};
|
||||
}
|
||||
|
||||
// 如果配置了 source 直接重新拉取接口就够了
|
||||
if (source) {
|
||||
this.reload();
|
||||
} else {
|
||||
// 否则直接前端变更 options
|
||||
let options = model.options.concat();
|
||||
if (Array.isArray(idx)) {
|
||||
options = spliceTree(options, idx, 0, {...result});
|
||||
} else {
|
||||
~idx
|
||||
? options.splice(idx, 0, {...result})
|
||||
: options.push({...result});
|
||||
}
|
||||
model.setOptions(options);
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
async handleOptionEdit(
|
||||
value: any,
|
||||
origin: any = value,
|
||||
skipForm: boolean = false
|
||||
) {
|
||||
let {
|
||||
editControls,
|
||||
disabled,
|
||||
labelField,
|
||||
onOpenDialog,
|
||||
editApi,
|
||||
env,
|
||||
source,
|
||||
data,
|
||||
formItem: model,
|
||||
optionLabel
|
||||
} = this.props;
|
||||
|
||||
if (disabled || !model) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
|
||||
editControls = [
|
||||
{
|
||||
type: 'text',
|
||||
name: labelField || 'label',
|
||||
label: false,
|
||||
placeholder: '请输入名称'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
let result = skipForm
|
||||
? value
|
||||
: await onOpenDialog(
|
||||
{
|
||||
type: 'dialog',
|
||||
title: `编辑${optionLabel || '选项'}`,
|
||||
body: {
|
||||
type: 'form',
|
||||
api: editApi,
|
||||
controls: editControls
|
||||
}
|
||||
},
|
||||
createObject(data, value)
|
||||
);
|
||||
|
||||
// 单独发请求
|
||||
if (skipForm && editApi) {
|
||||
try {
|
||||
const payload = await env.fetcher(
|
||||
editApi!,
|
||||
createObject(data, result),
|
||||
{
|
||||
method: 'post'
|
||||
}
|
||||
);
|
||||
|
||||
if (!payload.ok) {
|
||||
env.notify('error', payload.msg || '保存失败，请仔细检查');
|
||||
} else {
|
||||
result = payload.data || result;
|
||||
}
|
||||
} catch (e) {
|
||||
result = null;
|
||||
console.error(e);
|
||||
env.notify('error', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 没有结果，说明取消了。
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (source) {
|
||||
this.reload();
|
||||
} else {
|
||||
const indexes = findTreeIndex(model.options, item => item === origin);
|
||||
|
||||
if (indexes) {
|
||||
model.setOptions(
|
||||
spliceTree(model.options, indexes, 1, {
|
||||
...origin,
|
||||
...result
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
async handleOptionDelete(value: any) {
|
||||
let {
|
||||
deleteConfirmText,
|
||||
disabled,
|
||||
data,
|
||||
deleteApi,
|
||||
env,
|
||||
formItem: model,
|
||||
source,
|
||||
valueField
|
||||
} = this.props;
|
||||
|
||||
if (disabled || !model) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = createObject(data, value);
|
||||
|
||||
// 如果配置了 deleteConfirmText 让用户先确认。
|
||||
const confirmed = deleteConfirmText
|
||||
? await env.confirm(filter(deleteConfirmText, ctx))
|
||||
: true;
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 通过 deleteApi 删除。
|
||||
try {
|
||||
if (!deleteApi) {
|
||||
throw new Error('请配置 deleteApi');
|
||||
}
|
||||
|
||||
const result = await env.fetcher(deleteApi!, ctx, {
|
||||
method: 'delete'
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
env.notify('error', result.msg || '删除失败，请重试');
|
||||
} else if (source) {
|
||||
this.reload();
|
||||
} else {
|
||||
const options = model.options.concat();
|
||||
const idx = findIndex(
|
||||
options,
|
||||
item => item[valueField || 'value'] == value[valueField || 'value']
|
||||
);
|
||||
|
||||
if (~idx) {
|
||||
options.splice(idx, 1);
|
||||
model.setOptions(options);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
env.notify('error', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {value, formItem} = this.props;
|
||||
const {
|
||||
value,
|
||||
formItem,
|
||||
addApi,
|
||||
editApi,
|
||||
deleteApi,
|
||||
creatable,
|
||||
editable,
|
||||
removable
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Control
|
||||
|
|
@ -455,6 +757,12 @@ export function registerOptionsControl(config: OptionsConfig) {
|
|||
setOptions={this.setOptions}
|
||||
syncOptions={this.syncOptions}
|
||||
reloadOptions={this.reload}
|
||||
creatable={creatable || isEffectiveApi(addApi)}
|
||||
editable={editable || isEffectiveApi(editApi)}
|
||||
removable={removable || isEffectiveApi(deleteApi)}
|
||||
onAdd={this.handleOptionAdd}
|
||||
onEdit={this.handleOptionEdit}
|
||||
onDelete={this.handleOptionDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
leading: false
|
||||
});
|
||||
this.inputRef = this.inputRef.bind(this);
|
||||
this.handleNewOptionClick = this.handleNewOptionClick.bind(this);
|
||||
}
|
||||
|
||||
inputRef(ref: any) {
|
||||
|
|
@ -51,6 +50,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
delimiter,
|
||||
multiple,
|
||||
type,
|
||||
valueField,
|
||||
onChange,
|
||||
setOptions,
|
||||
options,
|
||||
|
|
@ -63,7 +63,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
|
||||
(Array.isArray(value) ? value : value ? [value] : []).forEach(
|
||||
(option: any) => {
|
||||
let resolved = find(options, (item: any) => item.value == option.value);
|
||||
let resolved = find(
|
||||
options,
|
||||
(item: any) =>
|
||||
item[valueField || 'value'] == option[valueField || 'value']
|
||||
);
|
||||
resolved || additonalOptions.push(option);
|
||||
}
|
||||
);
|
||||
|
|
@ -71,22 +75,24 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
if (joinValues) {
|
||||
if (multiple) {
|
||||
newValue = Array.isArray(value)
|
||||
? (value.map(item => item.value).join(delimiter) as string)
|
||||
? (value
|
||||
.map(item => item[valueField || 'value'])
|
||||
.join(delimiter) as string)
|
||||
: value
|
||||
? (value as Option).value
|
||||
? (value as Option)[valueField || 'value']
|
||||
: '';
|
||||
} else {
|
||||
newValue = newValue ? (newValue as Option).value : '';
|
||||
newValue = newValue ? (newValue as Option)[valueField || 'value'] : '';
|
||||
}
|
||||
} else if (extractValue) {
|
||||
if (multiple) {
|
||||
newValue = Array.isArray(value)
|
||||
? value.map(item => item.value)
|
||||
? value.map(item => item[valueField || 'value'])
|
||||
: value
|
||||
? [(value as Option).value]
|
||||
? [(value as Option)[valueField || 'value']]
|
||||
: [''];
|
||||
} else {
|
||||
newValue = newValue ? (newValue as Option).value : '';
|
||||
newValue = newValue ? (newValue as Option)[valueField || 'value'] : '';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,16 +167,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
return combinedOptions;
|
||||
}
|
||||
|
||||
handleNewOptionClick(option: any) {
|
||||
const {setOptions, options} = this.props;
|
||||
|
||||
let mergedOptions: Array<any> = options.concat();
|
||||
mergedOptions.push({
|
||||
...option
|
||||
});
|
||||
setOptions(mergedOptions);
|
||||
}
|
||||
|
||||
reload() {
|
||||
const reload = this.props.reloadOptions;
|
||||
reload && reload();
|
||||
|
|
@ -211,12 +207,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
ref={this.inputRef}
|
||||
value={selectedOptions}
|
||||
options={options}
|
||||
onNewOptionClick={this.handleNewOptionClick}
|
||||
loadOptions={
|
||||
isEffectiveApi(autoComplete) ? this.loadRemote : undefined
|
||||
}
|
||||
creatable={creatable}
|
||||
searchable={autoComplete || creatable ? true : searchable}
|
||||
searchable={searchable || !!autoComplete}
|
||||
onChange={this.changeValue}
|
||||
loading={loading}
|
||||
noResultsText={noResultsText}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import {OptionsControl, OptionsControlProps, highlight} from './Options';
|
|||
import cx from 'classnames';
|
||||
import {Action} from '../../types';
|
||||
import Downshift, {StateChangeOptions} from 'downshift';
|
||||
// @ts-ignore
|
||||
import matchSorter from 'match-sorter';
|
||||
import debouce = require('lodash/debounce');
|
||||
import {filter} from '../../utils/tpl';
|
||||
import find = require('lodash/find');
|
||||
import {Icon} from '../../components/icons';
|
||||
import {autobind, createObject} from '../../utils/helper';
|
||||
import {autobind, createObject, setVariable} from '../../utils/helper';
|
||||
import {isEffectiveApi} from '../../utils/api';
|
||||
|
||||
// declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;
|
||||
|
|
@ -88,7 +89,7 @@ export default class TextControl extends React.PureComponent<
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {formItem, autoComplete, data, addHook, formInited} = this.props;
|
||||
const {formItem, autoComplete, addHook, formInited, data} = this.props;
|
||||
|
||||
if (isEffectiveApi(autoComplete, data) && formItem) {
|
||||
if (formInited) {
|
||||
|
|
@ -99,16 +100,18 @@ export default class TextControl extends React.PureComponent<
|
|||
})
|
||||
);
|
||||
} else {
|
||||
this.unHook = addHook(
|
||||
() =>
|
||||
formItem.loadOptions(
|
||||
autoComplete,
|
||||
createObject(data, {
|
||||
term: ''
|
||||
})
|
||||
),
|
||||
'init'
|
||||
);
|
||||
this.unHook = addHook(async (data: any) => {
|
||||
await formItem.loadOptions(
|
||||
autoComplete,
|
||||
createObject(data, {
|
||||
term: ''
|
||||
})
|
||||
);
|
||||
|
||||
if (formItem.value) {
|
||||
setVariable(data, name!, formItem.value);
|
||||
}
|
||||
}, 'init');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -447,7 +450,7 @@ export default class TextControl extends React.PureComponent<
|
|||
filtedOptions.push({
|
||||
[labelField || 'label']: this.state.inputValue,
|
||||
[valueField || 'value']: this.state.inputValue,
|
||||
isNew: true
|
||||
'isNew': true
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@ import React from 'react';
|
|||
import cx from 'classnames';
|
||||
import TreeSelector from '../../components/Tree';
|
||||
import {OptionsControl, OptionsControlProps} from './Options';
|
||||
import {autobind, createObject} from '../../utils/helper';
|
||||
import {Action, Schema, PlainObject, Api, Payload} from '../../types';
|
||||
import {isEffectiveApi} from '../../utils/api';
|
||||
import {filter} from '../../utils/tpl';
|
||||
import {Option} from '../../components/Checkboxes';
|
||||
import {Spinner} from '../../components';
|
||||
|
||||
export interface TreeProps extends OptionsControlProps {
|
||||
|
|
@ -18,172 +13,25 @@ export interface TreeProps extends OptionsControlProps {
|
|||
cascade?: boolean; // 父子之间是否完全独立。
|
||||
withChildren?: boolean; // 选父级的时候是否把子节点的值也包含在内。
|
||||
onlyChildren?: boolean; // 选父级的时候，是否只把子节点的值包含在内
|
||||
addApi?: Api;
|
||||
addMode?: 'dialog' | 'normal';
|
||||
addDialog?: Schema;
|
||||
editApi?: Api;
|
||||
editMode?: 'dialog' | 'normal';
|
||||
editDialog?: Schema;
|
||||
deleteApi?: Api;
|
||||
deleteConfirmText?: string;
|
||||
addControls?: Array<any>;
|
||||
updateControls?: Array<any>;
|
||||
rootCreatable?: boolean;
|
||||
}
|
||||
|
||||
export interface TreeState {
|
||||
isAddModalOpened: boolean;
|
||||
isEditModalOpened: boolean;
|
||||
parent: Option | null;
|
||||
prev: Option | null;
|
||||
data: any;
|
||||
}
|
||||
|
||||
export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
||||
export default class TreeControl extends React.Component<TreeProps> {
|
||||
static defaultProps: Partial<TreeProps> = {
|
||||
placeholder: '选项加载中...',
|
||||
multiple: false,
|
||||
hideRoot: false,
|
||||
rootLabel: '顶级',
|
||||
rootValue: '',
|
||||
showIcon: true
|
||||
};
|
||||
|
||||
state: TreeState = {
|
||||
isAddModalOpened: false,
|
||||
isEditModalOpened: false,
|
||||
parent: null,
|
||||
prev: null,
|
||||
data: null
|
||||
};
|
||||
|
||||
reload() {
|
||||
const reload = this.props.reloadOptions;
|
||||
reload && reload();
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleAdd(values: PlainObject) {
|
||||
this.saveRemote(values, 'add');
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleAddModalConfirm(
|
||||
values: Array<any>,
|
||||
action: Action,
|
||||
ctx: any,
|
||||
components: Array<any>
|
||||
) {
|
||||
this.saveRemote(
|
||||
{
|
||||
...values,
|
||||
parent: this.state.parent
|
||||
},
|
||||
'add'
|
||||
);
|
||||
this.closeAddDialog();
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleEdit(values: PlainObject) {
|
||||
this.saveRemote(values, 'edit');
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleEditModalConfirm(
|
||||
values: Array<any>,
|
||||
action: Action,
|
||||
ctx: any,
|
||||
components: Array<any>
|
||||
) {
|
||||
this.saveRemote(
|
||||
{
|
||||
...values,
|
||||
prev: this.state.prev
|
||||
},
|
||||
'edit'
|
||||
);
|
||||
this.closeEditDialog();
|
||||
}
|
||||
|
||||
@autobind
|
||||
async saveRemote(item: any, type: 'add' | 'edit') {
|
||||
const {addApi, editApi, data, env} = this.props;
|
||||
|
||||
let remote: Payload | null = null;
|
||||
if (type == 'add' && isEffectiveApi(addApi, createObject(data, item))) {
|
||||
remote = await env.fetcher(addApi, createObject(data, item));
|
||||
} else if (
|
||||
type == 'edit' &&
|
||||
isEffectiveApi(editApi, createObject(data, item))
|
||||
) {
|
||||
remote = await env.fetcher(editApi, createObject(data, item));
|
||||
}
|
||||
|
||||
if (remote && !remote.ok) {
|
||||
env.notify('error', remote.msg || '保存失败');
|
||||
return;
|
||||
}
|
||||
|
||||
this.reload();
|
||||
}
|
||||
|
||||
@autobind
|
||||
async handleRemove(item: any) {
|
||||
const {deleteConfirmText, deleteApi, data, env} = this.props;
|
||||
const ctx = createObject(data, item);
|
||||
if (isEffectiveApi(deleteApi, ctx)) {
|
||||
const confirmed = await env.confirm(
|
||||
deleteConfirmText ? filter(deleteConfirmText, ctx) : '确认要删除？'
|
||||
);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await env.fetcher(deleteApi, ctx);
|
||||
|
||||
if (!result.ok) {
|
||||
env.notify('error', result.msg || '删除失败');
|
||||
return;
|
||||
}
|
||||
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
openAddDialog(parent: Option | null) {
|
||||
const {data} = this.props;
|
||||
this.setState({
|
||||
isAddModalOpened: true,
|
||||
data: createObject(data, parent ? parent : {}),
|
||||
parent
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
closeAddDialog() {
|
||||
this.setState({
|
||||
isAddModalOpened: false,
|
||||
parent: null
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
openEditDialog(prev: Option) {
|
||||
const {data} = this.props;
|
||||
this.setState({
|
||||
isEditModalOpened: true,
|
||||
data: createObject(data, prev),
|
||||
prev
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
closeEditDialog() {
|
||||
this.setState({
|
||||
isEditModalOpened: false,
|
||||
prev: null
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
|
|
@ -196,7 +44,6 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
|||
delimiter,
|
||||
placeholder,
|
||||
options,
|
||||
inline,
|
||||
multiple,
|
||||
valueField,
|
||||
initiallyOpen,
|
||||
|
|
@ -210,18 +57,17 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
|||
rootValue,
|
||||
showIcon,
|
||||
showRadio,
|
||||
render,
|
||||
addMode,
|
||||
addApi,
|
||||
addDialog,
|
||||
editMode,
|
||||
editApi,
|
||||
editDialog,
|
||||
deleteApi
|
||||
onAdd,
|
||||
creatable,
|
||||
addControls,
|
||||
onEdit,
|
||||
editable,
|
||||
editControls,
|
||||
removable,
|
||||
onDelete,
|
||||
rootCreatable
|
||||
} = this.props;
|
||||
|
||||
const {data} = this.state;
|
||||
|
||||
return (
|
||||
<div className={cx(`${ns}TreeControl`, className)}>
|
||||
<Spinner size="sm" key="info" show={loading} />
|
||||
|
|
@ -235,7 +81,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
|||
extractValue={extractValue}
|
||||
delimiter={delimiter}
|
||||
placeholder={placeholder}
|
||||
data={options}
|
||||
options={options}
|
||||
multiple={multiple}
|
||||
initiallyOpen={initiallyOpen}
|
||||
unfoldedLevel={unfoldedLevel}
|
||||
|
|
@ -249,52 +95,18 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
|||
cascade={cascade}
|
||||
foldedField="collapsed"
|
||||
value={value || ''}
|
||||
nameField="label"
|
||||
labelField="label"
|
||||
selfDisabledAffectChildren={false}
|
||||
addMode={addMode}
|
||||
addable={isEffectiveApi(addApi)}
|
||||
onAdd={this.handleAdd}
|
||||
openAddDialog={this.openAddDialog}
|
||||
editMode={editMode}
|
||||
editable={isEffectiveApi(editApi)}
|
||||
onEdit={this.handleEdit}
|
||||
openEditDialog={this.openEditDialog}
|
||||
onRemove={this.handleRemove}
|
||||
removable={isEffectiveApi(deleteApi)}
|
||||
onAdd={onAdd}
|
||||
creatable={creatable}
|
||||
rootCreatable={rootCreatable}
|
||||
onEdit={onEdit}
|
||||
editable={editable}
|
||||
removable={removable}
|
||||
onDelete={onDelete}
|
||||
bultinCUD={!addControls && !editControls}
|
||||
/>
|
||||
)}
|
||||
|
||||
{addMode &&
|
||||
render(
|
||||
'modal',
|
||||
{
|
||||
type: 'dialog',
|
||||
...addDialog
|
||||
},
|
||||
{
|
||||
key: 'addModal',
|
||||
data: data,
|
||||
onConfirm: this.handleAddModalConfirm,
|
||||
onClose: this.closeAddDialog,
|
||||
show: this.state.isAddModalOpened
|
||||
}
|
||||
)}
|
||||
|
||||
{editMode &&
|
||||
render(
|
||||
'modal',
|
||||
{
|
||||
type: 'dialog',
|
||||
...editDialog
|
||||
},
|
||||
{
|
||||
key: 'editModal',
|
||||
data: data,
|
||||
onConfirm: this.handleEditModalConfirm,
|
||||
onClose: this.closeEditDialog,
|
||||
show: this.state.isEditModalOpened
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import PopOver from '../../components/PopOver';
|
|||
import {OptionsControl, OptionsControlProps, Option} from './Options';
|
||||
import {Icon} from '../../components/icons';
|
||||
import TreeSelector from '../../components/Tree';
|
||||
// @ts-ignore
|
||||
import matchSorter from 'match-sorter';
|
||||
import debouce = require('lodash/debounce');
|
||||
import find = require('lodash/find');
|
||||
|
|
@ -395,7 +396,6 @@ export default class TreeSelectControl extends React.Component<
|
|||
return (
|
||||
<Overlay
|
||||
container={popOverContainer || (() => this.container.current)}
|
||||
placement="left-bottom-left-top right-bottom-right-top"
|
||||
target={() => this.target.current}
|
||||
show
|
||||
>
|
||||
|
|
@ -420,7 +420,7 @@ export default class TreeSelectControl extends React.Component<
|
|||
extractValue={extractValue}
|
||||
delimiter={delimiter}
|
||||
placeholder={optionsPlaceholder}
|
||||
data={filtedOptions}
|
||||
options={filtedOptions}
|
||||
highlightTxt={this.state.inputValue}
|
||||
multiple={multiple}
|
||||
initiallyOpen={initiallyOpen}
|
||||
|
|
@ -434,7 +434,7 @@ export default class TreeSelectControl extends React.Component<
|
|||
foldedField="collapsed"
|
||||
hideRoot
|
||||
value={value || ''}
|
||||
nameField="label"
|
||||
labelField="label"
|
||||
maxLength={maxLength}
|
||||
minLength={minLength}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ import {
|
|||
until,
|
||||
noop,
|
||||
isObject,
|
||||
isVisible
|
||||
isVisible,
|
||||
createObject,
|
||||
extendObject
|
||||
} from '../../utils/helper';
|
||||
import debouce = require('lodash/debounce');
|
||||
import flatten = require('lodash/flatten');
|
||||
|
|
@ -314,12 +316,16 @@ export default class Form extends React.Component<FormProps, object> {
|
|||
async onInit() {
|
||||
const {onInit, store, submitOnInit} = this.props;
|
||||
|
||||
const data = store.data;
|
||||
// 先拿出来数据，主要担心 form 被什么东西篡改了，然后又应用出去了
|
||||
// 之前遇到过问题，所以拿出来了。但是 options loadOptions 默认值失效了。
|
||||
// 所以目前需要两个都要设置一下，再 init Hook 里面。
|
||||
const data = {...store.data};
|
||||
|
||||
store.setInited(true);
|
||||
const hooks: Array<(data: any) => Promise<any>> = this.hooks['init'] || [];
|
||||
await Promise.all(hooks.map(hook => hook(data)));
|
||||
|
||||
onInit && onInit(data);
|
||||
onInit && onInit(extendObject(store.data, data));
|
||||
|
||||
submitOnInit &&
|
||||
this.handleAction(
|
||||
|
|
|
|||
|
|
@ -421,7 +421,6 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
|
|||
return (
|
||||
<Overlay
|
||||
container={popOverContainer}
|
||||
placement="left-top right-top left-bottom right-bottom"
|
||||
target={() => this.target}
|
||||
onHide={this.closeQuickEdit}
|
||||
show
|
||||
|
|
|
|||
|
|
@ -5,17 +5,12 @@ import {Api, Payload, fetchOptions} from '../types';
|
|||
import {ComboStore, IComboStore, IUniqueGroup} from './combo';
|
||||
import {evalExpression} from '../utils/tpl';
|
||||
import findIndex = require('lodash/findIndex');
|
||||
import {
|
||||
isArrayChilrenModified,
|
||||
hasOwnProperty,
|
||||
isObject,
|
||||
createObject
|
||||
} from '../utils/helper';
|
||||
import {isArrayChilrenModified, isObject, createObject} from '../utils/helper';
|
||||
import {flattenTree} from '../utils/helper';
|
||||
import {IRendererStore} from '.';
|
||||
import {normalizeOptions} from '../components/Select';
|
||||
import find = require('lodash/find');
|
||||
import {iRendererStore} from './iRenderer';
|
||||
import {SimpleMap} from '../utils/SimpleMap';
|
||||
|
||||
interface IOption {
|
||||
value?: string | number | null;
|
||||
|
|
@ -34,6 +29,7 @@ const ErrorDetail = types.model('ErrorDetail', {
|
|||
export const FormItemStore = types
|
||||
.model('FormItemStore', {
|
||||
identifier: types.identifier,
|
||||
isFocused: false,
|
||||
type: '',
|
||||
unique: false,
|
||||
loading: false,
|
||||
|
|
@ -81,41 +77,6 @@ export const FormItemStore = types
|
|||
return self.errorData.map(item => item.msg);
|
||||
}
|
||||
|
||||
// function selectedOptions(options:Array<Option>=(self.options as any).toJS()) {
|
||||
// return value2array(getValue(), {
|
||||
// multiple: self.multiple,
|
||||
// delimiter: self.delimiter,
|
||||
// valueField: self.valueField,
|
||||
// options: options
|
||||
// })
|
||||
// }
|
||||
|
||||
// function filteredOptions(data:object):Array<IOption> {
|
||||
// let options:Array<IOption> = self.options;
|
||||
// options = options.filter(item => {
|
||||
// let filtered = getExprProperties(item, data);
|
||||
// return filtered.visible !== false && !filtered.hidden;
|
||||
// });
|
||||
|
||||
// let parentStore = getForm().parentStore;
|
||||
// if (parentStore && parentStore.storeType === ComboStore.name) {
|
||||
// let combo = parentStore as IComboStore;
|
||||
// let group = combo.uniques.get(self.name) as IUniqueGroup;
|
||||
// let selectedOptions:Array<any> = [];
|
||||
// group && group.items.forEach(item => {
|
||||
// if (self !== item) {
|
||||
// selectedOptions.push(...item.selectedOptions().map(item => item.value))
|
||||
// }
|
||||
// });
|
||||
|
||||
// if (selectedOptions.length) {
|
||||
// options = options.filter(option => !~selectedOptions.indexOf(option.value))
|
||||
// }
|
||||
// }
|
||||
|
||||
// return options;
|
||||
// }
|
||||
|
||||
return {
|
||||
get form(): any {
|
||||
return getForm();
|
||||
|
|
@ -144,9 +105,6 @@ export const FormItemStore = types
|
|||
return getLastOptionValue();
|
||||
},
|
||||
|
||||
// selectedOptions,
|
||||
// filteredOptions,
|
||||
|
||||
getSelectedOptions(value: any = getValue()) {
|
||||
if (value === getValue()) {
|
||||
return self.selectedOptions;
|
||||
|
|
@ -212,6 +170,9 @@ export const FormItemStore = types
|
|||
})
|
||||
|
||||
.actions(self => {
|
||||
const form = self.form as IFormStore;
|
||||
const dialogCallbacks = new SimpleMap<(result?: any) => void>();
|
||||
|
||||
function config({
|
||||
required,
|
||||
unique,
|
||||
|
|
@ -241,8 +202,6 @@ export const FormItemStore = types
|
|||
type?: string;
|
||||
id?: string;
|
||||
}) {
|
||||
const form = self.form as IFormStore;
|
||||
|
||||
if (typeof rules === 'string') {
|
||||
rules = str2rules(rules);
|
||||
}
|
||||
|
|
@ -278,6 +237,14 @@ export const FormItemStore = types
|
|||
}
|
||||
}
|
||||
|
||||
function focus() {
|
||||
self.isFocused = true;
|
||||
}
|
||||
|
||||
function blur() {
|
||||
self.isFocused = false;
|
||||
}
|
||||
|
||||
function changeValue(value: any, isPrintine: boolean = false) {
|
||||
if (typeof value === 'undefined' || value === '__undefined') {
|
||||
self.form.deleteValueByName(self.name);
|
||||
|
|
@ -366,7 +333,7 @@ export const FormItemStore = types
|
|||
options?: fetchOptions,
|
||||
clearValue?: boolean,
|
||||
onChange?: (value: any) => void
|
||||
) => Promise<any> = flow(function* getInitData(
|
||||
) => Promise<Payload | null> = flow(function* getInitData(
|
||||
api: string,
|
||||
data: object,
|
||||
options?: fetchOptions,
|
||||
|
|
@ -442,8 +409,9 @@ export const FormItemStore = types
|
|||
console.error(e.stack);
|
||||
getRoot(self) &&
|
||||
(getRoot(self) as IRendererStore).notify('error', e.message);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
} as any);
|
||||
|
||||
function syncOptions(originOptions?: Array<any>) {
|
||||
if (!self.options.length && typeof self.value === 'undefined') {
|
||||
|
|
@ -528,7 +496,7 @@ export const FormItemStore = types
|
|||
unMatched = {
|
||||
[self.valueField || 'value']: item,
|
||||
[self.labelField || 'label']: item,
|
||||
__unmatched: true
|
||||
'__unmatched': true
|
||||
};
|
||||
|
||||
const orgin: any =
|
||||
|
|
@ -595,27 +563,30 @@ export const FormItemStore = types
|
|||
clearError();
|
||||
}
|
||||
|
||||
function openDialog(schema: any, ctx: any, additonal?: object) {
|
||||
let proto = ctx.__super ? ctx.__super : self.form.data;
|
||||
|
||||
if (additonal) {
|
||||
proto = createObject(proto, additonal);
|
||||
}
|
||||
|
||||
const data = createObject(proto, {
|
||||
...ctx
|
||||
});
|
||||
|
||||
function openDialog(
|
||||
schema: any,
|
||||
data: any = form.data,
|
||||
callback?: (ret?: any) => void
|
||||
) {
|
||||
self.dialogSchema = schema;
|
||||
self.dialogData = data;
|
||||
self.dialogOpen = true;
|
||||
callback && dialogCallbacks.set(self.dialogData, callback);
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
function closeDialog(result?: any) {
|
||||
const callback = dialogCallbacks.get(self.dialogData);
|
||||
self.dialogOpen = false;
|
||||
|
||||
if (callback) {
|
||||
dialogCallbacks.delete(self.dialogData);
|
||||
setTimeout(() => callback(result), 200);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
focus,
|
||||
blur,
|
||||
config,
|
||||
changeValue,
|
||||
validate,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import {types, getRoot, Instance} from 'mobx-state-tree';
|
|||
import {extendObject, createObject} from '../utils/helper';
|
||||
import {IRendererStore} from './index';
|
||||
import {dataMapping} from '../utils/tpl-builtin';
|
||||
import {SimpleMap} from '../utils/SimpleMap';
|
||||
|
||||
export const iRendererStore = types
|
||||
.model('iRendererStore', {
|
||||
|
|
@ -32,7 +33,7 @@ export const iRendererStore = types
|
|||
};
|
||||
})
|
||||
.actions(self => {
|
||||
const dialogCallbacks = new Map();
|
||||
const dialogCallbacks = new SimpleMap<(result?: any) => void>();
|
||||
|
||||
return {
|
||||
initData(data: object = {}) {
|
||||
|
|
@ -97,10 +98,7 @@ export const iRendererStore = types
|
|||
self.dialogData = data;
|
||||
}
|
||||
self.dialogOpen = true;
|
||||
|
||||
if (callback) {
|
||||
dialogCallbacks.set(self.dialogData, callback);
|
||||
}
|
||||
callback && dialogCallbacks.set(self.dialogData, callback);
|
||||
},
|
||||
|
||||
closeDialog(result?: any) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import find = require('lodash/find');
|
||||
import findIndex = require('lodash/findIndex');
|
||||
|
||||
export class SimpleMap<V = any, K = any> {
|
||||
private readonly list: Array<{
|
||||
key: K;
|
||||
value: V;
|
||||
}> = [];
|
||||
|
||||
set(key: K, value: V) {
|
||||
this.list.push({
|
||||
key,
|
||||
value
|
||||
});
|
||||
}
|
||||
|
||||
get(key: K) {
|
||||
const resolved = find(this.list, item => item.key === key);
|
||||
return resolved ? resolved.value : null;
|
||||
}
|
||||
|
||||
delete(key: K) {
|
||||
const idx = findIndex(this.list, item => item.key === key);
|
||||
~idx && this.list.splice(idx, 1);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.list.splice(0, this.list.length);
|
||||
}
|
||||
}
|
||||
|
|
@ -20,13 +20,13 @@ interface ApiCacheConfig extends ApiObject {
|
|||
|
||||
const apiCaches: Array<ApiCacheConfig> = [];
|
||||
|
||||
export function normalizeApi(api: Api): ApiObject {
|
||||
export function normalizeApi(api: Api, defaultMethod?: string): ApiObject {
|
||||
if (typeof api === 'string') {
|
||||
let method = rSchema.test(api) ? RegExp.$1 : '';
|
||||
method && (api = api.replace(method + ':', ''));
|
||||
|
||||
api = {
|
||||
method: method as any,
|
||||
method: (method || defaultMethod) as any,
|
||||
url: api
|
||||
};
|
||||
} else {
|
||||
|
|
@ -46,7 +46,7 @@ export function buildApi(
|
|||
[propName: string]: any;
|
||||
} = {}
|
||||
): ApiObject {
|
||||
api = normalizeApi(api);
|
||||
api = normalizeApi(api, options.method);
|
||||
const {autoAppend, ignoreData, ...rest} = options;
|
||||
|
||||
api.config = {
|
||||
|
|
|
|||
|
|
@ -132,6 +132,12 @@ export function calculatePosition(
|
|||
: getPosition(target, container);
|
||||
const {height: overlayHeight, width: overlayWidth} = getOffset(overlayNode);
|
||||
|
||||
// auto 尝试四个方向对齐。
|
||||
placement =
|
||||
placement === 'auto'
|
||||
? 'left-bottom-left-top right-bottom-right-top left-top-left-bottom right-top-right-bottom left-bottom-left-top'
|
||||
: placement;
|
||||
|
||||
let positionLeft = 0,
|
||||
positionTop = 0,
|
||||
arrowOffsetLeft: any = '',
|
||||
|
|
|
|||
|
|
@ -373,6 +373,19 @@ export function isDisabled(
|
|||
);
|
||||
}
|
||||
|
||||
export function hasAbility(
|
||||
schema: any,
|
||||
ability: string,
|
||||
data?: object,
|
||||
defaultValue: boolean = true
|
||||
): boolean {
|
||||
return schema.hasOwnProperty(ability)
|
||||
? schema[ability]
|
||||
: schema.hasOwnProperty(`${ability}On`)
|
||||
? evalExpression(schema[`${ability}On`], data || schema)
|
||||
: defaultValue;
|
||||
}
|
||||
|
||||
export function makeHorizontalDeeper(
|
||||
horizontal: {
|
||||
left: string;
|
||||
|
|
@ -691,6 +704,11 @@ export function mapTree<T extends TreeItem>(
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 遍历树
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function eachTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number) => any,
|
||||
|
|
@ -705,15 +723,19 @@ export function eachTree<T extends TreeItem>(
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 在树中查找节点。
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function findTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number) => any,
|
||||
level: number = 1
|
||||
iterator: (item: T, key: number, level: number, paths: Array<T>) => any
|
||||
): T | null {
|
||||
let result: T | null = null;
|
||||
|
||||
everyTree(tree, (item, key, level) => {
|
||||
if (iterator(item, key, level)) {
|
||||
everyTree(tree, (item, key, level, paths) => {
|
||||
if (iterator(item, key, level, paths)) {
|
||||
result = item;
|
||||
return false;
|
||||
}
|
||||
|
|
@ -723,6 +745,64 @@ export function findTree<T extends TreeItem>(
|
|||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在树中查找节点, 返回下标数组。
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function findTreeIndex<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number, paths: Array<T>) => any
|
||||
): Array<number> | undefined {
|
||||
let idx: Array<number> = [];
|
||||
|
||||
findTree(tree, (item, index, level, paths) => {
|
||||
if (iterator(item, index, level, paths)) {
|
||||
idx = [index];
|
||||
|
||||
paths = paths.concat();
|
||||
paths.unshift({
|
||||
children: tree
|
||||
} as any);
|
||||
|
||||
for (let i = paths.length - 1; i > 0; i--) {
|
||||
const prev = paths[i - 1];
|
||||
const current = paths[i];
|
||||
idx.unshift(prev.children!.indexOf(current));
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return idx.length ? idx : undefined;
|
||||
}
|
||||
|
||||
export function getTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
idx: Array<number> | number
|
||||
): T | undefined | null {
|
||||
const indexes = Array.isArray(idx) ? idx : [idx];
|
||||
const lastIndex = indexes.pop()!;
|
||||
let list: Array<T> | null = tree;
|
||||
for (let i = 0, len = indexes.length; i < len; i++) {
|
||||
const index = indexes[i];
|
||||
if (!list![index]) {
|
||||
list = null;
|
||||
break;
|
||||
}
|
||||
list = list![index].children as any;
|
||||
}
|
||||
return list ? list[lastIndex] : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤树节点
|
||||
*
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function filterTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number) => boolean,
|
||||
|
|
@ -741,44 +821,111 @@ export function filterTree<T extends TreeItem>(
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断树中每个节点是否满足某个条件。
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function everyTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number) => boolean,
|
||||
level: number = 1
|
||||
iterator: (item: T, key: number, level: number, paths: Array<T>) => boolean,
|
||||
level: number = 1,
|
||||
paths: Array<T> = []
|
||||
): boolean {
|
||||
return tree.every((item, index) => {
|
||||
const value: any = iterator(item, index, level);
|
||||
const value: any = iterator(item, index, level, paths);
|
||||
|
||||
if (value && item.children && item.children.splice) {
|
||||
return everyTree(item.children, iterator, level + 1);
|
||||
return everyTree(item.children, iterator, level + 1, paths.concat(item));
|
||||
}
|
||||
|
||||
return value;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断树中是否有某些节点满足某个条件。
|
||||
* @param tree
|
||||
* @param iterator
|
||||
*/
|
||||
export function someTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
iterator: (item: T, key: number, level: number) => boolean,
|
||||
level: number = 1
|
||||
iterator: (item: T, key: number, level: number, paths: Array<T>) => boolean
|
||||
): boolean {
|
||||
return tree.some((item, index) => {
|
||||
const value: any = iterator(item, index, level);
|
||||
|
||||
if (!value && item.children && item.children.splice) {
|
||||
return someTree(item.children, iterator, level + 1);
|
||||
}
|
||||
|
||||
return value;
|
||||
});
|
||||
return !everyTree(tree, iterator);
|
||||
}
|
||||
|
||||
export function flattenTree<T extends TreeItem>(tree: Array<T>): Array<T> {
|
||||
let flattened: Array<T> = [];
|
||||
eachTree(tree, item => flattened.push(item));
|
||||
/**
|
||||
* 将树打平变成一维数组，可以传入第二个参数实现打平节点中的其他属性。
|
||||
*
|
||||
* 比如：
|
||||
*
|
||||
* flattenTree([
|
||||
* {
|
||||
* id: 1,
|
||||
* children: [
|
||||
* { id: 2 },
|
||||
* { id: 3 },
|
||||
* ]
|
||||
* }
|
||||
* ], item => item.id); // 输出位 [1, 2, 3]
|
||||
*
|
||||
* @param tree
|
||||
* @param mapper
|
||||
*/
|
||||
export function flattenTree<T extends TreeItem>(tree: Array<T>): Array<T>;
|
||||
export function flattenTree<T extends TreeItem, U>(
|
||||
tree: Array<T>,
|
||||
mapper: (value: T, index: number) => U
|
||||
): Array<U>;
|
||||
export function flattenTree<T extends TreeItem, U>(
|
||||
tree: Array<T>,
|
||||
mapper?: (value: T, index: number) => U
|
||||
): Array<U> {
|
||||
let flattened: Array<any> = [];
|
||||
eachTree(tree, (item, index) =>
|
||||
flattened.push(mapper ? mapper(item, index) : item)
|
||||
);
|
||||
return flattened;
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作树，遵循 imutable, 每次返回一个新的树。
|
||||
* 类似数组的 splice 不同的地方这个方法不修改原始数据，
|
||||
* 同时第二个参数不是下标，而是下标数组，分别代表每一层的下标。
|
||||
*
|
||||
* 至于如何获取下标数组，请查看 findTreeIndex
|
||||
*
|
||||
* @param tree
|
||||
* @param idx
|
||||
* @param deleteCount
|
||||
* @param ...items
|
||||
*/
|
||||
export function spliceTree<T extends TreeItem>(
|
||||
tree: Array<T>,
|
||||
idx: Array<number> | number,
|
||||
deleteCount: number = 0,
|
||||
...items: Array<T>
|
||||
): Array<T> {
|
||||
const list = tree.concat();
|
||||
if (typeof idx === 'number') {
|
||||
list.splice(idx, deleteCount, ...items);
|
||||
} else if (Array.isArray(idx) && idx.length) {
|
||||
const lastIdx = idx.pop()!;
|
||||
let host = idx.reduce((list: Array<T>, idx) => {
|
||||
const child = {
|
||||
...list[idx],
|
||||
children: list[idx].children ? list[idx].children!.concat() : []
|
||||
};
|
||||
list[idx] = child;
|
||||
return child.children;
|
||||
}, list);
|
||||
host.splice(lastIdx, deleteCount, ...items);
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
export function ucFirst(str?: string) {
|
||||
return str ? str.substring(0, 1).toUpperCase() + str.substring(1) : '';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue