Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 0 additions & 11 deletions .eslintrc.js

This file was deleted.

8 changes: 8 additions & 0 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ updates:
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
npm-dependencies:
patterns:
- '*'

- package-ecosystem: github-actions
directory: '/'
Expand All @@ -17,3 +21,7 @@ updates:
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
github-actions:
patterns:
- '*'
3 changes: 1 addition & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div align="center">
<h1>@rc-component/tour</h1>
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
<p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
<p>🧭 Guided React tours with masks, target tracking, keyboard navigation, and custom panels.</p>

<p>
Expand All @@ -15,7 +15,6 @@

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>


## Highlights

- Tracks step targets and renders guided panels through a trigger-backed popup.
Expand Down
85 changes: 42 additions & 43 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div align="center">
<h1>@rc-component/tour</h1>
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
<p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Ant Design 生态的一部分。</sub></p>
<p>🧭 React 引导组件,用于创建分步产品导览。</p>

<p>
Expand All @@ -15,7 +15,6 @@

<p align="center"><a href="./README.md">English</a> | 简体中文</p>


## 特性

- 跟踪步骤目标并通过触发器支持的弹层窗口渲染引导面板。
Expand Down Expand Up @@ -69,53 +68,53 @@ npm start

### Tour

| 名称 | 类型 | 默认值 | 说明 |
| ----------------------- | ------------------------------------------------------------ | -------------- | ---------------------------------------------------- |
| `animated` | boolean \| `{ placeholder: boolean }` | false | 启用目标占位动画。 |
| `arrow` | boolean \| `{ pointAtCenter: boolean }` | true | 显示箭头,并可选择指向目标中心。 |
| `builtinPlacements` | TriggerProps['builtinPlacements'] \| function | - | 自定义位置映射。 |
| `className` | string | - | 面板 className。 |
| `classNames` | `Partial<Record<SemanticName, string>>` | - | 语义 className。 |
| `closable` | boolean \| object | - | 关闭按钮配置。 |
| `closeIcon` | React.ReactNode | - | 自定义关闭图标。 |
| `current` | number | - | 受控当前步骤。 |
| `defaultCurrent` | number | 0 | 初始当前步骤。 |
| `defaultOpen` | boolean | - | 初始打开状态。 |
| `disabledInteraction` | boolean | - | 禁用与目标区域的交互。 |
| `gap` | Gap | - | 目标周围的间隙偏移和半径。 |
| `getPopupContainer` | TriggerProps['getPopupContainer'] \| false | - | 弹层容器解析函数。使用 false 表示内联模式。 |
| `keyboard` | boolean | true | 启用 Escape 和箭头键导航。 |
| `mask` | boolean \| `{ style?: React.CSSProperties; color?: string }` | true | 遮罩配置。 |
| `onChange` | `(current: number) => void` | - | 当前步骤更改时调用。 |
| `onClose` | `(current: number) => void` | - | 引导关闭时调用。 |
| `onFinish` | `() => void` | - | 引导完成后调用。 |
| `onPopupAlign` | TriggerProps['onPopupAlign'] | - | 弹层对齐后调用。 |
| `open` | boolean | - | 受控打开状态。 |
| `placement` | PlacementType | - | 默认面板位置。 |
| `prefixCls` | string | `'rc-tour'` | className 前缀。 |
| `renderPanel` | `(props, current) => ReactNode` | - | 自定义面板渲染器。 |
| `rootClassName` | string | - | 根 className。 |
| `scrollIntoViewOptions` | boolean \| ScrollIntoViewOptions | 中心选项 | 目标滚动行为。 |
| `steps` | TourStepInfo[] | [] | 漫游步骤。 |
| `style` | React.CSSProperties | - | 面板风格。 |
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | 语义化样式。 |
| `zIndex` | number | 1001 | 弹层 z 索引。 |
| 名称 | 类型 | 默认值 | 说明 |
| ----------------------- | ------------------------------------------------------------ | ----------- | ------------------------------------------- |
| `animated` | boolean \| `{ placeholder: boolean }` | false | 启用目标占位动画。 |
| `arrow` | boolean \| `{ pointAtCenter: boolean }` | true | 显示箭头,并可选择指向目标中心。 |
| `builtinPlacements` | TriggerProps['builtinPlacements'] \| function | - | 自定义位置映射。 |
| `className` | string | - | 面板 className。 |
| `classNames` | `Partial<Record<SemanticName, string>>` | - | 语义 className。 |
| `closable` | boolean \| object | - | 关闭按钮配置。 |
| `closeIcon` | React.ReactNode | - | 自定义关闭图标。 |
| `current` | number | - | 受控当前步骤。 |
| `defaultCurrent` | number | 0 | 初始当前步骤。 |
| `defaultOpen` | boolean | - | 初始打开状态。 |
| `disabledInteraction` | boolean | - | 禁用与目标区域的交互。 |
| `gap` | Gap | - | 目标周围的间隙偏移和半径。 |
| `getPopupContainer` | TriggerProps['getPopupContainer'] \| false | - | 弹层容器解析函数。使用 false 表示内联模式。 |
| `keyboard` | boolean | true | 启用 Escape 和箭头键导航。 |
| `mask` | boolean \| `{ style?: React.CSSProperties; color?: string }` | true | 遮罩配置。 |
| `onChange` | `(current: number) => void` | - | 当前步骤更改时调用。 |
| `onClose` | `(current: number) => void` | - | 引导关闭时调用。 |
| `onFinish` | `() => void` | - | 引导完成后调用。 |
| `onPopupAlign` | TriggerProps['onPopupAlign'] | - | 弹层对齐后调用。 |
| `open` | boolean | - | 受控打开状态。 |
| `placement` | PlacementType | - | 默认面板位置。 |
| `prefixCls` | string | `'rc-tour'` | className 前缀。 |
| `renderPanel` | `(props, current) => ReactNode` | - | 自定义面板渲染器。 |
| `rootClassName` | string | - | 根 className。 |
| `scrollIntoViewOptions` | boolean \| ScrollIntoViewOptions | 中心选项 | 目标滚动行为。 |
| `steps` | TourStepInfo[] | [] | 漫游步骤。 |
| `style` | React.CSSProperties | - | 面板风格。 |
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | 语义化样式。 |
| `zIndex` | number | 1001 | 弹层 z 索引。 |

### TourStepInfo

| 名称 | 类型 | 默认值 | 说明 |
| ----------------------- | ------------------------------------------ | --------- | --------------------------- |
| `arrow` | boolean \| `{ pointAtCenter: boolean }` | inherited | 步骤箭头配置。 |
| `className` | string | - | 步骤面板 className。 |
| 名称 | 类型 | 默认值 | 说明 |
| ----------------------- | ------------------------------------------ | --------- | -------------------- |
| `arrow` | boolean \| `{ pointAtCenter: boolean }` | inherited | 步骤箭头配置。 |
| `className` | string | - | 步骤面板 className。 |
| `closable` | boolean \| object | inherited | 步骤关闭按钮配置。 |
| `closeIcon` | React.ReactNode | inherited | 步骤关闭图标。 |
| `description` | React.ReactNode | - | 步骤描述。 |
| `mask` | boolean \| object | inherited | 步骤遮罩配置。 |
| `placement` | PlacementType | inherited | 步骤位置。 |
| `closeIcon` | React.ReactNode | inherited | 步骤关闭图标。 |
| `description` | React.ReactNode | - | 步骤描述。 |
| `mask` | boolean \| object | inherited | 步骤遮罩配置。 |
| `placement` | PlacementType | inherited | 步骤位置。 |
| `scrollIntoViewOptions` | boolean \| ScrollIntoViewOptions | inherited | 步骤滚动行为。 |
| `style` | React.CSSProperties | - | 步骤面板样式。 |
| `target` | HTMLElement \| `() => HTMLElement \| null` | - | 目标元素或解析器。 |
| `title` | React.ReactNode | - | 步骤标题。 |
| `target` | HTMLElement \| `() => HTMLElement \| null` | - | 目标元素或解析器。 |
| `title` | React.ReactNode | - | 步骤标题。 |

## 本地开发

Expand Down
115 changes: 115 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import js from '@eslint/js';
import { defineConfig } from 'eslint/config';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import prettier from 'eslint-config-prettier';
import jest from 'eslint-plugin-jest';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';
import tseslint from 'typescript-eslint';

const tsconfigRootDir = dirname(fileURLToPath(import.meta.url));

export default defineConfig([
{
plugins: {
'@typescript-eslint': tseslint.plugin,
},
},
{
linterOptions: {
reportUnusedDisableDirectives: 'warn',
},
},
{
ignores: [
'node_modules/',
'coverage/',
'es/',
'lib/',
'dist/',
'docs-dist/',
'.docs-dist/',
'.dumi/',
'.doc/',
'.vercel/',
],
},
{
files: ['**/*.{js,jsx,ts,tsx}'],
extends: [
js.configs.recommended,
react.configs.flat.recommended,
react.configs.flat['jsx-runtime'],
prettier,
],
plugins: {
'react-hooks': reactHooks,
},
languageOptions: {
globals: {
...globals.browser,
...globals.node,
},
},
settings: {
react: {
version: 'detect',
},
},
rules: {
'no-async-promise-executor': 'off',
'no-empty-pattern': 'off',
'no-irregular-whitespace': 'off',
'no-prototype-builtins': 'off',
'no-useless-escape': 'off',
'no-extra-boolean-cast': 'off',
'no-undef': 'off',
'no-unused-vars': 'off',
'react/no-find-dom-node': 'off',
'react/display-name': 'off',
'react/no-unknown-property': 'off',
'react/prop-types': 'off',
'react-hooks/exhaustive-deps': 'warn',
'react-hooks/rules-of-hooks': 'error',
},
},
{
files: ['**/*.{ts,tsx}'],
extends: [...tseslint.configs.recommended],
rules: {
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-empty-object-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unsafe-function-type': 'off',
'@typescript-eslint/no-unnecessary-type-constraint': 'off',
'@typescript-eslint/no-unused-vars': 'off',
},
},
{
files: ['src/**/*.{ts,tsx}'],
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir,
},
},
},
{
files: ['tests/**/*.{js,jsx,ts,tsx}', '**/*.{test,spec}.{js,jsx,ts,tsx}'],
extends: [jest.configs['flat/recommended']],
rules: {
'jest/no-disabled-tests': 'off',
'jest/no-done-callback': 'off',
'jest/no-identical-title': 'off',
'jest/expect-expect': 'off',
'jest/no-alias-methods': 'off',
'jest/no-conditional-expect': 'off',
'jest/no-export': 'off',
'jest/no-standalone-expect': 'off',
'jest/valid-expect': 'off',
'jest/valid-title': 'off',
},
},
]);
11 changes: 11 additions & 0 deletions global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/// <reference types="jest" />
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />
/// <reference types="@testing-library/jest-dom" />

declare module '*.css';
declare module '*.less';
declare module 'jsonp';

declare module 'moment/locale/zh-cn';
38 changes: 22 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,29 +47,35 @@
"clsx": "^2.1.1"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
"@rc-component/father-plugin": "^2.2.0",
"@rc-component/np": "^1.0.4",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^15.0.7",
"@types/jest": "^29.5.14",
"@types/minimatch": "^5.1.2",
"@testing-library/react": "^16.3.2",
"@types/jest": "^30.0.0",
"@types/node": "^26.0.1",
"@types/react": "^18.3.31",
"@types/react-dom": "^18.3.7",
"@umijs/fabric": "^4.0.1",
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"cheerio": "1.0.0-rc.12",
"dumi": "^2.4.35",
"eslint": "^8.57.1",
"father": "^4.6.23",
"gh-pages": "^6.3.0",
"prettier": "^3.9.0",
"rc-test": "^7.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"typescript": "^5.9.3",
"cross-env": "^10.1.0",
"dumi": "^2.4.38",
"eslint": "^9.39.4",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-jest": "^29.15.4",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.1.1",
"father": "^4.6.24",
"gh-pages": "^6.3.0",
"globals": "^17.7.0",
"husky": "^9.1.7",
"lint-staged": "^16.4.0"
"lint-staged": "^17.0.8",
"prettier": "^3.9.4",
"rc-test": "^7.1.3",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"typescript": "^6.0.3",
"typescript-eslint": "^8.62.1"
Comment thread
afc163 marked this conversation as resolved.
},
"peerDependencies": {
"react": ">=16.9.0",
Expand Down
2 changes: 1 addition & 1 deletion src/Tour.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const Tour: React.FC<TourProps> = props => {
...restProps
} = props;

const triggerRef = React.useRef<TriggerRef>();
const triggerRef = React.useRef<TriggerRef>(null);

const [mergedCurrent, setMergedCurrent] = useControlledState(
defaultCurrent || 0,
Expand Down
Loading
Loading