1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React from 'react';
|
10 | import { findDOMNode } from 'react-dom';
|
11 | import PropTypes from 'prop-types';
|
12 | import { polyfill } from 'react-lifecycles-compat';
|
13 | import classnames from 'classnames';
|
14 | import Button from '../button';
|
15 | import Icon from '../icon';
|
16 | import Menu from '../menu';
|
17 | import Overlay from '../overlay';
|
18 | import ConfigProvider from '../config-provider';
|
19 | import { obj, func } from '../util';
|
20 |
|
21 | var Popup = Overlay.Popup;
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | var MenuButton = (_temp = _class = function (_React$Component) {
|
28 | _inherits(MenuButton, _React$Component);
|
29 |
|
30 | function MenuButton(props, context) {
|
31 | _classCallCheck(this, MenuButton);
|
32 |
|
33 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
|
34 |
|
35 | _this.clickMenuItem = function (key) {
|
36 | var _this$props;
|
37 |
|
38 | for (var _len = arguments.length, others = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
39 | others[_key - 1] = arguments[_key];
|
40 | }
|
41 |
|
42 | var selectMode = _this.props.selectMode;
|
43 |
|
44 |
|
45 | (_this$props = _this.props).onItemClick.apply(_this$props, [key].concat(others));
|
46 |
|
47 | if (selectMode === 'multiple') {
|
48 | return;
|
49 | }
|
50 |
|
51 | _this.onPopupVisibleChange(false, 'menuSelect');
|
52 | };
|
53 |
|
54 | _this.selectMenu = function (keys) {
|
55 | var _this$props2;
|
56 |
|
57 | for (var _len2 = arguments.length, others = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
58 | others[_key2 - 1] = arguments[_key2];
|
59 | }
|
60 |
|
61 | if (!('selectedKeys' in _this.props)) {
|
62 | _this.setState({
|
63 | selectedKeys: keys
|
64 | });
|
65 | }
|
66 | (_this$props2 = _this.props).onSelect.apply(_this$props2, [keys].concat(others));
|
67 | };
|
68 |
|
69 | _this.onPopupOpen = function () {
|
70 | var button = findDOMNode(_this);
|
71 | if (_this.props.autoWidth && button && _this.menu) {
|
72 | _this.menu.style.width = button.offsetWidth + 'px';
|
73 | }
|
74 | };
|
75 |
|
76 | _this.onPopupVisibleChange = function (visible, type) {
|
77 | if (!('visible' in _this.props)) {
|
78 | _this.setState({
|
79 | visible: visible
|
80 | });
|
81 | }
|
82 | _this.props.onVisibleChange(visible, type);
|
83 | };
|
84 |
|
85 | _this._menuRefHandler = function (ref) {
|
86 | _this.menu = findDOMNode(ref);
|
87 |
|
88 | var refFn = _this.props.menuProps.ref;
|
89 | if (typeof refFn === 'function') {
|
90 | refFn(ref);
|
91 | }
|
92 | };
|
93 |
|
94 | _this.state = {
|
95 | selectedKeys: props.defaultSelectedKeys,
|
96 | visible: props.defaultVisible
|
97 | };
|
98 | return _this;
|
99 | }
|
100 |
|
101 | MenuButton.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
102 | var st = {};
|
103 |
|
104 | if ('visible' in props) {
|
105 | st.visible = props.visible;
|
106 | }
|
107 |
|
108 | if ('selectedKeys' in props) {
|
109 | st.selectedKeys = props.selectedKeys;
|
110 | }
|
111 |
|
112 | return st;
|
113 | };
|
114 |
|
115 | MenuButton.prototype.render = function render() {
|
116 | var _classnames, _classnames2;
|
117 |
|
118 | var _props = this.props,
|
119 | prefix = _props.prefix,
|
120 | style = _props.style,
|
121 | className = _props.className,
|
122 | label = _props.label,
|
123 | popupTriggerType = _props.popupTriggerType,
|
124 | popupContainer = _props.popupContainer,
|
125 | popupStyle = _props.popupStyle,
|
126 | popupClassName = _props.popupClassName,
|
127 | popupProps = _props.popupProps,
|
128 | followTrigger = _props.followTrigger,
|
129 | selectMode = _props.selectMode,
|
130 | menuProps = _props.menuProps,
|
131 | children = _props.children,
|
132 | others = _objectWithoutProperties(_props, ['prefix', 'style', 'className', 'label', 'popupTriggerType', 'popupContainer', 'popupStyle', 'popupClassName', 'popupProps', 'followTrigger', 'selectMode', 'menuProps', 'children']);
|
133 |
|
134 | var state = this.state;
|
135 |
|
136 | var classNames = classnames((_classnames = {}, _classnames[prefix + 'menu-btn'] = true, _classnames[prefix + 'expand'] = state.visible, _classnames.opened = state.visible, _classnames), className);
|
137 |
|
138 | var popupClassNames = classnames((_classnames2 = {}, _classnames2[prefix + 'menu-btn-popup'] = true, _classnames2), popupClassName);
|
139 |
|
140 | var trigger = React.createElement(
|
141 | Button,
|
142 | _extends({ style: style, className: classNames }, obj.pickOthers(MenuButton.propTypes, others)),
|
143 | label,
|
144 | ' ',
|
145 | React.createElement(Icon, { type: 'arrow-down', className: prefix + 'menu-btn-arrow' })
|
146 | );
|
147 |
|
148 | return React.createElement(
|
149 | Popup,
|
150 | _extends({}, popupProps, {
|
151 | followTrigger: followTrigger,
|
152 | visible: state.visible,
|
153 | onVisibleChange: this.onPopupVisibleChange,
|
154 | trigger: trigger,
|
155 | triggerType: popupTriggerType,
|
156 | container: popupContainer,
|
157 | onOpen: this.onPopupOpen,
|
158 | style: popupStyle,
|
159 | className: popupClassNames
|
160 | }),
|
161 | React.createElement(
|
162 | 'div',
|
163 | { className: prefix + 'menu-btn-spacing-tb' },
|
164 | React.createElement(
|
165 | Menu,
|
166 | _extends({}, menuProps, {
|
167 | ref: this._menuRefHandler,
|
168 | selectedKeys: state.selectedKeys,
|
169 | selectMode: selectMode,
|
170 | onSelect: this.selectMenu,
|
171 | onItemClick: this.clickMenuItem
|
172 | }),
|
173 | children
|
174 | )
|
175 | )
|
176 | );
|
177 | };
|
178 |
|
179 | return MenuButton;
|
180 | }(React.Component), _class.propTypes = {
|
181 | prefix: PropTypes.string,
|
182 | |
183 |
|
184 |
|
185 | label: PropTypes.node,
|
186 | |
187 |
|
188 |
|
189 | autoWidth: PropTypes.bool,
|
190 | |
191 |
|
192 |
|
193 | popupTriggerType: PropTypes.oneOf(['click', 'hover']),
|
194 | |
195 |
|
196 |
|
197 | popupContainer: PropTypes.any,
|
198 | |
199 |
|
200 |
|
201 | visible: PropTypes.bool,
|
202 | |
203 |
|
204 |
|
205 | defaultVisible: PropTypes.bool,
|
206 | |
207 |
|
208 |
|
209 | onVisibleChange: PropTypes.func,
|
210 | |
211 |
|
212 |
|
213 | popupStyle: PropTypes.object,
|
214 | |
215 |
|
216 |
|
217 | popupClassName: PropTypes.string,
|
218 | |
219 |
|
220 |
|
221 | popupProps: PropTypes.object,
|
222 | |
223 |
|
224 |
|
225 | followTrigger: PropTypes.bool,
|
226 | |
227 |
|
228 |
|
229 | defaultSelectedKeys: PropTypes.array,
|
230 | |
231 |
|
232 |
|
233 | selectedKeys: PropTypes.array,
|
234 | |
235 |
|
236 |
|
237 | selectMode: PropTypes.oneOf(['single', 'multiple']),
|
238 | |
239 |
|
240 |
|
241 | onItemClick: PropTypes.func,
|
242 | |
243 |
|
244 |
|
245 | onSelect: PropTypes.func,
|
246 | |
247 |
|
248 |
|
249 | menuProps: PropTypes.object,
|
250 | style: PropTypes.object,
|
251 | className: PropTypes.string,
|
252 | children: PropTypes.any
|
253 | }, _class.defaultProps = {
|
254 | prefix: 'next-',
|
255 | autoWidth: true,
|
256 | popupTriggerType: 'click',
|
257 | onVisibleChange: func.noop,
|
258 | onItemClick: func.noop,
|
259 | onSelect: func.noop,
|
260 | defaultSelectedKeys: [],
|
261 | menuProps: {}
|
262 | }, _temp);
|
263 | MenuButton.displayName = 'MenuButton';
|
264 |
|
265 |
|
266 | MenuButton.Item = Menu.Item;
|
267 | MenuButton.Group = Menu.Group;
|
268 | MenuButton.Divider = Menu.Divider;
|
269 |
|
270 | export default ConfigProvider.config(polyfill(MenuButton), {
|
271 | componentName: 'MenuButton'
|
272 | }); |
\ | No newline at end of file |