feat(Pagination): support rtl

alibaba-fusion · Nov 12, 2018 · d34959c · d34959c
1 parent 1e56ef1
commit d34959c
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 6 deletions.
diff --git a/src/pagination/main.scss b/src/pagination/main.scss
@@ -2,6 +2,7 @@
 
 @import "scss/variable";
 @import "scss/mixin";
+@import "./rtl.scss";
 
 #{$pagination-prefix} {
     @include box-sizing;
@@ -138,6 +139,7 @@
 
     &.#{$css-prefix}small {
         @include pagination-size(
+            'ltr',
             $itemSplit: $pagination-small-item-split,
             $itemPaddingLeftRight: $s-2 - 2px,
             $ellipsisSize: $pagination-small-ellipsis-size,
@@ -168,6 +170,7 @@
 
     &.#{$css-prefix}medium {
         @include pagination-size(
+            'ltr',
             $itemSplit: $pagination-item-split,
             $itemPaddingLeftRight: $s-3 - 2px,
             $ellipsisSize: $pagination-ellipsis-size,
@@ -198,6 +201,7 @@
 
     &.#{$css-prefix}large {
         @include pagination-size(
+            'ltr',
             $itemSplit: $pagination-large-item-split,
             $itemPaddingLeftRight: $s-4 - 1px,
             $ellipsisSize: $pagination-large-ellipsis-size,

diff --git a/src/pagination/pagination.jsx b/src/pagination/pagination.jsx
@@ -19,6 +19,7 @@ class Pagination extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 自定义国际化文案对象
@@ -118,6 +119,7 @@ class Pagination extends Component {
     static defaultProps = {
         prefix: 'next-',
         pure: false,
+        rtl: false,
         locale: zhCN.Pagination,
         type: 'normal',
         shape: 'normal',
@@ -247,7 +249,7 @@ class Pagination extends Component {
     }
 
     renderPageFirst(current) {
-        const { prefix, size, shape, locale } = this.props;
+        const { prefix, size, shape, locale, rtl } = this.props;
 
         const isFirst = current <= 1;
         const props = {
@@ -260,9 +262,11 @@ class Pagination extends Component {
             onClick: this.onPageItemClick.bind(this, current - 1)
         };
 
+        const icon = rtl ?  <Icon type="arrow-right" /> :  <Icon type="arrow-left" />;
+
         return (
             <Button {...props}>
-                <Icon type="arrow-left" />
+                {icon}
                 {shape === 'arrow-only' ||
                  shape === 'arrow-prev-only' ||
                  shape === 'no-border' ?  '' : locale.prev}
@@ -271,7 +275,7 @@ class Pagination extends Component {
     }
 
     renderPageLast(current, totalPage) {
-        const { prefix, size, shape, locale } = this.props;
+        const { prefix, size, shape, locale, rtl } = this.props;
 
         const isLast = current >= totalPage;
         const props = {
@@ -284,11 +288,13 @@ class Pagination extends Component {
             onClick: this.onPageItemClick.bind(this, current + 1)
         };
 
+        const icon = rtl ?  <Icon type="arrow-left" /> :  <Icon type="arrow-right" />;
+
         return (
             <Button {...props}>
                 {shape === 'arrow-only' ||
                  shape === 'no-border' ? '' : locale.next}
-                <Icon type="arrow-right" />
+                {icon}
             </Button>
         );
     }
@@ -464,7 +470,7 @@ class Pagination extends Component {
     render() {
         /* eslint-disable no-unused-vars */
         const {
-            prefix, pure, type, size, shape, className, total, totalRender,
+            prefix, pure, rtl, type, size, shape, className, total, totalRender,
             pageSize, pageSizeSelector, pageSizeList, pageSizePosition, useFloatLayout, onPageSizeChange,
             hideOnlyOnePage, showJump, locale, current, defaultCurrent, pageShowCount, pageNumberRender,
             link, onChange, ...others
@@ -488,6 +494,10 @@ class Pagination extends Component {
             [className]: !!className
         });
 
+        if (rtl) {
+            others.dir = 'rtl';
+        }
+
         const buildComponent = (...coms) => (
             <div className={classes} {...others}>
                 {isStart && sizeSelector}

diff --git a/src/pagination/rtl.scss b/src/pagination/rtl.scss
@@ -0,0 +1,100 @@
+#{$pagination-prefix}[dir="rtl"] {
+
+    #{$pagination-prefix}{
+        &-total {
+            margin-right: 0;
+            margin-left: $s-4;
+        }
+
+        &-jump {
+            &-go {
+                margin-left: 0;
+                margin-right: $s-1;
+            }
+        }
+
+        &-size-selector {
+
+            &-title {
+                margin-right: 0;
+                margin-left: $pagination-size-selector-title-margin-right;
+            }
+
+            &-btn.#{$css-prefix}btn-text {
+                & + #{$pagination-prefix}-size-selector-btn {
+                    border-left: none;
+                    border-right: $line-1 solid $color-line1-2;
+                }
+            }
+        }
+
+        &-pages + #{$pagination-prefix}-size-selector,
+        &-size-selector + #{$pagination-prefix}-pages {
+            margin-left: 0;
+            margin-right: $s-10;
+        }
+    }
+
+    &.#{$css-prefix}start {
+        #{$pagination-prefix}-pages {
+            float: left;
+        }
+        #{$pagination-prefix}-size-selector {
+            float: right;
+        }
+    }
+
+    &.#{$css-prefix}end {
+        #{$pagination-prefix}-pages {
+            float: right;
+        }
+        #{$pagination-prefix}-size-selector {
+            float: left;
+        }
+    }
+
+    &.#{$css-prefix}small {
+        @include pagination-size(
+            'rtl',
+            $itemSplit: $pagination-small-item-split,
+            $itemPaddingLeftRight: $s-2 - 2px,
+            $ellipsisSize: $pagination-small-ellipsis-size,
+            $totalFontSize: $pagination-small-total-font-size,
+            $currentFontSize: $pagination-small-current-font-size,
+            $otherFontSize: $pagination-small-jump-font-size,
+            $pageHeihgt: $form-element-small-height,
+            $numberPaddingLeftRight: $pagination-small-size-selector-number-padding,
+            $inputWidth: $pagination-small-input-width
+        );
+    }
+
+    &.#{$css-prefix}medium {
+        @include pagination-size(
+            'rtl',
+            $itemSplit: $pagination-item-split,
+            $itemPaddingLeftRight: $s-3 - 2px,
+            $ellipsisSize: $pagination-ellipsis-size,
+            $totalFontSize: $pagination-total-font-size,
+            $currentFontSize: $pagination-current-font-size,
+            $otherFontSize: $pagination-jump-font-size,
+            $pageHeihgt: $form-element-medium-height,
+            $numberPaddingLeftRight: $pagination-size-selector-number-padding,
+            $inputWidth: $pagination-input-width
+        );
+    }
+
+    &.#{$css-prefix}large {
+        @include pagination-size(
+            'rtl',
+            $itemSplit: $pagination-large-item-split,
+            $itemPaddingLeftRight: $s-4 - 1px,
+            $ellipsisSize: $pagination-large-ellipsis-size,
+            $totalFontSize: $pagination-large-total-font-size,
+            $currentFontSize: $pagination-large-current-font-size,
+            $otherFontSize: $pagination-large-jump-font-size,
+            $pageHeihgt: $form-element-large-height,
+            $numberPaddingLeftRight: $pagination-large-size-selector-number-padding,
+            $inputWidth: $pagination-large-input-width
+        );
+    }
+}
diff --git a/src/pagination/scss/mixin.scss b/src/pagination/scss/mixin.scss
@@ -2,6 +2,7 @@
 // --------------------------------------------------
 
 @mixin pagination-size(
+    $direction,
     $itemSplit,
     $itemPaddingLeftRight,
     $ellipsisSize,
@@ -23,7 +24,12 @@
         padding: 0 $itemPaddingLeftRight;
 
         & + #{$pagination-prefix}-item {
-            margin-left: $itemSplit;
+
+            @if $direction == 'rtl' {
+                margin: 0 $itemSplit 0 0 ;
+            } @else {
+                margin: 0 0 0 $itemSplit;
+            }
         }
     }
     #{$pagination-prefix}-ellipsis {