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 Icon from '../icon';
|
15 | import Button from '../button';
|
16 | import Overlay from '../overlay';
|
17 | import Menu from '../menu';
|
18 | import ConfigProvider from '../config-provider';
|
19 | import { dom, obj, func } from '../util';
|
20 |
|
21 | var Popup = Overlay.Popup;
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | var SplitButton = (_temp = _class = function (_React$Component) {
|
28 | _inherits(SplitButton, _React$Component);
|
29 |
|
30 | function SplitButton(props, context) {
|
31 | _classCallCheck(this, SplitButton);
|
32 |
|
33 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
|
34 |
|
35 | _this.selectMenuItem = function (keys) {
|
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 | if (!('selectedKeys' in _this.props)) {
|
43 | _this.setState({
|
44 | selectedKeys: keys
|
45 | });
|
46 | }
|
47 | (_this$props = _this.props).onSelect.apply(_this$props, [keys].concat(others));
|
48 | };
|
49 |
|
50 | _this.clickMenuItem = function (key) {
|
51 | var _this$props2;
|
52 |
|
53 | for (var _len2 = arguments.length, others = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
54 | others[_key2 - 1] = arguments[_key2];
|
55 | }
|
56 |
|
57 | (_this$props2 = _this.props).onItemClick.apply(_this$props2, [key].concat(others));
|
58 | _this.onVisibleChange(false, 'menuSelect');
|
59 | };
|
60 |
|
61 | _this.onPopupOpen = function () {
|
62 | if (_this.props.autoWidth && _this.wrapper && _this.menu) {
|
63 | dom.setStyle(_this.menu, {
|
64 | width: _this.wrapper.offsetWidth
|
65 | });
|
66 | }
|
67 | };
|
68 |
|
69 | _this.onVisibleChange = function (visible, reason) {
|
70 | if (!('visible' in _this.props)) {
|
71 | _this.setState({
|
72 | visible: visible
|
73 | });
|
74 | }
|
75 | _this.props.onVisibleChange(visible, reason);
|
76 | };
|
77 |
|
78 | _this._menuRefHandler = function (ref) {
|
79 | _this.menu = findDOMNode(ref);
|
80 |
|
81 | var refFn = _this.props.menuProps.ref;
|
82 | if (typeof refFn === 'function') {
|
83 | refFn(ref);
|
84 | }
|
85 | };
|
86 |
|
87 | _this._wrapperRefHandler = function (ref) {
|
88 | _this.wrapper = findDOMNode(ref);
|
89 | };
|
90 |
|
91 | _this.state = {
|
92 | selectedKeys: props.defaultSelectedKeys,
|
93 | visible: props.defaultVisible
|
94 | };
|
95 | return _this;
|
96 | }
|
97 |
|
98 | SplitButton.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
99 | var st = {};
|
100 |
|
101 | if ('visible' in props) {
|
102 | st.visible = props.visible;
|
103 | }
|
104 |
|
105 | if ('selectedKeys' in props) {
|
106 | st.selectedKeys = props.selectedKeys;
|
107 | }
|
108 |
|
109 | return st;
|
110 | };
|
111 |
|
112 | SplitButton.prototype.componentDidMount = function componentDidMount() {
|
113 |
|
114 | if (this.state.visible) {
|
115 | this.forceUpdate();
|
116 | }
|
117 | };
|
118 |
|
119 | SplitButton.prototype.render = function render() {
|
120 | var _classnames,
|
121 | _classnames2,
|
122 | _classnames3,
|
123 | _this2 = this;
|
124 |
|
125 | var _props = this.props,
|
126 | prefix = _props.prefix,
|
127 | label = _props.label,
|
128 | size = _props.size,
|
129 | type = _props.type,
|
130 | component = _props.component,
|
131 | ghost = _props.ghost,
|
132 | className = _props.className,
|
133 | style = _props.style,
|
134 | children = _props.children,
|
135 | triggerProps = _props.triggerProps,
|
136 | popupAlign = _props.popupAlign,
|
137 | popupTriggerType = _props.popupTriggerType,
|
138 | popupStyle = _props.popupStyle,
|
139 | popupClassName = _props.popupClassName,
|
140 | popupProps = _props.popupProps,
|
141 | popupContainer = _props.popupContainer,
|
142 | followTrigger = _props.followTrigger,
|
143 | selectMode = _props.selectMode,
|
144 | menuProps = _props.menuProps,
|
145 | leftButtonProps = _props.leftButtonProps,
|
146 | disabled = _props.disabled,
|
147 | others = _objectWithoutProperties(_props, ['prefix', 'label', 'size', 'type', 'component', 'ghost', 'className', 'style', 'children', 'triggerProps', 'popupAlign', 'popupTriggerType', 'popupStyle', 'popupClassName', 'popupProps', 'popupContainer', 'followTrigger', 'selectMode', 'menuProps', 'leftButtonProps', 'disabled']);
|
148 |
|
149 | var state = this.state;
|
150 |
|
151 | var classNames = classnames((_classnames = {}, _classnames[prefix + 'split-btn'] = true, _classnames), className);
|
152 |
|
153 | var sharedBtnProps = {
|
154 | type: type,
|
155 | size: size,
|
156 | component: component,
|
157 | ghost: ghost,
|
158 | disabled: disabled
|
159 | };
|
160 |
|
161 | var triggerClassNames = classnames((_classnames2 = {}, _classnames2[prefix + 'split-btn-trigger'] = true, _classnames2[prefix + 'expand'] = state.visible, _classnames2.opened = state.visible, _classnames2));
|
162 |
|
163 | var iconCls = classnames((_classnames3 = {}, _classnames3[prefix + 'split-btn-symbol-fold'] = true, _classnames3));
|
164 |
|
165 | var trigger = React.createElement(
|
166 | Button,
|
167 | _extends({}, sharedBtnProps, triggerProps, { className: triggerClassNames }),
|
168 | React.createElement(Icon, { type: 'arrow-down', className: iconCls })
|
169 | );
|
170 |
|
171 | return React.createElement(
|
172 | Button.Group,
|
173 | _extends({}, obj.pickOthers(SplitButton.propTypes, others), {
|
174 | className: classNames,
|
175 | style: style,
|
176 | size: size,
|
177 | ref: this._wrapperRefHandler
|
178 | }),
|
179 | React.createElement(
|
180 | Button,
|
181 | _extends({}, sharedBtnProps, leftButtonProps),
|
182 | label
|
183 | ),
|
184 | React.createElement(
|
185 | Popup,
|
186 | _extends({}, popupProps, {
|
187 | followTrigger: followTrigger,
|
188 | visible: state.visible,
|
189 | onVisibleChange: this.onVisibleChange,
|
190 | trigger: trigger,
|
191 | triggerType: popupTriggerType,
|
192 | align: popupAlign,
|
193 | container: popupContainer,
|
194 | target: function target() {
|
195 | return _this2.wrapper;
|
196 | },
|
197 | style: popupStyle,
|
198 | shouldUpdatePosition: true,
|
199 | className: popupClassName,
|
200 | onOpen: this.onPopupOpen
|
201 | }),
|
202 | React.createElement(
|
203 | 'div',
|
204 | { className: prefix + 'split-btn-spacing-tb' },
|
205 | React.createElement(
|
206 | Menu,
|
207 | _extends({}, menuProps, {
|
208 | selectMode: selectMode,
|
209 | selectedKeys: state.selectedKeys,
|
210 | onSelect: this.selectMenuItem,
|
211 | onItemClick: this.clickMenuItem,
|
212 | ref: this._menuRefHandler
|
213 | }),
|
214 | children
|
215 | )
|
216 | )
|
217 | )
|
218 | );
|
219 | };
|
220 |
|
221 | return SplitButton;
|
222 | }(React.Component), _class.propTypes = {
|
223 | prefix: PropTypes.string,
|
224 | style: PropTypes.object,
|
225 | |
226 |
|
227 |
|
228 | type: PropTypes.oneOf(['normal', 'primary', 'secondary']),
|
229 | |
230 |
|
231 |
|
232 | size: PropTypes.oneOf(['small', 'medium', 'large']),
|
233 | |
234 |
|
235 |
|
236 | label: PropTypes.node,
|
237 | |
238 |
|
239 |
|
240 | component: PropTypes.oneOf(['button', 'a']),
|
241 | |
242 |
|
243 |
|
244 | ghost: PropTypes.oneOf(['light', 'dark', false, true]),
|
245 | |
246 |
|
247 |
|
248 | defaultSelectedKeys: PropTypes.array,
|
249 | |
250 |
|
251 |
|
252 | selectedKeys: PropTypes.array,
|
253 | |
254 |
|
255 |
|
256 | selectMode: PropTypes.oneOf(['single', 'multiple']),
|
257 | |
258 |
|
259 |
|
260 | onSelect: PropTypes.func,
|
261 | |
262 |
|
263 |
|
264 | onItemClick: PropTypes.func,
|
265 | |
266 |
|
267 |
|
268 | triggerProps: PropTypes.object,
|
269 | |
270 |
|
271 |
|
272 | autoWidth: PropTypes.bool,
|
273 | |
274 |
|
275 |
|
276 | visible: PropTypes.bool,
|
277 | |
278 |
|
279 |
|
280 | defaultVisible: PropTypes.bool,
|
281 | |
282 |
|
283 |
|
284 |
|
285 |
|
286 | onVisibleChange: PropTypes.func,
|
287 | |
288 |
|
289 |
|
290 | popupTriggerType: PropTypes.oneOf(['click', 'hover']),
|
291 | |
292 |
|
293 |
|
294 | popupAlign: PropTypes.string,
|
295 | |
296 |
|
297 |
|
298 | popupStyle: PropTypes.object,
|
299 | |
300 |
|
301 |
|
302 | popupClassName: PropTypes.string,
|
303 | |
304 |
|
305 |
|
306 | popupProps: PropTypes.object,
|
307 | |
308 |
|
309 |
|
310 | popupContainer: PropTypes.any,
|
311 | |
312 |
|
313 |
|
314 | followTrigger: PropTypes.bool,
|
315 | |
316 |
|
317 |
|
318 | menuProps: PropTypes.object,
|
319 | |
320 |
|
321 |
|
322 | leftButtonProps: PropTypes.object,
|
323 | className: PropTypes.string,
|
324 | children: PropTypes.any
|
325 | }, _class.defaultProps = {
|
326 | prefix: 'next-',
|
327 | type: 'normal',
|
328 | size: 'medium',
|
329 | autoWidth: true,
|
330 | popupTriggerType: 'click',
|
331 | onVisibleChange: func.noop,
|
332 | onItemClick: func.noop,
|
333 | onSelect: func.noop,
|
334 | defaultSelectedKeys: [],
|
335 | menuProps: {},
|
336 | leftButtonProps: {}
|
337 | }, _temp);
|
338 | SplitButton.displayName = 'SplitButton';
|
339 |
|
340 |
|
341 | SplitButton.Item = Menu.Item;
|
342 | SplitButton.Divider = Menu.Divider;
|
343 | SplitButton.Group = Menu.Group;
|
344 |
|
345 | export default ConfigProvider.config(polyfill(SplitButton)); |
\ | No newline at end of file |