support custom arrow icon in vertical and inline mode. #182

HeskeyBaozi · 2018-07-24T12:14:00Z

向外暴露arrowIcon接口来自定义菜单图标。
只限于垂直和内联模式。
以便未来使用svg图标。

coveralls · 2018-07-24T12:26:09Z

Coverage increased (+0.008%) to 99.685% when pulling 34356d7 on HeskeyBaozi:master into d7eaed4 on react-component:master.

picodoth · 2018-07-25T03:04:05Z

assets/custom-arrow-icon.less

@@ -0,0 +1,294 @@
+@menuPrefixCls: rc-menu;


这里好像跟 index.less 只有三行不一样的代码，是不是应该 @import 'index' 然后覆盖修改的样式。

没必要新增这个文件，支持覆盖 arrowIcon，但是不需要管覆盖的 arrowIcon 的样式。

这个文件要去掉，自定义图标的样式这里不管。

picodoth · 2018-07-25T03:06:32Z

examples/custom-arrow-icon.js

+ console.log(info);
+}
+
+const animation = {


这里重命名一下吧，好奇怪竟然不报错。

picodoth · 2018-07-25T03:10:37Z

examples/custom-arrow-icon.js

+import 'rc-menu/assets/custom-arrow-icon.less';
+import animate from 'css-animation';
+
+const getSvgIcon = () => {


这个地方能不能通过 example 页面的一个 toggle 来做，否则又是大量重复代码。

简单的功能，没必要单独写个 demo

yesmeck · 2018-07-25T03:29:36Z

src/SubMenu.jsx

- <i className={`${prefixCls}-arrow`} />
+ <i className={`${prefixCls}-arrow`}>
+ {arrowIcon}
+ </i>


一样的不需要套在 <i> 里。

ant-design-bot · 2018-07-30T04:17:03Z

Deploy preview for rc-menu ready!

Built with commit 34356d7

https://deploy-preview-182--rc-menu.netlify.com

yesmeck · 2018-07-30T04:22:18Z

assets/custom-arrow-icon.less

@@ -0,0 +1,294 @@
+@menuPrefixCls: rc-menu;


这个文件要去掉，自定义图标的样式这里不管。

点错了

yesmeck · 2018-08-06T09:18:09Z

src/SubMenu.jsx

@@ -474,7 +479,7 @@ export class SubMenu extends React.Component {
 title={typeof props.title === 'string' ? props.title : undefined}
 >
 {props.title}
- <i className={`${prefixCls}-arrow`} />
+ {arrowIcon || <i className={`${prefixCls}-arrow`}/>}


/> 前要有空格。。

HeskeyBaozi · 2018-08-09T03:51:38Z

yesmeck · 2018-08-09T08:15:44Z

README.md

+ <td>(props: MenuItemProps | SubMenuProps) => ReactNode</td>
+ <th></th>
+ <td>specific the arrow icon.</td>
+ </tr>


arrowIcon?

itemIcon?

yesmeck · 2018-08-10T06:30:40Z

src/SubMenu.jsx

@@ -474,7 +483,7 @@ export class SubMenu extends React.Component {
 title={typeof props.title === 'string' ? props.title : undefined}
 >
 {props.title}
- <i className={`${prefixCls}-arrow`} />
+ {icon || <i className={`${prefixCls}-arrow`} />}


这个 icon 应该只给 MenuItem 用吧

也包括SubMenu的

yesmeck · 2018-08-13T07:35:26Z

README.md

+ <td>expandIcon</td>
+ <td>(props: SubMenuProps) => ReactNode</td>
+ <th></th>
+ <td>specific the menu item icon.</td>


yesmeck · 2018-08-13T07:38:01Z

src/SubMenu.jsx

@@ -529,7 +540,10 @@ export class SubMenu extends React.Component {
 }
 }

-const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
+const connected = connect((


无关的提交

yesmeck · 2018-08-13T07:38:17Z

src/Menu.jsx

+ static contextTypes = {
+ itemIcon: PropTypes.func,
+ expandIcon: PropTypes.func,
+ }


context 应该去掉？

师兄你是对的。
用到的两处地方Dropdown和Select都可以通过传itemIcon和expandIcon给<MenuItem />即可。

Dropwdown

Select

我一开始的想法就是透过原本的rc-dropdown和rc-select传入到里层的rc-menu，才用的context。现在发现没有必要。
这样之后rc-select可能还会有个pr。

yesmeck · 2018-08-15T03:14:24Z

src/SubMenu.jsx

@@ -63,6 +63,8 @@ export class SubMenu extends React.Component {
 store: PropTypes.object,
 mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
 manualRef: PropTypes.func,
+ itemIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),


这行是多余的？

yesmeck · 2018-08-15T03:14:37Z

src/SubMenu.jsx

@@ -366,6 +368,8 @@ export class SubMenu extends React.Component {
 prefixCls: props.rootPrefixCls,
 id: this._menuId,
 manualRef: this.saveMenuInstance,
+ itemIcon: props.itemIcon,


多余的？

SubMenu也类似Menu一样，需要ItemIcon传给children中的MenuItem。
若去掉则整个Menu只有第一层有图标，SubMenu中的MenuItem都没有图标。

yesmeck · 2018-08-16T03:04:14Z

看下测试挂了。

yesmeck · 2018-08-17T03:17:42Z

master 上是好的，看下有什么区别

yesmeck · 2018-08-17T10:43:11Z

可以了，rebase 下 master

fix tests as mini-store upgrade

yesmeck · 2018-08-21T03:10:48Z

@picodoth 看下

picodoth · 2018-08-22T05:19:04Z

README.md

+ <td>itemIcon</td>
+ <td>ReactNode | (props: MenuItemProps) => ReactNode</td>
+ <th></th>
+ <td>specific the menu item icon.</td>


Specify icon for menu item.

picodoth · 2018-08-22T05:19:19Z

README.md

+ <td>expandIcon</td>
+ <td>ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode</td>
+ <th></th>
+ <td>specific the menu item icon.</td>


Specify expanded icon for ~~menu item~~ submenu title

picodoth · 2018-08-22T05:19:56Z

README.md

+ <td>itemIcon</td>
+ <td>ReactNode | (props: MenuItemProps) => ReactNode</td>
+ <th></th>
+ <td>specific the menu item icon.</td>


Specify icon for menu item.

picodoth · 2018-08-22T05:20:11Z

README.md

+ <td>itemIcon</td>
+ <td>ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode</td>
+ <th></th>
+ <td>specific the menu item icon.</td>


picodoth · 2018-08-22T05:22:05Z

src/MenuItem.jsx

@@ -30,6 +30,7 @@ export class MenuItem extends React.Component {
 multiple: PropTypes.bool,
 isSelected: PropTypes.bool,
 manualRef: PropTypes.func,
+ itemIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),


这里不需要 expandIcon 么

知道了 expandedicon 只在 submenu 上生效

picodoth · 2018-08-22T05:24:06Z

src/SubMenu.jsx

+ if (typeof this.props.expandIcon === 'function') {
+ icon = React.createElement(
+ this.props.expandIcon,
+ { ...this.props }


这里为啥需要传 props

这里可以让使用者根据mode等属性使用不同的图标

没懂，举个🌰？

function expandIcon(props) { return getSvgIcon({ position: 'absolute', right: '1rem', color: props.mode === 'vertical' ? 'lightblue' : 'hotpink', transform: `rotate(${props.isOpen ? 90 : 0}deg)`, }); }

这里是根据mode和isOpen确定不同的样式。

是啊，那不需要吧， {...this.props} this.props.expandedIcon 已经包含这个信息了

picodoth · 2018-08-22T05:26:16Z

@HeskeyBaozi

yesmeck · 2018-08-23T08:14:01Z

7.3.0

HeskeyBaozi added 2 commits July 24, 2018 18:29

support arrow icon.

6de7d05

add test cases

c0379c6

HeskeyBaozi mentioned this pull request Jul 24, 2018

Replace unicode characters with Icon component in antd ant-design/ant-design-icons#6

Closed

picodoth reviewed Jul 25, 2018

View reviewed changes

yesmeck reviewed Jul 25, 2018

View reviewed changes

HeskeyBaozi and others added 2 commits July 25, 2018 18:05

update demo

9468e29

Update README.md

00f4c2f

yesmeck previously approved these changes Jul 30, 2018

View reviewed changes

HeskeyBaozi added 2 commits July 30, 2018 17:05

update demo

4efb5c8

Merge branch 'master' of https://github.com/HeskeyBaozi/menu

d0ecaf6

yesmeck reviewed Aug 6, 2018

View reviewed changes

HeskeyBaozi added 2 commits August 7, 2018 18:17

fix tslint

474b1e3

use customIcon

a6e6434

yesmeck reviewed Aug 9, 2018

View reviewed changes

customIcon => itemIcon

f4d4650

yesmeck reviewed Aug 10, 2018

View reviewed changes

HeskeyBaozi added 2 commits August 10, 2018 15:15

split itemIcon & expandIcon

b8f7e61

support getting icon from context

b421fa4

yesmeck reviewed Aug 13, 2018

View reviewed changes

HeskeyBaozi added 3 commits August 13, 2018 17:56

remove context

fc36cd9

remove useless

98d394d

update readme.md

d27ee52

HeskeyBaozi mentioned this pull request Aug 14, 2018

feat(Icon) SVG Icon & Custom Icon ant-design/ant-design#11322

Merged

16 tasks

yesmeck reviewed Aug 15, 2018

View reviewed changes

request ci

af3fdce

remove isSubMenu

c87971e

HeskeyBaozi added 3 commits August 17, 2018 18:45

Merge pull request #1 from react-component/master

952f5b6

fix tests as mini-store upgrade

test coverage

3885f3c

eslint

c8ca3d7

picodoth reviewed Aug 22, 2018

View reviewed changes

update readme.md

34356d7

picodoth approved these changes Aug 22, 2018

View reviewed changes

yesmeck merged commit 07b4ccc into react-component:master Aug 22, 2018

support custom arrow icon in vertical and inline mode. #182

support custom arrow icon in vertical and inline mode. #182

Conversation

HeskeyBaozi commented Jul 24, 2018

coveralls commented Jul 24, 2018 • edited Loading

Choose a reason for hiding this comment

yesmeck Jul 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ant-design-bot commented Jul 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeskeyBaozi commented Aug 9, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeskeyBaozi Aug 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yesmeck commented Aug 16, 2018

yesmeck commented Aug 17, 2018

yesmeck commented Aug 17, 2018

yesmeck commented Aug 21, 2018

Choose a reason for hiding this comment

picodoth Aug 22, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeskeyBaozi Aug 22, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

picodoth commented Aug 22, 2018

yesmeck commented Aug 23, 2018

coveralls commented Jul 24, 2018 •

edited

Loading

yesmeck Jul 25, 2018 •

edited

Loading

ant-design-bot commented Jul 30, 2018 •

edited

Loading

HeskeyBaozi Aug 13, 2018 •

edited

Loading

picodoth Aug 22, 2018 •

edited

Loading

HeskeyBaozi Aug 22, 2018 •

edited

Loading