feat(Search): add rtl to search

alibaba-fusion · Dec 3, 2018 · 931729a · 931729a
1 parent c629401
commit 931729a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -107,6 +107,7 @@ class Search extends React.Component {
          */
         hasClear: PropTypes.bool,
         locale: PropTypes.object,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -178,7 +179,8 @@ class Search extends React.Component {
             placeholder, type, className,
             style, size, prefix, searchText,
             dataSource, filterProps, buttonProps,
-            popupContent, hasClear,  ...others } = this.props;
+            popupContent, hasClear, rtl,
+            ...others } = this.props;
 
         const cls = classNames({
             [`${prefix}search`]: true,
@@ -240,7 +242,7 @@ class Search extends React.Component {
             />
         </Group>);
 
-        return (<span className={cls} style={style} {...dataAttr}>
+        return (<span className={cls} style={style} {...dataAttr} dir={rtl ? 'rtl' : undefined}>
             {searchBtn ? <Group addonAfter={searchBtn}>{left}</Group> : left}
         </span>);
     }

diff --git a/src/search/main.scss b/src/search/main.scss
@@ -3,6 +3,7 @@
 @import "../input/scss/mixin.scss";
 @import "scss/mixin";
 @import "scss/variable";
+@import "./rtl.scss";
 
 #{$search-prefix} {
     @include box-sizing;
@@ -49,7 +50,8 @@
         width: 600px;
 
         #{$search-prefix}-left {
-            border-right: none;
+            // border-right: none; 该属性一旦添加 无法被 rtl.scss覆盖 故在后面用 :not选择器进行
+
             border-top-left-radius: $search-normal-corner;
             border-bottom-left-radius: $search-normal-corner;
         }
@@ -218,7 +220,11 @@
             }
         }
     }
-
+    &-normal:not([dir=rtl]) {
+        #{$search-prefix}-left {
+            border-right: none;
+        }
+    }
     &-simple {
         width: 300px;
         box-shadow: $search-simple-normal-shadow;
@@ -293,3 +299,4 @@
         }
     }
 }
+
diff --git a/src/search/rtl.scss b/src/search/rtl.scss
@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+#{$search-prefix} {
+        &-simple[dir=rtl] {
+            &.#{$css-prefix}large {
+                #{$search-prefix}-icon {
+                    margin-left: $search-simple-l-icon-margin-right;
+                    margin-right: 0;
+                }
+            }
+            &.#{$css-prefix}medium {
+                #{$search-prefix}-icon {
+                    margin-left: $search-simple-m-icon-margin-right;
+                    margin-right: 0;
+                }
+            }
+        }
+
+        &-normal[dir=rtl] {
+            #{$search-prefix}-left {
+                border-left: none;
+                border-top-right-radius: $search-normal-corner;
+                border-bottom-right-radius: $search-normal-corner;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+            #{$search-prefix}-btn.#{$css-prefix}btn {
+                border-top-left-radius: $search-normal-corner;
+                border-top-right-radius: 0px;
+                border-bottom-right-radius: 0px;
+                border-bottom-left-radius: $search-normal-corner;
+                // border-radius: $search-normal-corner 0 0 $search-normal-corner !important;
+            }
+        }
+}
+