feat(Nav): support rtl

alibaba-fusion · Nov 28, 2018 · 923593a · 923593a
1 parent 5241d7b
commit 923593a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 3 deletions.
diff --git a/docs/nav/demo/basic.md b/docs/nav/demo/basic.md
@@ -23,7 +23,7 @@ const { Item, SubNav } = Nav;
 const header = <span className="fusion">FUSION</span>;
 const footer = <a className="login-in" href="javascript:;">Login in</a>;
 
-ReactDOM.render((
+ReactDOM.render(
     <Nav className="basic-nav" direction="hoz" type="primary" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType="hover">
         <Item key="home">Home</Item>
         <SubNav label="Component" selectable>
@@ -32,7 +32,7 @@ ReactDOM.render((
         </SubNav>
         <Item key="document">Document</Item>
     </Nav>
-), mountNode);
+, mountNode);
 ````
 
 ````css

diff --git a/src/nav/main.scss b/src/nav/main.scss
@@ -337,3 +337,5 @@
         }
     }
 }
+
+@import "./rtl.scss";
diff --git a/src/nav/nav.jsx b/src/nav/nav.jsx
@@ -12,6 +12,7 @@ class Nav extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         style: PropTypes.object,
         /**
@@ -161,7 +162,7 @@ class Nav extends Component {
 
     render() {
         // eslint-disable-next-line
-        const {prefix, className, style, children, type, direction, activeDirection, mode, triggerType, inlineIndent, openMode, popupAlign, popupClassName, iconOnly, hasArrow, hasTooltip, popupProps, ...others} = this.props;
+        const {prefix, className, style, children, type, direction, activeDirection, mode, triggerType, inlineIndent, openMode, popupAlign, popupClassName, iconOnly, hasArrow, hasTooltip, popupProps, rtl, ...others} = this.props;
 
         let realActiveDirection = activeDirection;
         if (realActiveDirection &&

diff --git a/src/nav/rtl.scss b/src/nav/rtl.scss
@@ -0,0 +1,89 @@
+@import "../core/index-noreset.scss";
+
+
+@mixin nav-border-fix-rtl($border-width) {
+    &.#{$css-prefix}ver {
+        &.#{$css-prefix}left #{$nav-prefix}-item:before {
+            right: - $border-width;
+        }
+
+        &.#{$css-prefix}right #{$nav-prefix}-item:before {
+            left: - $border-width;
+        }
+    }
+}
+
+
+#{$nav-prefix}[dir="rtl"] {
+    #{$nav-prefix}-icon.#{$css-prefix}icon {
+        @include icon-size(
+            $size: $nav-icon-self-size,
+            $marginRight: 0,
+            $marginLeft: $nav-icon-self-margin
+
+        );
+    }
+
+    &.#{$css-prefix}hoz {
+
+        #{$menu-prefix}-header {
+            float: right;
+        }
+
+        #{$menu-prefix}-footer {
+            float: left;
+        }
+
+        #{$nav-prefix}-item:before {
+            width: 0;
+            left: 50%;
+        }
+
+
+        .#{$css-prefix}selected#{$nav-prefix}-item:before {
+            width: 100%;
+            left: auto;
+            right: 0;
+        }
+    }
+
+    @include nav-border-fix-rtl(
+        $popup-local-border-width
+    );
+
+
+    &.#{$css-prefix}primary {
+        @include nav-border-fix-rtl(
+            $nav-primary-border-width
+        );
+
+    }
+
+    &.#{$css-prefix}secondary {
+        @include nav-border-fix-rtl(
+            $nav-secondary-border-width
+        );
+    }
+
+    #{$nav-prefix}.#{$css-prefix}line {
+        &.#{$css-prefix}ver {
+            border-top-color: $nav-line-bg-color;
+            border-right-color: $nav-line-bg-color;
+            border-left-color: none;
+            border-bottom-color: $nav-line-bg-color;
+        }
+    }
+
+    &.#{$css-prefix}icon-only {
+
+        #{$nav-prefix}-icon.#{$css-prefix}icon,
+        #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon,
+        #{$nav-prefix}-item.#{$css-prefix}opened #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon-arrow-down {
+            @include icon-size(
+                $size: $nav-icon-only-font-size,
+                $marginLeft: 0,
+                $marginRight: (18px - $nav-icon-only-font-size) / 2
+            );
+        }
+    }
+}