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

fix(Tab): calculate use wrapper width instead of navbar width #1385

Merged
merged 2 commits into from
Nov 27, 2019
Merged

fix(Tab): calculate use wrapper width instead of navbar width #1385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad63384
fix(Tab): calculate use wrapper width instead of navbar width
byeval Nov 26, 2019
df704d5
fix(Tab): keep navbar ref
byeval Nov 27, 2019
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
2 changes: 1 addition & 1 deletion docs/tab/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Fusion 提供了三级选项卡，分别用于不同的场景。
| navClassName | 导航条的自定义样式类 | String | - |
| contentStyle | 内容区容器的自定义样式 | Object | - |
| contentClassName | 内容区容器的自定义样式类 | String | - |
| extra | 导航栏附加内容 | ReactNode | - |
| extra | 导航栏附加内容, 请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。| ReactNode | - |
| onClick | 点击单个选项卡时触发的回调<br><br>**签名**:<br>Function() => void | Function | () => {} |
| onChange | 选项卡发生切换时的事件回调<br><br>**签名**:<br>Function(key: String/Number) => void<br>**参数**:<br>_key_: {String/Number} 改变后的 key | Function | () => {} |
| onClose | 选项卡被关闭时的事件回调<br><br>**签名**:<br>Function(key: String/Number) => void<br>**参数**:<br>_key_: {String/Number} 关闭的选项卡的 key | Function | () => {} |
Expand Down
11 changes: 3 additions & 8 deletions src/tab/tabs/nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,11 @@ class Nav extends React.Component {
// TEMP: 这里会受 Animate 影响，re-render 过程中 this.nav 实际上指向的是上次的 tabList 元素，建议暂时关闭 animation 解决
const navWH = getOffsetWH(this.nav, tabPosition);
const wrapperWH = getOffsetWH(this.wrapper, tabPosition);
const navbarWH = getOffsetWH(this.navbar, tabPosition);
const minOffset = wrapperWH - navWH;

let next;
let prev;
if (minOffset >= 0 || navWH <= navbarWH) {
if (minOffset >= 0 || navWH <= wrapperWH) {
next = false;
prev = false;
this.setOffset(0, false); // no need to check slide again since this call is invoked from inside setSlideBtn
Expand All @@ -248,6 +247,7 @@ class Nav extends React.Component {
prev = true;
next = true;
}

if ((prev || next) !== this.state.showBtn) {
this.setState({
showBtn: prev || next,
Expand Down Expand Up @@ -661,12 +661,7 @@ class Nav extends React.Component {
}
}

const navbarCls = classnames(
{
[`${prefix}tabs-bar`]: true,
},
className
);
const navbarCls = classnames(`${prefix}tabs-bar`, className);

return (
<div
Expand Down