SubPopupMenu.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import omit from 'omit.js';
  5. import PropTypes from '../_util/vue-types';
  6. import { connect } from '../_util/store';
  7. import BaseMixin from '../_util/BaseMixin';
  8. import KeyCode from '../_util/KeyCode';
  9. import classNames from 'classnames';
  10. import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice } from './util';
  11. import DOMWrap from './DOMWrap';
  12. import { cloneElement } from '../_util/vnode';
  13. import { initDefaultProps, getOptionProps, getPropsData, getEvents, getComponentFromProp, getListeners } from '../_util/props-util';
  14. function allDisabled(arr) {
  15. if (!arr.length) {
  16. return true;
  17. }
  18. return arr.every(function (c) {
  19. return !!c.disabled;
  20. });
  21. }
  22. function updateActiveKey(store, menuId, activeKey) {
  23. var state = store.getState();
  24. store.setState({
  25. activeKey: _extends({}, state.activeKey, _defineProperty({}, menuId, activeKey))
  26. });
  27. }
  28. function getEventKey(props) {
  29. // when eventKey not available ,it's menu and return menu id '0-menu-'
  30. return props.eventKey || '0-menu-';
  31. }
  32. export function saveRef(key, c) {
  33. if (c) {
  34. var index = this.instanceArrayKeyIndexMap[key];
  35. this.instanceArray[index] = c;
  36. }
  37. }
  38. export function getActiveKey(props, originalActiveKey) {
  39. var activeKey = originalActiveKey;
  40. var eventKey = props.eventKey,
  41. defaultActiveFirst = props.defaultActiveFirst,
  42. children = props.children;
  43. if (activeKey !== undefined && activeKey !== null) {
  44. var found = void 0;
  45. loopMenuItem(children, function (c, i) {
  46. var propsData = c.componentOptions.propsData || {};
  47. if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
  48. found = true;
  49. }
  50. });
  51. if (found) {
  52. return activeKey;
  53. }
  54. }
  55. activeKey = null;
  56. if (defaultActiveFirst) {
  57. loopMenuItem(children, function (c, i) {
  58. var propsData = c.componentOptions.propsData || {};
  59. var noActiveKey = activeKey === null || activeKey === undefined;
  60. if (noActiveKey && c && !propsData.disabled) {
  61. activeKey = getKeyFromChildrenIndex(c, eventKey, i);
  62. }
  63. });
  64. return activeKey;
  65. }
  66. return activeKey;
  67. }
  68. var SubPopupMenu = {
  69. name: 'SubPopupMenu',
  70. props: initDefaultProps({
  71. // onSelect: PropTypes.func,
  72. // onClick: PropTypes.func,
  73. // onDeselect: PropTypes.func,
  74. // onOpenChange: PropTypes.func,
  75. // onDestroy: PropTypes.func,
  76. prefixCls: PropTypes.string,
  77. openTransitionName: PropTypes.string,
  78. openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  79. openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  80. visible: PropTypes.bool,
  81. parentMenu: PropTypes.object,
  82. eventKey: PropTypes.string,
  83. store: PropTypes.object,
  84. forceSubMenuRender: PropTypes.bool,
  85. // adding in refactor
  86. focusable: PropTypes.bool,
  87. multiple: PropTypes.bool,
  88. defaultActiveFirst: PropTypes.bool,
  89. activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  90. selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  91. defaultSelectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  92. defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  93. level: PropTypes.number,
  94. mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
  95. triggerSubMenuAction: PropTypes.oneOf(['click', 'hover']),
  96. inlineIndent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  97. manualRef: PropTypes.func,
  98. itemIcon: PropTypes.any,
  99. expandIcon: PropTypes.any,
  100. overflowedIndicator: PropTypes.any,
  101. children: PropTypes.any.def([]),
  102. __propsSymbol__: PropTypes.any // mock componentWillReceiveProps
  103. }, {
  104. prefixCls: 'rc-menu',
  105. mode: 'vertical',
  106. level: 1,
  107. inlineIndent: 24,
  108. visible: true,
  109. focusable: true,
  110. manualRef: noop
  111. }),
  112. mixins: [BaseMixin],
  113. created: function created() {
  114. var props = getOptionProps(this);
  115. this.prevProps = _extends({}, props);
  116. props.store.setState({
  117. activeKey: _extends({}, props.store.getState().activeKey, _defineProperty({}, props.eventKey, getActiveKey(props, props.activeKey)))
  118. });
  119. this.instanceArray = [];
  120. },
  121. mounted: function mounted() {
  122. // invoke customized ref to expose component to mixin
  123. if (this.manualRef) {
  124. this.manualRef(this);
  125. }
  126. },
  127. updated: function updated() {
  128. var props = getOptionProps(this);
  129. var prevProps = this.prevProps;
  130. var originalActiveKey = 'activeKey' in props ? props.activeKey : props.store.getState().activeKey[getEventKey(props)];
  131. var activeKey = getActiveKey(props, originalActiveKey);
  132. if (activeKey !== originalActiveKey) {
  133. updateActiveKey(props.store, getEventKey(props), activeKey);
  134. } else if ('activeKey' in prevProps) {
  135. // If prev activeKey is not same as current activeKey,
  136. // we should set it.
  137. var prevActiveKey = getActiveKey(prevProps, prevProps.activeKey);
  138. if (activeKey !== prevActiveKey) {
  139. updateActiveKey(props.store, getEventKey(props), activeKey);
  140. }
  141. }
  142. this.prevProps = _extends({}, props);
  143. },
  144. methods: {
  145. // all keyboard events callbacks run from here at first
  146. onKeyDown: function onKeyDown(e, callback) {
  147. var keyCode = e.keyCode;
  148. var handled = void 0;
  149. this.getFlatInstanceArray().forEach(function (obj) {
  150. if (obj && obj.active && obj.onKeyDown) {
  151. handled = obj.onKeyDown(e);
  152. }
  153. });
  154. if (handled) {
  155. return 1;
  156. }
  157. var activeItem = null;
  158. if (keyCode === KeyCode.UP || keyCode === KeyCode.DOWN) {
  159. activeItem = this.step(keyCode === KeyCode.UP ? -1 : 1);
  160. }
  161. if (activeItem) {
  162. e.preventDefault();
  163. updateActiveKey(this.$props.store, getEventKey(this.$props), activeItem.eventKey);
  164. if (typeof callback === 'function') {
  165. callback(activeItem);
  166. }
  167. return 1;
  168. }
  169. return undefined;
  170. },
  171. onItemHover: function onItemHover(e) {
  172. var key = e.key,
  173. hover = e.hover;
  174. updateActiveKey(this.$props.store, getEventKey(this.$props), hover ? key : null);
  175. },
  176. onDeselect: function onDeselect(selectInfo) {
  177. this.__emit('deselect', selectInfo);
  178. },
  179. onSelect: function onSelect(selectInfo) {
  180. this.__emit('select', selectInfo);
  181. },
  182. onClick: function onClick(e) {
  183. this.__emit('click', e);
  184. },
  185. onOpenChange: function onOpenChange(e) {
  186. this.__emit('openChange', e);
  187. },
  188. onDestroy: function onDestroy(key) {
  189. this.__emit('destroy', key);
  190. },
  191. getFlatInstanceArray: function getFlatInstanceArray() {
  192. return this.instanceArray;
  193. },
  194. getOpenTransitionName: function getOpenTransitionName() {
  195. return this.$props.openTransitionName;
  196. },
  197. step: function step(direction) {
  198. var children = this.getFlatInstanceArray();
  199. var activeKey = this.$props.store.getState().activeKey[getEventKey(this.$props)];
  200. var len = children.length;
  201. if (!len) {
  202. return null;
  203. }
  204. if (direction < 0) {
  205. children = children.concat().reverse();
  206. }
  207. // find current activeIndex
  208. var activeIndex = -1;
  209. children.every(function (c, ci) {
  210. if (c && c.eventKey === activeKey) {
  211. activeIndex = ci;
  212. return false;
  213. }
  214. return true;
  215. });
  216. if (!this.defaultActiveFirst && activeIndex !== -1 && allDisabled(children.slice(activeIndex, len - 1))) {
  217. return undefined;
  218. }
  219. var start = (activeIndex + 1) % len;
  220. var i = start;
  221. do {
  222. var child = children[i];
  223. if (!child || child.disabled) {
  224. i = (i + 1) % len;
  225. } else {
  226. return child;
  227. }
  228. } while (i !== start);
  229. return null;
  230. },
  231. getIcon: function getIcon(instance, name) {
  232. if (instance.$createElement) {
  233. var temp = instance[name];
  234. if (temp !== undefined) {
  235. return temp;
  236. }
  237. return instance.$slots[name] || instance.$scopedSlots[name];
  238. } else {
  239. var _temp = getPropsData(instance)[name];
  240. if (_temp !== undefined) {
  241. return _temp;
  242. }
  243. var slotsProp = [];
  244. var componentOptions = instance.componentOptions || {};
  245. (componentOptions.children || []).forEach(function (child) {
  246. if (child.data && child.data.slot === name) {
  247. if (child.tag === 'template') {
  248. slotsProp.push(child.children);
  249. } else {
  250. slotsProp.push(child);
  251. }
  252. }
  253. });
  254. return slotsProp.length ? slotsProp : undefined;
  255. }
  256. },
  257. renderCommonMenuItem: function renderCommonMenuItem(child, i, extraProps) {
  258. var _this = this;
  259. if (child.tag === undefined) {
  260. return child;
  261. }
  262. var state = this.$props.store.getState();
  263. var props = this.$props;
  264. var key = getKeyFromChildrenIndex(child, props.eventKey, i);
  265. var childProps = child.componentOptions.propsData || {};
  266. var isActive = key === state.activeKey[getEventKey(this.$props)];
  267. if (!childProps.disabled) {
  268. // manualRef的执行顺序不能保证,使用key映射ref在this.instanceArray中的位置
  269. this.instanceArrayKeyIndexMap[key] = Object.keys(this.instanceArrayKeyIndexMap).length;
  270. }
  271. var childListeners = getEvents(child);
  272. var newChildProps = {
  273. props: _extends({
  274. mode: childProps.mode || props.mode,
  275. level: props.level,
  276. inlineIndent: props.inlineIndent,
  277. renderMenuItem: this.renderMenuItem,
  278. rootPrefixCls: props.prefixCls,
  279. index: i,
  280. parentMenu: props.parentMenu,
  281. // customized ref function, need to be invoked manually in child's componentDidMount
  282. manualRef: childProps.disabled ? noop : saveRef.bind(this, key),
  283. eventKey: key,
  284. active: !childProps.disabled && isActive,
  285. multiple: props.multiple,
  286. openTransitionName: this.getOpenTransitionName(),
  287. openAnimation: props.openAnimation,
  288. subMenuOpenDelay: props.subMenuOpenDelay,
  289. subMenuCloseDelay: props.subMenuCloseDelay,
  290. forceSubMenuRender: props.forceSubMenuRender,
  291. builtinPlacements: props.builtinPlacements,
  292. itemIcon: this.getIcon(child, 'itemIcon') || this.getIcon(this, 'itemIcon'),
  293. expandIcon: this.getIcon(child, 'expandIcon') || this.getIcon(this, 'expandIcon')
  294. }, extraProps),
  295. on: {
  296. click: function click(e) {
  297. (childListeners.click || noop)(e);
  298. _this.onClick(e);
  299. },
  300. itemHover: this.onItemHover,
  301. openChange: this.onOpenChange,
  302. deselect: this.onDeselect,
  303. // destroy: this.onDestroy,
  304. select: this.onSelect
  305. }
  306. };
  307. // ref: https://github.com/ant-design/ant-design/issues/13943
  308. if (props.mode === 'inline' || isMobileDevice()) {
  309. newChildProps.props.triggerSubMenuAction = 'click';
  310. }
  311. return cloneElement(child, newChildProps);
  312. },
  313. renderMenuItem: function renderMenuItem(c, i, subMenuKey) {
  314. if (!c) {
  315. return null;
  316. }
  317. var state = this.$props.store.getState();
  318. var extraProps = {
  319. openKeys: state.openKeys,
  320. selectedKeys: state.selectedKeys,
  321. triggerSubMenuAction: this.triggerSubMenuAction,
  322. isRootMenu: false,
  323. subMenuKey: subMenuKey
  324. };
  325. return this.renderCommonMenuItem(c, i, extraProps);
  326. }
  327. },
  328. render: function render() {
  329. var _this2 = this;
  330. var h = arguments[0];
  331. var props = _objectWithoutProperties(this.$props, []);
  332. var eventKey = props.eventKey,
  333. prefixCls = props.prefixCls,
  334. visible = props.visible,
  335. level = props.level,
  336. mode = props.mode,
  337. theme = props.theme;
  338. this.instanceArray = [];
  339. this.instanceArrayKeyIndexMap = {};
  340. var className = classNames(props.prefixCls, props.prefixCls + '-' + props.mode);
  341. var domWrapProps = {
  342. props: {
  343. tag: 'ul',
  344. // hiddenClassName: `${prefixCls}-hidden`,
  345. visible: visible,
  346. prefixCls: prefixCls,
  347. level: level,
  348. mode: mode,
  349. theme: theme,
  350. overflowedIndicator: getComponentFromProp(this, 'overflowedIndicator')
  351. },
  352. attrs: {
  353. role: props.role || 'menu'
  354. },
  355. 'class': className,
  356. // Otherwise, the propagated click event will trigger another onClick
  357. on: omit(getListeners(this), ['click'])
  358. };
  359. // if (props.id) {
  360. // domProps.id = props.id
  361. // }
  362. if (props.focusable) {
  363. domWrapProps.attrs.tabIndex = '0';
  364. domWrapProps.on.keydown = this.onKeyDown;
  365. }
  366. return (
  367. // ESLint is not smart enough to know that the type of `children` was checked.
  368. /* eslint-disable */
  369. h(
  370. DOMWrap,
  371. domWrapProps,
  372. [props.children.map(function (c, i) {
  373. return _this2.renderMenuItem(c, i, eventKey || '0-menu-');
  374. })]
  375. )
  376. /*eslint -enable */
  377. );
  378. }
  379. };
  380. export default connect()(SubPopupMenu);