Merge pull request #129 from alibaba-fusion/hotfix/rtl-demo

docs(ConfigProvider): fix rtl demo
alibaba-fusion · Dec 29, 2018 · 352e5ae · 352e5ae
2 parents 7882d35 + 759cc5e
commit 352e5ae
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/docs/config-provider/demo/rtl.md b/docs/config-provider/demo/rtl.md
@@ -20,7 +20,8 @@ import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, Time
 const { SubMenu, Item, Group, Divider } = Menu;
 const RangePicker = DatePicker.RangePicker;
 
-ConfigProvider.setDirection('rtl');
+// Set global direction to 'rtl'. This affects the whole page
+// ConfigProvider.setDirection('rtl');
 
 class Demo extends React.Component {
     constructor(props) {
@@ -50,18 +51,18 @@ class Demo extends React.Component {
     render() {
 
         return (
-            <div dir={this.state.dir}>
+            <div>
                 <div className="change-rtl">
                     <span style={{ marginRight: 16 }}>Change direction of components: </span>
                     <Radio.Group shape="button" size="large" value={this.state.dir} onChange={this.changeDir}>
-                        <Radio key="en" value="rtl">RTL</Radio>
-                        <Radio key="cn" value="ltr">LTR</Radio>
+                        <Radio key="rtl" value="rtl">RTL</Radio>
+                        <Radio key="ltr" value="ltr">LTR</Radio>
                     </Radio.Group>
                 </div>
                 <br />
                 <hr />
                 <ConfigProvider rtl={this.state.dir === 'rtl'}>
-                    <div className="locale-components">
+                    <div className="locale-components" dir={this.state.dir}>
                         <Button type="primary" onClick={this.showDialog}>Show Dialog</Button>
                         <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />
                         <RangePicker showTime/>

diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "eslint": "^4.19.1",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-markdown": "^1.0.0-beta.6",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-react": "7.11.1",
     "expect.js": "^0.3.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "fast-sass-loader": "^1.2.5",

diff --git a/src/nav/rtl.scss b/src/nav/rtl.scss
@@ -5,10 +5,12 @@
     &.#{$css-prefix}ver {
         &.#{$css-prefix}left #{$nav-prefix}-item:before {
             right: - $border-width;
+            left: auto;
         }
 
         &.#{$css-prefix}right #{$nav-prefix}-item:before {
             left: - $border-width;
+            right: auto;
         }
     }
 }