1 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
2 | import _extends from 'babel-runtime/helpers/extends';
|
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, _temp2;
|
8 |
|
9 | import PropTypes from 'prop-types';
|
10 | import React, { Component } from 'react';
|
11 | import Overlay from '../overlay';
|
12 | import Inner from './inner';
|
13 | import zhCN from '../locale/zh-cn';
|
14 | import { obj } from '../util';
|
15 |
|
16 | var noop = function noop() {};
|
17 | var Popup = Overlay.Popup;
|
18 | var pickOthers = obj.pickOthers;
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | var Drawer = (_temp2 = _class = function (_Component) {
|
26 | _inherits(Drawer, _Component);
|
27 |
|
28 | function Drawer() {
|
29 | var _temp, _this, _ret;
|
30 |
|
31 | _classCallCheck(this, Drawer);
|
32 |
|
33 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
34 | args[_key] = arguments[_key];
|
35 | }
|
36 |
|
37 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.getAlign = function (placement) {
|
38 | var align = void 0;
|
39 | switch (placement) {
|
40 | case 'top':
|
41 | align = 'tl tl';
|
42 | break;
|
43 | case 'bottom':
|
44 | align = 'bl bl';
|
45 | break;
|
46 | case 'left':
|
47 | align = 'tl tl';
|
48 | break;
|
49 | case 'right':
|
50 | default:
|
51 | align = 'tr tr';
|
52 | break;
|
53 | }
|
54 |
|
55 | return align;
|
56 | }, _this.getAnimation = function (placement) {
|
57 | if ('animation' in _this.props) {
|
58 | return _this.props.animation;
|
59 | }
|
60 |
|
61 | var animation = void 0;
|
62 | switch (placement) {
|
63 | case 'top':
|
64 | animation = {
|
65 | in: 'slideInDown',
|
66 | out: 'slideOutUp'
|
67 | };
|
68 | break;
|
69 | case 'bottom':
|
70 | animation = {
|
71 | in: 'slideInUp',
|
72 | out: 'slideOutDown'
|
73 | };
|
74 | break;
|
75 | case 'left':
|
76 | animation = {
|
77 | in: 'slideInLeft',
|
78 | out: 'slideOutLeft'
|
79 | };
|
80 | break;
|
81 | case 'right':
|
82 | default:
|
83 | animation = {
|
84 | in: 'slideInRight',
|
85 | out: 'slideOutRight'
|
86 | };
|
87 | break;
|
88 | }
|
89 |
|
90 | return animation;
|
91 | }, _this.getOverlayRef = function (ref) {
|
92 | _this.overlay = ref;
|
93 | }, _this.mapcloseableToConfig = function (closeable) {
|
94 | return ['esc', 'close', 'mask'].reduce(function (ret, option) {
|
95 | var key = option.charAt(0).toUpperCase() + option.substr(1);
|
96 | var value = typeof closeable === 'boolean' ? closeable : closeable.split(',').indexOf(option) > -1;
|
97 |
|
98 | if (option === 'esc' || option === 'mask') {
|
99 | ret['canCloseBy' + key] = value;
|
100 | } else {
|
101 | ret['canCloseBy' + key + 'Click'] = value;
|
102 | }
|
103 |
|
104 | return ret;
|
105 | }, {});
|
106 | }, _this.handleVisibleChange = function (visible, reason, e) {
|
107 | var _this$props = _this.props,
|
108 | onClose = _this$props.onClose,
|
109 | onVisibleChange = _this$props.onVisibleChange;
|
110 |
|
111 |
|
112 | if (visible === false) {
|
113 | onClose && onClose(reason, e);
|
114 | }
|
115 |
|
116 | onVisibleChange && onVisibleChange(visible, reason, e);
|
117 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
118 | }
|
119 |
|
120 | Drawer.prototype.renderInner = function renderInner(closeable) {
|
121 | var _props = this.props,
|
122 | prefix = _props.prefix,
|
123 | className = _props.className,
|
124 | children = _props.children,
|
125 | title = _props.title,
|
126 | onClose = _props.onClose,
|
127 | locale = _props.locale,
|
128 | headerStyle = _props.headerStyle,
|
129 | bodyStyle = _props.bodyStyle,
|
130 | placement = _props.placement,
|
131 | rtl = _props.rtl;
|
132 |
|
133 | var others = pickOthers(Object.keys(Drawer.propTypes), this.props);
|
134 |
|
135 | return React.createElement(
|
136 | Inner,
|
137 | _extends({
|
138 | prefix: prefix,
|
139 | title: title,
|
140 | className: className,
|
141 | locale: locale,
|
142 | closeable: closeable,
|
143 | rtl: rtl,
|
144 | headerStyle: headerStyle,
|
145 | bodyStyle: bodyStyle,
|
146 | placement: placement,
|
147 | onClose: onClose.bind(this, 'closeClick')
|
148 | }, others),
|
149 | children
|
150 | );
|
151 | };
|
152 |
|
153 | Drawer.prototype.render = function render() {
|
154 | var _props2 = this.props,
|
155 | prefix = _props2.prefix,
|
156 | style = _props2.style,
|
157 | width = _props2.width,
|
158 | height = _props2.height,
|
159 | trigger = _props2.trigger,
|
160 | triggerType = _props2.triggerType,
|
161 | animation = _props2.animation,
|
162 | hasMask = _props2.hasMask,
|
163 | visible = _props2.visible,
|
164 | placement = _props2.placement,
|
165 | onClose = _props2.onClose,
|
166 | onVisibleChange = _props2.onVisibleChange,
|
167 | closeable = _props2.closeable,
|
168 | closeMode = _props2.closeMode,
|
169 | rtl = _props2.rtl,
|
170 | popupContainer = _props2.popupContainer,
|
171 | others = _objectWithoutProperties(_props2, ['prefix', 'style', 'width', 'height', 'trigger', 'triggerType', 'animation', 'hasMask', 'visible', 'placement', 'onClose', 'onVisibleChange', 'closeable', 'closeMode', 'rtl', 'popupContainer']);
|
172 |
|
173 | var newStyle = _extends({
|
174 | width: width,
|
175 | height: height
|
176 | }, style);
|
177 |
|
178 | var newCloseable = 'closeMode' in this.props ? Array.isArray(closeMode) ? closeMode.join(',') : closeMode : closeable;
|
179 |
|
180 | var _mapcloseableToConfig = this.mapcloseableToConfig(newCloseable),
|
181 | canCloseByCloseClick = _mapcloseableToConfig.canCloseByCloseClick,
|
182 | closeConfig = _objectWithoutProperties(_mapcloseableToConfig, ['canCloseByCloseClick']);
|
183 |
|
184 | var newPopupProps = _extends({
|
185 | prefix: prefix,
|
186 | visible: visible,
|
187 | trigger: trigger,
|
188 | triggerType: triggerType,
|
189 | onVisibleChange: this.handleVisibleChange,
|
190 | animation: this.getAnimation(placement),
|
191 | hasMask: hasMask,
|
192 | align: this.getAlign(placement)
|
193 | }, closeConfig, {
|
194 | canCloseByOutSideClick: false,
|
195 | disableScroll: true,
|
196 | ref: this.getOverlayRef,
|
197 | rtl: rtl,
|
198 | target: 'viewport',
|
199 | style: newStyle,
|
200 | needAdjust: false,
|
201 | container: popupContainer
|
202 | });
|
203 |
|
204 | var inner = this.renderInner(canCloseByCloseClick);
|
205 |
|
206 | return React.createElement(
|
207 | Popup,
|
208 | _extends({}, newPopupProps, others),
|
209 | inner
|
210 | );
|
211 | };
|
212 |
|
213 | return Drawer;
|
214 | }(Component), _class.displayName = 'Drawer', _class.propTypes = _extends({}, Popup.propTypes || {}, {
|
215 | prefix: PropTypes.string,
|
216 | pure: PropTypes.bool,
|
217 | rtl: PropTypes.bool,
|
218 |
|
219 | trigger: PropTypes.element,
|
220 | triggerType: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
221 | |
222 |
|
223 |
|
224 | width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
225 | |
226 |
|
227 |
|
228 | height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
229 | |
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 | closeable: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
239 | |
240 |
|
241 |
|
242 | cache: PropTypes.bool,
|
243 | |
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 | closeMode: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOf(['close', 'mask', 'esc'])), PropTypes.oneOf(['close', 'mask', 'esc'])]),
|
252 | |
253 |
|
254 |
|
255 |
|
256 |
|
257 | onClose: PropTypes.func,
|
258 | |
259 |
|
260 |
|
261 | afterOpen: PropTypes.func,
|
262 | |
263 |
|
264 |
|
265 | placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
266 | |
267 |
|
268 |
|
269 | title: PropTypes.node,
|
270 | |
271 |
|
272 |
|
273 | headerStyle: PropTypes.object,
|
274 | |
275 |
|
276 |
|
277 | bodyStyle: PropTypes.object,
|
278 | |
279 |
|
280 |
|
281 | visible: PropTypes.bool,
|
282 | |
283 |
|
284 |
|
285 | hasMask: PropTypes.bool,
|
286 |
|
287 | onVisibleChange: PropTypes.func,
|
288 | |
289 |
|
290 |
|
291 |
|
292 | animation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
293 | locale: PropTypes.object,
|
294 |
|
295 | popupContainer: PropTypes.any
|
296 | }), _class.defaultProps = {
|
297 | prefix: 'next-',
|
298 | triggerType: 'click',
|
299 | trigger: null,
|
300 | closeable: true,
|
301 | onClose: noop,
|
302 | hasMask: true,
|
303 | placement: 'right',
|
304 | locale: zhCN.Drawer
|
305 | }, _temp2);
|
306 | Drawer.displayName = 'Drawer';
|
307 | export { Drawer as default }; |
\ | No newline at end of file |