feat[float-button]: add clickOutAutoClose feature #39501
Conversation
|
feature branch please |
|
冲突了哈，而且把 master 的 diff 带过来了，建议清理一下分支，把 feature 作为上游分支 |
好的 |
BoyYangzai
force-pushed
the
feat-floatbutton
branch
from
638906a
to
a3978a7
Compare
|
|
|
@li-jia-nan @Thulof 按照要求修改了一版，并修复了一个错误-点击其他地方自动关闭时，其他地方不包括 |
|
大概看了一下，你的实现太复杂了，这个需求应该用不到 const onClick = useCallback(
(e: MouseEvent) => {
const target = e.target;
if (floatButtonGroupRef.current?.contains(target as Node)) {
return;
}
if (clickOutAutoClose && trigger === 'click') {
setOpen(false);
}
},
[clickOutAutoClose, trigger],
);
useEffect(() => {
document.addEventListener('click', onClick);
return () => {
document.removeEventListener('click', onClick);
};
}, []);大概思路就这样，用 |
Codecov ReportBase: 100.00% // Head: 100.00% // No change to project coverage 👍
Additional details and impacted files@@ Coverage Diff @@
## feature #39501 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 556 557 +1
Lines 9562 9593 +31
Branches 2711 2713 +2
=========================================
+ Hits 9562 9593 +31
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
|
Please provide test case |
|
可以作为默认能力，不提供 API |
或许作为api拓展性更强一点？将点击外侧自动关闭默认设置为true，可以关闭？ |
|
@li-jia-nan @Thulof @MadCcc const hoverTypeAction = {
onMouseEnter() {
setOpen(true);
onOpenChange?.(true);
},
onMouseLeave() {
setOpen(false);
onOpenChange?.(false);
},
};
+ const hoverAction = useMemo(() => {
+ if (trigger === 'hover') {
+ return hoverTypeAction
+ }
+ }, [trigger]);
const openChange = () => {
setOpen((prevState) => {
onOpenChange?.(!prevState);
return !prevState;
});
};
const onClick = useCallback(
(e: MouseEvent) => {
if (trigger !== 'click') return;
const target = e.target;
if (floatButtonGroupRef.current!.contains(target as Node)) {
+ if (floatButtonRef.current!.contains(target as Node)) {
+ openChange()
+ return;
} else {
return;
}
}
if (clickOutAutoClose) {
setOpen(false);
}
},
[clickOutAutoClose, trigger],
);
useEffect(() => {
document.addEventListener('click', onClick);
return () => {
document.removeEventListener('click', onClick);
}; |
参考一下所有有打开弹层的组件，比如 Select、Dropdown，默认都是点击其他区域可以关闭。这个行为可以保持一致，先不提供 API 也 OK |
|
另外测试还是要补补全 |
codeball-ai-writer
bot
added
codeball:needs-careful-review
and removed
codeball:needs-review
labels
👌 |
|
@li-jia-nan @MadCcc 加上了test，rename了一下名称，默认开启 |
|
@li-jia-nan @MadCcc 都已经OK了，辛苦最后review一次了(应该是最后一次 qwq 修复了lint |
|
@li-jia-nan 这次应该没有问题了 |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
FloatButton.Groupclick on the external area to collapse the feature #39493💡 Background and solution
看到 issue 里有这个需求，就写了第一版
加了一个
clickOutAutoClose开启这个功能辛苦维护者 review 一下
📝 Changelog
☑️ Self-Check before Merge