feat(Grid): support rtl

Author: youluna

src/form/item.jsx

@@ -18,6 +18,7 @@ export default class Item extends React.Component {
          * 样式前缀
          */
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         /**
          * label 标签的文本
          */

src/grid/col.jsx

@@ -14,6 +14,7 @@ export default class Col extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 列内容
@@ -83,7 +84,7 @@ export default class Col extends Component {
         /* eslint-disable no-unused-vars */
         const {
             prefix, pure, span, offset, fixedSpan, fixedOffset, hidden, align,
-            xxs, xs, s, m, l, xl, component: Tag, className, children, ...others
+            xxs, xs, s, m, l, xl, component: Tag, className, children, rtl, ...others
         } = this.props;
         /* eslint-enable no-unused-vars */
 
@@ -127,6 +128,7 @@ export default class Col extends Component {
 
         return (
             <Tag
+                dir={rtl ? 'rtl' : 'ltr'}
                 role="gridcell"
                 className={classes}
                 {...others}

src/grid/main.scss

@@ -109,3 +109,5 @@
 
 @include visible-hidden-all-points();
 @include visible-hidden-all-points-row();
+
+@import "./rtl.scss";

src/grid/row.jsx

@@ -10,6 +10,7 @@ export default class Row extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         style: PropTypes.object,
         /**
@@ -67,7 +68,7 @@ export default class Row extends Component {
         /* eslint-disable no-unused-vars */
         const {
             prefix, pure, wrap, fixed, gutter, fixedWidth, align, justify,
-            hidden, className, component: Tag, children, ...others
+            hidden, className, component: Tag, children, rtl, ...others
         } = this.props;
         /* eslint-enable no-unused-vars */
 
@@ -126,6 +127,7 @@ export default class Row extends Component {
 
         return (
             <Tag
+                dir={rtl ? 'rtl' : 'ltr'}
                 role="row"
                 className={newClassName}
                 {...others}

src/grid/rtl.scss

@@ -0,0 +1,43 @@
+
+// 响应列的水平位置偏移
+@mixin make-offset-rtl() {
+    @for $i from 1 through $grid-columns {
+        .#{$css-prefix}col-offset-#{$i}[dir="rtl"] {
+            margin-right: percentage($i / $grid-columns);
+            margin-left: auto;
+        }
+    }
+    @each $breakpoint in $breakpoints {
+        $name: #{nth($breakpoint, 1)};
+        @include breakpoint($name) {
+            @for $j from 1 through $grid-columns {
+                .#{$css-prefix}col-#{$name}-offset-#{$j}[dir="rtl"] {
+                    margin-right: percentage($j / $grid-columns);
+                    margin-left: auto;
+                }
+            }
+        }
+    }
+}
+
+// 固定列的水平位置偏移
+@mixin make-offset-fixed-rtl() {
+    @for $i from 1 through $grid-columns-fixed {
+        .#{$css-prefix}col-offset-fixed-#{$i}[dir="rtl"] {
+            margin-right: $i * $grid-col-fixed-width;
+            margin-left: auto;
+        }
+    }
+    @each $breakpoint in $breakpoints {
+        $name: #{nth($breakpoint, 1)};
+        @for $j from 1 through $grid-columns-fixed {
+            .#{$css-prefix}col-offset-fixed-#{$name}-#{$j}[dir="rtl"] {
+                margin-right: $j * $grid-col-fixed-width;
+                margin-left: auto;
+            }
+        }
+    }
+}
+
+@include make-offset-rtl();
+@include make-offset-fixed-rtl();