1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _extends2 = require('babel-runtime/helpers/extends');
|
6 |
|
7 | var _extends3 = _interopRequireDefault(_extends2);
|
8 |
|
9 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
10 |
|
11 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
24 |
|
25 | var _class, _temp;
|
26 |
|
27 | exports.default = create;
|
28 |
|
29 | var _react = require('react');
|
30 |
|
31 | var _react2 = _interopRequireDefault(_react);
|
32 |
|
33 | var _reactDom = require('react-dom');
|
34 |
|
35 | var _propTypes = require('prop-types');
|
36 |
|
37 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
38 |
|
39 | var _classnames = require('classnames');
|
40 |
|
41 | var _classnames2 = _interopRequireDefault(_classnames);
|
42 |
|
43 | var _overlay = require('../../overlay');
|
44 |
|
45 | var _overlay2 = _interopRequireDefault(_overlay);
|
46 |
|
47 | var _util = require('../../util');
|
48 |
|
49 | var _configProvider = require('../../config-provider');
|
50 |
|
51 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
52 |
|
53 | var _menu = require('./menu');
|
54 |
|
55 | var _menu2 = _interopRequireDefault(_menu);
|
56 |
|
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
58 |
|
59 | var bindCtx = _util.func.bindCtx;
|
60 | var getContextProps = _configProvider2.default.getContextProps;
|
61 |
|
62 | var Menu = _configProvider2.default.config(_menu2.default);
|
63 |
|
64 | var menuInstance = void 0;
|
65 |
|
66 | var ContextMenu = (_temp = _class = function (_Component) {
|
67 | (0, _inherits3.default)(ContextMenu, _Component);
|
68 |
|
69 | function ContextMenu(props) {
|
70 | (0, _classCallCheck3.default)(this, ContextMenu);
|
71 |
|
72 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
73 |
|
74 | _this.state = {
|
75 | visible: true
|
76 | };
|
77 |
|
78 | bindCtx(_this, ['handleOverlayClose', 'handleOverlayOpen', 'handleItemClick', 'getOverlay']);
|
79 | return _this;
|
80 | }
|
81 |
|
82 | ContextMenu.prototype.getOverlay = function getOverlay(ref) {
|
83 | this.overlay = ref;
|
84 | };
|
85 |
|
86 | ContextMenu.prototype.close = function close() {
|
87 | this.setState({
|
88 | visible: false
|
89 | });
|
90 | menuInstance = null;
|
91 | };
|
92 |
|
93 | ContextMenu.prototype.handleOverlayClose = function handleOverlayClose(triggerType, e) {
|
94 | var clickedPopupMenu = triggerType === 'docClick' && this.popupNodes.some(function (node) {
|
95 | return node.contains(e.target);
|
96 | });
|
97 | if (!clickedPopupMenu) {
|
98 | this.close();
|
99 | var overlayProps = this.props.overlayProps;
|
100 |
|
101 | if (overlayProps && overlayProps.onRequestClose) {
|
102 | for (var _len = arguments.length, others = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
103 | others[_key - 2] = arguments[_key];
|
104 | }
|
105 |
|
106 | overlayProps.onRequestClose.apply(overlayProps, [triggerType, e].concat(others));
|
107 | }
|
108 | }
|
109 | };
|
110 |
|
111 | ContextMenu.prototype.handleOverlayOpen = function handleOverlayOpen() {
|
112 | this.popupNodes = this.overlay.getInstance().getContent().getInstance().popupNodes;
|
113 | var overlayProps = this.props.overlayProps;
|
114 |
|
115 | if (overlayProps && overlayProps.onOpen) {
|
116 | overlayProps.onOpen();
|
117 | }
|
118 | };
|
119 |
|
120 | ContextMenu.prototype.handleItemClick = function handleItemClick() {
|
121 | var _props;
|
122 |
|
123 | this.close();
|
124 |
|
125 | this.props.onItemClick && (_props = this.props).onItemClick.apply(_props, arguments);
|
126 | };
|
127 |
|
128 | ContextMenu.prototype.render = function render() {
|
129 | var _cx, _cx2;
|
130 |
|
131 | var _props2 = this.props,
|
132 | className = _props2.className,
|
133 | popupClassName = _props2.popupClassName,
|
134 | target = _props2.target,
|
135 | align = _props2.align,
|
136 | offset = _props2.offset,
|
137 | afterClose = _props2.afterClose,
|
138 | _props2$overlayProps = _props2.overlayProps,
|
139 | overlayProps = _props2$overlayProps === undefined ? {} : _props2$overlayProps,
|
140 | others = (0, _objectWithoutProperties3.default)(_props2, ['className', 'popupClassName', 'target', 'align', 'offset', 'afterClose', 'overlayProps']);
|
141 |
|
142 | var contextProps = getContextProps(this.props);
|
143 | var prefix = contextProps.prefix;
|
144 | var visible = this.state.visible;
|
145 |
|
146 |
|
147 | var newOverlayProps = (0, _extends3.default)({}, contextProps, overlayProps, {
|
148 | target: target,
|
149 | align: align,
|
150 | offset: offset,
|
151 | afterClose: afterClose,
|
152 | visible: visible,
|
153 | onRequestClose: this.handleOverlayClose,
|
154 | onOpen: this.handleOverlayOpen,
|
155 | ref: this.getOverlay
|
156 | });
|
157 | var menuProps = (0, _extends3.default)({}, contextProps, {
|
158 | triggerType: 'hover'
|
159 | }, others, {
|
160 | className: (0, _classnames2.default)((_cx = {}, _cx[prefix + 'context'] = true, _cx[className] = !!className, _cx)),
|
161 | popupClassName: (0, _classnames2.default)((_cx2 = {}, _cx2[prefix + 'context'] = true, _cx2[popupClassName] = !!popupClassName, _cx2)),
|
162 | onItemClick: this.handleItemClick
|
163 | });
|
164 |
|
165 | newOverlayProps.rtl = false;
|
166 |
|
167 | return _react2.default.createElement(
|
168 | _overlay2.default,
|
169 | newOverlayProps,
|
170 | _react2.default.createElement(Menu, menuProps)
|
171 | );
|
172 | };
|
173 |
|
174 | return ContextMenu;
|
175 | }(_react.Component), _class.propTypes = {
|
176 | className: _propTypes2.default.string,
|
177 | popupClassName: _propTypes2.default.string,
|
178 | target: _propTypes2.default.any,
|
179 | align: _propTypes2.default.string,
|
180 | offset: _propTypes2.default.array,
|
181 | overlayProps: _propTypes2.default.object,
|
182 | afterClose: _propTypes2.default.func,
|
183 | mode: _propTypes2.default.oneOf(['inline', 'popup']),
|
184 | onOpen: _propTypes2.default.func,
|
185 | onItemClick: _propTypes2.default.func
|
186 | }, _class.defaultProps = {
|
187 | prefix: 'next-',
|
188 | align: 'tl tl',
|
189 | mode: 'popup'
|
190 | }, _temp);
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | ContextMenu.displayName = 'ContextMenu';
|
199 | function create(props) {
|
200 | if (menuInstance) {
|
201 | menuInstance.destroy();
|
202 | }
|
203 |
|
204 |
|
205 | var afterClose = props.afterClose,
|
206 | others = (0, _objectWithoutProperties3.default)(props, ['afterClose']);
|
207 |
|
208 |
|
209 | var div = document.createElement('div');
|
210 | document.body.appendChild(div);
|
211 |
|
212 | var closeChain = function closeChain() {
|
213 | (0, _reactDom.unmountComponentAtNode)(div);
|
214 | document.body.removeChild(div);
|
215 |
|
216 | afterClose && afterClose();
|
217 | };
|
218 |
|
219 | var newContext = _configProvider2.default.getContext();
|
220 |
|
221 | var menu = void 0;
|
222 | (0, _reactDom.render)(_react2.default.createElement(
|
223 | _configProvider2.default,
|
224 | newContext,
|
225 | _react2.default.createElement(ContextMenu, (0, _extends3.default)({
|
226 | ref: function ref(_ref) {
|
227 | menu = _ref;
|
228 | },
|
229 | afterClose: closeChain
|
230 | }, others))
|
231 | ), div);
|
232 |
|
233 | menuInstance = {
|
234 | destroy: function destroy() {
|
235 | if (menu) {
|
236 | menu.close();
|
237 | }
|
238 | }
|
239 | };
|
240 |
|
241 | return menuInstance;
|
242 | }
|
243 | module.exports = exports['default']; |
\ | No newline at end of file |