Skip to content

Commit 5241d7b

Browse files
youlunayouluna
committed
feat(Menu): support rtl
1 parent d863787 commit 5241d7b

13 files changed

+74
-22
lines changed

‎docs/menu/demo/accordian.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu defaultOpenKeys="1" className="my-menu" openMode="single">
2424
<SubMenu key="0" label="Sub menu 1">
2525
<Item key="0-0">Sub option 1</Item>
@@ -42,7 +42,7 @@ ReactDOM.render((
4242
<Item key="3-2">Sub option 3</Item>
4343
</SubMenu>
4444
</Menu>
45-
), mountNode);
45+
, mountNode);
4646
````
4747

4848
````css

‎docs/menu/demo/basic.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item, Group, Divider } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu className="my-menu" defaultOpenKeys="sub-menu">
2424
<Item key="1">Option 1</Item>
2525
<Item disabled key="2">Disabled option 2</Item>
@@ -47,7 +47,7 @@ ReactDOM.render((
4747
<a href="https://www.taobao.com/" target="__blank">Option Link</a>
4848
</Item>
4949
</Menu>
50-
), mountNode);
50+
, mountNode);
5151
````
5252

5353
````css

‎docs/menu/demo/hover.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item, Divider } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu className="my-menu" mode="popup" triggerType="hover">
2424
<Item key="1">Option 1</Item>
2525
<Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
3434
<Item key="popup-2-2">Popup option 2</Item>
3535
</SubMenu>
3636
</Menu>
37-
), mountNode);
37+
, mountNode);
3838
````
3939

4040
````css

‎docs/menu/demo/hoz.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu header="aaa" direction="hoz" mode="popup" className="my-hoz-menu" popupClassName="my-hoz-menu" popupAutoWidth>
2424
<Item key="1">First</Item>
2525
<Item key="2">Second</Item>
@@ -33,7 +33,7 @@ ReactDOM.render((
3333
</SubMenu>
3434
<Item key="3">Third</Item>
3535
</Menu>
36-
), mountNode);
36+
, mountNode);
3737
````
3838

3939
````css

‎docs/menu/demo/popup-align.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item, Divider } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu className="my-menu" mode="popup" popupAlign="outside">
2424
<Item key="1">Option 1</Item>
2525
<Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
3434
<Item key="popup-2-2">Popup option 2</Item>
3535
</SubMenu>
3636
</Menu>
37-
), mountNode);
37+
, mountNode);
3838
````
3939

4040
````css

‎docs/menu/demo/popup.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Menu } from '@alifd/next';
1919

2020
const { SubMenu, Item, Divider } = Menu;
2121

22-
ReactDOM.render((
22+
ReactDOM.render(
2323
<Menu className="my-menu" mode="popup">
2424
<Item key="1">Option 1</Item>
2525
<Item key="2">Option 2</Item>
@@ -34,7 +34,7 @@ ReactDOM.render((
3434
<Item key="popup-2-2">Popup option 2</Item>
3535
</SubMenu>
3636
</Menu>
37-
), mountNode);
37+
, mountNode);
3838
````
3939

4040
````css

‎src/menu/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "../core/index-noreset.scss";
22
@import "scss/variable";
33
@import "scss/mixin";
4+
@import "./rtl.scss";
45

56
#{$menu-prefix} {
67
@include box-sizing;

‎src/menu/rtl.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
#{$menu-prefix}[dir="rtl"] {
2+
#{$menu-prefix} {
3+
&-item {
4+
&-helper {
5+
float: left;
6+
}
7+
8+
.#{$css-prefix}checkbox,
9+
.#{$css-prefix}radio {
10+
margin-left: $menu-icon-margin;
11+
margin-right: 0;
12+
}
13+
}
14+
15+
&-hoz-right {
16+
float: right;
17+
}
18+
19+
&-icon-arrow.#{$css-prefix}icon {
20+
left: 10px;
21+
right: auto;
22+
}
23+
24+
&-hoz-icon-arrow.#{$css-prefix}icon {
25+
left: 6px;
26+
right: auto;
27+
}
28+
29+
&-icon-selected.#{$css-prefix}icon {
30+
@include icon-size($menu-icon-selected-size, 0, -($menu-padding-horizontal + $menu-icon-selected-size) / 2);
31+
}
32+
33+
}
34+
#{$menu-prefix}-icon-arrow.#{$css-prefix}icon {
35+
left: 10px;
36+
right: auto;
37+
}
38+
}

‎src/menu/view/create.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,17 @@ export default function create(props) {
142142
afterClose && afterClose();
143143
};
144144

145+
const newContext = ConfigProvider.getContext();
146+
145147
let menu;
146-
render(<ContextMenu afterClose={closeChain} {...others} />, div, function() {
147-
menu = this;
148-
});
148+
render(
149+
<ConfigProvider {...newContext}>
150+
<ContextMenu afterClose={closeChain} {...others} />
151+
</ConfigProvider>
152+
, div, function() {
153+
menu = this;
154+
}
155+
);
149156

150157
menuInstance = {
151158
destroy: () => {

‎src/menu/view/item.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default class Item extends Component {
134134
const { level, root, replaceClassName, groupIndent, component, disabled, className, children, needIndent, parentMode, _key } = this.props;
135135
const others = pickOthers(Object.keys(Item.propTypes), this.props);
136136

137-
const { prefix, focusable, inlineIndent, itemClassName } = root.props;
137+
const { prefix, focusable, inlineIndent, itemClassName, rtl } = root.props;
138138
const focused = this.getFocused();
139139

140140
const newClassName = replaceClassName ? className : cx({
@@ -153,7 +153,7 @@ export default class Item extends Component {
153153
if (parentMode === 'inline' && level > 1 && inlineIndent > 0 && needIndent) {
154154
others.style = {
155155
...(others.style || {}),
156-
paddingLeft: `${(level * inlineIndent) - ((groupIndent || 0) * 0.4 * inlineIndent)}px`
156+
[rtl ? 'paddingRight' : 'paddingLeft']: `${(level * inlineIndent) - ((groupIndent || 0) * 0.4 * inlineIndent)}px`
157157
};
158158
}
159159
const TagName = component;

‎src/menu/view/menu.jsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default class Menu extends Component {
1717
static propTypes = {
1818
prefix: PropTypes.string,
1919
pure: PropTypes.bool,
20+
rtl: PropTypes.bool,
2021
className: PropTypes.string,
2122
/**
2223
* 菜单项和子菜单
@@ -607,7 +608,7 @@ export default class Menu extends Component {
607608
}
608609

609610
render() {
610-
const { prefix, className, direction, hozAlign, header, footer, selectMode } = this.props;
611+
const { prefix, className, direction, hozAlign, header, footer, selectMode, rtl } = this.props;
611612
const others = pickOthers(Object.keys(Menu.propTypes), this.props);
612613

613614
const newClassName = cx({
@@ -623,6 +624,10 @@ export default class Menu extends Component {
623624
const footerElement = footer ? <li className={`${prefix}menu-footer`}>{footer}</li> : null;
624625
const shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;
625626

627+
if (rtl) {
628+
others.dir = 'rtl';
629+
}
630+
626631
return (
627632
<ul role={role} className={newClassName} onKeyDown={this.handleEnter} aria-multiselectable={selectMode === 'multiple'} {...others}>
628633
{headerElement}

‎src/menu/view/popup-item.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ export default class PopupItem extends Component {
190190

191191
const positionProps = {};
192192
let arrowProps;
193+
193194
if (direction === 'hoz' && level === 1) {
194195
positionProps.align = 'tl bl';
195196
positionProps.offset = [0, 0];

‎src/menu/view/sub-menu.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default class SubMenu extends Component {
123123

124124
renderInline() {
125125
const { _key, level, root, className, selectable: selectableFromProps, label, children, subMenuContentClassName, triggerType: propsTriggerType, parentMode } = this.props;
126-
const { prefix, selectMode, triggerType: rootTriggerType, inlineArrowDirection, expandAnimation } = root.props;
126+
const { prefix, selectMode, triggerType: rootTriggerType, inlineArrowDirection, expandAnimation, rtl } = root.props;
127127
const triggerType = propsTriggerType || rootTriggerType;
128128
const open = this.getOpen();
129129
const others = obj.pickOthers(Object.keys(SubMenu.propTypes), this.props);
@@ -174,7 +174,7 @@ export default class SubMenu extends Component {
174174
});
175175

176176
const subMenu = open ? (
177-
<ul role="menu" ref="subMenu" className={newSubMenuContentClassName}>
177+
<ul role="menu" dir={rtl ? 'rtl' : undefined} ref="subMenu" className={newSubMenuContentClassName}>
178178
{this.passParentToChildren(children)}
179179
</ul>
180180
) : null;
@@ -198,7 +198,7 @@ export default class SubMenu extends Component {
198198
renderPopup() {
199199
const { children, subMenuContentClassName, ...others } = this.props;
200200
const root = this.props.root;
201-
const { prefix, popupClassName, popupStyle } = root.props;
201+
const { prefix, popupClassName, popupStyle, rtl } = root.props;
202202

203203
const newClassName = cx({
204204
[`${prefix}menu`]: true,
@@ -209,7 +209,7 @@ export default class SubMenu extends Component {
209209

210210
return (
211211
<PopupItem {...others} hasSubMenu>
212-
<ul role="menu" className={newClassName} style={popupStyle}>
212+
<ul role="menu" dir={rtl ? 'rtl' : undefined} className={newClassName} style={popupStyle}>
213213
{this.passParentToChildren(children)}
214214
</ul>
215215
</PopupItem>

0 commit comments

Comments
 (0)