feat(Menu): support rtl

docs/menu/demo/accordian.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu defaultOpenKeys="1" className="my-menu" openMode="single">
         <SubMenu key="0" label="Sub menu 1">
             <Item key="0-0">Sub option 1</Item>
@@ -42,7 +42,7 @@ ReactDOM.render((
             <Item key="3-2">Sub option 3</Item>
         </SubMenu>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

docs/menu/demo/basic.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item, Group, Divider } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu className="my-menu" defaultOpenKeys="sub-menu">
         <Item key="1">Option 1</Item>
         <Item disabled key="2">Disabled option 2</Item>
@@ -47,7 +47,7 @@ ReactDOM.render((
             <a href="https://www.taobao.com/" target="__blank">Option Link</a>
         </Item>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

docs/menu/demo/hover.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item, Divider } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu className="my-menu" mode="popup" triggerType="hover">
         <Item key="1">Option 1</Item>
         <Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
             <Item key="popup-2-2">Popup option 2</Item>
         </SubMenu>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

docs/menu/demo/hoz.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu header="aaa" direction="hoz" mode="popup" className="my-hoz-menu" popupClassName="my-hoz-menu" popupAutoWidth>
         <Item key="1">First</Item>
         <Item key="2">Second</Item>
@@ -33,7 +33,7 @@ ReactDOM.render((
         </SubMenu>
         <Item key="3">Third</Item>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

docs/menu/demo/popup-align.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item, Divider } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu className="my-menu" mode="popup" popupAlign="outside">
         <Item key="1">Option 1</Item>
         <Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
             <Item key="popup-2-2">Popup option 2</Item>
         </SubMenu>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

docs/menu/demo/popup.md

@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
 
 const { SubMenu, Item, Divider } = Menu;
 
-ReactDOM.render((
+ReactDOM.render(
     <Menu className="my-menu" mode="popup">
         <Item key="1">Option 1</Item>
         <Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
             <Item key="popup-2-2">Popup option 2</Item>
         </SubMenu>
     </Menu>
-), mountNode);
+, mountNode);
 ````
 
 ````css

src/menu/main.scss

@@ -1,6 +1,7 @@
 @import "../core/index-noreset.scss";
 @import "scss/variable";
 @import "scss/mixin";
+@import "./rtl.scss";
 
 #{$menu-prefix} {
     @include box-sizing;

src/menu/rtl.scss

@@ -0,0 +1,38 @@
+#{$menu-prefix}[dir="rtl"] {
+    #{$menu-prefix} {
+        &-item {
+            &-helper {
+                float: left;
+            }
+
+            .#{$css-prefix}checkbox,
+            .#{$css-prefix}radio {
+                margin-left: $menu-icon-margin;
+                margin-right: 0;
+            }
+        }
+
+        &-hoz-right {
+            float: right;
+        }
+
+        &-icon-arrow.#{$css-prefix}icon {
+            left: 10px;
+            right: auto;
+        }
+
+        &-hoz-icon-arrow.#{$css-prefix}icon {
+            left: 6px;
+            right: auto;
+        }
+
+        &-icon-selected.#{$css-prefix}icon {
+            @include icon-size($menu-icon-selected-size, 0, -($menu-padding-horizontal + $menu-icon-selected-size) / 2);
+        }
+
+    }
+    #{$menu-prefix}-icon-arrow.#{$css-prefix}icon {
+        left: 10px;
+        right: auto;
+    }
+}

src/menu/view/create.jsx

@@ -142,10 +142,17 @@ export default function create(props) {
         afterClose && afterClose();
     };
 
+    const newContext = ConfigProvider.getContext();
+
     let menu;
-    render(<ContextMenu afterClose={closeChain} {...others} />, div, function() {
-        menu = this;
-    });
+    render(
+        <ConfigProvider {...newContext}>
+            <ContextMenu afterClose={closeChain} {...others} />
+        </ConfigProvider>
+        , div, function() {
+            menu = this;
+        }
+    );
 
     menuInstance = {
         destroy: () => {

src/menu/view/item.jsx

@@ -134,7 +134,7 @@ export default class Item extends Component {
         const { level, root, replaceClassName, groupIndent, component, disabled, className, children, needIndent, parentMode, _key } = this.props;
         const others = pickOthers(Object.keys(Item.propTypes), this.props);
 
-        const { prefix, focusable, inlineIndent, itemClassName } = root.props;
+        const { prefix, focusable, inlineIndent, itemClassName, rtl } = root.props;
         const focused = this.getFocused();
 
         const newClassName = replaceClassName ? className : cx({
@@ -153,7 +153,7 @@ export default class Item extends Component {
         if (parentMode === 'inline' && level > 1 && inlineIndent > 0 && needIndent) {
             others.style = {
                 ...(others.style || {}),
-                paddingLeft: `${(level * inlineIndent) - ((groupIndent || 0) * 0.4 * inlineIndent)}px`
+                [rtl ? 'paddingRight' : 'paddingLeft']: `${(level * inlineIndent) - ((groupIndent || 0) * 0.4 * inlineIndent)}px`
             };
         }
         const TagName = component;

src/menu/view/menu.jsx

@@ -17,6 +17,7 @@ export default class Menu extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 菜单项和子菜单
@@ -607,7 +608,7 @@ export default class Menu extends Component {
     }
 
     render() {
-        const { prefix, className, direction, hozAlign, header, footer, selectMode } = this.props;
+        const { prefix, className, direction, hozAlign, header, footer, selectMode, rtl } = this.props;
         const others = pickOthers(Object.keys(Menu.propTypes), this.props);
 
         const newClassName = cx({
@@ -623,6 +624,10 @@ export default class Menu extends Component {
         const footerElement = footer ? <li className={`${prefix}menu-footer`}>{footer}</li> : null;
         const shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;
 
+        if (rtl) {
+            others.dir = 'rtl';
+        }
+
         return (
             <ul role={role} className={newClassName} onKeyDown={this.handleEnter} aria-multiselectable={selectMode === 'multiple'} {...others}>
                 {headerElement}

src/menu/view/popup-item.jsx

@@ -190,6 +190,7 @@ export default class PopupItem extends Component {
 
         const positionProps = {};
         let arrowProps;
+
         if (direction === 'hoz' && level === 1) {
             positionProps.align = 'tl bl';
             positionProps.offset = [0, 0];

src/menu/view/sub-menu.jsx

@@ -123,7 +123,7 @@ export default class SubMenu extends Component {
 
     renderInline() {
         const { _key, level, root, className, selectable: selectableFromProps, label, children, subMenuContentClassName, triggerType: propsTriggerType, parentMode } = this.props;
-        const { prefix, selectMode, triggerType: rootTriggerType, inlineArrowDirection, expandAnimation } = root.props;
+        const { prefix, selectMode, triggerType: rootTriggerType, inlineArrowDirection, expandAnimation, rtl } = root.props;
         const triggerType = propsTriggerType || rootTriggerType;
         const open = this.getOpen();
         const others = obj.pickOthers(Object.keys(SubMenu.propTypes), this.props);
@@ -174,7 +174,7 @@ export default class SubMenu extends Component {
         });
 
         const subMenu = open ? (
-            <ul role="menu" ref="subMenu" className={newSubMenuContentClassName}>
+            <ul role="menu" dir={rtl ? 'rtl' : undefined} ref="subMenu" className={newSubMenuContentClassName}>
                 {this.passParentToChildren(children)}
             </ul>
         ) : null;
@@ -198,7 +198,7 @@ export default class SubMenu extends Component {
     renderPopup() {
         const { children, subMenuContentClassName, ...others } = this.props;
         const root = this.props.root;
-        const { prefix, popupClassName, popupStyle } = root.props;
+        const { prefix, popupClassName, popupStyle, rtl } = root.props;
 
         const newClassName = cx({
             [`${prefix}menu`]: true,
@@ -209,7 +209,7 @@ export default class SubMenu extends Component {
 
         return (
             <PopupItem {...others} hasSubMenu>
-                <ul role="menu" className={newClassName} style={popupStyle}>
+                <ul role="menu" dir={rtl ? 'rtl' : undefined} className={newClassName} style={popupStyle}>
                     {this.passParentToChildren(children)}
                 </ul>
             </PopupItem>