Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Oct 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca8f359
feat: `Spin` 组件支持全局扩展配置
Oct 11, 2024
1943a5f
feat: setConfig changelog
Oct 12, 2024
ace9bfb
fix: 去除无效 log
Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion docs/markdown/shineout/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@ setConfig({

用于配置组件默认的 Spin 类型

类型： `spin: string`
类型： `spin: string | {
name: string;
color?: string;
tip?: React.ReactNode;
}`

默认值： `ring`

Expand All @@ -79,6 +83,17 @@ setConfig({
})
```

```js
// 设置全局 Spin 的默认类型、提示内容、颜色
setConfig({
spin: {
name: 'wave',
color: '#000000',
tip: 'loading...'
}
})
```

### 弹出层容器

配置 Modal Popover 等组件的弹出层容器
Expand Down
10 changes: 9 additions & 1 deletion packages/base/src/config/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
46 changes: 41 additions & 5 deletions packages/base/src/spin/spin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,51 @@ 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;
};
Comment on lines +22 to +50
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议：提取公共逻辑，减少重复代码

getSpinName、getSpinTip 和 getSpinColor 三个函数的实现非常相似，可以考虑提取公共逻辑，创建一个通用函数来获取 spin 对象的属性。这将有助于减少代码重复，提升代码的可维护性。

可以修改为：

const getSpinProp = (propName: string) => {
  const { spin } = config;
  if (!spin) return;
  if (typeof spin === 'string' && propName === 'name') {
    return spin;
  }
  if (typeof spin === 'object') {
    return spin[propName];
  }
  return;
};

然后在代码中使用：

const name = nameProps ?? getSpinProp('name') ?? 'default';
const tip = tipProps ?? getSpinProp('tip');
const color = colorProps ?? getSpinProp('color');


const name = nameProps ?? getSpinName() ?? 'default';

const tip = tipProps ?? getSpinTip();

const color = colorProps ?? getSpinColor();

console.log('color', color);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

移除调试用的 console.log

第58行的 console.log('color', color); 似乎是用于调试的代码，建议在提交前移除，以避免在生产环境中输出多余的日志信息。

应用以下更改移除调试代码：

- console.log('color', color);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.log('color', color);


const spinStyle = jssStyle?.spin?.() || ({} as SpinClasses);

Expand All @@ -32,7 +68,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;
Expand All @@ -47,7 +83,7 @@ const Spin = (props: SpinProps = {}) => {
};

const renderContent = () => {
if ('tip' in props) {
if (tip) {
return (
<div className={contentClass}>
{renderSpin()}
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/chasing-dots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const duration = 2;

export default {
Expand All @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/chasing-ring.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

export default {
position: 'relative',
// margin: 'auto',
Expand All @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/cube-grid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const delayRange = 0.4;

export default {
Expand All @@ -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` },
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const Default = (count = 12) => {
const animationDelay: any = {};

Expand Down Expand Up @@ -27,7 +29,7 @@ const Default = (count = 12) => {
'& div': {
height: '55%',
margin: '0 auto',
background: '#197AFA',
background: Token.spinColor,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

存在未替换的硬编码颜色值

在以下文件中仍然存在硬编码的 #197AFA 颜色值：

  • packages/theme/src/token/token.ts
  • packages/theme/src/token/type.ts
  • packages/theme/src/token/figma.js
  • docs/theme/layout/desktop/style.ts

建议将这些硬编码颜色值替换为 Token.spinColor 或适当的主题 Token，以确保样式的一致性和提高代码的可维护性。

🔗 Analysis chain

使用主题 Token 替换硬编码的颜色值

将硬编码的颜色值 #197AFA 替换为 Token.spinColor 是一个很好的改进。这样做可以：

  1. 提高样式的一致性：确保 Spin 组件的颜色与整体主题保持一致。
  2. 增强可维护性：集中管理颜色值，便于后续的主题调整。
  3. 支持动态主题：允许在运行时更改主题，而无需修改组件代码。

为了确保这个改动的一致性，我们可以检查其他使用 Spin 组件的地方是否也进行了类似的更新：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查其他文件中是否还存在硬编码的 Spin 颜色值

# 测试：搜索包含 '#197AFA' 的文件，特别是与 Spin 相关的文件
rg --type typescript --type javascript --type css "#197AFA"

# 测试：搜索其他可能使用 Token.spinColor 的地方
rg --type typescript --type javascript "Token\.spinColor"

Length of output: 191

Script:

#!/bin/bash
# 描述：检查其他文件中是否还存在硬编码的 Spin 颜色值

# 测试：搜索包含 '#197AFA' 的文件，特别是与 Spin 相关的文件
rg "#197AFA" --glob "*.ts" --glob "*.js" --glob "*.css"

# 测试：搜索其他可能使用 Token.spinColor 的地方
rg "Token\.spinColor" --glob "*.ts" --glob "*.js"

Length of output: 1549

borderRadius: 5,
animation: '$keyframesFade 1s infinite ease-in-out both',
},
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/double-bounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

export default {
position: 'relative',
// margin: 'auto',
Expand All @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/fading-circle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const circleCount = 12;

const loop = () => {
Expand Down Expand Up @@ -32,7 +34,7 @@ export default {
...loop(),
},
'& svg': {
fill: '#197AFA',
fill: Token.spinColor,
animation: '$fading-circle 1.2s infinite ease-in-out both',
},
};
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/four-dots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

export default {
// margin: 'auto',
position: 'relative',
Expand All @@ -16,7 +18,7 @@ export default {
},

'& svg': {
fill: '#197AFA',
fill: Token.spinColor,
},

'&:nth-child(1)': {
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/plane.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/pulse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/ring.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import Token from '@sheinx/theme';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

发现部分样式文件仍包含硬编码颜色值。

  • 以下文件中存在硬编码颜色值，请使用 Token 进行替换：
    • packages/shineout-style/src/upload/upload.ts
    • packages/shineout-style/src/image/image.ts
    • packages/shineout-style/src/tabs/tabs.ts
    • packages/shineout-style/src/steps/steps.ts
    • packages/shineout-style/src/normalize.ts
    • packages/shineout-style/src/list/list.ts
    • packages/shineout-style/src/menu/menu.ts
    • packages/shineout-style/src/carousel/carousel.ts
    • packages/shineout-style/src/card-group/card-group.ts
    • packages/shineout-style/src/badge/badge.ts
🔗 Analysis chain

更改看起来不错，提高了主题的灵活性。

这些更改通过使用 Token.spinColor 代替硬编码的颜色值，增强了 Spin 组件的可配置性。这种方法允许更容易地进行全局主题管理，符合 PR 的目标。

为确保一致性，请运行以下脚本来检查其他样式文件是否也需要类似的更改：

Also applies to: 8-8

为了确保验证脚本正确运行，请使用以下修正后的脚本重新检查：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查其他样式文件中是否存在硬编码的颜色值

# 测试：搜索包含硬编码颜色值的文件
echo "包含硬编码颜色值的文件："
rg --type typescript -g 'packages/shineout-style/src/**/*.ts' -e '#[0-9A-Fa-f]{3,6}' -l

# 测试：检查其他文件是否已经使用了 Token
echo "已经使用 Token 的文件："
rg --type typescript -g 'packages/shineout-style/src/**/*.ts' -e 'Token\.' -l

Length of output: 448

Script:

#!/bin/bash
# 描述：检查其他样式文件中是否存在硬编码的颜色值

# 测试：搜索包含硬编码颜色值的文件
echo "包含硬编码颜色值的文件："
rg --glob 'packages/shineout-style/src/**/*.ts' -e '#[0-9A-Fa-f]{3,6}' -l

# 测试：检查其他文件是否已经使用了 Token
echo "已经使用 Token 的文件："
rg --glob 'packages/shineout-style/src/**/*.ts' -e 'Token\.' -l

Length of output: 1971


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',
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/scale-circle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const circleCount = 12;

const loop = () => {
Expand Down Expand Up @@ -32,7 +34,7 @@ export default {
...loop(),
},
'& svg': {
fill: '#197AFA',
fill: Token.spinColor,
animation: '$scale-circle 1.2s infinite ease-in-out both',
},
};
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/tree-bounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

发现未替换的硬编码颜色 #197AFA

在以下文件中仍然使用了硬编码的颜色值 #197AFA：

  • packages/theme/src/token/type.ts
  • packages/theme/src/token/token.ts
  • packages/ssr-test/pages/examples/table/22-drag.tsx
  • packages/ssr-test/pages/examples/form/011-fieldset-loop.tsx
  • packages/ssr-test/pages/examples/card-group/02-width.tsx
  • packages/ssr-test/pages/examples/card-group/04-checkbox.tsx
  • packages/ssr-test/pages/examples/card-group/05-disabled.tsx
  • packages/ssr-test/pages/examples/card-group/01-base.tsx
  • packages/ssr-test/pages/examples/card-group/03-lazyout.tsx
  • packages/shineout/src/table/example/22-02-drag-handle.tsx
  • packages/shineout/src/table/example/22-01-drag.tsx
  • packages/shineout/src/select/example/16-custom-render.tsx
  • packages/shineout/src/link/example/05-icon.tsx
  • packages/shineout/src/form/example/011-fieldset-loop.tsx
  • packages/shineout/src/card-group/example/03-lazyout.tsx
  • packages/shineout/src/card-group/example/04-checkbox.tsx
  • packages/shineout/src/card-group/example/05-disabled.tsx
  • packages/shineout/src/card-group/example/01-base.tsx
  • packages/shineout/src/card-group/example/02-width.tsx
  • docs/theme/components/title/logo.tsx
  • docs/theme/layout/desktop/style.ts
  • docs/theme/layout/desktop/nav/index.tsx

建议将这些硬编码的颜色值替换为 Token.spinColor 以保持代码一致性。

🔗 Analysis chain

验证 Token.spinColor 的使用情况

为确保变更的一致性和完整性，我们应该检查 Token.spinColor 在其他文件中的使用情况。

Also applies to: 15-15

为了确保验证脚本能够正确执行，请使用以下修正后的脚本重新验证：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：验证 Token.spinColor 的使用情况

# 测试：搜索 Token.spinColor 的使用。预期：在其他相关文件中也有使用。
rg --type typescript "Token\.spinColor"

# 测试：检查是否有其他地方仍在使用旧的硬编码颜色值。预期：不应该有其他地方使用 #197AFA。
rg --type typescript "#197AFA"

Length of output: 144

Script:

#!/bin/bash
# 描述：验证 Token.spinColor 的使用情况

# 测试：搜索 Token.spinColor 的使用。预期：在其他相关文件中也有使用。
rg --type ts "Token\.spinColor"

# 测试：检查是否有其他地方仍在使用旧的硬编码颜色值。预期：不应该有其他地方使用 #197AFA。
rg --type ts "#197AFA"

Length of output: 3187


export default {
// margin: 'auto',
textAlign: 'center',
Expand All @@ -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)': {
Expand Down
4 changes: 3 additions & 1 deletion packages/shineout-style/src/spin/wave.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Token from '@sheinx/theme';

const loop = (count = 5) => {
const animationDelay: any = {};
for (let i = 1; i < count; i++) {
Expand All @@ -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': {
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/spin/spin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const spinTokens: SpinTokens = {
spinTipFontColor: 'Brand-6',
spinVerticalMargin: 'Spacing-4',
spinHorizontalMargin: 'Spacing-4',
spinColor: 'Brand-6',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

发现问题：spinColor 未在自动生成脚本中更新。

新增的 spinColor 属性未在生成脚本中进行更新。这可能导致 spin.ts 文件在未来自动生成时，spinColor 属性被覆盖或丢失。

请确保生成脚本中包含 spinColor，以保持一致性和自动化。

🔗 Analysis chain

新增的 spinColor 属性看起来不错，但需要验证自动生成过程。

新增的 spinColor 属性与 PR 的目标一致，为 Spin 组件提供了更多的全局配置选项。值 'Brand-6' 与文件中的其他颜色令牌保持一致。

然而，由于此文件是自动生成的，我们需要确保这些更改也反映在生成脚本中。

请运行以下脚本来验证更改是否正确反映在生成过程中：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：验证 spin.ts 文件的自动生成过程

# 测试：查找生成 spin.ts 的脚本
echo "查找生成 spin.ts 的脚本："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens'

# 测试：检查脚本中是否包含 spinColor
echo "检查脚本中是否包含 spinColor："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens' -x rg -i 'spinColor'

# 测试：重新生成 spin.ts 并比较更改
echo "重新生成 spin.ts 并比较更改："
fd -t f -e js -e ts --search-path scripts 'generate.*tokens' -x node {} \; && git diff packages/theme/src/spin/spin.ts

Length of output: 412

spinBackgroundColor: 'Neutral-fill-1',
};

Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/spin/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
};

Expand Down
6 changes: 6 additions & 0 deletions packages/theme/src/spin/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ export interface SpinTokens {
* @description 加载动画水平模式下与提示文字的外边距
*/
spinHorizontalMargin: string;
/**
* @type {string}
* @token Brand-6
* @description 加载动画颜色
*/
spinColor: string;
/**
* @type {string}
* @token Neutral-fill-1
Expand Down