feat(Overlay): add rtl prop for overlay

alibaba-fusion · Nov 28, 2018 · 6d77142 · 6d77142
1 parent 8825c0c
commit 6d77142
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/docs/overlay/demo/nested.md b/docs/overlay/demo/nested.md
@@ -19,7 +19,7 @@ import { Overlay } from '@alifd/next';
 
 const { Popup } = Overlay;
 
-ReactDOM.render((
+ReactDOM.render(
     <Popup trigger={<button>Open first overlay</button>}
         triggerType="click">
         <div className="overlay-demo">
@@ -33,7 +33,7 @@ ReactDOM.render((
             <p>Hello World From First Overlay!</p>
         </div>
     </Popup>
-), mountNode);
+, mountNode);
 ````
 
 ````css

diff --git a/docs/overlay/demo/scroll.md b/docs/overlay/demo/scroll.md
@@ -20,7 +20,7 @@ import { Overlay } from '@alifd/next';
 
 const { Popup } = Overlay;
 
-ReactDOM.render((
+ReactDOM.render(
     <div className="scroll-container">
         <Popup trigger={<button>Open</button>}
             triggerType="click"
@@ -31,7 +31,7 @@ ReactDOM.render((
         </Popup>
         <div style={{ height: '300px' }} />
     </div>
-), mountNode);
+, mountNode);
 ````
 
 ````css

diff --git a/src/overlay/overlay.jsx b/src/overlay/overlay.jsx
@@ -48,6 +48,7 @@ export default class Overlay extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         style: PropTypes.object,
         /**
@@ -613,7 +614,7 @@ export default class Overlay extends Component {
         const {
             prefix, className, style, children: propChildren,
             target, align, offset, container, hasMask, needAdjust,
-            beforePosition, onPosition, wrapperStyle,
+            beforePosition, onPosition, wrapperStyle, rtl,
             shouldUpdatePosition: propShouldUpdatePosition,
             cache, wrapperClassName, onMaskMouseEnter, onMaskMouseLeave
         } = this.props;
@@ -661,12 +662,13 @@ export default class Overlay extends Component {
             }, wrapperStyle);
 
             children = (
-                <div className={wrapperClazz} style={newWrapperStyle}>
+                <div className={wrapperClazz} style={newWrapperStyle} dir={rtl ? 'rtl' : undefined}>
                     {hasMask ?
                         <div className={`${prefix}overlay-backdrop`}
                             onClick={this.handleMaskClick}
                             onMouseEnter={onMaskMouseEnter}
-                            onMouseLeave={onMaskMouseLeave} /> :
+                            onMouseLeave={onMaskMouseLeave}
+                            dir={rtl ? 'rtl' : undefined} /> :
                         null}
                     {children}
                 </div>

diff --git a/src/overlay/popup.jsx b/src/overlay/popup.jsx
@@ -63,7 +63,8 @@ export default class Popup extends Component {
         followTrigger: PropTypes.bool,
         container: PropTypes.any,
         hasMask: PropTypes.bool,
-        wrapperStyle: PropTypes.object
+        wrapperStyle: PropTypes.object,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -74,7 +75,8 @@ export default class Popup extends Component {
         delay: 200,
         canCloseByTrigger: true,
         followTrigger: false,
-        container: () => document.body
+        container: () => document.body,
+        rtl: false,
     };
 
     constructor(props) {