feat(DatePicker): support rtl

alibaba-fusion · Nov 29, 2018 · 2d140fb · 2d140fb
1 parent 4e11f59
commit 2d140fb
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 11 deletions.
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
@@ -499,7 +499,7 @@ export default class DatePicker extends Component {
                 style={popupStyle}
                 className={popupClassName}
                 trigger={trigger}>
-                <div className={panelBodyClassName}>
+                <div dir={others.dir} className={panelBodyClassName}>
                     <div className={`${prefix}date-picker-panel-header`}>
                         {dateInput}
                         {timeInput}

diff --git a/src/date-picker/main.scss b/src/date-picker/main.scss
@@ -8,6 +8,7 @@
 
 @import "scss/date-picker";
 @import "scss/range-picker";
+@import "./rtl.scss";
 
 #{$date-picker-prefix}, #{$range-picker-prefix}, #{$month-picker-prefix}, #{$year-picker-prefix} {
     @include box-sizing;

diff --git a/src/date-picker/month-picker.jsx b/src/date-picker/month-picker.jsx
@@ -345,7 +345,7 @@ class MonthPicker extends Component {
                 style={popupStyle}
                 className={popupClassName}
                 trigger={trigger}>
-                <div className={panelBodyClassName}>
+                <div className={panelBodyClassName} dir={others.dir}>
                     <div className={`${prefix}month-picker-panel-header`}>
                         {dateInput}
                     </div>

diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
@@ -735,7 +735,7 @@ export default class RangePicker extends Component {
                 style={popupStyle}
                 className={popupClassName}
                 trigger={trigger}>
-                <div className={panelBodyClassName}>
+                <div dir={others.dir} className={panelBodyClassName}>
                     <div className={`${prefix}range-picker-panel-header`}>
                         <div className={`${prefix}range-picker-panel-input`}>
                             {startDateInput}

diff --git a/src/date-picker/rtl.scss b/src/date-picker/rtl.scss
@@ -1,11 +1,51 @@
-#{$date-picker-prefix}-body[dir="rtl"],
-#{$range-picker-prefix}[dir="rtl"],
-#{$month-picker-prefix}[dir="rtl"],
-#{$year-picker-prefix}[dir="rtl"] {
-    &-panel {
-        &-footer {
-            text-align: left;
+#{$date-picker-prefix}-body[dir="rtl"]{
+    #{$date-picker-prefix}-panel-footer {
+        text-align: left;
+    }
+    #{$date-picker-prefix}-panel-footer > #{$date-picker-btn-prefix}:not(:last-child) {
+        margin-right: 0;
+        margin-left: $s-4;
+    }
+}
+
+#{$date-picker-prefix}-body[dir="rtl"]#{$date-picker-prefix}-body-show-time {
+    #{$date-picker-prefix}-panel-input#{$date-picker-input-prefix} {
+        &:first-child {
+            margin-left: 2%;
+            margin-right: 0;
         }
     }
+}
 
+
+#{$range-picker-prefix}-body[dir="rtl"] {
+    #{$range-picker-prefix}-panel-input {
+        text-align: right;
+    }
+    #{$date-picker-prefix}-panel-footer {
+        text-align: left;
+    }
+    #{$date-picker-prefix}-panel-footer > #{$date-picker-btn-prefix}:not(:last-child) {
+        margin-right: 0;
+        margin-left: $s-4;
+    }
+}
+
+#{$range-picker-prefix}-body[dir="rtl"]#{$range-picker-prefix}-body-show-time {
+    #{$range-picker-prefix}-panel {
+        &-input-start-date {
+            margin-right: 0;
+            margin-left: $s-2;
+        }
+
+        &-input-end-time {
+            margin-left: 0;
+            margin-right: $s-2;
+        }
+
+        &-time-start, &-time-end {
+            width: 50%;
+            float: left;
+        }
+    }
 }
diff --git a/src/date-picker/year-picker.jsx b/src/date-picker/year-picker.jsx
@@ -339,7 +339,7 @@ class YearPicker extends Component {
                 style={popupStyle}
                 className={popupClassName}
                 trigger={trigger}>
-                <div className={panelBodyClassName}>
+                <div dir={others.dir} className={panelBodyClassName}>
                     <div className={`${prefix}year-picker-panel-header`}>
                         {dateInput}
                     </div>