diff --git a/examples/components/App.jsx b/examples/components/App.jsx index 9bd0481d..684b2cfa 100644 --- a/examples/components/App.jsx +++ b/examples/components/App.jsx @@ -752,33 +752,35 @@ export class App extends React.PureComponent {
- +
+ - + +
diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index 7a222ab9..a377da4e 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -192,7 +192,9 @@ export default function (schema) { ) : null} {this.renderSchema()} {showCode !== false ? ( - document.querySelector('.navbar-nav')}> + document.querySelector('#headerLeftBtns')} + > - ←点击这里查看源码 + + ←点击这里查看源码 + ) : null}
diff --git a/scss/_variables.scss b/scss/_variables.scss index 52be731e..5c2de942 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -308,11 +308,12 @@ $Toast-borderRadius: $borderRadiusLg !default; $Toast-paddingY: $gap-base !default; $Toast-paddingX: $gap-base !default; $Toast-paddingL: px2rem(40px) !default; -$Toast--info-paddingL: $Toast-paddingL !default; $Toast-border-width: 0 !default; -$Toast-icon-fontSize: px2rem(30px) !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; @@ -332,12 +333,8 @@ $Toast--warning-color: $Toast-color !default; $Toast--warning-bgColor: $warning !default; $Toast--warning-borderColor: $warning !default; -$Toast-iconVendor: 'FontAwesome' !default; - -$Toast--error-icon: '\f06a' !default; -$Toast--warning-icon: '\f071' !default; -$Toast--info-icon: '\f05a' !default; -$Toast--success-icon: '\f00c' !default; +$Toast-close-color: $white !default; +$Toast-close--onHover-color: $Toast-close-color !default; // alert $Alert-fontSize: $fontSizeBase !default; @@ -494,20 +491,11 @@ $Table-heading-bg: $white !default; $Table--unsaved-heading-bg: #e8f0fe !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-icon: '\f105' !default; $TableCell-sortBtn-width: px2rem(8px) !default; -$TableCell-sortBtn--down-iconVendor: 'fontAwesome' !default; -$TableCell-sortBtn--down-icon: '\f0dd' !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; +$TableCell-sortBtn--default-opacity: 0 !default; +$TableCell-sortBtn--default-onActive-opacity: 1 !default; // Cards $Cards-fixedTop-boxShadow: $boxShadow !default; @@ -1318,7 +1306,7 @@ $Wizard-steps-ulDisplay: block !default; $Wizard-steps-height: px2rem(40px) !default; $Wizard-steps-padding: 0 !default; $Wizard-steps-liAfterContent: '' !default; -$Wizard-steps-liVender: 'FontAwesome' !default; +$Wizard-steps-liVender: '' !default; $Wizard-steps-liAfterBorder: px2rem(20px) solid transparent !default; $Wizard-steps-li-onActive-color: $info !default; $Wizard-steps-li-onActive-bg: #fff !default; @@ -1392,16 +1380,7 @@ $Transfer-title-bg: #f6f8f8 !default; // Tree $TreeSelect-popover-bg: #fff !default; $Tree-indent: px2rem(20px) !default; -$Tree-itemArrowWidth: px2rem(16px) !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-itemArrowWidth: px2rem(18px) !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; @@ -1474,3 +1453,7 @@ $Carousel-imageDescription-bottom: px2rem(25px) !default; // Picker $Picker-iconColor: $icon-color !default; $Picker-onHover-iconColor: $icon-onHover-color !default; + +// Status +$Satus-icon-width: px2rem(20px) !default; +$Satus-icon-height: $Satus-icon-width !default; diff --git a/scss/base/_normalize.scss b/scss/base/_normalize.scss index c8b486a7..ee423a61 100644 --- a/scss/base/_normalize.scss +++ b/scss/base/_normalize.scss @@ -351,3 +351,11 @@ svg.icon { svg.r90 { transform: rotate(90deg); } + +svg.icon-success { + color: $success; +} + +svg.icon-fail { + color: $danger; +} diff --git a/scss/components/_status.scss b/scss/components/_status.scss index a6ed929e..ffced458 100644 --- a/scss/components/_status.scss +++ b/scss/components/_status.scss @@ -1,5 +1,9 @@ .#{$ns}StatusField { white-space: nowrap; + display: inline-flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; &-label { font-size: $fontSizeSm; @@ -8,125 +12,90 @@ @keyframes animation-rolling_red { 0% { - left: 0; + transform: translateX(0); } 50% { - left: px2rem(13px); + transform: translateX(20px); } 100% { - left: 0; + transform: translateX(0); } } @keyframes animation-rolling_blue { 0% { - left: $gap-sm + $gap-base; + transform: translateX(0); } 50% { - left: px2rem(12px); + transform: translateX(-20px); } 100% { - left: $gap-sm + $gap-base; + transform: translateX(0); } } svg.#{$ns}Status-icon { - width: 16px; - height: 16px; + width: $Satus-icon-width; + height: $Satus-icon-height; + top: 0; } .#{$ns}Status-icon { - &--danger, - &--primary, - &--rolling, - &--success, - &--warning { - &::before { - font-family: 'iconfont'; - content: '\e632'; - font-style: normal; - } - } - - &--rolling { - color: $warning; + &.rolling { + width: 30px; + height: 10px; + display: inline-block; + vertical-align: middle; position: relative; - left: $gap-md; &::before { - font-size: inherit; - color: $danger; + content: ''; + display: inline-block; + border: 5px solid $danger; + border-radius: 500px; position: absolute; + top: 0; left: 0; - top: px2rem(1px); - margin-left: px2rem(-27px); animation: animation-rolling_red 2s; animation-iteration-count: infinite; } &::after { - font-family: 'iconfont'; - content: '\e632'; - font-style: normal; - font-size: inherit; - color: $primary; + content: ''; + display: inline-block; + border: 5px solid $primary; + border-radius: 500px; position: absolute; - left: $gap-sm + $gap-base; - top: px2rem(1px); - margin-left: px2rem(-39px); + top: 0; + left: 20px; + animation: animation-rolling_blue 2s; animation-iteration-count: infinite; } } - &--success { - &::before { - color: $success; - } - } - - &--danger { - &::before { - color: $danger; - } - } - - &--warning { - &::before { - color: $warning; - } - } - - &--primary { - &::before { - color: $primary; - } + &.icon-warning { + color: $warning; } } - .#{$ns}Status-icon--rolling + &-label { + .#{$ns}Status-icon.rolling + &-label { color: $warning; - position: relative; - left: $gap-md; } - .#{$ns}Status-icon--success + &-label { + .#{$ns}Status-icon.icon-success + &-label { color: $success; } - .#{$ns}Status-icon--danger + &-label { + .#{$ns}Status-icon.icon-fail + &-label { color: $danger; } - .#{$ns}Status-icon--warning + &-label { + .#{$ns}Status-icon.icon-warning + &-label { color: $warning; } - - .#{$ns}Status-icon--primary + &-label { - color: $primary; - } } diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 855b0bb1..842aa984 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -478,32 +478,32 @@ &Cell-sortBtn { cursor: pointer; width: $TableCell-sortBtn-width; + height: px2rem(20px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; position: absolute; right: $TableCell-paddingX - $TableCell-sortBtn-width / 2; top: 50%; transform: translateY(-50%); - color: $Table-thead-iconColor; + color: $icon-color; - &--up:before { - display: inline-block; - content: $TableCell-sortBtn--up-icon; - font-family: $TableCell-sortBtn--up-iconVendor; + &:hover { + color: $icon-onHover-color; } - &--down:before { - display: inline-block; - content: $TableCell-sortBtn--down-icon; - font-family: $TableCell-sortBtn--down-iconVendor; - } - - &--default:before { - display: inline-block; - content: $TableCell-sortBtn--default-icon; - font-family: $TableCell-sortBtn--default-iconVendor; + &--up > svg, + &--down > svg, + &--default > svg { + color: inherit; + width: 12x; + height: 12px; } &--up, - &--down { + &--down, + &--default { display: none; position: absolute; z-index: 2; @@ -515,13 +515,8 @@ } &--default { - font-style: normal; - z-index: 1; - display: inline-block; - opacity: $TableCell-sortBtn--default-opacity; - &.is-active { - opacity: $TableCell-sortBtn--default-onActive-opacity; + color: $text--muted-color; } } } diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss index 37389c7a..7cda6e19 100644 --- a/scss/components/_toast.scss +++ b/scss/components/_toast.scss @@ -63,8 +63,16 @@ width: $Toast-width; pointer-events: auto; 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; border-radius: $Toast-borderRadius; border: $Toast-border-width solid; @@ -94,35 +102,52 @@ position: absolute; top: $gap-xs; right: $gap-sm; - color: $white; + color: $Toast-close-color; line-height: 1; opacity: 0.8; &:hover { - color: $white; + color: $Toast-close--onHover-color; opacity: 1; } } &-title { - display: $Toast-display; + display: $Toast-title-display; margin-right: $gap-base; font-size: $fontSizeMd; + vertical-align: middle; } &-body { - display: $Toast-display; + display: $Toast-title-display; + vertical-align: middle; } - &::before { - display: inline-block; - font-family: $Toast-iconVendor; - font-size: $Toast-icon-fontSize; + &-icon { + display: inline-flex; text-rendering: auto; -webkit-font-smoothing: antialiased; - position: absolute; - left: $Toast-paddingX; - top: $Toast-paddingY; + vertical-align: middle; + + @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 @@ -130,42 +155,24 @@ color: $Toast--danger-color; border-color: $Toast--danger-borderColor; background-color: $Toast--danger-bgColor; - - &::before { - content: $Toast--error-icon; - } } &--warning { color: $Toast--warning-color; border-color: $Toast--warning-borderColor; background-color: $Toast--warning-bgColor; - - &::before { - content: $Toast--warning-icon; - } } &--info { color: $Toast--info-color; border-color: $Toast--info-borderColor; background-color: $Toast--info-bgColor; - padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY - ($Toast-paddingX + $Toast--info-paddingL); - - &::before { - content: $Toast--info-icon; - } } &--success { color: $Toast--success-color; border-color: $Toast--success-borderColor; background-color: $Toast--success-bgColor; - - &::before { - content: $Toast--success-icon; - } } // positions diff --git a/scss/components/form/_tree.scss b/scss/components/form/_tree.scss index 8d0b946a..81a95f13 100644 --- a/scss/components/form/_tree.scss +++ b/scss/components/form/_tree.scss @@ -75,6 +75,7 @@ vertical-align: top; height: $Tree-itemHeight; line-height: $Tree-itemHeight; + padding-right: px2rem(5px); > a { display: inline-block; @@ -83,10 +84,10 @@ cursor: pointer; > svg { - $svgSize: px2rem(16px); + $svgSize: px2rem(12px); width: $svgSize; height: $svgSize; - top: 0.125 * $svgSize; + top: 0; } } } @@ -164,14 +165,21 @@ text-align: center; display: inline-block; - &:before { - font-style: normal; - font-family: $Tree-arrowVendor; - content: $Tree-unfoldedArrowContent; + // &:before { + // font-style: normal; + // font-family: $Tree-arrowVendor; + // content: $Tree-unfoldedArrowContent; + // } + > svg { + width: 10px; + height: 10px; + display: inline-block; + transition: transform 0.2s; + top: 0; } - &.is-folded:before { - content: $Tree-foldedArrowContent; + &.is-folded > svg { + transform: rotate(90deg); } } @@ -185,27 +193,12 @@ margin-right: px2rem(3px); } - &-rootIcon { - &:before { - font-style: normal; - font-family: $Tree-rootIconVendor; - content: $Tree-rootIconContent; - } - } - + &-rootIcon, + &-folderIcon, &-leafIcon { - &:before { - font-style: normal; - font-family: $Tree-leafIconVendor; - content: $Tree-leafIconContent; - } - } - - &-folderIcon { - &:before { - font-style: normal; - font-family: $Tree-folderIconVendor; - content: $Tree-folderIconContent; + > svg { + width: px2rem(14px); + height: px2rem(14px); } } @@ -220,6 +213,13 @@ &.is-disabled { color: $text--muted-color; } + + > .#{$ns}Checkbox { + line-height: 1; + display: inline-flex; + align-items: center; + margin-top: -1px; + } } &-itemText { diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss index ed5a7f2c..cef1d2f5 100644 --- a/scss/themes/cxd.scss +++ b/scss/themes/cxd.scss @@ -44,8 +44,6 @@ $Layout-asideLink-onHover-iconSize: px2rem(16px); $Layout-asideLink-onHover-iconColor: #108cee; $Layout-asideLink-fontSize: px2rem(12px); $Layout-asideLink-arrowFontSize: px2rem(12px); -$Layout-asideLink-arrowVendor: 'iconfont'; -$Layout-asideLink-arrowIcon: '\e63b'; $Layout-asideLink-arrowColor: #8d99b0; $Layout-asideLink-onHover-arrowColor: #fff; $Layout-headerBar-borderBottom: 0 none; @@ -98,8 +96,6 @@ $Form-select-onHover-bg: $white; $Form-select-onHover-borderColor: $primary; $Form-select-placeholderColor: #999; $Form-select-color: #000; -$Form-select-caret-vender: 'iconfont'; -$Form-select-caret-icon: '\e605'; $Form-select-caret-iconColor: #999; $Form-select-caret-onHover-iconColor: $primary; $Form-select-caret-fontSize: px2rem(12px); @@ -177,15 +173,6 @@ $DatePicker-onDisabled-color: #999; $DatePicker-iconColor: #666; $DatePicker-onHover-iconColor: $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-shortcuts-bg: #f5f5f5; @@ -267,14 +254,6 @@ $Table-onChecked-onHover-color: #666; $TableCell-paddingX: px2rem(10px); $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-padding: 0 px2rem(10px); @@ -371,9 +350,6 @@ $Tabs--card-bg: $Table-thead-bg; $Tabs--radio-bg: $white; // Pagination -$Pagination-arrowVendor: 'iconfont'; -$Pagination-prevArrowContent: '\e759'; -$Pagination-nextArrowContent: '\e757'; $Pagination-fontSize: px2rem(12px); $Pagination-onActive-backgroundColor: $white; $Pagination-onActive-color: $primary; @@ -427,25 +403,19 @@ $Alert--warning-color: #333; $Alert--warning-bg: $warning-bg; $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-width: px2rem(300px); $Toast-borderRadius: 0; -$Toast-paddingY: $Toast-xs; -$Toast-paddingX: $Toast-md; +$Toast-paddingY: px2rem(5px); +$Toast-paddingX: px2rem(15px); +$Toast-icon-fillHeight: false; $Toast-paddingL: px2rem(26px); $Toast--info-paddingL: 0; $Toast-border-width: px2rem(1px); -$Toast-icon-fontSize: px2rem(16px); +$Toast-icon-width: px2rem(16px); +$Toast-icon-height: px2rem(16px); $Toast-opacity: 1; -$Toast-display: inline-block; +$Toast-title-display: inline-block; // Toast color $Toast-color: $white; @@ -466,12 +436,8 @@ $Toast--warning-color: $warning; $Toast--warning-bgColor: $warning-bg; $Toast--warning-borderColor: $warning; -$Toast-iconVendor: 'iconfont'; - -$Toast--error-icon: '\e6d2'; -$Toast--warning-icon: '\e6e5'; -$Toast--info-icon: ''; -$Toast--success-icon: '\e6e8'; +$Toast-close-color: $icon-color; +$Toast-close--onHover-color: $icon-onHover-color; $TagControl-sugTip-color: $primary; @@ -501,6 +467,8 @@ $ListMenu-item--onHover-bg: #eaf6fe; $Transfer-title-bg: $Table-thead-bg; +$Satus-icon-width: px2rem(14px); + @import '../variables'; @import '../mixins'; @import '../base/reset'; diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index d2a447cd..a475fa8f 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -53,6 +53,7 @@ interface ToastComponentProps extends ThemeProps, LocaleProps { | 'bottom-left' | 'bottom-right'; closeButton: boolean; + showIcon?: boolean; timeout: number; className?: string; } @@ -80,6 +81,7 @@ export class ToastComponent extends React.Component< closeButton: false, timeout: 5000 }; + static themeKey = 'toast'; // 当前ToastComponent是否真正render了 hasRendered = false; @@ -150,7 +152,9 @@ export class ToastComponent extends React.Component< className, timeout, position, - translate + showIcon, + translate, + closeButton } = this.props; const items = this.state.items; @@ -171,9 +175,10 @@ export class ToastComponent extends React.Component< body={item.body} level={item.level || 'info'} timeout={item.timeout ?? timeout} - closeButton={item.closeButton} + closeButton={item.closeButton ?? closeButton} onDismiss={this.handleDismissed.bind(this, index)} translate={translate} + showIcon={showIcon} /> ))}
@@ -189,6 +194,7 @@ interface ToastMessageProps { level: 'info' | 'success' | 'error' | 'warning'; timeout: number; closeButton?: boolean; + showIcon?: boolean; position: | 'top-right' | 'top-center' @@ -273,6 +279,7 @@ export class ToastMessage extends React.Component< body, allowHtml, level, + showIcon, translate: __ } = this.props; @@ -298,6 +305,21 @@ export class ToastMessage extends React.Component< ) : null} + + {showIcon === false ? null : ( +
+ {level === 'success' ? ( + + ) : level == 'error' ? ( + + ) : level == 'info' ? ( + + ) : level == 'warning' ? ( + + ) : null} +
+ )} + {title ? (
{__(title)}
) : null} diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index 673dce10..d9ae9ad6 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -568,12 +568,14 @@ export class TreeSelector extends React.Component< })} > {!isLeaf ? ( - this.toggleUnfolded(item)} className={cx('Tree-itemArrow', { 'is-folded': !unfolded[item[valueField]] })} - /> + > + + ) : ( )} @@ -597,7 +599,12 @@ export class TreeSelector extends React.Component< (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon') }` )} - /> + > + + ) : null} {highlightTxt @@ -734,7 +741,9 @@ export class TreeSelector extends React.Component< onClick={this.clearSelect} > {showIcon ? ( - + + + ) : null} {rootLabel} diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 94378b53..f783dfc7 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -104,6 +104,30 @@ import QuestionIcon from '../icons/question.svg'; // @ts-ignore 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 export const closeIcon = ; @@ -162,10 +186,12 @@ registerIcon('upload', UploadIcon); registerIcon('file', FileIcon); registerIcon('success', SuccessIcon); registerIcon('fail', FailIcon); +registerIcon('warning', WarningIcon); registerIcon('search', SearchIcon); registerIcon('back', BackIcon); registerIcon('move', MoveIcon); registerIcon('info', InfoIcon); +registerIcon('info-circle', InfoCircleIcon); registerIcon('location', LocationIcon); registerIcon('drag-bar', DragBarIcon); registerIcon('reload', ReloadIcon); @@ -181,9 +207,16 @@ registerIcon('zoom-in', ZoomInIcon); registerIcon('zoom-out', ZoomOutIcon); registerIcon('question', QuestionIcon); 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({ icon, + className, ...rest }: { icon: string; @@ -195,7 +228,7 @@ export function Icon({ const Component = getIcon(icon); return Component ? ( - + ) : ( 没有 icon {icon} ); diff --git a/src/icons/caret.svg b/src/icons/caret.svg index c83a30e8..0ff21b53 100644 --- a/src/icons/caret.svg +++ b/src/icons/caret.svg @@ -1,9 +1,7 @@ - - - - - + + + diff --git a/src/icons/fail.svg b/src/icons/fail.svg index 7bff4ff9..93c5052e 100644 --- a/src/icons/fail.svg +++ b/src/icons/fail.svg @@ -1,7 +1,8 @@ - - - - - - \ No newline at end of file + + + + + + + + diff --git a/src/icons/folder.svg b/src/icons/folder.svg new file mode 100644 index 00000000..146b624b --- /dev/null +++ b/src/icons/folder.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/home.svg b/src/icons/home.svg new file mode 100644 index 00000000..5bcca29e --- /dev/null +++ b/src/icons/home.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/info-circle.svg b/src/icons/info-circle.svg new file mode 100644 index 00000000..76970e04 --- /dev/null +++ b/src/icons/info-circle.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/right-arrow-bold.svg b/src/icons/right-arrow-bold.svg index d48eea21..73757197 100644 --- a/src/icons/right-arrow-bold.svg +++ b/src/icons/right-arrow-bold.svg @@ -1,6 +1,6 @@ - + diff --git a/src/icons/schedule.svg b/src/icons/schedule.svg new file mode 100644 index 00000000..a7cedf60 --- /dev/null +++ b/src/icons/schedule.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/sort-asc.svg b/src/icons/sort-asc.svg new file mode 100644 index 00000000..ace15046 --- /dev/null +++ b/src/icons/sort-asc.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/sort-default.svg b/src/icons/sort-default.svg new file mode 100644 index 00000000..631cd3fa --- /dev/null +++ b/src/icons/sort-default.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/sort-desc.svg b/src/icons/sort-desc.svg new file mode 100644 index 00000000..8d01f040 --- /dev/null +++ b/src/icons/sort-desc.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/success.svg b/src/icons/success.svg index c4e3b043..8246af89 100644 --- a/src/icons/success.svg +++ b/src/icons/success.svg @@ -1,9 +1,10 @@ - - - - - - - + + + + + + + + + diff --git a/src/icons/warning.svg b/src/icons/warning.svg new file mode 100644 index 00000000..07e616dd --- /dev/null +++ b/src/icons/warning.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/renderers/Status.tsx b/src/renderers/Status.tsx index 0ba6f560..4b68d430 100644 --- a/src/renderers/Status.tsx +++ b/src/renderers/Status.tsx @@ -17,11 +17,19 @@ export class StatusField extends React.Component { placeholder: '-', map: { 0: 'svg-success', - 1: 'svg-fail' + 1: 'svg-fail', + success: 'svg-success', + pending: 'rolling', + fail: 'svg-fail', + queue: 'svg-warning', + schedule: 'svg-schedule' }, labelMap: { - // 0: '失败', - // 1: '成功' + success: '成功', + pending: '运行中', + fail: '失败', + queue: '排队中', + schedule: '调度中' } }; @@ -48,11 +56,11 @@ export class StatusField extends React.Component { } wrapClassName = `StatusField--${value}`; - let itemClassName = map[value]; + let itemClassName = map[value] || ''; let svgIcon: string = ''; itemClassName = itemClassName.replace( - /\bsvg-(.*)\b/, + /\bsvg-([^\s|$]+)\b/g, (_: string, icon: string) => { svgIcon = icon; return 'icon'; @@ -63,8 +71,10 @@ export class StatusField extends React.Component { viewValue = ( ); - } else { - viewValue = ; + } else if (itemClassName) { + viewValue = ( + + ); } if (labelMap && labelMap[value]) { diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index ba9507d0..b7f27e83 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1127,7 +1127,9 @@ export default class Table extends React.Component { ? 'is-active' : '' )} - /> + > + + { ? 'is-active' : '' )} - /> + > + + + > + + ); } else if (column.filterable && column.name) { @@ -1290,7 +1296,9 @@ export default class Table extends React.Component { ...props, btnDisabled: store.dragging, 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, rowSpan: item.rowSpans[column.name as string], quickEditFormRef: this.subFormRef, diff --git a/src/store/table.ts b/src/store/table.ts index e7500553..41c92d6a 100644 --- a/src/store/table.ts +++ b/src/store/table.ts @@ -31,6 +31,7 @@ export const Column = types label: types.optional(types.frozen(), undefined), type: types.string, name: types.maybe(types.string), + value: types.frozen(), groupName: '', toggled: false, toggable: true, diff --git a/src/theme.tsx b/src/theme.tsx index 370af725..4184dd22 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -27,6 +27,9 @@ interface ThemeConfig { renderers?: { [propName: string]: any; }; + components?: { + [propName: string]: any; + }; [propsName: string]: any; } @@ -66,6 +69,7 @@ export function makeClassnames(ns?: string) { export type ThemeInstance = ThemeConfig & { getRendererConfig: (name?: string) => any; + getComponentConfig: (name?: string) => any; classnames: ClassNamesFn; }; @@ -104,6 +108,11 @@ export function getTheme(theme: string): ThemeInstance { config.classnames = config.classnames || makeClassnames(ns); } + if (!config.getComponentConfig) { + config.getComponentConfig = (name?: string) => + config.components && name ? config.components[name] : null; + } + return config as ThemeInstance; } @@ -117,7 +126,9 @@ export const ThemeContext = React.createContext('theme'); export let defaultTheme: string = 'default'; export function themeable< - T extends React.ComponentType & ThemeProps> + T extends React.ComponentType & ThemeProps> & { + themeKey?: string; + } >(ComposedComponent: T) { type OuterProps = JSX.LibraryManagedAttributes< T, @@ -152,6 +163,7 @@ export function themeable< return ( diff --git a/src/themes/cxd.ts b/src/themes/cxd.ts index 8568fcc5..76177f6e 100644 --- a/src/themes/cxd.ts +++ b/src/themes/cxd.ts @@ -4,6 +4,12 @@ import {theme} from '../theme'; theme('cxd', { classPrefix: 'cxd-', + components: { + toast: { + closeButton: true + } + }, + renderers: { 'form': { horizontal: { @@ -36,23 +42,6 @@ theme('cxd', { 'range-control': { showInput: 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: '调度中' - } } } });