1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
8 |
|
9 | var _react = require('react');
|
10 |
|
11 | var _react2 = _interopRequireDefault(_react);
|
12 |
|
13 | var _propTypes = require('prop-types');
|
14 |
|
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
16 |
|
17 | var _objectPath = require('object-path');
|
18 |
|
19 | var _objectPath2 = _interopRequireDefault(_objectPath);
|
20 |
|
21 | var _i18n = require('./lib/i18n');
|
22 |
|
23 | var _i18n2 = _interopRequireDefault(_i18n);
|
24 |
|
25 | var _tool = require('bee-locale/build/tool');
|
26 |
|
27 | var _utils = require('./lib/utils');
|
28 |
|
29 | var _beeDropdown = require('bee-dropdown');
|
30 |
|
31 | var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
|
32 |
|
33 | var _beeMenus = require('bee-menus');
|
34 |
|
35 | var _beeMenus2 = _interopRequireDefault(_beeMenus);
|
36 |
|
37 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
38 |
|
39 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
40 |
|
41 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
42 |
|
43 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
44 |
|
45 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
46 |
|
47 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
48 |
|
49 | var Item = _beeMenus2["default"].Item;
|
50 |
|
51 | var propTypes = {
|
52 | record: _propTypes2["default"].object,
|
53 | clsPrefix: _propTypes2["default"].string,
|
54 | index: _propTypes2["default"].number,
|
55 | indent: _propTypes2["default"].number,
|
56 | indentSize: _propTypes2["default"].number,
|
57 | column: _propTypes2["default"].object,
|
58 | expandIcon: _propTypes2["default"].node,
|
59 | onPaste: _propTypes2["default"].func
|
60 | };
|
61 |
|
62 | var TableCell = function (_Component) {
|
63 | _inherits(TableCell, _Component);
|
64 |
|
65 | function TableCell(props) {
|
66 | _classCallCheck(this, TableCell);
|
67 |
|
68 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
69 |
|
70 | _this.renderLinkType = function (data, record, index) {
|
71 | var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
72 | var url = config.url,
|
73 | urlIndex = config.urlIndex,
|
74 | linkType = config.linkType,
|
75 | className = config.className,
|
76 | underline = config.underline,
|
77 | descIndex = config.descIndex,
|
78 | desc = config.desc,
|
79 | linkColor = config.linkColor;
|
80 |
|
81 | var linkUrl = '';
|
82 | if (url) {
|
83 | linkUrl = url(data, record, index);
|
84 | } else if (urlIndex) {
|
85 | linkUrl = record[urlIndex];
|
86 | }
|
87 | if (linkUrl) {
|
88 | var link = function link() {
|
89 | window.open(linkUrl, linkType || '_blank');
|
90 | };
|
91 | var cls = 'u-table-link u-table-fieldtype ';
|
92 | if (className) {
|
93 | cls += className + ' ';
|
94 | }
|
95 | if (underline) {
|
96 | cls += 'u-table-link-underline ';
|
97 | }
|
98 | var title = '';
|
99 |
|
100 | if (desc === true) {
|
101 | title = linkUrl;
|
102 | } else if (typeof desc === 'string') {
|
103 | title = desc;
|
104 | } else if (typeof desc === 'function') {
|
105 | title = desc(data, record, index);
|
106 | } else if (descIndex) {
|
107 | title = record[descIndex];
|
108 | }
|
109 | return _react2["default"].createElement(
|
110 | 'span',
|
111 | { onClick: link, className: cls, style: { color: linkColor || '' }, title: title },
|
112 | data
|
113 | );
|
114 | }
|
115 | return data;
|
116 | };
|
117 |
|
118 | _this.renderBoolType = function (data) {
|
119 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
120 |
|
121 | var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
122 | return _i18n2["default"];
|
123 | });
|
124 | var boolConfig = _extends({ trueText: locale['bool_true'], falseText: locale['bool_false'] }, config);
|
125 | if (typeof data === 'string') {
|
126 | if (data === 'false' || data === '0') {
|
127 | return boolConfig.falseText;
|
128 | }
|
129 | } else if (!data) {
|
130 | return boolConfig.falseText;
|
131 | }
|
132 | return boolConfig.trueText;
|
133 | };
|
134 |
|
135 | _this.renderNumber = function (data) {
|
136 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
137 | var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
|
138 | var precision = config.precision,
|
139 | thousand = config.thousand,
|
140 | makeUp = config.makeUp,
|
141 | preSymbol = config.preSymbol,
|
142 | nextSymbol = config.nextSymbol;
|
143 |
|
144 | var number = (0, _utils.formatMoney)(data, precision, thousand);
|
145 | if (makeUp === false && number.indexOf('.') !== -1) {
|
146 | number = number.replace(/0*$/, '').replace(/\.$/, '');
|
147 | }
|
148 | var numberWidth = parseInt(width) - 16;
|
149 | var res = _react2["default"].createElement(
|
150 | 'span',
|
151 | { className: 'u-table-currency-number' },
|
152 | number
|
153 | );
|
154 | var pre = preSymbol ? _react2["default"].createElement(
|
155 | 'span',
|
156 | { className: 'u-table-currency-pre' },
|
157 | preSymbol
|
158 | ) : null;
|
159 | var next = nextSymbol ? _react2["default"].createElement(
|
160 | 'span',
|
161 | { className: 'u-table-currency-next' },
|
162 | nextSymbol
|
163 | ) : null;
|
164 | var title = '';
|
165 | title += typeof preSymbol === 'string' ? preSymbol : '';
|
166 | title += number;
|
167 | title += typeof nextSymbol === 'string' ? nextSymbol : '';
|
168 | return _react2["default"].createElement(
|
169 | 'span',
|
170 | { className: 'u-table-currency u-table-fieldtype', style: { width: numberWidth }, title: title },
|
171 | pre,
|
172 | res,
|
173 | next
|
174 | );
|
175 | };
|
176 |
|
177 | _this.renderDate = function (data) {
|
178 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
179 | var moment = config.moment,
|
180 | format = config.format;
|
181 |
|
182 | if (!moment) return data;
|
183 | return moment(data).format(format || 'YYYY-MM-DD');
|
184 | };
|
185 |
|
186 | _this.renderSelect = function (data) {
|
187 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
188 |
|
189 | if (config.options) {
|
190 | data = config.options[data] || config.defaultShow;
|
191 | }
|
192 | return data;
|
193 | };
|
194 |
|
195 | _this.renderColumnMenu = function (colMenu, text, record, index) {
|
196 | if (!colMenu) return null;
|
197 | var menu = colMenu.menu,
|
198 | _colMenu$trigger = colMenu.trigger,
|
199 | trigger = _colMenu$trigger === undefined ? 'hover' : _colMenu$trigger,
|
200 | _colMenu$className = colMenu.className,
|
201 | className = _colMenu$className === undefined ? '' : _colMenu$className,
|
202 | _colMenu$icon = colMenu.icon,
|
203 | icon = _colMenu$icon === undefined ? _react2["default"].createElement('i', { className: 'uf uf-3dot-h' }) : _colMenu$icon,
|
204 | _colMenu$iconSize = colMenu.iconSize,
|
205 | iconSize = _colMenu$iconSize === undefined ? 21 : _colMenu$iconSize;
|
206 |
|
207 | var items = [];
|
208 | items = menu.map(function (item) {
|
209 | return _react2["default"].createElement(
|
210 | Item,
|
211 | { key: item.key, onClick: function onClick() {
|
212 | _this.onClickColMenu(item.callback, text, record, index);
|
213 | } },
|
214 | item.icon,
|
215 | item.text
|
216 | );
|
217 | });
|
218 | if (items.length === 0) return null;
|
219 | className += ' u-table-inline-op-dropdowm';
|
220 | var menus = _react2["default"].createElement(
|
221 | _beeMenus2["default"],
|
222 | { className: className },
|
223 | items
|
224 | );
|
225 | var top = 'calc(50% - ' + iconSize / 2 + 'px)';
|
226 | var visibility = _this.state.showDropdowm ? 'visible' : '';
|
227 | var iconClassName = 'u-table-inline-op-icon u-table-inline-op-icon-hover';
|
228 | return _react2["default"].createElement(
|
229 | _beeDropdown2["default"],
|
230 | {
|
231 | trigger: [trigger],
|
232 | overlay: menus,
|
233 | animation: 'slide-up',
|
234 | onVisibleChange: _this.changeShowDropdowm
|
235 | },
|
236 | _react2["default"].createElement(
|
237 | 'span',
|
238 | { className: iconClassName, style: { fontSize: iconSize, top: top, visibility: visibility } },
|
239 | icon
|
240 | )
|
241 | );
|
242 | };
|
243 |
|
244 | _this.changeShowDropdowm = function (val) {
|
245 | _this.setState({
|
246 | showDropdowm: val
|
247 | });
|
248 | };
|
249 |
|
250 | _this.onClickColMenu = function (callback, text, record, index) {
|
251 | if (callback) {
|
252 | callback(text, record, index);
|
253 | }
|
254 | _this.setState({
|
255 | showDropdowm: false
|
256 | });
|
257 | };
|
258 |
|
259 | _this.onPaste = function (e) {
|
260 | var _this$props = _this.props,
|
261 | row = _this$props.index,
|
262 | onPaste = _this$props.onPaste,
|
263 | fixed = _this$props.fixed,
|
264 | col = _this$props.col;
|
265 |
|
266 | var position = {
|
267 | row: row,
|
268 | col: col,
|
269 | fixed: !!fixed
|
270 | };
|
271 | onPaste(e, position);
|
272 | };
|
273 |
|
274 | _this.onCellMouseOver = function (e) {
|
275 | var column = _this.props.column;
|
276 |
|
277 | _this.props.stopRowDrag(column.notRowDrag);
|
278 | };
|
279 |
|
280 | _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
|
281 | _this.handleClick = _this.handleClick.bind(_this);
|
282 | _this.state = {
|
283 | showDropdowm: false
|
284 | };
|
285 | return _this;
|
286 | }
|
287 |
|
288 | TableCell.prototype.isInvalidRenderCellText = function isInvalidRenderCellText(text) {
|
289 | return text && !_react2["default"].isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]';
|
290 | };
|
291 |
|
292 | TableCell.prototype.handleClick = function handleClick(e) {
|
293 | var _props = this.props,
|
294 | record = _props.record,
|
295 | onCellClick = _props.column.onCellClick;
|
296 |
|
297 | if (onCellClick) {
|
298 | onCellClick(record, e);
|
299 | }
|
300 | };
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 | TableCell.prototype.render = function render() {
|
327 | var _props2 = this.props,
|
328 | record = _props2.record,
|
329 | indentSize = _props2.indentSize,
|
330 | clsPrefix = _props2.clsPrefix,
|
331 | indent = _props2.indent,
|
332 | index = _props2.index,
|
333 | expandIcon = _props2.expandIcon,
|
334 | column = _props2.column,
|
335 | fixed = _props2.fixed,
|
336 | showSum = _props2.showSum,
|
337 | bodyDisplayInRow = _props2.bodyDisplayInRow,
|
338 | lazyStartIndex = _props2.lazyStartIndex,
|
339 | lazyEndIndex = _props2.lazyEndIndex,
|
340 | getCellClassName = _props2.getCellClassName;
|
341 |
|
342 | var dataIndex = column.dataIndex,
|
343 | render = column.render,
|
344 | fieldType = column.fieldType,
|
345 | linkConfig = column.linkConfig,
|
346 | fontColor = column.fontColor,
|
347 | bgColor = column.bgColor,
|
348 | other = _objectWithoutProperties(column, ['dataIndex', 'render', 'fieldType', 'linkConfig', 'fontColor', 'bgColor']);
|
349 |
|
350 | var _column$className = column.className,
|
351 | className = _column$className === undefined ? '' : _column$className;
|
352 |
|
353 |
|
354 | var text = _objectPath2["default"].get(record, dataIndex);
|
355 | var tdProps = void 0;
|
356 | var colSpan = void 0;
|
357 | var rowSpan = void 0,
|
358 | title = void 0;
|
359 |
|
360 | if (render && !showSum) {
|
361 | text = render(text, record, index, _extends({
|
362 | dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
|
363 | if (this.isInvalidRenderCellText(text)) {
|
364 | tdProps = text.props || {};
|
365 | rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
366 | colSpan = tdProps.colSpan;
|
367 | text = text.children;
|
368 | }
|
369 | }
|
370 |
|
371 | var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
|
372 |
|
373 | if (!render) {
|
374 | switch (column.fieldType) {
|
375 | case 'link':
|
376 | {
|
377 | text = this.renderLinkType(text, record, index, column.linkConfig);
|
378 | break;
|
379 | }
|
380 | case 'bool':
|
381 | {
|
382 | text = this.renderBoolType(text, column.boolConfig);
|
383 | break;
|
384 | }
|
385 | case 'currency':
|
386 | {
|
387 | var config = {
|
388 | precision: 2,
|
389 | thousand: true,
|
390 | makeUp: true,
|
391 | preSymbol: '',
|
392 | nextSymbol: ''
|
393 | };
|
394 | text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
395 | break;
|
396 | }
|
397 | case 'number':
|
398 | {
|
399 | var _config = {
|
400 | precision: 0,
|
401 | thousand: true,
|
402 | makeUp: false,
|
403 | preSymbol: '',
|
404 | nextSymbol: ''
|
405 | };
|
406 | text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
|
407 | break;
|
408 | }
|
409 | case 'date':
|
410 | {
|
411 | text = this.renderDate(text, column.dateConfig);
|
412 | break;
|
413 | }
|
414 | case 'select':
|
415 | {
|
416 | text = this.renderSelect(text, column.selectConfig);
|
417 | break;
|
418 | }
|
419 | default:
|
420 | {
|
421 | break;
|
422 | }
|
423 | }
|
424 | }
|
425 |
|
426 | if (this.isInvalidRenderCellText(text)) {
|
427 | text = null;
|
428 | }
|
429 |
|
430 | var indentText = expandIcon ? _react2["default"].createElement('span', {
|
431 | style: { paddingLeft: indentSize * indent + 'px' },
|
432 | className: clsPrefix + '-indent indent-level-' + indent
|
433 | }) : null;
|
434 |
|
435 | if (lazyStartIndex !== index && (rowSpan === 0 || colSpan === 0)) {
|
436 | return null;
|
437 | }
|
438 | if (tdProps && tdProps.mergeEndIndex && index < tdProps.mergeEndIndex && rowSpan === 0) {
|
439 | rowSpan = tdProps.mergeEndIndex - index;
|
440 | text = '';
|
441 | }
|
442 |
|
443 | if (column.fixed && !fixed) {
|
444 | className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
|
445 | }
|
446 | if (column.contentAlign) {
|
447 | className = className + (' text-' + column.contentAlign);
|
448 | } else if (column.textAlign) {
|
449 | className = className + (' text-' + column.textAlign);
|
450 | }
|
451 | if ((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow) {
|
452 | title = text;
|
453 | }
|
454 | if (expandIcon && expandIcon.props.expandable) {
|
455 | className = className + (' ' + clsPrefix + '-has-expandIcon');
|
456 | }
|
457 | if (colMenu) {
|
458 | className += ' u-table-inline-icon';
|
459 | }
|
460 |
|
461 | if (typeof getCellClassName == 'function') {
|
462 | var selfClassName = getCellClassName(record, index, column) || '';
|
463 | className += ' ' + selfClassName;
|
464 | }
|
465 |
|
466 | if (colSpan == 0) return null;
|
467 | return _react2["default"].createElement(
|
468 | 'td',
|
469 | {
|
470 | draggable: column.draggable,
|
471 | colSpan: colSpan,
|
472 | rowSpan: rowSpan,
|
473 | className: className,
|
474 | onClick: this.handleClick,
|
475 | title: title,
|
476 | onPaste: this.onPaste,
|
477 | onMouseOver: this.onCellMouseOver,
|
478 | style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
|
479 | indentText,
|
480 | expandIcon,
|
481 | text,
|
482 | colMenu
|
483 | );
|
484 | };
|
485 |
|
486 | return TableCell;
|
487 | }(_react.Component);
|
488 |
|
489 | ;
|
490 |
|
491 | TableCell.propTypes = propTypes;
|
492 |
|
493 | exports["default"] = TableCell;
|
494 | module.exports = exports['default']; |
\ | No newline at end of file |