1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React, { Component } from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import cx from 'classnames';
|
11 | import Button from '../button';
|
12 | import Icon from '../icon';
|
13 | import zhCN from '../locale/zh-cn';
|
14 | import { func, obj, guid, dom } from '../util';
|
15 |
|
16 | var makeChain = func.makeChain;
|
17 | var pickOthers = obj.pickOthers;
|
18 |
|
19 | var noop = function noop() {};
|
20 |
|
21 | var Inner = (_temp = _class = function (_Component) {
|
22 | _inherits(Inner, _Component);
|
23 |
|
24 | function Inner() {
|
25 | _classCallCheck(this, Inner);
|
26 |
|
27 | return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
28 | }
|
29 |
|
30 | Inner.prototype.componentDidUpdate = function componentDidUpdate() {
|
31 | var _props = this.props,
|
32 | maxHeight = _props.maxHeight,
|
33 | _props$height = _props.height,
|
34 | pheight = _props$height === undefined ? maxHeight : _props$height,
|
35 | v2 = _props.v2;
|
36 |
|
37 | if (this.bodyNode && v2 && pheight && pheight !== 'auto') {
|
38 | var style = {};
|
39 | var headerHeight = 0,
|
40 | footerHeight = 0;
|
41 | if (this.headerNode) {
|
42 | headerHeight = this.headerNode.getBoundingClientRect().height;
|
43 | }
|
44 | if (this.footerNode) {
|
45 | footerHeight = this.footerNode.getBoundingClientRect().height;
|
46 | }
|
47 | var minHeight = headerHeight + footerHeight;
|
48 | style.minHeight = minHeight;
|
49 |
|
50 | var height = pheight;
|
51 | if (pheight && typeof pheight === 'string') {
|
52 | if (height.match(/calc|vh/)) {
|
53 | style.maxHeight = 'calc(' + pheight + ' - ' + minHeight + 'px)';
|
54 | style.overflowY = 'auto';
|
55 | } else {
|
56 | height = parseInt(pheight);
|
57 | }
|
58 | }
|
59 |
|
60 | if (typeof height === 'number' && height > minHeight) {
|
61 | style.maxHeight = height - minHeight;
|
62 | style.overflowY = 'auto';
|
63 | }
|
64 |
|
65 | dom.setStyle(this.bodyNode, style);
|
66 | }
|
67 | };
|
68 |
|
69 | Inner.prototype.getNode = function getNode(name, ref) {
|
70 | this[name] = ref;
|
71 | };
|
72 |
|
73 | Inner.prototype.renderHeader = function renderHeader() {
|
74 | var _props2 = this.props,
|
75 | prefix = _props2.prefix,
|
76 | title = _props2.title;
|
77 |
|
78 | if (title) {
|
79 | this.titleId = guid('dialog-title-');
|
80 | return React.createElement(
|
81 | 'div',
|
82 | {
|
83 | className: prefix + 'dialog-header',
|
84 | id: this.titleId,
|
85 | ref: this.getNode.bind(this, 'headerNode'),
|
86 | role: 'heading',
|
87 | 'aria-level': '1'
|
88 | },
|
89 | title
|
90 | );
|
91 | }
|
92 | return null;
|
93 | };
|
94 |
|
95 | Inner.prototype.renderBody = function renderBody() {
|
96 | var _props3 = this.props,
|
97 | prefix = _props3.prefix,
|
98 | children = _props3.children,
|
99 | footer = _props3.footer;
|
100 |
|
101 | if (children) {
|
102 | var _cx;
|
103 |
|
104 | return React.createElement(
|
105 | 'div',
|
106 | {
|
107 | className: cx(prefix + 'dialog-body', (_cx = {}, _cx[prefix + 'dialog-body-no-footer'] = footer === false, _cx)),
|
108 | ref: this.getNode.bind(this, 'bodyNode')
|
109 | },
|
110 | children
|
111 | );
|
112 | }
|
113 | return null;
|
114 | };
|
115 |
|
116 | Inner.prototype.renderFooter = function renderFooter() {
|
117 | var _cx2,
|
118 | _this2 = this;
|
119 |
|
120 | var _props4 = this.props,
|
121 | prefix = _props4.prefix,
|
122 | footer = _props4.footer,
|
123 | footerAlign = _props4.footerAlign,
|
124 | footerActions = _props4.footerActions,
|
125 | locale = _props4.locale,
|
126 | height = _props4.height;
|
127 |
|
128 |
|
129 | if (footer === false) {
|
130 | return null;
|
131 | }
|
132 |
|
133 | var newClassName = cx((_cx2 = {}, _cx2[prefix + 'dialog-footer'] = true, _cx2[prefix + 'align-' + footerAlign] = true, _cx2[prefix + 'dialog-footer-fixed-height'] = !!height, _cx2));
|
134 | var footerContent = footer === true || !footer ? footerActions.map(function (action) {
|
135 | var btnProps = _this2.props[action + 'Props'];
|
136 | var newBtnProps = _extends({}, btnProps, {
|
137 | prefix: prefix,
|
138 | className: cx(prefix + 'dialog-btn', btnProps.className),
|
139 | onClick: makeChain(_this2.props['on' + (action[0].toUpperCase() + action.slice(1))], btnProps.onClick),
|
140 | children: btnProps.children || locale[action]
|
141 | });
|
142 | if (action === 'ok') {
|
143 | newBtnProps.type = 'primary';
|
144 | }
|
145 |
|
146 | return React.createElement(Button, _extends({ key: action }, newBtnProps));
|
147 | }) : footer;
|
148 |
|
149 | return React.createElement(
|
150 | 'div',
|
151 | { className: newClassName, ref: this.getNode.bind(this, 'footerNode') },
|
152 | footerContent
|
153 | );
|
154 | };
|
155 |
|
156 | Inner.prototype.renderCloseLink = function renderCloseLink() {
|
157 | var _props5 = this.props,
|
158 | prefix = _props5.prefix,
|
159 | closeable = _props5.closeable,
|
160 | onClose = _props5.onClose,
|
161 | locale = _props5.locale,
|
162 | closeIcon = _props5.closeIcon;
|
163 |
|
164 |
|
165 | if (closeable) {
|
166 | return React.createElement(
|
167 | 'a',
|
168 | { role: 'button', 'aria-label': locale.close, className: prefix + 'dialog-close', onClick: onClose },
|
169 | closeIcon ? closeIcon : React.createElement(Icon, { className: prefix + 'dialog-close-icon', type: 'close' })
|
170 | );
|
171 | }
|
172 |
|
173 | return null;
|
174 | };
|
175 |
|
176 | Inner.prototype.render = function render() {
|
177 | var _cx3;
|
178 |
|
179 | var _props6 = this.props,
|
180 | prefix = _props6.prefix,
|
181 | className = _props6.className,
|
182 | closeable = _props6.closeable,
|
183 | title = _props6.title,
|
184 | role = _props6.role,
|
185 | rtl = _props6.rtl;
|
186 |
|
187 | var others = pickOthers(Object.keys(Inner.propTypes), this.props);
|
188 | var newClassName = cx((_cx3 = {}, _cx3[prefix + 'dialog'] = true, _cx3[prefix + 'closeable'] = closeable, _cx3[className] = !!className, _cx3));
|
189 |
|
190 | var header = this.renderHeader();
|
191 | var body = this.renderBody();
|
192 | var footer = this.renderFooter();
|
193 | var closeLink = this.renderCloseLink();
|
194 |
|
195 | var ariaProps = {
|
196 | role: role,
|
197 | 'aria-modal': 'true'
|
198 | };
|
199 | if (title) {
|
200 | ariaProps['aria-labelledby'] = this.titleId;
|
201 | }
|
202 |
|
203 | var width = others.style && others.style.width;
|
204 | others.style = _extends({}, others.style, obj.pickProps(['height', 'maxHeight', 'width'], this.props));
|
205 |
|
206 | if (width) {
|
207 | others.style.width = width;
|
208 | }
|
209 |
|
210 | return React.createElement(
|
211 | 'div',
|
212 | _extends({}, ariaProps, { className: newClassName }, others, { dir: rtl ? 'rtl' : undefined }),
|
213 | header,
|
214 | body,
|
215 | footer,
|
216 | closeLink
|
217 | );
|
218 | };
|
219 |
|
220 | return Inner;
|
221 | }(Component), _class.propTypes = {
|
222 | prefix: PropTypes.string,
|
223 | className: PropTypes.string,
|
224 | title: PropTypes.node,
|
225 | children: PropTypes.node,
|
226 | footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
|
227 | footerAlign: PropTypes.oneOf(['left', 'center', 'right']),
|
228 | footerActions: PropTypes.array,
|
229 | onOk: PropTypes.func,
|
230 | onCancel: PropTypes.func,
|
231 | okProps: PropTypes.object,
|
232 | cancelProps: PropTypes.object,
|
233 | closeable: PropTypes.bool,
|
234 | onClose: PropTypes.func,
|
235 | locale: PropTypes.object,
|
236 | role: PropTypes.string,
|
237 | rtl: PropTypes.bool,
|
238 | width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
239 |
|
240 | height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
241 | maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
242 | v2: PropTypes.bool,
|
243 | closeIcon: PropTypes.node,
|
244 | pure: PropTypes.bool
|
245 | }, _class.defaultProps = {
|
246 | prefix: 'next-',
|
247 | footerAlign: 'right',
|
248 | footerActions: ['ok', 'cancel'],
|
249 | onOk: noop,
|
250 | onCancel: noop,
|
251 | okProps: {},
|
252 | cancelProps: {},
|
253 | closeable: true,
|
254 | onClose: noop,
|
255 | locale: zhCN.Dialog,
|
256 | role: 'dialog'
|
257 | }, _temp);
|
258 | Inner.displayName = 'Inner';
|
259 | export { Inner as default }; |
\ | No newline at end of file |