feat: Spin 组件支持全局扩展配置 (#713)

* feat: `Spin` 组件支持全局扩展配置 --------- Co-authored-by: 颜宇浩 <[email protected]>
sheinsight · Oct 12, 2024 · b41ea31 · b41ea31
1 parent 8d024a8
commit b41ea31
Show file tree

Hide file tree

Showing 20 changed files with 117 additions and 20 deletions.
diff --git a/docs/markdown/shineout/changelog-common.md b/docs/markdown/shineout/changelog-common.md
@@ -1,3 +1,9 @@
+## 3.4.3-beta.11
+2024-10-12
+
+### 💎 Enhancement
+- 优化 `setConfig` 中 `spin` 的配置项，支持全局配置更多内容
+
 ## 3.4.0
 2024-09-19
 

diff --git a/docs/markdown/shineout/config.md b/docs/markdown/shineout/config.md
@@ -67,7 +67,11 @@ setConfig({
 
 用于配置组件默认的 Spin 类型  
 
-类型： `spin: string`  
+类型： `spin: string | {
+  name: string;
+  color?: string;
+  tip?: React.ReactNode;
+}`  
 
 默认值： `ring`
 
@@ -79,6 +83,17 @@ setConfig({
 })
 ```
 
+```js
+// 设置全局 Spin 的默认类型、提示内容、颜色
+setConfig({
+  spin: {
+    name: 'wave',
+    color: '#000000',
+    tip: 'loading...'
+  }
+})
+```
+
 ### 弹出层容器
 
 配置 Modal Popover 等组件的弹出层容器   

diff --git a/packages/base/src/config/index.ts b/packages/base/src/config/index.ts
@@ -3,12 +3,20 @@ import { create } from '@shined/reactive';
 import { getSnapshot } from '@shined/reactive/vanilla';
 import { LanType, Direction } from './locale/Props';
 
+export type SpinConfig =
+  | string
+  | {
+      name: string;
+      color?: string;
+      tip?: React.ReactNode;
+    };
+
 export interface ConfigOption {
   prefix: string;
   locale: LanType;
   delay?: number;
   trim?: boolean;
-  spin?: string;
+  spin?: SpinConfig;
   direction: Direction;
   popupContainer?: HTMLElement | null | (() => HTMLElement | null);
 }

diff --git a/packages/base/src/spin/spin.tsx b/packages/base/src/spin/spin.tsx
@@ -11,15 +11,49 @@ const Spin = (props: SpinProps = {}) => {
     style,
     loading,
     name: nameProps,
-    tip,
+    tip: tipProps,
     tipClassName,
-    color,
+    color: colorProps,
     mode = 'vertical',
   } = props;
 
   const config = useConfig();
 
-  const name = nameProps ?? config.spin ?? 'default';
+  const getSpinName = () => {
+    const { spin } = config;
+    if (!spin) return;
+
+    if (typeof spin === 'string') {
+      return spin;
+    }
+
+    if (typeof spin === 'object') {
+      const { name } = spin;
+      return name;
+    }
+
+    return;
+  };
+
+  const getSpinTip = () => {
+    const { spin } = config;
+    if (!spin || typeof spin !== 'object') return;
+    const { tip } = spin;
+    return tip;
+  };
+
+  const getSpinColor = () => {
+    const { spin } = config;
+    if (!spin || typeof spin !== 'object') return;
+    const { color } = spin;
+    return color;
+  };
+
+  const name = nameProps ?? getSpinName() ?? 'default';
+
+  const tip = tipProps ?? getSpinTip();
+
+  const color = colorProps ?? getSpinColor();
 
   const spinStyle = jssStyle?.spin?.() || ({} as SpinClasses);
 
@@ -32,7 +66,7 @@ const Spin = (props: SpinProps = {}) => {
     const n = name as keyof typeof Spins;
     if (Spins[n]) {
       const Comp = Spins[n];
-      return <Comp {...props} style={style} />;
+      return <Comp {...props} color={color} style={style} />;
     }
 
     return null;
@@ -47,7 +81,7 @@ const Spin = (props: SpinProps = {}) => {
   };
 
   const renderContent = () => {
-    if ('tip' in props) {
+    if (tip) {
       return (
         <div className={contentClass}>
           {renderSpin()}

diff --git a/packages/shineout-style/src/spin/chasing-dots.ts b/packages/shineout-style/src/spin/chasing-dots.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const duration = 2;
 
 export default {
@@ -14,7 +16,7 @@ export default {
     height: '60%',
     borderRadius: '100%',
     animation: `$chasing-dots-2 ${duration}s ease-in-out infinite `,
-    fill: '#197AFA',
+    fill: Token.spinColor,
 
     '&:last-child': {
       top: 'auto',

diff --git a/packages/shineout-style/src/spin/chasing-ring.ts b/packages/shineout-style/src/spin/chasing-ring.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 export default {
   position: 'relative',
   // margin: 'auto',
@@ -12,7 +14,7 @@ export default {
     border: '1px solid transparent',
     borderRadius: '100%',
     transformOrigin: '50% 50%',
-    borderTopColor: '#197AFA',
+    borderTopColor: Token.spinColor,
 
     '&:nth-child(1)': {
       animation: '$chasing-ring-1 2s infinite',

diff --git a/packages/shineout-style/src/spin/cube-grid.ts b/packages/shineout-style/src/spin/cube-grid.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const delayRange = 0.4;
 
 export default {
@@ -7,7 +9,7 @@ export default {
     height: '33.3333%',
     float: 'left',
     animation: '$cube-grid 1.3s infinite ease-in-out',
-    background: '#197AFA',
+    background: Token.spinColor,
     boxSizing: 'border-box',
     '&:nth-child(1)': { animationDelay: `${delayRange * 0.5}s` },
     '&:nth-child(2)': { animationDelay: `${delayRange * 0.75}s` },

diff --git a/packages/shineout-style/src/spin/default.ts b/packages/shineout-style/src/spin/default.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const Default = (count = 12) => {
   const animationDelay: any = {};
 
@@ -27,7 +29,7 @@ const Default = (count = 12) => {
       '& div': {
         height: '55%',
         margin: '0 auto',
-        background: '#197AFA',
+        background: Token.spinColor,
         borderRadius: 5,
         animation: '$keyframesFade 1s infinite ease-in-out both',
       },

diff --git a/packages/shineout-style/src/spin/double-bounce.ts b/packages/shineout-style/src/spin/double-bounce.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 export default {
   position: 'relative',
   // margin: 'auto',
@@ -11,7 +13,7 @@ export default {
     borderRadius: '50%',
     opacity: 0.6,
     animation: '$double-bounce 2s ease-in-out infinite',
-    background: '#197AFA',
+    background: Token.spinColor,
 
     '&:last-child': {
       animationDelay: '-1s',

diff --git a/packages/shineout-style/src/spin/fading-circle.ts b/packages/shineout-style/src/spin/fading-circle.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const circleCount = 12;
 
 const loop = () => {
@@ -32,7 +34,7 @@ export default {
     ...loop(),
   },
   '& svg': {
-    fill: '#197AFA',
+    fill: Token.spinColor,
     animation: '$fading-circle 1.2s infinite ease-in-out both',
   },
 };
diff --git a/packages/shineout-style/src/spin/four-dots.ts b/packages/shineout-style/src/spin/four-dots.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 export default {
   // margin: 'auto',
   position: 'relative',
@@ -16,7 +18,7 @@ export default {
     },
 
     '& svg': {
-      fill: '#197AFA',
+      fill: Token.spinColor,
     },
 
     '&:nth-child(1)': {

diff --git a/packages/shineout-style/src/spin/plane.ts b/packages/shineout-style/src/spin/plane.ts
@@ -1,6 +1,8 @@
+import Token from '@sheinx/theme';
+
 export default {
   // margin: 'auto',
   boxSizing: 'border-box',
   animation: '$plane 1s linear infinite',
-  background: '#197AFA',
+  background: Token.spinColor,
 };
diff --git a/packages/shineout-style/src/spin/pulse.ts b/packages/shineout-style/src/spin/pulse.ts
@@ -1,7 +1,9 @@
+import Token from '@sheinx/theme';
+
 export default {
   // margin: 'auto',
   boxSizing: 'border-box',
   borderRadius: '100%',
   animation: '$pulse 1s linear infinite',
-  background: '#197AFA',
+  background: Token.spinColor,
 };
diff --git a/packages/shineout-style/src/spin/ring.ts b/packages/shineout-style/src/spin/ring.ts
@@ -1,9 +1,11 @@
+import Token from '@sheinx/theme';
+
 export default {
   // margin: 'auto',
   boxSizing: 'border-box',
   position: 'relative',
   borderStyle: 'solid',
-  borderColor: '#197AFA',
+  borderColor: Token.spinColor,
   borderRadius: '50%',
   animation: '$ring 1s linear infinite',
   borderTopColor: 'transparent',

diff --git a/packages/shineout-style/src/spin/scale-circle.ts b/packages/shineout-style/src/spin/scale-circle.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const circleCount = 12;
 
 const loop = () => {
@@ -32,7 +34,7 @@ export default {
     ...loop(),
   },
   '& svg': {
-    fill: '#197AFA',
+    fill: Token.spinColor,
     animation: '$scale-circle 1.2s infinite ease-in-out both',
   },
 };
diff --git a/packages/shineout-style/src/spin/tree-bounce.ts b/packages/shineout-style/src/spin/tree-bounce.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 export default {
   // margin: 'auto',
   textAlign: 'center',
@@ -10,7 +12,7 @@ export default {
     animation: '$three-bounce 1.4s ease-in-out 0s infinite both',
 
     '& svg': {
-      fill: '#197AFA',
+      fill: Token.spinColor,
     },
 
     '&:nth-child(1)': {

diff --git a/packages/shineout-style/src/spin/wave.ts b/packages/shineout-style/src/spin/wave.ts
@@ -1,3 +1,5 @@
+import Token from '@sheinx/theme';
+
 const loop = (count = 5) => {
   const animationDelay: any = {};
   for (let i = 1; i < count; i++) {
@@ -18,7 +20,7 @@ export default {
     display: 'inline-block',
     height: '100%',
     marginRight: '2px',
-    background: '#197AFA',
+    background: Token.spinColor,
     animation: '$wave 1.2s infinite ease-in-out',
 
     ':last-child': {

diff --git a/packages/theme/src/spin/spin.ts b/packages/theme/src/spin/spin.ts
@@ -7,6 +7,7 @@ const spinTokens: SpinTokens = {
   spinTipFontColor: 'Brand-6',
   spinVerticalMargin: 'Spacing-4',
   spinHorizontalMargin: 'Spacing-4',
+  spinColor: 'Brand-6',
   spinBackgroundColor: 'Neutral-fill-1',
 };
 

diff --git a/packages/theme/src/spin/token.ts b/packages/theme/src/spin/token.ts
@@ -26,6 +26,7 @@ const spinTokenExtraValue = {
   tip: { font: { color: 'Brand-6' } },
   vertical: { margin: 'Spacing-4' },
   horizontal: { margin: 'Spacing-4' },
+  color: 'Brand-6',
   background: { color: 'Neutral-fill-1' },
 };
 

diff --git a/packages/theme/src/spin/type.ts b/packages/theme/src/spin/type.ts
@@ -20,6 +20,12 @@ export interface SpinTokens {
    * @description 加载动画水平模式下与提示文字的外边距
    */
   spinHorizontalMargin: string;
+  /**
+   * @type {string}
+   * @token Brand-6
+   * @description 加载动画颜色
+   */
+  spinColor: string;
   /**
    * @type {string}
    * @token Neutral-fill-1