feat: support inline mode #74
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
😭 Deploy PR Preview 660aac7 failed. Build logs
🤖 By surge-preview |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #74 +/- ##
==========================================
- Coverage 99.47% 99.01% -0.46%
==========================================
Files 9 9
Lines 190 203 +13
Branches 86 94 +8
==========================================
+ Hits 189 201 +12
- Misses 1 2 +1 ☔ View full report in Codecov by Sentry. |
|
Warning Rate limit exceeded@zombieJ has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 23 minutes and 29 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
Walkthrough本次更新在文档与核心组件中引入了新的示例和功能调整。新增的 demo 文件配置了前置信息并引用了示例组件，而示例组件中实现了基于按钮触发的 Tour 交互。核心组件中新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant App as App组件
participant Tour as Tour组件
participant Mask as Mask/Portal组件
participant Hook as useTarget
User->>App: 点击 "Show" 按钮
App->>Tour: 将 open 状态设为 true
Tour->>Mask: 渲染提示框，传递 getPopupContainer 与 inlineMode 信息
Mask->>Hook: 计算定位，处理 inline 模式调整
Hook-->>Mask: 返回计算后位置
Mask-->>Tour: 显示交互式指引步骤
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (9)
docs/examples/inline.tsx (4)
19-19: 移除注释掉的代码为了保持代码整洁，建议移除未使用的注释代码。
- // justifyContent: 'right',
42-42: 移除注释掉的样式代码为了保持代码整洁，建议移除未使用的注释样式。
- // style={{ background: 'red' }}
25-33: 增加无障碍属性按钮缺少适当的 ARIA 属性和角色定义，这对于屏幕阅读器用户来说可能不够友好。
<button className="ant-target" ref={createBtnRef} + aria-label="显示引导" + role="button" onClick={() => { setOpen(true); }} > Show </button>
45-46: 国际化文案建议将硬编码的中文文案提取到国际化配置中。
{ - title: '创建', - description: '创建一条数据', + title: intl.formatMessage({ id: 'tour.create.title' }), + description: intl.formatMessage({ id: 'tour.create.description' }),src/interface.ts (2)
56-56: 添加属性文档注释为新增的
defaultOpen属性添加 JSDoc 注释，说明其用途和默认值。+ /** 设置 Tour 的默认展开状态 @default false */ defaultOpen?: boolean;
80-80: 补充 getPopupContainer 文档为
getPopupContainer属性添加详细的文档注释，说明false值的特殊含义。+ /** + * 指定弹出层的容器。当设置为 false 时启用内联模式， + * 弹出层将相对于父容器定位 + * @default () => document.body + */ getPopupContainer?: TriggerProps['getPopupContainer'] | false;src/Mask.tsx (2)
52-57: 提取浏览器检测逻辑建议将 Safari 检测逻辑移至单独的工具函数，以提高代码的可维护性和可测试性。
+// utils/browser.ts +export const isSafari = typeof navigator !== 'undefined' && + /^((?!chrome|android).)*safari/i.test(navigator.userAgent); +// Mask.tsx - const isSafari = - typeof navigator !== 'undefined' && - /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + const isSafari = utils.isSafari;🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 56-56: src/Mask.tsx#L56
Added line #L56 was not covered by tests
144-145: 简化遮罩尺寸计算建议使用 CSS 变量来简化遮罩尺寸的计算逻辑。
+ const maskStyle = { + '--mask-top': `${pos.top}px`, + '--mask-left': `${pos.left}px`, + '--mask-width': `${pos.width}px`, + '--mask-height': `${pos.height}px`, + }; <rect {...COVER_PROPS} x="0" y={pos.top + pos.height} width="100%" - height={`calc(100% - ${pos.top + pos.height}px)`} + height="calc(100% - var(--mask-top) - var(--mask-height))" /> <rect {...COVER_PROPS} x={pos.left + pos.width} y="0" - width={`calc(100% - ${pos.left + pos.width}px)`} + width="calc(100% - var(--mask-left) - var(--mask-width))" height="100%" />Also applies to: 151-153
src/Tour.tsx (1)
118-130: 建议完善内联模式的文档说明新增的内联模式（
getPopupContainer === false）是一个重要的功能变更，建议：
- 在组件文档中详细说明这个特性
- 添加示例代码展示如何使用内联模式
- 说明内联模式与默认模式的区别和使用场景
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
docs/demo/inline.md(1 hunks)docs/examples/inline.tsx(1 hunks)src/Mask.tsx(4 hunks)src/Tour.tsx(7 hunks)src/hooks/useTarget.ts(2 hunks)src/interface.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/demo/inline.md
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/hooks/useTarget.ts
[warning] 61-62: src/hooks/useTarget.ts#L61-L62
Added lines #L61 - L62 were not covered by tests
src/Mask.tsx
[warning] 56-56: src/Mask.tsx#L56
Added line #L56 was not covered by tests
🔇 Additional comments (3)
src/hooks/useTarget.ts (1)
59-66: 添加单元测试新增的内联模式相关代码缺少测试覆盖，建议添加相应的单元测试。
请添加以下测试场景：
- 内联模式启用时的位置计算
- placeholderRef 为 null 的情况
- parentElement 为 null 的情况
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 61-62: src/hooks/useTarget.ts#L61-L62
Added lines #L61 - L62 were not covered by testssrc/Mask.tsx (1)
52-57: 添加 Safari 相关测试Safari 特定的代码路径缺少测试覆盖，建议添加相应的单元测试。
请添加以下测试场景：
- Safari 环境下的遮罩尺寸计算
- 非 Safari 环境下的遮罩尺寸计算
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 56-56: src/Mask.tsx#L56
Added line #L56 was not covered by testssrc/Tour.tsx (1)
41-41: 新增的 defaultOpen 属性实现得当！使用
useMergedState正确处理了受控与非受控模式的状态管理，符合 React 最佳实践。Also applies to: 70-76
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/index.test.tsx (1)
1201-1227: 测试用例实现得很好！测试用例清晰地验证了 Tour 组件的内联渲染功能。代码结构良好，断言明确。
建议考虑添加以下边缘情况的测试：
- 当目标按钮不存在时的行为
- 当容器尺寸变化时的行为
- 当有多个 Tour 步骤时的内联渲染
it('inline', async () => { const Demo = () => { const btnRef = useRef<HTMLButtonElement>(null); + const [show, setShow] = useState(true); return ( <div className="bamboo"> - <button ref={btnRef}>按钮</button> + {show && <button ref={btnRef}>按钮</button>} <Tour open getPopupContainer={false} steps={[ { title: '创建', description: <div className="little" />, target: () => btnRef.current, }, + { + title: '第二步', + description: <div className="second" />, + target: () => btnRef.current, + }, ]} /> + <button onClick={() => setShow(false)}>移除目标</button> </div> ); }; render(<Demo />); // 验证初始渲染 const container = document.querySelector('.bamboo'); expect(container.querySelector('.little')).toBeTruthy(); + // 验证多步骤 + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(container.querySelector('.second')).toBeTruthy(); + + // 验证目标消失的情况 + fireEvent.click(screen.getByRole('button', { name: '移除目标' })); + expect(container.querySelector('.little')).toBeTruthy(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useTarget.ts(2 hunks)tests/index.test.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useTarget.ts
Summary by CodeRabbit
文档更新
新功能
测试