feat(Form): support rtl

alibaba-fusion · Feb 19, 2019 · 9fd345e · 9fd345e
1 parent 74980bd
commit 9fd345e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/form/form.jsx b/src/form/form.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {obj, func} from '../util';
+import { obj, func } from '../util';
 import Field from '../field';
 
 function pickerDefined(obj) {
@@ -89,7 +89,8 @@ export default class Form extends React.Component {
          * 设置标签类型
          */
         component: PropTypes.string,
-        fieldOptions: PropTypes.object
+        fieldOptions: PropTypes.object,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -146,11 +147,11 @@ export default class Form extends React.Component {
     }
 
     onChange = (name, value) => {
-        this.props.onChange(this._formField.getValues(), {name, value, field: this._formField});
+        this.props.onChange(this._formField.getValues(), { name, value, field: this._formField });
     };
 
     render() {
-        const {className, inline, size, labelAlign, labelTextAlign, onSubmit, children, labelCol, wrapperCol, style, prefix, component: Tag} = this.props;
+        const { className, inline, size, labelAlign, labelTextAlign, onSubmit, children, labelCol, wrapperCol, style, prefix, rtl, component: Tag } = this.props;
 
         const formClassName = classNames({
             [`${prefix}form`]: true,
@@ -163,6 +164,7 @@ export default class Form extends React.Component {
             <Tag role="grid" {...obj.pickOthers(Form.propTypes, this.props)}
                 className={formClassName}
                 style={style}
+                dir={rtl ? 'rtl' : undefined}
                 onSubmit={onSubmit}>
                 {
                     React.Children.map(children, (child) => {

diff --git a/src/form/main.scss b/src/form/main.scss
@@ -141,3 +141,27 @@
         display: table-cell;
     }
 }
+
+#{$form-prefix}[dir="rtl"] {
+    #{$form-prefix}-item-label {
+        text-align: left;
+        padding-left: $form-label-padding-r;
+        padding-right: 0;
+    }
+    &.#{$css-prefix}inline {
+        #{$form-prefix}-item {
+            &:not(:last-child) {
+                margin-left: $form-inline-m-item-margin-r;
+                margin-right: 0;
+            }
+            &.#{$css-prefix}large:not(:last-child) {
+                margin-left: $form-inline-l-item-margin-r;
+                margin-right: 0;
+            }
+            &.#{$css-prefix}small:not(:last-child) {
+                margin-left: $form-inline-s-item-margin-r;
+                margin-right: 0;
+            }
+        }
+    }
+}