-
-
Notifications
You must be signed in to change notification settings - Fork 47.5k
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
为antd的editable-card类型的TabPane增加不可删除属性 #4807
Conversation
@lixiaoyang1992, thanks for your PR! By analyzing the history of the files in this pull request, we identified @afc163, @benjycui and @yesmeck to be potential reviewers. |
需要配合使用:react-component/tabs#50 |
这个需要 rc-tabs 那边合并先吧,我没有对应的 npm 权限 @afc163 |
@lixiaoyang1992 等rc-tabs那边发布了,这边的依赖应该需要升个版本~ |
components/tabs/index.tsx
Outdated
type="close" | ||
onClick={e => this.removeTab(child.key, e)} | ||
/> | ||
) : null; | ||
childrenWithClose.push(cloneElement(child, { | ||
tab: ( | ||
<div> | ||
{child.props.tab} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
把 unclosable 的 className 加到这里。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
但是样式中的一个hover是针对rc-tabs那里的,在这边没法给tab样式
const key = child.key;
let cls = activeKey === key ? `${prefixCls}-tab-active` : '';
cls += ` ${prefixCls}-tab`;
let events = {};
if (child.props.disabled) {
cls += ` ${prefixCls}-tab-disabled`;
} else {
events = {
onClick: this.onTabClick.bind(this, key),
};
}
const ref = {};
if (activeKey === key) {
ref.ref = 'activeTab';
}
rst.push(<div
role="tab"
aria-disabled={child.props.disabled ? 'true' : 'false'}
aria-selected={activeKey === key ? 'true' : 'false'}
{...events}
className={cls}
key={key}
{...ref}
>
{child.props.tab}
</div>);
这里不处理的话,叉号不显示的时候,tab宽度是不应该变窄的
&&-editable-card > &-bar &-tab:not(&-tab-active):not(&-tab-uncloseable):hover {
padding-left: 8px;
padding-right: 8px;
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
确实 tab 上加 className 会比较麻烦。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
根据这个思路,修改完了
closeable => closable |
components/tabs/index.tsx
Outdated
childrenWithClose.push(cloneElement(child, { | ||
tab: ( | ||
<div> | ||
<div className={ closable ? undefined : `${prefixCls}-tab-unclosable` }> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
className={}
前后不加空格。
Close: #4286 |
部分 TabPane 可以删除,部分不可以并且不显示删除按钮