移除所有对 fontawesome 的依赖
This commit is contained in:
2betop
parent
24d2a5c56a
commit
32fd84be58
|
|
@ -752,33 +752,35 @@ export class App extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
<div className={`${theme.ns}Layout-headerBar`}>
|
<div className={`${theme.ns}Layout-headerBar`}>
|
||||||
<div className="nav navbar-nav hidden-xs">
|
<div className="nav navbar-nav hidden-xs">
|
||||||
<Button
|
<div id="headerLeftBtns" className="m-t-sm">
|
||||||
theme={this.state.theme.value}
|
<Button
|
||||||
level="link"
|
theme={this.state.theme.value}
|
||||||
className="no-shadow navbar-btn"
|
level="link"
|
||||||
onClick={this.toggleAside}
|
className="no-shadow navbar-btn"
|
||||||
tooltip="展开或收起侧边栏"
|
onClick={this.toggleAside}
|
||||||
placement="bottom"
|
tooltip="展开或收起侧边栏"
|
||||||
iconOnly
|
placement="bottom"
|
||||||
>
|
iconOnly
|
||||||
<i
|
>
|
||||||
className={
|
<i
|
||||||
this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'
|
className={
|
||||||
}
|
this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'
|
||||||
/>
|
}
|
||||||
</Button>
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
theme={this.state.theme.value}
|
theme={this.state.theme.value}
|
||||||
level="link"
|
level="link"
|
||||||
className="no-shadow navbar-btn"
|
className="no-shadow navbar-btn"
|
||||||
href="https://github.com/baidu/amis"
|
href="https://github.com/baidu/amis"
|
||||||
tooltip="前往 Github 仓库地址"
|
tooltip="前往 Github 仓库地址"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
iconOnly
|
iconOnly
|
||||||
>
|
>
|
||||||
<i className={'fa fa-github'} />
|
<i className={'fa fa-github'} />
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden-xs p-t-sm pull-right m-l-sm">
|
<div className="hidden-xs p-t-sm pull-right m-l-sm">
|
||||||
|
|
|
||||||
|
|
@ -192,7 +192,9 @@ export default function (schema) {
|
||||||
) : null}
|
) : null}
|
||||||
{this.renderSchema()}
|
{this.renderSchema()}
|
||||||
{showCode !== false ? (
|
{showCode !== false ? (
|
||||||
<Portal container={() => document.querySelector('.navbar-nav')}>
|
<Portal
|
||||||
|
container={() => document.querySelector('#headerLeftBtns')}
|
||||||
|
>
|
||||||
<Button
|
<Button
|
||||||
classPrefix={ns}
|
classPrefix={ns}
|
||||||
onClick={this.toggleCode}
|
onClick={this.toggleCode}
|
||||||
|
|
@ -205,7 +207,9 @@ export default function (schema) {
|
||||||
>
|
>
|
||||||
<i className="fa fa-code" />
|
<i className="fa fa-code" />
|
||||||
</Button>
|
</Button>
|
||||||
<span>←点击这里查看源码</span>
|
<span className="inline v-middle text-info">
|
||||||
|
←点击这里查看源码
|
||||||
|
</span>
|
||||||
</Portal>
|
</Portal>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -308,11 +308,12 @@ $Toast-borderRadius: $borderRadiusLg !default;
|
||||||
$Toast-paddingY: $gap-base !default;
|
$Toast-paddingY: $gap-base !default;
|
||||||
$Toast-paddingX: $gap-base !default;
|
$Toast-paddingX: $gap-base !default;
|
||||||
$Toast-paddingL: px2rem(40px) !default;
|
$Toast-paddingL: px2rem(40px) !default;
|
||||||
$Toast--info-paddingL: $Toast-paddingL !default;
|
|
||||||
$Toast-border-width: 0 !default;
|
$Toast-border-width: 0 !default;
|
||||||
$Toast-icon-fontSize: px2rem(30px) !default;
|
|
||||||
$Toast-opacity: 0.8 !default;
|
$Toast-opacity: 0.8 !default;
|
||||||
$Toast-display: block !default;
|
$Toast-title-display: block !default;
|
||||||
|
$Toast-icon-fillHeight: true !default;
|
||||||
|
$Toast-icon-width: px2rem(30px) !default;
|
||||||
|
$Toast-icon-height: $Toast-icon-width !default;
|
||||||
|
|
||||||
$Toast-color: $white !default;
|
$Toast-color: $white !default;
|
||||||
|
|
||||||
|
|
@ -332,12 +333,8 @@ $Toast--warning-color: $Toast-color !default;
|
||||||
$Toast--warning-bgColor: $warning !default;
|
$Toast--warning-bgColor: $warning !default;
|
||||||
$Toast--warning-borderColor: $warning !default;
|
$Toast--warning-borderColor: $warning !default;
|
||||||
|
|
||||||
$Toast-iconVendor: 'FontAwesome' !default;
|
$Toast-close-color: $white !default;
|
||||||
|
$Toast-close--onHover-color: $Toast-close-color !default;
|
||||||
$Toast--error-icon: '\f06a' !default;
|
|
||||||
$Toast--warning-icon: '\f071' !default;
|
|
||||||
$Toast--info-icon: '\f05a' !default;
|
|
||||||
$Toast--success-icon: '\f00c' !default;
|
|
||||||
|
|
||||||
// alert
|
// alert
|
||||||
$Alert-fontSize: $fontSizeBase !default;
|
$Alert-fontSize: $fontSizeBase !default;
|
||||||
|
|
@ -494,20 +491,11 @@ $Table-heading-bg: $white !default;
|
||||||
$Table--unsaved-heading-bg: #e8f0fe !default;
|
$Table--unsaved-heading-bg: #e8f0fe !default;
|
||||||
$Table--unsaved-heading-color: #4285f4 !default;
|
$Table--unsaved-heading-color: #4285f4 !default;
|
||||||
|
|
||||||
$Table-expandBtn-vendor: 'FontAwesome' !default;
|
|
||||||
$Table-expandBtn-fontSize: px2rem(20px) !default;
|
|
||||||
$Table-expandBtn-color: $info !default;
|
$Table-expandBtn-color: $info !default;
|
||||||
$Table-expandBtn-icon: '\f105' !default;
|
|
||||||
|
|
||||||
$TableCell-sortBtn-width: px2rem(8px) !default;
|
$TableCell-sortBtn-width: px2rem(8px) !default;
|
||||||
$TableCell-sortBtn--down-iconVendor: 'fontAwesome' !default;
|
$TableCell-sortBtn--default-opacity: 0 !default;
|
||||||
$TableCell-sortBtn--down-icon: '\f0dd' !default;
|
$TableCell-sortBtn--default-onActive-opacity: 1 !default;
|
||||||
$TableCell-sortBtn--up-iconVendor: 'fontAwesome' !default;
|
|
||||||
$TableCell-sortBtn--up-icon: '\f0de' !default;
|
|
||||||
$TableCell-sortBtn--default-iconVendor: 'fontAwesome' !default;
|
|
||||||
$TableCell-sortBtn--default-icon: '\f0dc' !default;
|
|
||||||
$TableCell-sortBtn--default-opacity: 0.4 !default;
|
|
||||||
$TableCell-sortBtn--default-onActive-opacity: 0.4 !default;
|
|
||||||
|
|
||||||
// Cards
|
// Cards
|
||||||
$Cards-fixedTop-boxShadow: $boxShadow !default;
|
$Cards-fixedTop-boxShadow: $boxShadow !default;
|
||||||
|
|
@ -1318,7 +1306,7 @@ $Wizard-steps-ulDisplay: block !default;
|
||||||
$Wizard-steps-height: px2rem(40px) !default;
|
$Wizard-steps-height: px2rem(40px) !default;
|
||||||
$Wizard-steps-padding: 0 !default;
|
$Wizard-steps-padding: 0 !default;
|
||||||
$Wizard-steps-liAfterContent: '' !default;
|
$Wizard-steps-liAfterContent: '' !default;
|
||||||
$Wizard-steps-liVender: 'FontAwesome' !default;
|
$Wizard-steps-liVender: '' !default;
|
||||||
$Wizard-steps-liAfterBorder: px2rem(20px) solid transparent !default;
|
$Wizard-steps-liAfterBorder: px2rem(20px) solid transparent !default;
|
||||||
$Wizard-steps-li-onActive-color: $info !default;
|
$Wizard-steps-li-onActive-color: $info !default;
|
||||||
$Wizard-steps-li-onActive-bg: #fff !default;
|
$Wizard-steps-li-onActive-bg: #fff !default;
|
||||||
|
|
@ -1392,16 +1380,7 @@ $Transfer-title-bg: #f6f8f8 !default;
|
||||||
// Tree
|
// Tree
|
||||||
$TreeSelect-popover-bg: #fff !default;
|
$TreeSelect-popover-bg: #fff !default;
|
||||||
$Tree-indent: px2rem(20px) !default;
|
$Tree-indent: px2rem(20px) !default;
|
||||||
$Tree-itemArrowWidth: px2rem(16px) !default;
|
$Tree-itemArrowWidth: px2rem(18px) !default;
|
||||||
$Tree-arrowVendor: 'FontAwesome' !default;
|
|
||||||
$Tree-unfoldedArrowContent: '\f107' !default;
|
|
||||||
$Tree-foldedArrowContent: '\f105' !default;
|
|
||||||
$Tree-rootIconVendor: 'FontAwesome' !default;
|
|
||||||
$Tree-rootIconContent: '\f015' !default;
|
|
||||||
$Tree-leafIconVendor: 'FontAwesome' !default;
|
|
||||||
$Tree-leafIconContent: '\f15b' !default;
|
|
||||||
$Tree-folderIconVendor: 'FontAwesome' !default;
|
|
||||||
$Tree-folderIconContent: '\f07b' !default;
|
|
||||||
$Tree-itemLabel--onChecked-color: $Form-selectValue-color !default;
|
$Tree-itemLabel--onChecked-color: $Form-selectValue-color !default;
|
||||||
$Tree-itemHeight: px2rem(30px) !default;
|
$Tree-itemHeight: px2rem(30px) !default;
|
||||||
$Tree-item-onHover-bg: rgba(0, 126, 255, 0.08) !default;
|
$Tree-item-onHover-bg: rgba(0, 126, 255, 0.08) !default;
|
||||||
|
|
@ -1474,3 +1453,7 @@ $Carousel-imageDescription-bottom: px2rem(25px) !default;
|
||||||
// Picker
|
// Picker
|
||||||
$Picker-iconColor: $icon-color !default;
|
$Picker-iconColor: $icon-color !default;
|
||||||
$Picker-onHover-iconColor: $icon-onHover-color !default;
|
$Picker-onHover-iconColor: $icon-onHover-color !default;
|
||||||
|
|
||||||
|
// Status
|
||||||
|
$Satus-icon-width: px2rem(20px) !default;
|
||||||
|
$Satus-icon-height: $Satus-icon-width !default;
|
||||||
|
|
|
||||||
|
|
@ -351,3 +351,11 @@ svg.icon {
|
||||||
svg.r90 {
|
svg.r90 {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
svg.icon-success {
|
||||||
|
color: $success;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.icon-fail {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
.#{$ns}StatusField {
|
.#{$ns}StatusField {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&-label {
|
&-label {
|
||||||
font-size: $fontSizeSm;
|
font-size: $fontSizeSm;
|
||||||
|
|
@ -8,125 +12,90 @@
|
||||||
|
|
||||||
@keyframes animation-rolling_red {
|
@keyframes animation-rolling_red {
|
||||||
0% {
|
0% {
|
||||||
left: 0;
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
left: px2rem(13px);
|
transform: translateX(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
left: 0;
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes animation-rolling_blue {
|
@keyframes animation-rolling_blue {
|
||||||
0% {
|
0% {
|
||||||
left: $gap-sm + $gap-base;
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
left: px2rem(12px);
|
transform: translateX(-20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
left: $gap-sm + $gap-base;
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.#{$ns}Status-icon {
|
svg.#{$ns}Status-icon {
|
||||||
width: 16px;
|
width: $Satus-icon-width;
|
||||||
height: 16px;
|
height: $Satus-icon-height;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon {
|
.#{$ns}Status-icon {
|
||||||
&--danger,
|
&.rolling {
|
||||||
&--primary,
|
width: 30px;
|
||||||
&--rolling,
|
height: 10px;
|
||||||
&--success,
|
display: inline-block;
|
||||||
&--warning {
|
vertical-align: middle;
|
||||||
&::before {
|
|
||||||
font-family: 'iconfont';
|
|
||||||
content: '\e632';
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--rolling {
|
|
||||||
color: $warning;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: $gap-md;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
font-size: inherit;
|
content: '';
|
||||||
color: $danger;
|
display: inline-block;
|
||||||
|
border: 5px solid $danger;
|
||||||
|
border-radius: 500px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: px2rem(1px);
|
|
||||||
margin-left: px2rem(-27px);
|
|
||||||
animation: animation-rolling_red 2s;
|
animation: animation-rolling_red 2s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
font-family: 'iconfont';
|
content: '';
|
||||||
content: '\e632';
|
display: inline-block;
|
||||||
font-style: normal;
|
border: 5px solid $primary;
|
||||||
font-size: inherit;
|
border-radius: 500px;
|
||||||
color: $primary;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: $gap-sm + $gap-base;
|
top: 0;
|
||||||
top: px2rem(1px);
|
left: 20px;
|
||||||
margin-left: px2rem(-39px);
|
|
||||||
animation: animation-rolling_blue 2s;
|
animation: animation-rolling_blue 2s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--success {
|
&.icon-warning {
|
||||||
&::before {
|
color: $warning;
|
||||||
color: $success;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--danger {
|
|
||||||
&::before {
|
|
||||||
color: $danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
&::before {
|
|
||||||
color: $warning;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--primary {
|
|
||||||
&::before {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon--rolling + &-label {
|
.#{$ns}Status-icon.rolling + &-label {
|
||||||
color: $warning;
|
color: $warning;
|
||||||
position: relative;
|
|
||||||
left: $gap-md;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon--success + &-label {
|
.#{$ns}Status-icon.icon-success + &-label {
|
||||||
color: $success;
|
color: $success;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon--danger + &-label {
|
.#{$ns}Status-icon.icon-fail + &-label {
|
||||||
color: $danger;
|
color: $danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon--warning + &-label {
|
.#{$ns}Status-icon.icon-warning + &-label {
|
||||||
color: $warning;
|
color: $warning;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}Status-icon--primary + &-label {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -478,32 +478,32 @@
|
||||||
&Cell-sortBtn {
|
&Cell-sortBtn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: $TableCell-sortBtn-width;
|
width: $TableCell-sortBtn-width;
|
||||||
|
height: px2rem(20px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: $TableCell-paddingX - $TableCell-sortBtn-width / 2;
|
right: $TableCell-paddingX - $TableCell-sortBtn-width / 2;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: $Table-thead-iconColor;
|
color: $icon-color;
|
||||||
|
|
||||||
&--up:before {
|
&:hover {
|
||||||
display: inline-block;
|
color: $icon-onHover-color;
|
||||||
content: $TableCell-sortBtn--up-icon;
|
|
||||||
font-family: $TableCell-sortBtn--up-iconVendor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--down:before {
|
&--up > svg,
|
||||||
display: inline-block;
|
&--down > svg,
|
||||||
content: $TableCell-sortBtn--down-icon;
|
&--default > svg {
|
||||||
font-family: $TableCell-sortBtn--down-iconVendor;
|
color: inherit;
|
||||||
}
|
width: 12x;
|
||||||
|
height: 12px;
|
||||||
&--default:before {
|
|
||||||
display: inline-block;
|
|
||||||
content: $TableCell-sortBtn--default-icon;
|
|
||||||
font-family: $TableCell-sortBtn--default-iconVendor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--up,
|
&--up,
|
||||||
&--down {
|
&--down,
|
||||||
|
&--default {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
@ -515,13 +515,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&--default {
|
&--default {
|
||||||
font-style: normal;
|
|
||||||
z-index: 1;
|
|
||||||
display: inline-block;
|
|
||||||
opacity: $TableCell-sortBtn--default-opacity;
|
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
opacity: $TableCell-sortBtn--default-onActive-opacity;
|
color: $text--muted-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,8 +63,16 @@
|
||||||
width: $Toast-width;
|
width: $Toast-width;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
margin-bottom: $gap-xs;
|
margin-bottom: $gap-xs;
|
||||||
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
|
|
||||||
($Toast-paddingX + $Toast-paddingL);
|
@if $Toast-icon-fillHeight {
|
||||||
|
padding: $Toast-paddingY
|
||||||
|
$Toast-paddingX
|
||||||
|
$Toast-paddingY
|
||||||
|
($Toast-paddingX + $Toast-paddingL);
|
||||||
|
} @else {
|
||||||
|
padding: $Toast-paddingY $Toast-paddingX;
|
||||||
|
}
|
||||||
|
|
||||||
box-shadow: $Toast-box-shadow;
|
box-shadow: $Toast-box-shadow;
|
||||||
border-radius: $Toast-borderRadius;
|
border-radius: $Toast-borderRadius;
|
||||||
border: $Toast-border-width solid;
|
border: $Toast-border-width solid;
|
||||||
|
|
@ -94,35 +102,52 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $gap-xs;
|
top: $gap-xs;
|
||||||
right: $gap-sm;
|
right: $gap-sm;
|
||||||
color: $white;
|
color: $Toast-close-color;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $white;
|
color: $Toast-close--onHover-color;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
display: $Toast-display;
|
display: $Toast-title-display;
|
||||||
margin-right: $gap-base;
|
margin-right: $gap-base;
|
||||||
font-size: $fontSizeMd;
|
font-size: $fontSizeMd;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-body {
|
&-body {
|
||||||
display: $Toast-display;
|
display: $Toast-title-display;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&-icon {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
font-family: $Toast-iconVendor;
|
|
||||||
font-size: $Toast-icon-fontSize;
|
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
position: absolute;
|
vertical-align: middle;
|
||||||
left: $Toast-paddingX;
|
|
||||||
top: $Toast-paddingY;
|
@if $Toast-icon-fillHeight {
|
||||||
|
position: absolute;
|
||||||
|
left: $Toast-paddingX;
|
||||||
|
top: $Toast-paddingY;
|
||||||
|
width: $Toast-paddingL - $Toast-paddingX;
|
||||||
|
height: $Toast-paddingL - $Toast-paddingX;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
} @else {
|
||||||
|
margin-right: $gap-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
top: 0;
|
||||||
|
width: $Toast-icon-width;
|
||||||
|
height: $Toast-icon-height;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// colors
|
// colors
|
||||||
|
|
@ -130,42 +155,24 @@
|
||||||
color: $Toast--danger-color;
|
color: $Toast--danger-color;
|
||||||
border-color: $Toast--danger-borderColor;
|
border-color: $Toast--danger-borderColor;
|
||||||
background-color: $Toast--danger-bgColor;
|
background-color: $Toast--danger-bgColor;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: $Toast--error-icon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--warning {
|
&--warning {
|
||||||
color: $Toast--warning-color;
|
color: $Toast--warning-color;
|
||||||
border-color: $Toast--warning-borderColor;
|
border-color: $Toast--warning-borderColor;
|
||||||
background-color: $Toast--warning-bgColor;
|
background-color: $Toast--warning-bgColor;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: $Toast--warning-icon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--info {
|
&--info {
|
||||||
color: $Toast--info-color;
|
color: $Toast--info-color;
|
||||||
border-color: $Toast--info-borderColor;
|
border-color: $Toast--info-borderColor;
|
||||||
background-color: $Toast--info-bgColor;
|
background-color: $Toast--info-bgColor;
|
||||||
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
|
|
||||||
($Toast-paddingX + $Toast--info-paddingL);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: $Toast--info-icon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--success {
|
&--success {
|
||||||
color: $Toast--success-color;
|
color: $Toast--success-color;
|
||||||
border-color: $Toast--success-borderColor;
|
border-color: $Toast--success-borderColor;
|
||||||
background-color: $Toast--success-bgColor;
|
background-color: $Toast--success-bgColor;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: $Toast--success-icon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// positions
|
// positions
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
height: $Tree-itemHeight;
|
height: $Tree-itemHeight;
|
||||||
line-height: $Tree-itemHeight;
|
line-height: $Tree-itemHeight;
|
||||||
|
padding-right: px2rem(5px);
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -83,10 +84,10 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
> svg {
|
> svg {
|
||||||
$svgSize: px2rem(16px);
|
$svgSize: px2rem(12px);
|
||||||
width: $svgSize;
|
width: $svgSize;
|
||||||
height: $svgSize;
|
height: $svgSize;
|
||||||
top: 0.125 * $svgSize;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -164,14 +165,21 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&:before {
|
// &:before {
|
||||||
font-style: normal;
|
// font-style: normal;
|
||||||
font-family: $Tree-arrowVendor;
|
// font-family: $Tree-arrowVendor;
|
||||||
content: $Tree-unfoldedArrowContent;
|
// content: $Tree-unfoldedArrowContent;
|
||||||
|
// }
|
||||||
|
> svg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-folded:before {
|
&.is-folded > svg {
|
||||||
content: $Tree-foldedArrowContent;
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,27 +193,12 @@
|
||||||
margin-right: px2rem(3px);
|
margin-right: px2rem(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-rootIcon {
|
&-rootIcon,
|
||||||
&:before {
|
&-folderIcon,
|
||||||
font-style: normal;
|
|
||||||
font-family: $Tree-rootIconVendor;
|
|
||||||
content: $Tree-rootIconContent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-leafIcon {
|
&-leafIcon {
|
||||||
&:before {
|
> svg {
|
||||||
font-style: normal;
|
width: px2rem(14px);
|
||||||
font-family: $Tree-leafIconVendor;
|
height: px2rem(14px);
|
||||||
content: $Tree-leafIconContent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-folderIcon {
|
|
||||||
&:before {
|
|
||||||
font-style: normal;
|
|
||||||
font-family: $Tree-folderIconVendor;
|
|
||||||
content: $Tree-folderIconContent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -220,6 +213,13 @@
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
color: $text--muted-color;
|
color: $text--muted-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .#{$ns}Checkbox {
|
||||||
|
line-height: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-itemText {
|
&-itemText {
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,6 @@ $Layout-asideLink-onHover-iconSize: px2rem(16px);
|
||||||
$Layout-asideLink-onHover-iconColor: #108cee;
|
$Layout-asideLink-onHover-iconColor: #108cee;
|
||||||
$Layout-asideLink-fontSize: px2rem(12px);
|
$Layout-asideLink-fontSize: px2rem(12px);
|
||||||
$Layout-asideLink-arrowFontSize: px2rem(12px);
|
$Layout-asideLink-arrowFontSize: px2rem(12px);
|
||||||
$Layout-asideLink-arrowVendor: 'iconfont';
|
|
||||||
$Layout-asideLink-arrowIcon: '\e63b';
|
|
||||||
$Layout-asideLink-arrowColor: #8d99b0;
|
$Layout-asideLink-arrowColor: #8d99b0;
|
||||||
$Layout-asideLink-onHover-arrowColor: #fff;
|
$Layout-asideLink-onHover-arrowColor: #fff;
|
||||||
$Layout-headerBar-borderBottom: 0 none;
|
$Layout-headerBar-borderBottom: 0 none;
|
||||||
|
|
@ -98,8 +96,6 @@ $Form-select-onHover-bg: $white;
|
||||||
$Form-select-onHover-borderColor: $primary;
|
$Form-select-onHover-borderColor: $primary;
|
||||||
$Form-select-placeholderColor: #999;
|
$Form-select-placeholderColor: #999;
|
||||||
$Form-select-color: #000;
|
$Form-select-color: #000;
|
||||||
$Form-select-caret-vender: 'iconfont';
|
|
||||||
$Form-select-caret-icon: '\e605';
|
|
||||||
$Form-select-caret-iconColor: #999;
|
$Form-select-caret-iconColor: #999;
|
||||||
$Form-select-caret-onHover-iconColor: $primary;
|
$Form-select-caret-onHover-iconColor: $primary;
|
||||||
$Form-select-caret-fontSize: px2rem(12px);
|
$Form-select-caret-fontSize: px2rem(12px);
|
||||||
|
|
@ -177,15 +173,6 @@ $DatePicker-onDisabled-color: #999;
|
||||||
$DatePicker-iconColor: #666;
|
$DatePicker-iconColor: #666;
|
||||||
$DatePicker-onHover-iconColor: $primary;
|
$DatePicker-onHover-iconColor: $primary;
|
||||||
$DatePicker-onHover-borderColor: $primary;
|
$DatePicker-onHover-borderColor: $primary;
|
||||||
$DatePicker-toggler-vendor: 'iconfont';
|
|
||||||
$DatePicker-toggler-fontSize: px2rem(12px);
|
|
||||||
$DatePicker-toggler-icon: '\e7b1';
|
|
||||||
$DatePicker-prevBtn-vendor: 'iconfont';
|
|
||||||
$DatePicker-prevBtn-fontSize: px2rem(14px);
|
|
||||||
$DatePicker-prevBtn-icon: '\e854';
|
|
||||||
$DatePicker-nextBtn-vendor: 'iconfont';
|
|
||||||
$DatePicker-nextBtn-fontSize: px2rem(14px);
|
|
||||||
$DatePicker-nextBtn-icon: '\e63b';
|
|
||||||
|
|
||||||
$Calendar-input-borderRadius: 0;
|
$Calendar-input-borderRadius: 0;
|
||||||
$Calendar-shortcuts-bg: #f5f5f5;
|
$Calendar-shortcuts-bg: #f5f5f5;
|
||||||
|
|
@ -267,14 +254,6 @@ $Table-onChecked-onHover-color: #666;
|
||||||
$TableCell-paddingX: px2rem(10px);
|
$TableCell-paddingX: px2rem(10px);
|
||||||
|
|
||||||
$TableCell-sortBtn-width: px2rem(14px);
|
$TableCell-sortBtn-width: px2rem(14px);
|
||||||
$TableCell-sortBtn--down-iconVendor: 'iconfont';
|
|
||||||
$TableCell-sortBtn--down-icon: '\e712';
|
|
||||||
$TableCell-sortBtn--up-iconVendor: 'iconfont';
|
|
||||||
$TableCell-sortBtn--up-icon: '\e713';
|
|
||||||
$TableCell-sortBtn--default-iconVendor: 'iconfont';
|
|
||||||
$TableCell-sortBtn--default-icon: '\e711';
|
|
||||||
$TableCell-sortBtn--default-opacity: 0;
|
|
||||||
$TableCell-sortBtn--default-onActive-opacity: 1;
|
|
||||||
|
|
||||||
$TableCell-filterPopOver-dropDownItem-height: px2rem(30px);
|
$TableCell-filterPopOver-dropDownItem-height: px2rem(30px);
|
||||||
$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px);
|
$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px);
|
||||||
|
|
@ -371,9 +350,6 @@ $Tabs--card-bg: $Table-thead-bg;
|
||||||
$Tabs--radio-bg: $white;
|
$Tabs--radio-bg: $white;
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
$Pagination-arrowVendor: 'iconfont';
|
|
||||||
$Pagination-prevArrowContent: '\e759';
|
|
||||||
$Pagination-nextArrowContent: '\e757';
|
|
||||||
$Pagination-fontSize: px2rem(12px);
|
$Pagination-fontSize: px2rem(12px);
|
||||||
$Pagination-onActive-backgroundColor: $white;
|
$Pagination-onActive-backgroundColor: $white;
|
||||||
$Pagination-onActive-color: $primary;
|
$Pagination-onActive-color: $primary;
|
||||||
|
|
@ -427,25 +403,19 @@ $Alert--warning-color: #333;
|
||||||
$Alert--warning-bg: $warning-bg;
|
$Alert--warning-bg: $warning-bg;
|
||||||
$Alert--warning-borderColor: transparent;
|
$Alert--warning-borderColor: transparent;
|
||||||
|
|
||||||
// Toast
|
|
||||||
|
|
||||||
$Toast-xs: px2rem(5px);
|
|
||||||
$Toast-sm: px2rem(10px);
|
|
||||||
$Toast-base: px2rem(15px);
|
|
||||||
$Toast-md: px2rem(20px);
|
|
||||||
$Toast-lg: px2rem(30px);
|
|
||||||
|
|
||||||
// Toast size
|
// Toast size
|
||||||
$Toast-width: px2rem(300px);
|
$Toast-width: px2rem(300px);
|
||||||
$Toast-borderRadius: 0;
|
$Toast-borderRadius: 0;
|
||||||
$Toast-paddingY: $Toast-xs;
|
$Toast-paddingY: px2rem(5px);
|
||||||
$Toast-paddingX: $Toast-md;
|
$Toast-paddingX: px2rem(15px);
|
||||||
|
$Toast-icon-fillHeight: false;
|
||||||
$Toast-paddingL: px2rem(26px);
|
$Toast-paddingL: px2rem(26px);
|
||||||
$Toast--info-paddingL: 0;
|
$Toast--info-paddingL: 0;
|
||||||
$Toast-border-width: px2rem(1px);
|
$Toast-border-width: px2rem(1px);
|
||||||
$Toast-icon-fontSize: px2rem(16px);
|
$Toast-icon-width: px2rem(16px);
|
||||||
|
$Toast-icon-height: px2rem(16px);
|
||||||
$Toast-opacity: 1;
|
$Toast-opacity: 1;
|
||||||
$Toast-display: inline-block;
|
$Toast-title-display: inline-block;
|
||||||
|
|
||||||
// Toast color
|
// Toast color
|
||||||
$Toast-color: $white;
|
$Toast-color: $white;
|
||||||
|
|
@ -466,12 +436,8 @@ $Toast--warning-color: $warning;
|
||||||
$Toast--warning-bgColor: $warning-bg;
|
$Toast--warning-bgColor: $warning-bg;
|
||||||
$Toast--warning-borderColor: $warning;
|
$Toast--warning-borderColor: $warning;
|
||||||
|
|
||||||
$Toast-iconVendor: 'iconfont';
|
$Toast-close-color: $icon-color;
|
||||||
|
$Toast-close--onHover-color: $icon-onHover-color;
|
||||||
$Toast--error-icon: '\e6d2';
|
|
||||||
$Toast--warning-icon: '\e6e5';
|
|
||||||
$Toast--info-icon: '';
|
|
||||||
$Toast--success-icon: '\e6e8';
|
|
||||||
|
|
||||||
$TagControl-sugTip-color: $primary;
|
$TagControl-sugTip-color: $primary;
|
||||||
|
|
||||||
|
|
@ -501,6 +467,8 @@ $ListMenu-item--onHover-bg: #eaf6fe;
|
||||||
|
|
||||||
$Transfer-title-bg: $Table-thead-bg;
|
$Transfer-title-bg: $Table-thead-bg;
|
||||||
|
|
||||||
|
$Satus-icon-width: px2rem(14px);
|
||||||
|
|
||||||
@import '../variables';
|
@import '../variables';
|
||||||
@import '../mixins';
|
@import '../mixins';
|
||||||
@import '../base/reset';
|
@import '../base/reset';
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
|
||||||
| 'bottom-left'
|
| 'bottom-left'
|
||||||
| 'bottom-right';
|
| 'bottom-right';
|
||||||
closeButton: boolean;
|
closeButton: boolean;
|
||||||
|
showIcon?: boolean;
|
||||||
timeout: number;
|
timeout: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
@ -80,6 +81,7 @@ export class ToastComponent extends React.Component<
|
||||||
closeButton: false,
|
closeButton: false,
|
||||||
timeout: 5000
|
timeout: 5000
|
||||||
};
|
};
|
||||||
|
static themeKey = 'toast';
|
||||||
|
|
||||||
// 当前ToastComponent是否真正render了
|
// 当前ToastComponent是否真正render了
|
||||||
hasRendered = false;
|
hasRendered = false;
|
||||||
|
|
@ -150,7 +152,9 @@ export class ToastComponent extends React.Component<
|
||||||
className,
|
className,
|
||||||
timeout,
|
timeout,
|
||||||
position,
|
position,
|
||||||
translate
|
showIcon,
|
||||||
|
translate,
|
||||||
|
closeButton
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const items = this.state.items;
|
const items = this.state.items;
|
||||||
|
|
||||||
|
|
@ -171,9 +175,10 @@ export class ToastComponent extends React.Component<
|
||||||
body={item.body}
|
body={item.body}
|
||||||
level={item.level || 'info'}
|
level={item.level || 'info'}
|
||||||
timeout={item.timeout ?? timeout}
|
timeout={item.timeout ?? timeout}
|
||||||
closeButton={item.closeButton}
|
closeButton={item.closeButton ?? closeButton}
|
||||||
onDismiss={this.handleDismissed.bind(this, index)}
|
onDismiss={this.handleDismissed.bind(this, index)}
|
||||||
translate={translate}
|
translate={translate}
|
||||||
|
showIcon={showIcon}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -189,6 +194,7 @@ interface ToastMessageProps {
|
||||||
level: 'info' | 'success' | 'error' | 'warning';
|
level: 'info' | 'success' | 'error' | 'warning';
|
||||||
timeout: number;
|
timeout: number;
|
||||||
closeButton?: boolean;
|
closeButton?: boolean;
|
||||||
|
showIcon?: boolean;
|
||||||
position:
|
position:
|
||||||
| 'top-right'
|
| 'top-right'
|
||||||
| 'top-center'
|
| 'top-center'
|
||||||
|
|
@ -273,6 +279,7 @@ export class ToastMessage extends React.Component<
|
||||||
body,
|
body,
|
||||||
allowHtml,
|
allowHtml,
|
||||||
level,
|
level,
|
||||||
|
showIcon,
|
||||||
translate: __
|
translate: __
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
|
@ -298,6 +305,21 @@ export class ToastMessage extends React.Component<
|
||||||
<Icon icon="close" className="icon" />
|
<Icon icon="close" className="icon" />
|
||||||
</a>
|
</a>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{showIcon === false ? null : (
|
||||||
|
<div className={cx('Toast-icon')}>
|
||||||
|
{level === 'success' ? (
|
||||||
|
<Icon icon="success" className="icon" />
|
||||||
|
) : level == 'error' ? (
|
||||||
|
<Icon icon="fail" className="icon" />
|
||||||
|
) : level == 'info' ? (
|
||||||
|
<Icon icon="info-circle" className="icon" />
|
||||||
|
) : level == 'warning' ? (
|
||||||
|
<Icon icon="warning" className="icon" />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{title ? (
|
{title ? (
|
||||||
<div className={cx('Toast-title')}>{__(title)}</div>
|
<div className={cx('Toast-title')}>{__(title)}</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
||||||
|
|
@ -568,12 +568,14 @@ export class TreeSelector extends React.Component<
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{!isLeaf ? (
|
{!isLeaf ? (
|
||||||
<i
|
<div
|
||||||
onClick={() => this.toggleUnfolded(item)}
|
onClick={() => this.toggleUnfolded(item)}
|
||||||
className={cx('Tree-itemArrow', {
|
className={cx('Tree-itemArrow', {
|
||||||
'is-folded': !unfolded[item[valueField]]
|
'is-folded': !unfolded[item[valueField]]
|
||||||
})}
|
})}
|
||||||
/>
|
>
|
||||||
|
<Icon icon="right-arrow-bold" className="icon" />
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<span className={cx('Tree-itemArrowPlaceholder')} />
|
<span className={cx('Tree-itemArrowPlaceholder')} />
|
||||||
)}
|
)}
|
||||||
|
|
@ -597,7 +599,12 @@ export class TreeSelector extends React.Component<
|
||||||
(childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
|
(childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
|
||||||
}`
|
}`
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
|
<Icon
|
||||||
|
icon={childrenItems ? 'folder' : 'file'}
|
||||||
|
className="icon"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{highlightTxt
|
{highlightTxt
|
||||||
|
|
@ -734,7 +741,9 @@ export class TreeSelector extends React.Component<
|
||||||
onClick={this.clearSelect}
|
onClick={this.clearSelect}
|
||||||
>
|
>
|
||||||
{showIcon ? (
|
{showIcon ? (
|
||||||
<i className={cx('Tree-itemIcon Tree-rootIcon')} />
|
<i className={cx('Tree-itemIcon Tree-rootIcon')}>
|
||||||
|
<Icon icon="home" className="icon" />
|
||||||
|
</i>
|
||||||
) : null}
|
) : null}
|
||||||
{rootLabel}
|
{rootLabel}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,30 @@ import QuestionIcon from '../icons/question.svg';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import WindowRestoreIcon from '../icons/window-restore.svg';
|
import WindowRestoreIcon from '../icons/window-restore.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import InfoCircleIcon from '../icons/info-circle.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import WarningIcon from '../icons/warning.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import ScheduleIcon from '../icons/schedule.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import HomeIcon from '../icons/home.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import FolderIcon from '../icons/folder.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import SortDefaultIcon from '../icons/sort-default.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import SortAscIcon from '../icons/sort-asc.svg';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import SortDescIcon from '../icons/sort-desc.svg';
|
||||||
|
|
||||||
// 兼容原来的用法，后续不直接试用。
|
// 兼容原来的用法，后续不直接试用。
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export const closeIcon = <CloseIcon />;
|
export const closeIcon = <CloseIcon />;
|
||||||
|
|
@ -162,10 +186,12 @@ registerIcon('upload', UploadIcon);
|
||||||
registerIcon('file', FileIcon);
|
registerIcon('file', FileIcon);
|
||||||
registerIcon('success', SuccessIcon);
|
registerIcon('success', SuccessIcon);
|
||||||
registerIcon('fail', FailIcon);
|
registerIcon('fail', FailIcon);
|
||||||
|
registerIcon('warning', WarningIcon);
|
||||||
registerIcon('search', SearchIcon);
|
registerIcon('search', SearchIcon);
|
||||||
registerIcon('back', BackIcon);
|
registerIcon('back', BackIcon);
|
||||||
registerIcon('move', MoveIcon);
|
registerIcon('move', MoveIcon);
|
||||||
registerIcon('info', InfoIcon);
|
registerIcon('info', InfoIcon);
|
||||||
|
registerIcon('info-circle', InfoCircleIcon);
|
||||||
registerIcon('location', LocationIcon);
|
registerIcon('location', LocationIcon);
|
||||||
registerIcon('drag-bar', DragBarIcon);
|
registerIcon('drag-bar', DragBarIcon);
|
||||||
registerIcon('reload', ReloadIcon);
|
registerIcon('reload', ReloadIcon);
|
||||||
|
|
@ -181,9 +207,16 @@ registerIcon('zoom-in', ZoomInIcon);
|
||||||
registerIcon('zoom-out', ZoomOutIcon);
|
registerIcon('zoom-out', ZoomOutIcon);
|
||||||
registerIcon('question', QuestionIcon);
|
registerIcon('question', QuestionIcon);
|
||||||
registerIcon('window-restore', WindowRestoreIcon);
|
registerIcon('window-restore', WindowRestoreIcon);
|
||||||
|
registerIcon('schedule', ScheduleIcon);
|
||||||
|
registerIcon('home', HomeIcon);
|
||||||
|
registerIcon('folder', FolderIcon);
|
||||||
|
registerIcon('sort-default', SortDefaultIcon);
|
||||||
|
registerIcon('sort-asc', SortAscIcon);
|
||||||
|
registerIcon('sort-desc', SortDescIcon);
|
||||||
|
|
||||||
export function Icon({
|
export function Icon({
|
||||||
icon,
|
icon,
|
||||||
|
className,
|
||||||
...rest
|
...rest
|
||||||
}: {
|
}: {
|
||||||
icon: string;
|
icon: string;
|
||||||
|
|
@ -195,7 +228,7 @@ export function Icon({
|
||||||
|
|
||||||
const Component = getIcon(icon);
|
const Component = getIcon(icon);
|
||||||
return Component ? (
|
return Component ? (
|
||||||
<Component {...rest} />
|
<Component {...rest} className={`${className || ''} icon-${icon}`} />
|
||||||
) : (
|
) : (
|
||||||
<span className="text-danger">没有 icon {icon}</span>
|
<span className="text-danger">没有 icon {icon}</span>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="04下拉/24px/默认禁用" transform="translate(-115.000000, -8.000000)">
|
||||||
<g id="04下拉/24px/默认禁用" transform="translate(-115.000000, -8.000000)">
|
<polygon id="Shape" fill="currentColor" fill-rule="nonzero" points="125.472727 8 121 12.8 116.527273 8 115 9.6 121 16 127 9.6">
|
||||||
<polygon id="Shape" fill="currentColor" fill-rule="nonzero" points="125.472727 8 121 12.8 116.527273 8 115 9.6 121 16 127 9.6">
|
</polygon>
|
||||||
</polygon>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 485 B After Width: | Height: | Size: 395 B |
|
|
@ -1,7 +1,8 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 34 34" version="1.1">
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 34 34" version="1.1">
|
<g transform="translate(1.000000, 1.000000)">
|
||||||
<g transform="translate(1.000000, 1.000000)">
|
<circle stroke="currentColor" cx="16" cy="16" r="16" fill="none">
|
||||||
<circle stroke="#EA2E2E" cx="16" cy="16" r="16" fill="none"></circle>
|
</circle>
|
||||||
<polygon fill="#EA2E2E" fill-rule="nonzero" points="24 10.1052632 21.8947368 8 16 14.0350877 10.1052632 8 8 10.1052632 14.0350877 16 8 21.8947368 10.1052632 24 16 17.9649123 21.8947368 24 24 21.8947368 17.9649123 16"></polygon>
|
<polygon fill="currentColor" fill-rule="nonzero" points="24 10.1052632 21.8947368 8 16 14.0350877 10.1052632 8 8 10.1052632 14.0350877 16 8 21.8947368 10.1052632 24 16 17.9649123 21.8947368 24 24 21.8947368 17.9649123 16">
|
||||||
</g>
|
</polygon>
|
||||||
</svg>
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 200 168" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g id="folder-(1)" transform="translate(0.000000, 0.601562)" fill="currentFolder" fill-rule="nonzero">
|
||||||
|
<path d="M166.666667,166.731771 L8.3333334,166.731771 C3.3333334,166.731771 0,163.398437 0,158.398437 L0,8.3984375 C0,3.3984375 3.3333334,0.0651041016 8.3333334,0.0651041016 L66.6666668,0.0651041016 C71.6666668,0.0651041016 75,3.3984375 75,8.3984375 L75,16.7317709 L166.666667,16.7317709 C171.666667,16.7317709 175,20.0651041 175,25.0651041 L175,58.3984377 C175,63.3984377 171.666667,66.7317711 166.666667,66.7317711 C161.666667,66.7317711 158.333333,63.3984377 158.333333,58.3984377 L158.333333,33.3984375 L66.6666666,33.3984375 C61.6666666,33.3984375 58.3333334,30.0651041 58.3333334,25.0651041 L58.3333334,16.7317709 L16.6666666,16.7317709 L16.6666666,150.065104 L166.666667,150.065104 C171.666667,150.065104 175,153.398438 175,158.398438 C175,163.398438 171.666667,166.731771 166.666667,166.731771 Z" id="路径">
|
||||||
|
</path>
|
||||||
|
<path d="M166.666667,166.731771 L8.3333334,166.731771 C5.8333334,166.731771 3.3333334,165.898438 1.6666668,163.398438 C0,160.898438 0,159.231771 0,156.731771 L25,56.7317709 C25.8333334,52.5651041 29.1666666,50.0651041 33.3333334,50.0651041 L191.666667,50.0651041 C194.166667,50.0651041 196.666667,50.8984375 198.333333,53.3984375 C200,55.8984375 200,57.5651041 200,60.0651041 L175,160.065104 C174.166667,164.231771 170.833333,166.731771 166.666667,166.731771 Z M19.1666666,150.065104 L160,150.065104 L180.833333,66.7317707 L40,66.7317707 L19.1666666,150.065104 Z" id="形状">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 200 189" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g transform="translate(0.000000, -0.195312)" fill="currentColor" fill-rule="nonzero">
|
||||||
|
<path d="M195.85125,93.1203125 L110.60125,7.9453125 L104.91375,2.1953125 C102.202931,-0.499697856 97.8245686,-0.499697856 95.11375,2.1953125 L4.15125,93.1203125 C1.45507434,95.8051128 -0.0415864607,99.4656205 0.000355140024,103.270313 C0.158203791,111.052241 6.53032046,117.268533 14.31375,117.232812 L23.68875,117.232812 L23.68875,189.082812 L176.31375,189.082812 L176.31375,117.232812 L185.88875,117.232812 C189.65125,117.232812 193.20125,115.757812 195.87625,113.095312 C198.55125,110.420312 200.00125,106.870312 200.00125,103.095312 C200.00125,99.3453125 198.52625,95.7953125 195.85125,93.1203125 Z M112.35125,173.207812 L87.65125,173.207812 L87.65125,128.207812 L112.35125,128.207812 L112.35125,173.207812 L112.35125,173.207812 Z M160.42625,101.357812 L160.42625,173.207812 L126.47625,173.207812 L126.47625,122.907812 C126.47625,118.0339 122.525163,114.082812 117.65125,114.082812 L82.35125,114.082812 C77.4773371,114.082812 73.52625,118.0339 73.52625,122.907812 L73.52625,173.207812 L39.57625,173.207812 L39.57625,101.357812 L18.40125,101.357812 L100.02625,19.7953125 L105.11375,24.8953125 L181.61375,101.357812 L160.42625,101.357812 Z" id="形状">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 172 172" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g id="info-circle" transform="translate(0.257812, 0.257812)" fill="currentColor" fill-rule="nonzero">
|
||||||
|
<path d="M114.313616,139.313616 L114.313616,121.456473 C114.313616,120.414807 113.978795,119.559152 113.309152,118.889509 C112.639509,118.219866 111.783854,117.885045 110.742187,117.885045 L100.027902,117.885045 L100.027902,60.7421875 C100.027902,59.7005208 99.6930803,58.8448661 99.0234375,58.1752232 C98.3537947,57.5055804 97.4981399,57.170759 96.4564732,57.170759 L60.7421875,57.170759 C59.7005208,57.170759 58.8448661,57.5055804 58.1752232,58.1752232 C57.5055804,58.8448661 57.170759,59.7005208 57.170759,60.7421875 L57.170759,78.5993303 C57.170759,79.6409969 57.5055804,80.4966517 58.1752232,81.1662945 C58.8448661,81.8359374 59.7005208,82.170759 60.7421875,82.170759 L71.4564732,82.170759 L71.4564732,117.885045 L60.7421875,117.885045 C59.7005208,117.885045 58.8448661,118.219866 58.1752232,118.889509 C57.5055804,119.559152 57.170759,120.414806 57.170759,121.456473 L57.170759,139.313616 C57.170759,140.355282 57.5055804,141.210937 58.1752232,141.88058 C58.8448661,142.550223 59.7005208,142.885044 60.7421875,142.885044 L110.742187,142.885044 C111.783854,142.885044 112.639509,142.550223 113.309152,141.88058 C113.978795,141.210937 114.313616,140.355282 114.313616,139.313616 L114.313616,139.313616 Z M100.027902,39.313616 L100.027902,21.4564732 C100.027902,20.4148066 99.6930803,19.5591518 99.0234375,18.889509 C98.3537947,18.2198661 97.4981399,17.8850447 96.4564732,17.8850447 L75.0279018,17.8850447 C73.9862351,17.8850447 73.1305803,18.2198661 72.4609375,18.889509 C71.7912947,19.5591518 71.4564732,20.4148066 71.4564732,21.4564732 L71.4564732,39.313616 C71.4564732,40.3552827 71.7912947,41.2109374 72.4609375,41.8805803 C73.1305803,42.5502231 73.9862351,42.8850447 75.0279018,42.8850447 L96.4564732,42.8850447 C97.4981399,42.8850447 98.3537947,42.5502231 99.0234375,41.8805803 C99.6930803,41.2109374 100.027902,40.3552827 100.027902,39.313616 Z M171.456473,85.7421875 C171.456473,101.292783 167.624628,115.634301 159.960938,128.766741 C152.297247,141.899182 141.899182,152.297247 128.766741,159.960938 C115.634301,167.624628 101.292783,171.456473 85.7421875,171.456473 C70.1915923,171.456473 55.8500745,167.624628 42.717634,159.960938 C29.5851935,152.297247 19.187128,141.899182 11.5234375,128.766741 C3.85974701,115.634301 0.0279017578,101.292783 0.0279017578,85.7421875 C0.0279017578,70.1915923 3.85974701,55.8500745 11.5234375,42.717634 C19.187128,29.5851935 29.5851935,19.187128 42.717634,11.5234375 C55.8500745,3.85974701 70.1915923,0.0279017578 85.7421875,0.0279017578 C101.292783,0.0279017578 115.634301,3.85974701 128.766741,11.5234375 C141.899182,19.187128 152.297247,29.5851935 159.960938,42.717634 C167.624628,55.8500745 171.456473,70.1915923 171.456473,85.7421875 Z" id="形状">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,6 +1,6 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg viewBox="0 0 99 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg viewBox="0 0 99 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<g id="Right-arrow" transform="translate(-0.132812, 0.304688)" fill="currentColor" fill-rule="nonzero">
|
<g transform="translate(-0.132812, 0.304688)" fill="currentColor" fill-rule="nonzero">
|
||||||
<path d="M95.6353697,79.4031346 C95.3433678,79.1111326 95.037575,78.8417152 94.7219891,78.5906854 L19.819373,3.29993262 C15.6492004,-0.870040234 8.88818437,-0.870040234 4.71821172,3.29993262 C0.548238867,7.47010527 0.548238867,14.2309215 4.71821172,18.4010939 L72.9329621,87.0041811 L3.25320488,156.617783 C-0.916767969,160.787956 -0.916767969,167.548772 3.25320488,171.719144 C7.42317773,175.889117 14.1841937,175.889117 18.3543662,171.719144 L94.7211895,95.4180764 C95.0369754,95.1668467 95.342968,94.8976293 95.6351697,94.6054273 C97.7329475,92.5076496 98.7744412,89.7539166 98.7615739,87.0043809 C98.7746414,84.2544453 97.7331475,81.5009123 95.6353697,79.4031346 Z" id="路径">
|
<path d="M95.6353697,79.4031346 C95.3433678,79.1111326 95.037575,78.8417152 94.7219891,78.5906854 L19.819373,3.29993262 C15.6492004,-0.870040234 8.88818437,-0.870040234 4.71821172,3.29993262 C0.548238867,7.47010527 0.548238867,14.2309215 4.71821172,18.4010939 L72.9329621,87.0041811 L3.25320488,156.617783 C-0.916767969,160.787956 -0.916767969,167.548772 3.25320488,171.719144 C7.42317773,175.889117 14.1841937,175.889117 18.3543662,171.719144 L94.7211895,95.4180764 C95.0369754,95.1668467 95.342968,94.8976293 95.6351697,94.6054273 C97.7329475,92.5076496 98.7744412,89.7539166 98.7615739,87.0043809 C98.7746414,84.2544453 97.7331475,81.5009123 95.6353697,79.4031346 Z" id="路径">
|
||||||
</path>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 971 B After Width: | Height: | Size: 954 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 176 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g id="schedule" transform="translate(0.500000, 0.304688)" fill="currentColor" fill-rule="nonzero">
|
||||||
|
<path d="M87.4999,0.154665039 C39.4624693,0.154665039 0.159116992,39.4580174 0.159116992,87.495448 C0.159116992,135.532879 39.4624693,174.836231 87.4999,174.836231 C135.537331,174.836231 174.840683,135.532879 174.840683,87.495448 C174.840683,39.4580174 135.537131,0.154665039 87.4999,0.154665039 Z M87.4999,157.368074 C49.075152,157.368074 17.6272736,125.92879 17.6272736,87.495448 C17.6272736,49.0621059 49.075152,17.6228217 87.4999,17.6228217 C125.924648,17.6228217 157.372526,49.0621059 157.372526,87.495448 C157.372526,125.92879 125.924648,157.368074 87.4999,157.368074 Z" id="形状">
|
||||||
|
</path>
|
||||||
|
<polygon id="路径" points="91.8667393 43.8250564 78.7656219 43.8250564 78.7656219 96.2295262 124.184628 124.180176 131.170092 112.827673 91.8667393 89.2438625">
|
||||||
|
</polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 7 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<polygon points="3.5 0 2.8 0.703 0 3.514 0.7 4.217 3.005 1.903 3.005 10 3.995 10 3.995 1.903 6.3 4.217 7 3.514 4.2 0.703">
|
||||||
|
</polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 332 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<polygon points="3.5354 0.0004 2.8284 0.7064 0.0004 3.5344 0.7074 4.2424 3.0354 1.9134 3.0354 5.0354 4.0354 5.0354 4.0354 1.9134 6.3634 4.2424 7.0704 3.5344 4.2424 0.7064">
|
||||||
|
</polygon>
|
||||||
|
<polygon points="3.035 7.0348 3.035 10.1558 0.708 7.8278 0 8.5348 2.828 11.3628 3.535 12.0708 4.243 11.3628 7.071 8.5348 6.363 7.8278 4.036 10.1558 4.036 7.0348">
|
||||||
|
</polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 560 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 7 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g id="07icon/表头/排序下" fill="currentColor">
|
||||||
|
<polygon id="07icon/排序/正序" transform="translate(3.500000, 5.000000) scale(1, -1) translate(-3.500000, -5.000000) " points="3.5 0 2.8 0.703 0 3.514 0.7 4.217 3.005 1.903 3.005 10 3.995 10 3.995 1.903 6.3 4.217 7 3.514 4.2 0.703">
|
||||||
|
</polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 475 B |
|
|
@ -1,9 +1,10 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1">
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1">
|
<g id="Group-5">
|
||||||
<g id="Group-5">
|
<circle stroke="currentColor" fill="none" cx="16" cy="16" r="15.5">
|
||||||
<circle stroke="#5FB333" fill="#FFFFFF" cx="16" cy="16" r="15.5"></circle>
|
</circle>
|
||||||
<g transform="translate(5.647059, 7.529412)" fill="#5FB333" fill-rule="nonzero">
|
<g transform="translate(5.647059, 7.529412)" fill="currentColor" fill-rule="nonzero">
|
||||||
<polygon id="Shape" points="21.1764706 2.76408669 18.7058824 0.26749226 7.41176471 11.6804954 2.47058824 6.50897833 0 9.18390093 4.94117647 14.1770898 4.94117647 14.1770898 7.41176471 16.6736842 9.88235294 14.1770898 9.88235294 14.1770898"></polygon>
|
<polygon id="Shape" points="21.1764706 2.76408669 18.7058824 0.26749226 7.41176471 11.6804954 2.47058824 6.50897833 0 9.18390093 4.94117647 14.1770898 4.94117647 14.1770898 7.41176471 16.6736842 9.88235294 14.1770898 9.88235294 14.1770898">
|
||||||
</g>
|
</polygon>
|
||||||
</g>
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 608 B After Width: | Height: | Size: 584 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg viewBox="0 0 150 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g id="warning" transform="translate(0.390625, 0.882812)" fill="currentColor" fill-rule="nonzero">
|
||||||
|
<path d="M80.6802084,1.5963541 C82.7195697,2.72968791 84.4010413,4.41115959 85.534375,6.4505209 L147.626042,118.213021 C149.777654,122.085674 149.718692,126.807897 147.471057,130.62562 C145.223423,134.443344 141.122931,136.78617 136.692708,136.783856 L12.5260416,136.783856 C8.09656245,136.783856 3.99742458,134.441281 1.75080345,130.623824 C-0.495817677,126.806367 -0.554375449,122.085024 1.596875,118.213021 L63.684375,6.4505209 C67.0377886,0.417546946 74.64639,-1.7555398 80.6802084,1.5963541 Z M74.609375,12.5213541 L12.521875,124.283854 L136.692708,124.283854 L74.609375,12.5213541 Z M80.859375,99.2838541 L80.859375,111.783854 L68.359375,111.783854 L68.359375,99.2838541 L80.859375,99.2838541 Z M80.859375,45.2921875 L80.859375,90.9505209 L68.359375,90.9505209 L68.359375,45.2921875 L80.859375,45.2921875 Z" id="形状">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -17,11 +17,19 @@ export class StatusField extends React.Component<StatusProps, object> {
|
||||||
placeholder: '-',
|
placeholder: '-',
|
||||||
map: {
|
map: {
|
||||||
0: 'svg-success',
|
0: 'svg-success',
|
||||||
1: 'svg-fail'
|
1: 'svg-fail',
|
||||||
|
success: 'svg-success',
|
||||||
|
pending: 'rolling',
|
||||||
|
fail: 'svg-fail',
|
||||||
|
queue: 'svg-warning',
|
||||||
|
schedule: 'svg-schedule'
|
||||||
},
|
},
|
||||||
labelMap: {
|
labelMap: {
|
||||||
// 0: '失败',
|
success: '成功',
|
||||||
// 1: '成功'
|
pending: '运行中',
|
||||||
|
fail: '失败',
|
||||||
|
queue: '排队中',
|
||||||
|
schedule: '调度中'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -48,11 +56,11 @@ export class StatusField extends React.Component<StatusProps, object> {
|
||||||
}
|
}
|
||||||
|
|
||||||
wrapClassName = `StatusField--${value}`;
|
wrapClassName = `StatusField--${value}`;
|
||||||
let itemClassName = map[value];
|
let itemClassName = map[value] || '';
|
||||||
let svgIcon: string = '';
|
let svgIcon: string = '';
|
||||||
|
|
||||||
itemClassName = itemClassName.replace(
|
itemClassName = itemClassName.replace(
|
||||||
/\bsvg-(.*)\b/,
|
/\bsvg-([^\s|$]+)\b/g,
|
||||||
(_: string, icon: string) => {
|
(_: string, icon: string) => {
|
||||||
svgIcon = icon;
|
svgIcon = icon;
|
||||||
return 'icon';
|
return 'icon';
|
||||||
|
|
@ -63,8 +71,10 @@ export class StatusField extends React.Component<StatusProps, object> {
|
||||||
viewValue = (
|
viewValue = (
|
||||||
<Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
|
<Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
|
||||||
);
|
);
|
||||||
} else {
|
} else if (itemClassName) {
|
||||||
viewValue = <i className={cx('Status-icon', map[value])} key="icon" />;
|
viewValue = (
|
||||||
|
<i className={cx('Status-icon', itemClassName)} key="icon" />
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (labelMap && labelMap[value]) {
|
if (labelMap && labelMap[value]) {
|
||||||
|
|
|
||||||
|
|
@ -1127,7 +1127,9 @@ export default class Table extends React.Component<TableProps, object> {
|
||||||
? 'is-active'
|
? 'is-active'
|
||||||
: ''
|
: ''
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
|
<Icon icon="sort-desc" className="icon" />
|
||||||
|
</i>
|
||||||
<i
|
<i
|
||||||
className={cx(
|
className={cx(
|
||||||
'TableCell-sortBtn--up',
|
'TableCell-sortBtn--up',
|
||||||
|
|
@ -1135,13 +1137,17 @@ export default class Table extends React.Component<TableProps, object> {
|
||||||
? 'is-active'
|
? 'is-active'
|
||||||
: ''
|
: ''
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
|
<Icon icon="sort-asc" className="icon" />
|
||||||
|
</i>
|
||||||
<i
|
<i
|
||||||
className={cx(
|
className={cx(
|
||||||
'TableCell-sortBtn--default',
|
'TableCell-sortBtn--default',
|
||||||
store.orderBy === column.name ? '' : 'is-active'
|
store.orderBy === column.name ? '' : 'is-active'
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
|
<Icon icon="sort-default" className="icon" />
|
||||||
|
</i>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
} else if (column.filterable && column.name) {
|
} else if (column.filterable && column.name) {
|
||||||
|
|
@ -1290,7 +1296,9 @@ export default class Table extends React.Component<TableProps, object> {
|
||||||
...props,
|
...props,
|
||||||
btnDisabled: store.dragging,
|
btnDisabled: store.dragging,
|
||||||
data: item.locals,
|
data: item.locals,
|
||||||
value: column.name ? resolveVariable(column.name, item.data) : undefined,
|
value: column.name
|
||||||
|
? resolveVariable(column.name, item.data)
|
||||||
|
: column.value,
|
||||||
popOverContainer: popOverContainer || this.getPopOverContainer,
|
popOverContainer: popOverContainer || this.getPopOverContainer,
|
||||||
rowSpan: item.rowSpans[column.name as string],
|
rowSpan: item.rowSpans[column.name as string],
|
||||||
quickEditFormRef: this.subFormRef,
|
quickEditFormRef: this.subFormRef,
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ export const Column = types
|
||||||
label: types.optional(types.frozen(), undefined),
|
label: types.optional(types.frozen(), undefined),
|
||||||
type: types.string,
|
type: types.string,
|
||||||
name: types.maybe(types.string),
|
name: types.maybe(types.string),
|
||||||
|
value: types.frozen(),
|
||||||
groupName: '',
|
groupName: '',
|
||||||
toggled: false,
|
toggled: false,
|
||||||
toggable: true,
|
toggable: true,
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,9 @@ interface ThemeConfig {
|
||||||
renderers?: {
|
renderers?: {
|
||||||
[propName: string]: any;
|
[propName: string]: any;
|
||||||
};
|
};
|
||||||
|
components?: {
|
||||||
|
[propName: string]: any;
|
||||||
|
};
|
||||||
|
|
||||||
[propsName: string]: any;
|
[propsName: string]: any;
|
||||||
}
|
}
|
||||||
|
|
@ -66,6 +69,7 @@ export function makeClassnames(ns?: string) {
|
||||||
|
|
||||||
export type ThemeInstance = ThemeConfig & {
|
export type ThemeInstance = ThemeConfig & {
|
||||||
getRendererConfig: (name?: string) => any;
|
getRendererConfig: (name?: string) => any;
|
||||||
|
getComponentConfig: (name?: string) => any;
|
||||||
classnames: ClassNamesFn;
|
classnames: ClassNamesFn;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -104,6 +108,11 @@ export function getTheme(theme: string): ThemeInstance {
|
||||||
config.classnames = config.classnames || makeClassnames(ns);
|
config.classnames = config.classnames || makeClassnames(ns);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!config.getComponentConfig) {
|
||||||
|
config.getComponentConfig = (name?: string) =>
|
||||||
|
config.components && name ? config.components[name] : null;
|
||||||
|
}
|
||||||
|
|
||||||
return config as ThemeInstance;
|
return config as ThemeInstance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,7 +126,9 @@ export const ThemeContext = React.createContext('theme');
|
||||||
export let defaultTheme: string = 'default';
|
export let defaultTheme: string = 'default';
|
||||||
|
|
||||||
export function themeable<
|
export function themeable<
|
||||||
T extends React.ComponentType<React.ComponentProps<T> & ThemeProps>
|
T extends React.ComponentType<React.ComponentProps<T> & ThemeProps> & {
|
||||||
|
themeKey?: string;
|
||||||
|
}
|
||||||
>(ComposedComponent: T) {
|
>(ComposedComponent: T) {
|
||||||
type OuterProps = JSX.LibraryManagedAttributes<
|
type OuterProps = JSX.LibraryManagedAttributes<
|
||||||
T,
|
T,
|
||||||
|
|
@ -152,6 +163,7 @@ export function themeable<
|
||||||
return (
|
return (
|
||||||
<ThemeContext.Provider value={theme}>
|
<ThemeContext.Provider value={theme}>
|
||||||
<ComposedComponent
|
<ComposedComponent
|
||||||
|
{...config.getComponentConfig(ComposedComponent.themeKey)}
|
||||||
{...(this.props as JSX.LibraryManagedAttributes<
|
{...(this.props as JSX.LibraryManagedAttributes<
|
||||||
T,
|
T,
|
||||||
React.ComponentProps<T>
|
React.ComponentProps<T>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,12 @@ import {theme} from '../theme';
|
||||||
theme('cxd', {
|
theme('cxd', {
|
||||||
classPrefix: 'cxd-',
|
classPrefix: 'cxd-',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
toast: {
|
||||||
|
closeButton: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
renderers: {
|
renderers: {
|
||||||
'form': {
|
'form': {
|
||||||
horizontal: {
|
horizontal: {
|
||||||
|
|
@ -36,23 +42,6 @@ theme('cxd', {
|
||||||
'range-control': {
|
'range-control': {
|
||||||
showInput: true,
|
showInput: true,
|
||||||
clearable: true
|
clearable: true
|
||||||
},
|
|
||||||
|
|
||||||
'status': {
|
|
||||||
map: {
|
|
||||||
success: 'Status-icon--success',
|
|
||||||
pending: 'Status-icon--rolling',
|
|
||||||
fail: 'Status-icon--danger',
|
|
||||||
queue: 'Status-icon--warning',
|
|
||||||
schedule: 'Status-icon--primary'
|
|
||||||
},
|
|
||||||
labelMap: {
|
|
||||||
success: '成功',
|
|
||||||
pending: '运行中',
|
|
||||||
fail: '失败',
|
|
||||||
queue: '排队中',
|
|
||||||
schedule: '调度中'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue