feat(Dialog): add rtl support

alibaba-fusion · Nov 28, 2018 · bd3a66e · bd3a66e
1 parent d20bfca
commit bd3a66e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/dialog/dialog.jsx b/src/dialog/dialog.jsx
@@ -18,6 +18,7 @@ export default class Dialog extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 是否显示
@@ -282,7 +283,12 @@ export default class Dialog extends Component {
     }
 
     renderInner(closeable) {
-        const { prefix, className, title, children, footer, footerAlign, footerActions, onOk, onCancel, okProps, cancelProps, onClose, locale, visible } = this.props;
+        const {
+            prefix, className, title,
+            children, footer, footerAlign,
+            footerActions, onOk, onCancel,
+            okProps, cancelProps, onClose,
+            locale, visible, rtl } = this.props;
         const others = pickOthers(Object.keys(Dialog.propTypes), this.props);
 
         return (
@@ -298,6 +304,7 @@ export default class Dialog extends Component {
                 cancelProps={cancelProps}
                 locale={locale}
                 closeable={closeable}
+                rtl={rtl}
                 onClose={onClose.bind(this, 'closeClick')}
                 {...others}>
                 {children}
@@ -307,7 +314,10 @@ export default class Dialog extends Component {
 
     render() {
         const {
-            prefix, visible, hasMask, animation, autoFocus, closeable, onClose, afterClose, shouldUpdatePosition, align, overlayProps
+            prefix, visible, hasMask,
+            animation, autoFocus, closeable,
+            onClose, afterClose, shouldUpdatePosition,
+            align, overlayProps, rtl,
         } = this.props;
 
         const useCSS = this.useCSSToPosition();
@@ -326,7 +336,8 @@ export default class Dialog extends Component {
             onRequestClose: onClose,
             needAdjust: false,
             disableScroll: true,
-            ref: this.getOverlayRef
+            ref: this.getOverlayRef,
+            rtl,
         };
         if (!useCSS) {
             newOverlayProps.beforePosition = this.beforePosition;
@@ -339,7 +350,7 @@ export default class Dialog extends Component {
         return (
             <Overlay {...newOverlayProps}>
                 {useCSS ?
-                    <div className={`${prefix}dialog-container`}>
+                    <div className={`${prefix}dialog-container`} dir={rtl ? "rtl" : undefined}>
                         {inner}
                     </div> :
                     inner}

diff --git a/src/dialog/inner.jsx b/src/dialog/inner.jsx
@@ -26,7 +26,8 @@ export default class Inner extends Component {
         closeable: PropTypes.bool,
         onClose: PropTypes.func,
         locale: PropTypes.object,
-        role: PropTypes.string
+        role: PropTypes.string,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -65,7 +66,7 @@ export default class Inner extends Component {
     }
 
     renderFooter() {
-        const { prefix, footer, footerAlign, footerActions, locale } = this.props;
+        const { prefix, footer, footerAlign, footerActions, locale, rtl } = this.props;
 
         if (footer === false) {
             return null;
@@ -115,7 +116,7 @@ export default class Inner extends Component {
     }
 
     render() {
-        const { prefix, className, closeable, title, role } = this.props;
+        const { prefix, className, closeable, title, role, rtl } = this.props;
         const others = pickOthers(Object.keys(Inner.propTypes), this.props);
         const newClassName = cx({
             [`${prefix}dialog`]: true,
@@ -137,7 +138,7 @@ export default class Inner extends Component {
         }
 
         return (
-            <div {...ariaProps} className={newClassName} {...others}>
+            <div {...ariaProps} className={newClassName} {...others} dir={rtl ? "rtl" : undefined}>
                 {header}
                 {body}
                 {footer}

diff --git a/src/dialog/show.jsx b/src/dialog/show.jsx
@@ -19,6 +19,7 @@ class Modal extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         type: PropTypes.string,
         title: PropTypes.node,
         content: PropTypes.node,
@@ -83,7 +84,12 @@ class Modal extends Component {
     }
 
     render() {
-        const { prefix, type, title, content, messageProps, footerActions, onOk, onCancel, onClose, okProps, needWrapper, ...others } = this.props;
+        const {
+            prefix, type, title,
+            content, messageProps, footerActions,
+            onOk, onCancel, onClose,
+            okProps, needWrapper, rtl,
+            ...others } = this.props;
         const newTitle = needWrapper && type ? null : title;
 
         const newContent = needWrapper && type ? (
@@ -95,6 +101,7 @@ class Modal extends Component {
                 title={title}
                 className={cx(`${prefix}dialog-message`, messageProps.className)}>
                 {content}
+                rtl={rtl}
             </Message>
         ) : content;
 
@@ -117,6 +124,7 @@ class Modal extends Component {
                 {...others}
                 visible={visible}
                 title={newTitle}
+                rtl={rtl}
                 footerActions={newFooterActions}
                 onOk={this.state.loading ? noop : newOnOk}
                 onCancel={newOnCancel}