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.

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

feat: keyboard short cut #2418

Merged
merged 26 commits into from
Aug 29, 2024
Merged

Conversation

Nathon2Y
Copy link
Contributor

@Nathon2Y Nathon2Y commented Aug 16, 2024

中文模板 / Chinese Template

What kind of change does this PR introduce? (check at least one)

  • Feature

PR description

Changelog

🇨🇳 Chinese

  • Feat:添加快捷键组件,支持用户自定义快捷键组合并触发回调

🇺🇸 English

  • Feat: create KeyboardShortCut,user can define shortcut key combinations and trigger callbacks.

Checklist

  • Test or no need
  • Document or no need
  • Changelog or no need

Other

  • Skip Changelog

Additional information

Copy link

codesandbox-ci bot commented Aug 16, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 025e50b:

Sandbox Source
pr-story Configuration

@DaiQiangReal
Copy link
Collaborator

changelog 填填

return {
...super.adapter,
notifyClick: () => {
this.props.onClick();
Copy link
Collaborator

Choose a reason for hiding this comment

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

onClick 判空

this.props.onClick();
},
getListenerTarget: () => {
return this.props.getListenerTarget();
Copy link
Collaborator

Choose a reason for hiding this comment

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

同上

@Nathon2Y Nathon2Y changed the title Feat/keyboard short cut feat: keyboard short cut Aug 20, 2024

### 不可用

设定 `disabled` 属性为 `true`
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
设定 `disabled` 属性为 `true`
设定 `disabled` 属性为 `true` 时,不监听 hotKeys。

```
### 基本

基本使用,通过`hotKeys`传入快捷键组合
Copy link
Collaborator

Choose a reason for hiding this comment

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

基本使用,通过hotKeys传入快捷键组合,通过 onClick 绑定快捷键处理函数,作出响应动作。

按下 Ctrl + Shift + A,使得 count + 1。默认在 body 监听,全局生效。

| content | 设置显示内容 | string[] | - |
| onClick | 快捷键触发函数 | () => void | - |
| clickable | 设置函数是否可以点击触发 | boolean | false |
| render | 覆盖组件渲染 | () => ReactNode | |
Copy link
Collaborator

Choose a reason for hiding this comment

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

ReactNode 支持吗?

```

### 修改监听挂载DOM
通过`getListenerTarget`修改快捷键监听挂载的DOM
Copy link
Collaborator

Choose a reason for hiding this comment

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

快捷键默认在 body 监听,通过 getListenerTarget 修改快捷键监听挂载的 DOM。

return;
}
if (keysPressed.every(Boolean)) {
event.preventDefault();
Copy link
Collaborator

Choose a reason for hiding this comment

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

preventDefault 的效果是怎么样的?

会导致其他同名快捷键(比如,ctrl+c)失效吗?如果是这样的话,建议在文档里说明。

如果与全局快捷键冲突,会导致全局快捷键不可用。建议不要占用全局的快捷键。

const { hotKeys, content, onClick, clickable, disabled, render, getListenerTarget, className, style, ...rest } = this.props;

if (render !== null) {
return render();
Copy link
Collaborator

Choose a reason for hiding this comment

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

如果传入了一个 render,用户的 clickable 传入了 true 不生效是符合预期的吗?

image

@DaiQiangReal DaiQiangReal merged commit 4af3032 into DouyinFE:release Aug 29, 2024
8 checks passed
Copy link

cypress bot commented Aug 29, 2024

semi-design    Run #2770

Run Properties:  status check passed Passed #2770  •  git commit 4af3032a01: Merge pull request #2418 from Nathon2Y/feat/KeyboardShortCut
Project semi-design
Branch Review release
Run status status check passed Passed #2770
Run duration 09m 30s
Commit git commit 4af3032a01: Merge pull request #2418 from Nathon2Y/feat/KeyboardShortCut
Committer 代强
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 11
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 272
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

@YyumeiZhang YyumeiZhang added the new component add new component in semi design label Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new component add new component in semi design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants