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

Implemented rtl layout support #230

Merged
merged 18 commits into from
Nov 13, 2019
Merged

Conversation

saeedrahimi
Copy link
Contributor

Hi there.
I've added rtl layout support to this component.
changes the tab direction with direction='rtl' property

@vercel
Copy link

vercel bot commented Oct 12, 2019

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/react-component/tabs/7crz21fiq
🌍 Preview: https://tabs-git-fork-saeedrahimi-support-rtl.react-component.now.sh

@coveralls
Copy link

coveralls commented Oct 12, 2019

Coverage Status

Coverage increased (+0.05%) to 72.576% when pulling e80a75c on saeedrahimi:support-rtl into 0c8ed2d on react-component:master.

@zombieJ
Copy link
Member

zombieJ commented Oct 14, 2019

@zombieJ
Copy link
Member

zombieJ commented Oct 16, 2019

Still failed. You can view coverage link to see the coverage diff: https://coveralls.io/builds/26294799

截屏2019-10-16上午10 40 42

examples/rtl.js Outdated
<InkTabBar
onTabClick={this.onTabClick}
tabBarGutter={30}
direction="rtl"
Copy link
Member

Choose a reason for hiding this comment

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

Should we use context to get the direction instead of both Tabs and InkTabBar should have direction props?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

tabs/src/Tabs.js

Lines 182 to 191 in 9dcbe12

const tabBar = React.cloneElement(this.tabBar, {
prefixCls,
navWrapper,
key: 'tabBar',
onKeyDown: this.onNavKeyDown,
tabBarPosition,
onTabClick: this.onTabClick,
panels: props.children,
activeKey: this.state.activeKey,
});

I found that i can pass direction to all kind of tab-bars in this part of code

Copy link
Contributor Author

Choose a reason for hiding this comment

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

added.

direction: this.props.direction,

@saeedrahimi
Copy link
Contributor Author

@zombieJ all done

@zombieJ
Copy link
Member

zombieJ commented Oct 24, 2019

LGTM
@afc163 help to double confirm

@saeedrahimi
Copy link
Contributor Author

@afc163 , @zombieJ could you approve these changes? I need them in ant-design RTL implementation

@zombieJ zombieJ merged commit d15d5ef into react-component:master Nov 13, 2019
@zombieJ
Copy link
Member

zombieJ commented Nov 13, 2019

+ rc-tabs@9.7.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants