feat(*): rtl supported in Select/Input/Message

alibaba-fusion · Nov 26, 2018 · 3bb15c8 · 3bb15c8
1 parent e683677
commit 3bb15c8
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 25 deletions.
diff --git a/docs/input/demo/inner.md b/docs/input/demo/inner.md
@@ -39,15 +39,15 @@ class App extends React.Component {
 
         return (<div>
             <Input
-                innerBefore={<Icon type="search" style={{marginLeft: 4}}  onClick={this.onClick} />}
+                innerBefore={<Icon type="search" style={{margin: 4}}  onClick={this.onClick} />}
                 placeholder="search"
                 value={this.state.v}
                 aria-label="input with config of innerBefore"
                 onChange={this.onChange}
             /><br /><br />
 
             <Input
-                innerAfter={<Icon type="search" size="xs" onClick={this.onClick} style={{marginRight: 4}}/>}
+                innerAfter={<Icon type="search" size="xs" onClick={this.onClick} style={{margin: 4}}/>}
                 placeholder="search"
                 value={this.state.v}
                 aria-label="input with config of innerAfter"
@@ -57,7 +57,7 @@ class App extends React.Component {
             <Input
                 disabled
                 defaultValue="hi"
-                innerAfter={<Icon type="calendar" style={{marginRight: 4}}/>}
+                innerAfter={<Icon type="calendar" style={{margin: 4}}/>}
                 aria-label="input with config of innerAfter and disabled" />
         </div>);
     }

diff --git a/src/input/base.jsx b/src/input/base.jsx
@@ -6,9 +6,6 @@ import zhCN from '../locale/zh-cn';
 
 class Base extends React.Component {
     static propTypes = {
-        /**
-         * 样式前缀
-         */
         prefix: PropTypes.string,
         /**
          * 当前值
@@ -89,6 +86,7 @@ class Base extends React.Component {
          * name
          */
         name: PropTypes.string,
+        rtl: PropTypes.bool,
         state: PropTypes.oneOf(['error', 'loading', 'success']),
         locale: PropTypes.object,
     };
@@ -180,15 +178,17 @@ class Base extends React.Component {
     }
 
     renderLength() {
-        const { maxLength, hasLimitHint, prefix } = this.props;
+        const { maxLength, hasLimitHint, prefix, rtl } = this.props;
         const len = maxLength > 0 && this.state.value ? this.getValueLength(this.state.value) : 0;
 
         const classesLenWrap = classNames({
             [`${prefix}input-len`]: true,
             [`${prefix}error`]: len > maxLength
         });
 
-        return maxLength && hasLimitHint ? <span className={classesLenWrap}>{len}/{maxLength}</span> : null;
+        const content = rtl ? `${maxLength}/${len}` : `${len}/${maxLength}`;
+
+        return maxLength && hasLimitHint ? <span className={classesLenWrap}>{content}</span> : null;
     }
 
     renderControl() {

diff --git a/src/input/group.jsx b/src/input/group.jsx
@@ -31,14 +31,18 @@ class Group extends React.Component {
          * 输入框后额外css
          */
         addonAfterClassName: PropTypes.string,
+        /**
+         * rtl
+         */
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
         prefix: 'next-',
     };
 
     render() {
-        const {className, style, children, prefix, addonBefore, addonAfter, addonBeforeClassName, addonAfterClassName, ...others} = this.props;
+        const {className, style, children, prefix, addonBefore, addonAfter, addonBeforeClassName, addonAfterClassName, rtl, ...others} = this.props;
 
         const cls = classNames({
             [`${prefix}input-group`]: true,
@@ -68,7 +72,7 @@ class Group extends React.Component {
         ) : null;
 
         return (
-            <span {...others} className={cls} style={style}>
+            <span {...others} dir={rtl? 'rtl': undefined} className={cls} style={style}>
                 {before}
                 {children}
                 {after}

diff --git a/src/input/input.jsx b/src/input/input.jsx
@@ -207,7 +207,7 @@ export default class Input extends Base {
     }
 
     render() {
-        const {size, htmlType, htmlSize, autoComplete, autoFocus, disabled, style, innerBefore, innerAfter, innerBeforeClassName, innerAfterClassName, className, hasBorder, prefix, addonBefore, addonAfter, addonTextBefore, addonTextAfter, inputRender} = this.props;
+        const {size, htmlType, htmlSize, autoComplete, autoFocus, disabled, style, innerBefore, innerAfter, innerBeforeClassName, innerAfterClassName, className, hasBorder, prefix, addonBefore, addonAfter, addonTextBefore, addonTextAfter, inputRender, rtl} = this.props;
 
         const hasAddon = addonBefore || addonAfter || addonTextBefore || addonTextAfter;
         const cls = classNames(this.getClass(), {
@@ -250,7 +250,7 @@ export default class Input extends Base {
             ref={this.saveRef}
         />);
 
-        const inputWrap = (<span {...dataProps} className={cls} style={hasAddon ? undefined : style}>
+        const inputWrap = (<span {...dataProps} dir={rtl? 'rtl': undefined} className={cls} style={hasAddon ? undefined : style}>
             {this.renderInner(innerBefore, innerBeforeCls)}
             {this.renderLabel()}
             {inputRender(inputEl)}

diff --git a/src/input/main.scss b/src/input/main.scss
@@ -75,7 +75,7 @@
 
         #{$input-prefix}-len {
             padding-bottom: 4px;
-            padding-right: $input-l-icon-padding-right;
+            padding: $input-l-icon-padding-right;
             display: block;
             text-align: right;
             width: auto;
@@ -183,7 +183,8 @@
             width: 1%;
             top: 0;
         }
-        > * + * {
+
+        > *:not(:first-child) {
             padding-left: $s-1;
         }
 
@@ -333,10 +334,10 @@
         padding: 0 $input-addon-padding;
 
         &:first-child {
-            border-right: 0;
+            border-right-width: 0;
         }
         &:last-child {
-            border-left: 0;
+            border-left-width: 0;
         }
 
         &.#{$css-prefix}disabled {
@@ -359,3 +360,5 @@
         }
     }
 }
+
+@import './rtl.scss';
diff --git a/src/input/rtl.scss b/src/input/rtl.scss
@@ -0,0 +1,82 @@
+@charset "UTF-8";
+
+#{$input-prefix}[dir="rtl"] {
+    &.#{$css-prefix}small {
+        @include input-size-rtl($input-s-label-padding-left, $input-s-icon-padding-right);
+    }
+
+    &.#{$css-prefix}medium {
+        @include input-size-rtl($input-m-label-padding-left, $input-m-icon-padding-right);
+    }
+
+    &.#{$css-prefix}large {
+        @include input-size-rtl($input-l-label-padding-left, $input-l-icon-padding-right);
+    }
+
+    &#{$input-prefix}-textarea {
+        #{$input-prefix}-len {
+            text-align: left;
+        }
+    }
+
+    #{$input-prefix}-control {
+        > *:not(:first-child) {
+            padding-right: $s-1;
+            padding-left: 0;
+        }
+    }
+}
+#{$input-prefix}-group[dir="rtl"] {
+    #{$input-prefix}-group-addon {
+
+        /* stylelint-disable declaration-no-important */
+        &:first-child {
+            border-bottom-left-radius: 0 !important;
+            border-top-left-radius: 0 !important;
+
+            &.#{$css-prefix}small {
+                border-bottom-right-radius: $form-element-small-corner !important;
+                border-top-right-radius: $form-element-small-corner !important;
+            }
+
+            &.#{$css-prefix}medium {
+                border-bottom-right-radius: $form-element-medium-corner !important;
+                border-top-right-radius: $form-element-medium-corner !important;
+            }
+
+            &.#{$css-prefix}large {
+                border-bottom-right-radius: $form-element-large-corner !important;
+                border-top-right-radius: $form-element-large-corner !important;
+            }
+        }
+        &:last-child {
+            border-bottom-right-radius: 0 !important;
+            border-top-right-radius: 0 !important;
+
+            &.#{$css-prefix}small {
+                border-bottom-left-radius: $form-element-small-corner !important;
+                border-top-left-radius: $form-element-small-corner !important;
+            }
+
+            &.#{$css-prefix}medium {
+                border-bottom-left-radius: $form-element-medium-corner !important;
+                border-top-left-radius: $form-element-medium-corner !important;
+            }
+
+            &.#{$css-prefix}large {
+                border-bottom-left-radius: $form-element-large-corner !important;
+                border-top-left-radius: $form-element-large-corner !important;
+            }
+        }
+    }
+    #{$input-prefix}-group-text {
+        &:first-child {
+            border-right-width: $input-border-width;
+            border-left: 0;
+        }
+        &:last-child {
+            border-left-width: $input-border-width;
+            border-right: 0;
+        }
+    }
+}
diff --git a/src/input/scss/mixin.scss b/src/input/scss/mixin.scss
@@ -40,6 +40,21 @@
     }
 }
 
+
+@mixin input-size-rtl(
+    $labelPadding,
+    $iconPadding
+) {
+    #{$input-prefix}-label {
+        padding-left: 0;
+        padding-right: $labelPadding;
+    }
+    #{$input-prefix}-control {
+        padding-right: 0;
+        padding-left: $iconPadding;
+    }
+}
+
 @mixin input-border-radius($size) {
     border-radius: $size;
     input {

diff --git a/src/input/textarea.jsx b/src/input/textarea.jsx
@@ -179,7 +179,7 @@ export default class TextArea extends Base {
     }
 
     render() {
-        const {rows, style, className, autoHeight, prefix} = this.props;
+        const {rows, style, className, autoHeight, prefix, rtl} = this.props;
 
         const cls = classNames(this.getClass(), {
             [`${prefix}input-textarea`]: true,
@@ -207,7 +207,7 @@ export default class TextArea extends Base {
             position: 'relative',
         } : style;
 
-        return (<span className={cls} style={wrapStyle} {...dataProps}>
+        return (<span className={cls} style={wrapStyle} dir={rtl? 'rtl': undefined} {...dataProps}>
             <textarea
                 {...others}
                 {...props}

diff --git a/src/message/main.scss b/src/message/main.scss
@@ -328,3 +328,5 @@
         }
     }
 }
+
+@import "./rtl.scss";
diff --git a/src/message/message.jsx b/src/message/message.jsx
@@ -73,7 +73,8 @@ class Message extends Component {
         /**
          * 是否开启展开收起动画
          */
-        animation: PropTypes.bool
+        animation: PropTypes.bool,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -112,7 +113,7 @@ class Message extends Component {
 
     render() {
         /* eslint-disable no-unused-vars */
-        const { prefix, pure, className, type, shape, size, title, children, defaultVisible, visible: propsVisible, iconType: icon, closeable, onClose, afterClose, animation, ...others } = this.props;
+        const { prefix, pure, className, type, shape, size, title, children, defaultVisible, visible: propsVisible, iconType: icon, closeable, onClose, afterClose, animation, rtl, ...others } = this.props;
         /* eslint-enable */
         const { visible } = this.state;
         const messagePrefix = `${prefix}message`;
@@ -128,7 +129,7 @@ class Message extends Component {
         });
 
         const newChildren = visible ?
-            (<div role="alert" {...others} className={classes}>
+            (<div role="alert" {...others} className={classes} dir={rtl? 'rtl': undefined}>
                 {closeable ?
                     <a role="button" href="javascript:;" className={`${messagePrefix}-close`} onClick={this.onClose}>
                         <Icon type="close" />

diff --git a/src/message/rtl.scss b/src/message/rtl.scss
@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+.#{$css-prefix}message[dir="rtl"] {
+    .#{$css-prefix}message-symbol {
+        float: right;
+    }
+
+    &.#{$css-prefix}medium {
+        .#{$css-prefix}message-title {
+            padding: 0 $message-size-m-title-content-padding-left + $message-size-m-icon 0 $message-size-m-title-content-padding-right;
+        }
+        .#{$css-prefix}message-close {
+            left: $message-size-m-close-right;
+            right: auto;
+        }
+    }
+
+    &.#{$css-prefix}large {
+        .#{$css-prefix}message-title {
+            padding: 0 $message-size-l-title-content-padding-left + $message-size-l-icon 0 $message-size-l-title-content-padding-right;
+        }
+        .#{$css-prefix}message-close {
+            left: $message-size-l-close-right;
+            right: auto;
+        }
+    }
+}
diff --git a/src/select/auto-complete.jsx b/src/select/auto-complete.jsx
@@ -264,7 +264,7 @@ class AutoComplete extends Base {
      * @param {object} props
      */
     renderSelect(props = this.props) {
-        const { placeholder, size, prefix, className, style, label, readOnly, disabled, onKeyDown, highlightHolder, locale, hasClear, state } = props;
+        const { placeholder, size, prefix, className, style, label, readOnly, disabled, onKeyDown, highlightHolder, locale, hasClear, state, rtl } = props;
         const others = obj.pickOthers(AutoComplete.propTypes, props);
         const othersData = obj.pickAttrsWith(others, 'data-');
 
@@ -316,6 +316,7 @@ class AutoComplete extends Base {
             <span {...othersData}
                 className={triggerClazz}
                 style={style}
+                dir={rtl? 'rtl': undefined}
                 ref={this.saveSelectRef}
                 onClick={this.focusInput}>
                 <Input

diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -110,15 +110,14 @@ export default class Base extends React.Component {
          * 键盘上下键切换菜单高亮选项的回调
          */
         onToggleHighlightItem: PropTypes.func,
-        // 自定义类名
         className: PropTypes.any,
-        // children
         children: PropTypes.any,
         dataSource: PropTypes.array,
         itemRender: PropTypes.func,
         mode: PropTypes.string,
         notFoundContent: PropTypes.node,
         locale: PropTypes.object,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {

diff --git a/src/select/select.jsx b/src/select/select.jsx
@@ -651,7 +651,7 @@ class Select extends Base {
      * @param {object} props
      */
     renderSelect() {
-        const { prefix, showSearch, placeholder, mode, size, className, style, readOnly, disabled, hasBorder, label, locale, state, onBlur, onFocus } = this.props;
+        const { prefix, showSearch, placeholder, mode, size, className, style, readOnly, disabled, hasBorder, label, locale, state, onBlur, onFocus, rtl } = this.props;
         const others = obj.pickOthers(Select.propTypes, this.props);
         const othersData = obj.pickAttrsWith(others, 'data-');
 
@@ -696,6 +696,7 @@ class Select extends Base {
             <span {...othersData}
                 className={triggerClazz}
                 style={style}
+                dir={rtl? 'rtl': undefined}
                 ref={this.saveSelectRef}
                 onClick={this.handleWrapClick}
                 onMouseDown={this.handleWrapClick}