diff --git a/scss/components/_spinner.scss b/scss/components/_spinner.scss index 0a01c238..7c098c6f 100644 --- a/scss/components/_spinner.scss +++ b/scss/components/_spinner.scss @@ -8,6 +8,20 @@ } } +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + to { + transform: rotate(1turn); + } +} + +.is-spin { + animation: spin 2s linear infinite; +} + .#{$ns}Spinner-overlay { position: absolute; z-index: 10; diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index 23607515..5c19b3e6 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -563,7 +563,31 @@ border-right: 1px solid $borderColor; } - &-placeholder { - @include checkboxes-placeholder(); + &-reload { + text-align: center; + color: $info; + margin: 20px 0 0; + + &.is-clickable { + cursor: pointer; + } + } + + &-box { + line-height: $Form-input-lineHeight; + font-size: $fontSizeSm; + color: $text--muted-color; + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + + > p { + text-align: center; + margin: 10px 0 20px; + color: $text--muted-color; + } } } diff --git a/src/components/AssociatedCheckboxes.tsx b/src/components/AssociatedCheckboxes.tsx index 97d050ba..cfb524ef 100644 --- a/src/components/AssociatedCheckboxes.tsx +++ b/src/components/AssociatedCheckboxes.tsx @@ -18,6 +18,7 @@ import TreeCheckboxes from './TreeCheckboxes'; import ChainedCheckboxes from './ChainedCheckboxes'; import Spinner from './Spinner'; import TreeRadios from './TreeRadios'; +import {Icon} from './icons'; export interface AssociatedCheckboxesProps extends CheckboxesProps { leftOptions: Options; @@ -87,6 +88,11 @@ export class AssociatedCheckboxes extends Checkboxes< } } + handleRetry(option: Option) { + const {onDeferLoad} = this.props; + onDeferLoad?.(option); + } + render() { const { classnames: cx, @@ -132,8 +138,28 @@ export class AssociatedCheckboxes extends Checkboxes<
{this.state.leftValue ? ( selectdOption ? ( - selectdOption.defer && selectdOption.loading ? ( - + selectdOption.defer && !selectdOption.loaded ? ( +
+
+ +
+ + {selectdOption.loading ? ( +

加载中

+ ) : ( +

点击刷新重新加载

+ )} +
) : rightMode === 'table' ? ( ) ) : ( -
+
配置错误,选项无法与左侧选项对应
) ) : ( -
+
请先选择左侧数据
)} diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 9b531be2..523441ba 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -66,6 +66,9 @@ import LocationIcon from '../icons/location.svg'; // @ts-ignore import ComboDraggerIcon from '../icons/combo-dragger.svg'; +// @ts-ignore +import ReloadIcon from '../icons/reload.svg'; + // 兼容原来的用法,后续不直接试用。 // @ts-ignore export const closeIcon = ; @@ -129,6 +132,7 @@ registerIcon('move', MoveIcon); registerIcon('info', InfoIcon); registerIcon('location', LocationIcon); registerIcon('combo-dragger', ComboDraggerIcon); +registerIcon('reload', ReloadIcon); export function Icon({ icon, diff --git a/src/icons/reload.svg b/src/icons/reload.svg new file mode 100644 index 00000000..e4f1780a --- /dev/null +++ b/src/icons/reload.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/renderers/Form/Options.tsx b/src/renderers/Form/Options.tsx index 6271876b..7625f840 100644 --- a/src/renderers/Form/Options.tsx +++ b/src/renderers/Form/Options.tsx @@ -61,7 +61,7 @@ export interface OptionsControlProps extends FormControlProps, OptionProps { selectedOptions: Array