feat: loading根据父级背景颜色自动适配颜色 (baidu#9507)

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
lhtuling · Jan 29, 2024 · 5115bc7 · 5115bc7
1 parent 70c8d30
commit 5115bc7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
@@ -3308,6 +3308,7 @@
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
   --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
+  --loading-dark-bg-color: var(--colors-neutral-text-11);
 
   // Image
   --image-image-normal-paddingTop: var(--sizes-size-3);

diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss
@@ -105,6 +105,12 @@
     }
   }
 
+  .#{$ns}Spinner-icon--darkBg {
+    svg.icon path {
+      fill: var(--loading-dark-bg-color);
+    }
+  }
+
   .#{$ns}Spinner-tip {
     margin: px2rem(12px) 0 0 0;
     word-break: keep-all;

diff --git a/packages/amis-ui/scss/themes/dark.scss b/packages/amis-ui/scss/themes/dark.scss
@@ -5,6 +5,7 @@
 
 :root,
 .AMISCSSWrapper {
+  --loading-dark-bg-color: var(--colors-neutral-fill-2);
   --switch-text-on-color: var(--colors-neutral-text-2);
   --switch-text-off-color: var(--colors-neutral-text-2);
   --switch-default-on-slider-color: var(--colors-neutral-fill-2);

diff --git a/packages/amis-ui/src/components/Spinner.tsx b/packages/amis-ui/src/components/Spinner.tsx
@@ -104,7 +104,7 @@ const store = SpinnerSharedStore.create({});
 
 export class Spinner extends React.Component<
   SpinnerProps,
-  {spinning: boolean; showMarker: boolean}
+  {spinning: boolean; showMarker: boolean; idDarkBg: boolean}
 > {
   static defaultProps = {
     show: true,
@@ -122,7 +122,8 @@ export class Spinner extends React.Component<
 
   state = {
     spinning: false,
-    showMarker: true
+    showMarker: true,
+    idDarkBg: false
   };
 
   parent: HTMLElement | null = null;
@@ -159,6 +160,19 @@ export class Spinner extends React.Component<
     if (this.parent && this.state.showMarker) {
       this.setState({showMarker: false});
     }
+    if (this.parent) {
+      const backgroundColor = getComputedStyle(this.parent).getPropertyValue(
+        'background-color'
+      );
+      const rgba = backgroundColor.match(/\d+/g)?.map(Number) || [];
+
+      const brightness = (rgba[0] * 299 + rgba[1] * 587 + rgba[2] * 114) / 1000;
+      rgba[3] = rgba[3] ?? 1; // 没有设置颜色时取到的是 rgba(0, 0, 0, 0)
+
+      if (brightness < 200 && rgba[3] > 0.4) {
+        this.setState({idDarkBg: true});
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -250,7 +264,8 @@ export class Spinner extends React.Component<
                         'Spinner-icon--custom': isCustomIcon,
                         'Spinner-icon--disabled': disabled
                       },
-                      spinnerClassName
+                      spinnerClassName,
+                      this.state.idDarkBg && 'Spinner-icon--darkBg'
                     )}
                   >
                     {icon ? (