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<
加载中
+ ) : ( +点击刷新重新加载
+ )} +