1 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
2 | import _regeneratorRuntime from "@babel/runtime/regenerator";
|
3 | import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
4 | import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5 | import _extends from "@babel/runtime/helpers/extends";
|
6 | import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
7 | import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
|
8 | import { observer } from 'mobx-react-lite';
|
9 | import { isArrayLike } from 'mobx';
|
10 | import raf from 'raf';
|
11 | import classNames from 'classnames';
|
12 | import isNil from 'lodash/isNil';
|
13 | import isPlainObject from 'lodash/isPlainObject';
|
14 | import isString from 'lodash/isString';
|
15 | import isObject from 'lodash/isObject';
|
16 | import { pxToRem } from '../../../es/_util/UnitConvertor';
|
17 | import { getConfig } from '../../../es/configure';
|
18 | import KeyCode from '../../../es/_util/KeyCode';
|
19 | import measureScrollbar from '../../../es/_util/measureScrollbar';
|
20 | import { getTooltip, getTooltipTheme } from '../../../es/_util/TooltipUtils';
|
21 | import TableContext from './TableContext';
|
22 | import { findCell, getColumnKey, getEditorByColumnAndRecord, isInCellEditor, isStickySupport } from './utils';
|
23 | import { FieldType, RecordStatus } from '../data-set/enum';
|
24 | import { SELECTION_KEY } from './TableStore';
|
25 | import { ColumnAlign, SelectionMode, TableCommandType } from './enum';
|
26 | import Tooltip from '../tooltip/Tooltip';
|
27 | import ObserverCheckBox from '../check-box/CheckBox';
|
28 | import { $l } from '../locale-context';
|
29 | import Button from '../button/Button';
|
30 | import { LabelLayout } from '../form/enum';
|
31 | import { findFirstFocusableElement } from '../_util/focusable';
|
32 | import SelectionTreeBox from './SelectionTreeBox';
|
33 | import { getDateFormatByField, isFieldValueEmpty, processFieldValue, processValue as utilProcessValue, renderMultiLine, renderMultipleValues, renderRangeValue, renderValidationMessage as utilRenderValidationMessage, showValidationMessage, toMultipleValue, toRangeValue, transformHighlightProps } from '../field/utils';
|
34 | import localeContext from '../locale-context/LocaleContext';
|
35 | import isEmpty from '../_util/isEmpty';
|
36 | import { Tooltip as TextTooltip } from '../core/enum';
|
37 | import isOverflow from '../overflow-tip/util';
|
38 | import { hide, show } from '../tooltip/singleton';
|
39 | import useComputed from '../use-computed';
|
40 | import { ShowHelp } from '../field/enum';
|
41 | import { defaultOutputRenderer } from '../output/utils';
|
42 | var inTab = false;
|
43 | var TableCellInner = observer(function TableCellInner(props) {
|
44 | var column = props.column,
|
45 | record = props.record,
|
46 | children = props.children,
|
47 | style = props.style,
|
48 | disabled = props.disabled,
|
49 | inAggregation = props.inAggregation,
|
50 | prefixCls = props.prefixCls,
|
51 | colSpan = props.colSpan;
|
52 | var multipleValidateMessageLengthRef = useRef(0);
|
53 | var tooltipShownRef = useRef();
|
54 |
|
55 | var _useContext = useContext(TableContext),
|
56 | pristine = _useContext.pristine,
|
57 | aggregation = _useContext.aggregation,
|
58 | inlineEdit = _useContext.inlineEdit,
|
59 | rowHeight = _useContext.rowHeight,
|
60 | tableStore = _useContext.tableStore,
|
61 | dataSet = _useContext.dataSet,
|
62 | columnEditorBorder = _useContext.columnEditorBorder,
|
63 | indentSize = _useContext.indentSize,
|
64 | checkField = _useContext.checkField,
|
65 | selectionMode = _useContext.selectionMode;
|
66 |
|
67 | var innerPrefixCls = "".concat(prefixCls, "-inner");
|
68 | var tooltip = tableStore.getColumnTooltip(column);
|
69 | var name = column.name,
|
70 | key = column.key,
|
71 | lock = column.lock,
|
72 | renderer = column.renderer,
|
73 | command = column.command,
|
74 | align = column.align;
|
75 | var columnKey = getColumnKey(column);
|
76 | var height = record.getState("__column_resize_height_".concat(name));
|
77 | var currentEditRecord = tableStore.currentEditRecord;
|
78 | var field = record.getField(name);
|
79 | var fieldDisabled = disabled || field && field.get('disabled');
|
80 | var columnCommand = useComputed(function () {
|
81 | if (typeof command === 'function') {
|
82 | return command({
|
83 | dataSet: dataSet,
|
84 | record: record,
|
85 | aggregation: aggregation
|
86 | });
|
87 | }
|
88 |
|
89 | return command;
|
90 | }, [record, command, dataSet, aggregation]);
|
91 | var canFocus = useMemo(function () {
|
92 | return !fieldDisabled && (!inlineEdit || record === currentEditRecord);
|
93 | }, [fieldDisabled, record, currentEditRecord, inlineEdit]);
|
94 | var cellEditor = getEditorByColumnAndRecord(column, record);
|
95 | var cellEditorInCell = isInCellEditor(cellEditor);
|
96 | var hasEditor = !pristine && cellEditor && !cellEditorInCell;
|
97 | var showEditor = useCallback(function (cell) {
|
98 | if (name && hasEditor) {
|
99 | if (!lock && tableStore.overflowX) {
|
100 | var tableBodyWrap = tableStore.virtual ? cell.offsetParent.parentNode.parentNode : cell.offsetParent;
|
101 |
|
102 | if (tableBodyWrap) {
|
103 | var _tableStore$columnGro = tableStore.columnGroups,
|
104 | leftLeafColumnsWidth = _tableStore$columnGro.leftLeafColumnsWidth,
|
105 | rightLeafColumnsWidth = _tableStore$columnGro.rightLeafColumnsWidth;
|
106 | var offsetLeft = cell.offsetLeft,
|
107 | offsetWidth = cell.offsetWidth;
|
108 | var scrollLeft = tableBodyWrap.scrollLeft;
|
109 |
|
110 | var _tableBodyWrap$getBou = tableBodyWrap.getBoundingClientRect(),
|
111 | width = _tableBodyWrap$getBou.width;
|
112 |
|
113 | var leftSide = offsetLeft - leftLeafColumnsWidth;
|
114 | var rightSide = offsetLeft + offsetWidth - width + rightLeafColumnsWidth + measureScrollbar();
|
115 | var sl = scrollLeft;
|
116 |
|
117 | if (sl < rightSide) {
|
118 | sl = rightSide;
|
119 | }
|
120 |
|
121 | if (sl > leftSide) {
|
122 | sl = leftSide;
|
123 | }
|
124 |
|
125 | if (sl !== scrollLeft) {
|
126 | tableBodyWrap.scrollLeft = sl;
|
127 | }
|
128 | }
|
129 | }
|
130 |
|
131 | tableStore.showEditor(name);
|
132 | var editor = tableStore.editors.get(name);
|
133 |
|
134 | if (editor) {
|
135 | if (editor.cellNode) {
|
136 | if (tableStore.inlineEdit) {
|
137 | if (editor.inTab) {
|
138 | editor.inTab = false;
|
139 | } else {
|
140 | editor.focus();
|
141 | }
|
142 | } else {
|
143 | editor.hideEditor();
|
144 | }
|
145 | } else if (tableStore.inlineEdit) {
|
146 | editor.focus();
|
147 | } else {
|
148 | raf(function () {
|
149 | editor.alignEditor(!isStickySupport() && lock ? findCell(tableStore, columnKey, lock) : cell);
|
150 | editor.focus();
|
151 | });
|
152 | }
|
153 | }
|
154 | }
|
155 | }, [column, name, hasEditor, columnKey, tableStore]);
|
156 | var handleFocus = useCallback(function (e) {
|
157 | if (canFocus) {
|
158 | if (key !== SELECTION_KEY) {
|
159 | dataSet.current = record;
|
160 | }
|
161 |
|
162 | showEditor(e.currentTarget);
|
163 |
|
164 | if (!isStickySupport() && (key === SELECTION_KEY || !hasEditor)) {
|
165 | var cell = findCell(tableStore, columnKey, lock);
|
166 |
|
167 | if (cell && !cell.contains(document.activeElement)) {
|
168 | var node = findFirstFocusableElement(cell);
|
169 |
|
170 | if (node && !inTab) {
|
171 | node.focus();
|
172 | }
|
173 | }
|
174 | }
|
175 | }
|
176 |
|
177 | inTab = false;
|
178 | }, [tableStore, dataSet, record, lock, columnKey, canFocus, hasEditor, showEditor]);
|
179 | var handleEditorKeyDown = useCallback(function (e) {
|
180 | switch (e.keyCode) {
|
181 | case KeyCode.TAB:
|
182 | {
|
183 | var cell = findCell(tableStore, columnKey);
|
184 |
|
185 | if (cell) {
|
186 | if (cell.contains(document.activeElement)) {
|
187 | inTab = true;
|
188 | } else {
|
189 | var node = findFirstFocusableElement(cell);
|
190 |
|
191 | if (node) {
|
192 | inTab = true;
|
193 | node.focus();
|
194 | }
|
195 | }
|
196 | }
|
197 |
|
198 | break;
|
199 | }
|
200 |
|
201 | default:
|
202 | }
|
203 | }, [tableStore, columnKey]);
|
204 | var handleCommandSave = useCallback(function () {
|
205 | return dataSet.submit().then(function (result) {
|
206 | if (result !== false) {
|
207 | tableStore.currentEditRecord = undefined;
|
208 | }
|
209 | });
|
210 | }, [tableStore, dataSet]);
|
211 | var handleCommandCancel = useCallback(function () {
|
212 | if (record.status === RecordStatus.add) {
|
213 | dataSet.remove(record);
|
214 | } else {
|
215 | record.reset();
|
216 | tableStore.currentEditRecord = undefined;
|
217 | }
|
218 | }, [tableStore, record, dataSet]);
|
219 | var handleCommandEdit = useCallback(function () {
|
220 | if (tableStore.inlineEdit) {
|
221 | tableStore.currentEditRecord = record;
|
222 | }
|
223 | }, [tableStore, record]);
|
224 | var handleCommandDelete = useCallback(function () {
|
225 | dataSet["delete"](record);
|
226 | }, [dataSet, record]);
|
227 | var multiLine = field && field.get('multiLine');
|
228 | var fieldType = !aggregation && rowHeight !== 'auto' && field && field.type;
|
229 | var rows = multiLine ? _toConsumableArray(record.fields.values()).reduce(function (count, dsField) {
|
230 | var bind = dsField.get('bind');
|
231 |
|
232 | if (bind && bind.startsWith("".concat(name, "."))) {
|
233 | return count + 1;
|
234 | }
|
235 |
|
236 | return count;
|
237 | }, 0) : 0;
|
238 |
|
239 | var checkBox = function () {
|
240 | if (children) {
|
241 | if (selectionMode === SelectionMode.treebox) {
|
242 | return React.createElement(SelectionTreeBox, {
|
243 | record: record
|
244 | });
|
245 | }
|
246 |
|
247 | if (checkField && !tableStore.hasCheckFieldColumn) {
|
248 | return React.createElement(ObserverCheckBox, {
|
249 | name: checkField,
|
250 | record: record,
|
251 | disabled: disabled,
|
252 | indeterminate: record.isIndeterminate
|
253 | });
|
254 | }
|
255 | }
|
256 | }();
|
257 |
|
258 | var renderCommand = useCallback(function () {
|
259 | var tableCommandProps = getConfig('tableCommandProps');
|
260 | var classString = classNames("".concat(prefixCls, "-command"), tableCommandProps && tableCommandProps.className);
|
261 |
|
262 | if (record.editing) {
|
263 | return [React.createElement(Tooltip, {
|
264 | key: "save",
|
265 | title: $l('Table', 'save_button')
|
266 | }, React.createElement(Button, _extends({}, tableCommandProps, {
|
267 | className: classString,
|
268 | icon: "finished",
|
269 | onClick: handleCommandSave
|
270 | }))), React.createElement(Tooltip, {
|
271 | key: "cancel",
|
272 | title: $l('Table', 'cancel_button')
|
273 | }, React.createElement(Button, _extends({}, tableCommandProps, {
|
274 | className: classString,
|
275 | icon: "cancle_a",
|
276 | onClick: handleCommandCancel
|
277 | })))];
|
278 | }
|
279 |
|
280 | if (columnCommand) {
|
281 | var commands = [];
|
282 | columnCommand.forEach(function (button) {
|
283 | var tableButtonProps = {};
|
284 |
|
285 | if (isArrayLike(button)) {
|
286 | tableButtonProps = button[1] || {};
|
287 | button = button[0];
|
288 | }
|
289 |
|
290 | if (isString(button) && button in TableCommandType) {
|
291 | var getButtonProps = function getButtonProps(type) {
|
292 | switch (type) {
|
293 | case TableCommandType.edit:
|
294 | return {
|
295 | icon: 'mode_edit',
|
296 | onClick: handleCommandEdit,
|
297 | disabled: disabled,
|
298 | title: $l('Table', 'edit_button')
|
299 | };
|
300 |
|
301 | case TableCommandType["delete"]:
|
302 | return {
|
303 | icon: 'delete',
|
304 | onClick: handleCommandDelete,
|
305 | disabled: disabled,
|
306 | title: $l('Table', 'delete_button')
|
307 | };
|
308 |
|
309 | default:
|
310 | }
|
311 | };
|
312 |
|
313 | var defaultButtonProps = getButtonProps(button);
|
314 |
|
315 | if (defaultButtonProps) {
|
316 | var _tableButtonProps = tableButtonProps,
|
317 | afterClick = _tableButtonProps.afterClick,
|
318 | buttonProps = _objectWithoutProperties(_tableButtonProps, ["afterClick"]);
|
319 |
|
320 | if (afterClick) {
|
321 | var onClick = defaultButtonProps.onClick;
|
322 |
|
323 | defaultButtonProps.onClick =
|
324 |
|
325 | function () {
|
326 | var _ref = _asyncToGenerator(
|
327 |
|
328 | _regeneratorRuntime.mark(function _callee(e) {
|
329 | return _regeneratorRuntime.wrap(function _callee$(_context) {
|
330 | while (1) {
|
331 | switch (_context.prev = _context.next) {
|
332 | case 0:
|
333 | e.persist();
|
334 | _context.prev = 1;
|
335 | _context.next = 4;
|
336 | return onClick(e);
|
337 |
|
338 | case 4:
|
339 | _context.prev = 4;
|
340 | afterClick(e);
|
341 | return _context.finish(4);
|
342 |
|
343 | case 7:
|
344 | case "end":
|
345 | return _context.stop();
|
346 | }
|
347 | }
|
348 | }, _callee, null, [[1,, 4, 7]]);
|
349 | }));
|
350 |
|
351 | return function (_x) {
|
352 | return _ref.apply(this, arguments);
|
353 | };
|
354 | }();
|
355 | }
|
356 |
|
357 | var title = defaultButtonProps.title,
|
358 | otherProps = _objectWithoutProperties(defaultButtonProps, ["title"]);
|
359 |
|
360 | commands.push(React.createElement(Tooltip, {
|
361 | key: button,
|
362 | title: title
|
363 | }, React.createElement(Button, _extends({}, tableCommandProps, otherProps, buttonProps, {
|
364 | className: classNames(classString, otherProps.className, buttonProps.className)
|
365 | }))));
|
366 | }
|
367 | } else if (isValidElement(button)) {
|
368 | commands.push(cloneElement(button, _objectSpread({}, tableCommandProps, {}, button.props, {
|
369 | className: classNames(classString, button.props.className)
|
370 | })));
|
371 | } else if (isObject(button)) {
|
372 | commands.push(React.createElement(Button, _extends({}, tableCommandProps, button, {
|
373 | className: classNames(classString, button.className)
|
374 | })));
|
375 | }
|
376 | });
|
377 | return commands;
|
378 | }
|
379 | }, [prefixCls, record, columnCommand, aggregation, disabled, handleCommandEdit, handleCommandDelete, handleCommandSave, handleCommandCancel]);
|
380 | var renderEditor = useCallback(function () {
|
381 | if (isValidElement(cellEditor)) {
|
382 | |
383 |
|
384 |
|
385 | if (multiLine) {
|
386 | return cellEditor;
|
387 | }
|
388 |
|
389 | var newEditorProps = _objectSpread({}, cellEditor.props, {
|
390 | record: record,
|
391 | name: name,
|
392 | pristine: pristine,
|
393 | disabled: disabled || inlineEdit && !record.editing,
|
394 | indeterminate: checkField && checkField === name && record.isIndeterminate,
|
395 | labelLayout: LabelLayout.none,
|
396 | showHelp: ShowHelp.none
|
397 | });
|
398 |
|
399 | return cloneElement(cellEditor, newEditorProps);
|
400 | }
|
401 | }, [disabled, cellEditor, checkField, multiLine, record, name, pristine, inlineEdit]);
|
402 | var cellRenderer = useMemo(function () {
|
403 | if (columnCommand) {
|
404 | return renderCommand;
|
405 | }
|
406 |
|
407 | if (cellEditorInCell) {
|
408 | return renderEditor;
|
409 | }
|
410 |
|
411 | if (aggregation && renderer) {
|
412 | return function (rendererProps) {
|
413 | return renderer(_objectSpread({}, rendererProps, {
|
414 | aggregation: aggregation
|
415 | }));
|
416 | };
|
417 | }
|
418 |
|
419 | return renderer;
|
420 | }, [columnCommand, cellEditorInCell, renderEditor, renderCommand, renderer, field, aggregation]);
|
421 | var prefixStyle = useMemo(function () {
|
422 | if (!aggregation) {
|
423 | if (height !== undefined && rows === 0) {
|
424 | return _objectSpread({
|
425 | height: pxToRem(height),
|
426 | lineHeight: 1
|
427 | }, style);
|
428 | }
|
429 |
|
430 | if (rowHeight !== 'auto') {
|
431 | var isCheckBox = fieldType === FieldType["boolean"] || key === SELECTION_KEY;
|
432 | var borderPadding = isCheckBox ? 4 : 2;
|
433 | var heightPx = rows > 0 ? (rowHeight + 2) * rows + 1 : rowHeight;
|
434 | var lineHeightPx = hasEditor || isCheckBox ? rowHeight - borderPadding : rowHeight;
|
435 | return _objectSpread({
|
436 | height: pxToRem(heightPx),
|
437 | lineHeight: rows > 0 ? 'inherit' : pxToRem(lineHeightPx)
|
438 | }, style);
|
439 | }
|
440 | }
|
441 |
|
442 | return style;
|
443 | }, [fieldType, key, rows, rowHeight, height, style, aggregation, hasEditor]);
|
444 | var textAlign = useMemo(function () {
|
445 | return align || (columnCommand ? ColumnAlign.center : getConfig('tableColumnAlign')(column, field));
|
446 | }, [columnCommand, align, column, field]);
|
447 | var colSpanStyle = useMemo(function () {
|
448 | return colSpan && colSpan > 1 && (textAlign === ColumnAlign.right || textAlign === ColumnAlign.center) ? {
|
449 | width: "calc(100% - ".concat(pxToRem(30), ")")
|
450 | } : {};
|
451 | }, [colSpan, textAlign]);
|
452 | var innerStyle = useMemo(function () {
|
453 | if (inAggregation) {
|
454 | return _objectSpread({}, prefixStyle, {}, colSpanStyle);
|
455 | }
|
456 |
|
457 | return _objectSpread({
|
458 | textAlign: textAlign
|
459 | }, prefixStyle, {}, colSpanStyle);
|
460 | }, [inAggregation, textAlign, prefixStyle, colSpanStyle]);
|
461 | var value = name ? pristine ? record.getPristineValue(name) : record.get(name) : undefined;
|
462 | var renderValidationResult = useCallback(function (validationResult) {
|
463 | if (validationResult && validationResult.validationMessage) {
|
464 | return utilRenderValidationMessage(validationResult.validationMessage, true);
|
465 | }
|
466 | }, []);
|
467 | var isValidationMessageHidden = useCallback(function (message) {
|
468 | return !message || pristine;
|
469 | }, [pristine]);
|
470 | var editorBorder = !inlineEdit && hasEditor;
|
471 |
|
472 | var getRenderedValue = function getRenderedValue() {
|
473 | var processValue = function processValue(v) {
|
474 | if (!isNil(v)) {
|
475 | var _text = isPlainObject(v) ? v : utilProcessValue(v, getDateFormatByField(field));
|
476 |
|
477 | return processFieldValue(_text, field, {
|
478 | getProp: function getProp(propName) {
|
479 | return field && field.get(propName);
|
480 | },
|
481 | lang: dataSet && dataSet.lang || localeContext.locale.lang
|
482 | }, true);
|
483 | }
|
484 |
|
485 | return '';
|
486 | };
|
487 |
|
488 | var processRenderer = function processRenderer(v, repeat) {
|
489 | var processedValue;
|
490 |
|
491 | if (field && (field.lookup || field.get('options') || field.get('lovCode'))) {
|
492 | processedValue = field.getText(v);
|
493 | }
|
494 |
|
495 |
|
496 | var text = isNil(processedValue) ? processValue(v) : processedValue;
|
497 | return (cellRenderer || defaultOutputRenderer)({
|
498 | value: v,
|
499 | text: text,
|
500 | record: record,
|
501 | dataSet: dataSet,
|
502 | name: name,
|
503 | repeat: repeat
|
504 | });
|
505 | };
|
506 |
|
507 | if (field) {
|
508 | if (!cellEditorInCell) {
|
509 | var multiple = field.get('multiple');
|
510 | var range = field.get('range');
|
511 |
|
512 | if (multiple) {
|
513 | var _renderMultipleValues = renderMultipleValues(value, {
|
514 | disabled: disabled,
|
515 | readOnly: true,
|
516 | range: range,
|
517 | prefixCls: prefixCls,
|
518 | processRenderer: processRenderer,
|
519 | renderValidationResult: renderValidationResult,
|
520 | isValidationMessageHidden: isValidationMessageHidden,
|
521 | showValidationMessage: showValidationMessage,
|
522 | validator: field.validator
|
523 | }),
|
524 | tags = _renderMultipleValues.tags,
|
525 | multipleValidateMessageLength = _renderMultipleValues.multipleValidateMessageLength;
|
526 |
|
527 | multipleValidateMessageLengthRef.current = multipleValidateMessageLength;
|
528 | return tags;
|
529 | }
|
530 |
|
531 | if (range) {
|
532 | return renderRangeValue(toRangeValue(value, range), {
|
533 | processRenderer: processRenderer
|
534 | });
|
535 | }
|
536 | }
|
537 |
|
538 | if (field.get('multiLine')) {
|
539 | var _renderMultiLine = renderMultiLine({
|
540 | name: name,
|
541 | field: field,
|
542 | record: record,
|
543 | dataSet: dataSet,
|
544 | prefixCls: innerPrefixCls,
|
545 | renderer: cellRenderer,
|
546 | renderValidationResult: renderValidationResult,
|
547 | isValidationMessageHidden: isValidationMessageHidden,
|
548 | processValue: processValue,
|
549 | tooltip: tooltip,
|
550 | labelTooltip: getTooltip('label')
|
551 | }),
|
552 | lines = _renderMultiLine.lines,
|
553 | _multipleValidateMessageLength = _renderMultiLine.multipleValidateMessageLength;
|
554 |
|
555 | multipleValidateMessageLengthRef.current = _multipleValidateMessageLength;
|
556 | return lines;
|
557 | }
|
558 | }
|
559 |
|
560 | var textNode = processRenderer(value);
|
561 | return textNode === '' ? getConfig('tableDefaultRenderer') : textNode;
|
562 | };
|
563 |
|
564 | var result = getRenderedValue();
|
565 | var text = isEmpty(result) || isArrayLike(result) && !result.length ? editorBorder ? undefined : getConfig('renderEmpty')('Output') : result;
|
566 | var showTooltip = useCallback(function (e) {
|
567 | if (field && !(multipleValidateMessageLengthRef.current > 0 || !field.get('validator') && field.get('multiple') && toMultipleValue(value, field.get('range')).length)) {
|
568 | var validator = field.validator;
|
569 | var message = validator && renderValidationResult(validator.currentValidationResult);
|
570 |
|
571 | if (!isValidationMessageHidden(message)) {
|
572 | showValidationMessage(e, message);
|
573 | return true;
|
574 | }
|
575 | }
|
576 |
|
577 | var element = e.target;
|
578 |
|
579 | if (element && !multiLine && (tooltip === TextTooltip.always || tooltip === TextTooltip.overflow && isOverflow(element))) {
|
580 | if (text) {
|
581 | show(element, {
|
582 | title: text,
|
583 | placement: 'right',
|
584 | theme: getTooltipTheme('table-cell')
|
585 | });
|
586 | return true;
|
587 | }
|
588 | }
|
589 |
|
590 | return false;
|
591 | }, [renderValidationResult, isValidationMessageHidden, field, tooltip, multiLine, text]);
|
592 | var handleMouseEnter = useCallback(function (e) {
|
593 | if (!tableStore.columnResizing && showTooltip(e)) {
|
594 | tooltipShownRef.current = true;
|
595 | }
|
596 | }, [tooltipShownRef, tableStore, showTooltip]);
|
597 | var handleMouseLeave = useCallback(function () {
|
598 | if (!tableStore.columnResizing && tooltipShownRef.current) {
|
599 | hide();
|
600 | tooltipShownRef.current = false;
|
601 | }
|
602 | }, [tooltipShownRef, tableStore]);
|
603 | useEffect(function () {
|
604 | if (name && inlineEdit && record === currentEditRecord) {
|
605 | var currentEditor = tableStore.editors.get(name);
|
606 |
|
607 | if (currentEditor) {
|
608 | currentEditor.alignEditor();
|
609 | }
|
610 |
|
611 | return function () {
|
612 | if (currentEditor) {
|
613 | currentEditor.hideEditor();
|
614 | }
|
615 | };
|
616 | }
|
617 | }, []);
|
618 | useEffect(function () {
|
619 | return function () {
|
620 | if (tooltipShownRef.current) {
|
621 | hide();
|
622 | tooltipShownRef.current = false;
|
623 | }
|
624 | };
|
625 | }, [tooltipShownRef]);
|
626 | var innerProps = {
|
627 | tabIndex: hasEditor && canFocus ? 0 : -1,
|
628 | onFocus: handleFocus,
|
629 | children: text
|
630 | };
|
631 | var empty = field ? isFieldValueEmpty(value, field.get('range'), field.get('multiple'), field.type === FieldType.object ? field.get('valueField') : undefined, field.type === FieldType.object ? field.get('textField') : undefined) : false;
|
632 | var innerClassName = [innerPrefixCls];
|
633 |
|
634 | if (columnEditorBorder) {
|
635 | innerClassName.push("".concat(prefixCls, "-inner-bordered"));
|
636 | }
|
637 |
|
638 | if (editorBorder) {
|
639 | innerClassName.push("".concat(prefixCls, "-inner-editable"));
|
640 | }
|
641 |
|
642 | var highlight;
|
643 | var inValid;
|
644 |
|
645 | if (field) {
|
646 | if (!pristine && field.dirty) {
|
647 | innerClassName.push("".concat(prefixCls, "-inner-dirty"));
|
648 | }
|
649 |
|
650 | if (!inlineEdit && !cellEditorInCell) {
|
651 | inValid = !field.valid;
|
652 |
|
653 | if (inValid) {
|
654 | innerClassName.push("".concat(prefixCls, "-inner-invalid"));
|
655 | }
|
656 | }
|
657 |
|
658 | if (editorBorder) {
|
659 | if (field.required && (empty || !getConfig('showRequiredColorsOnlyEmpty'))) {
|
660 | innerClassName.push("".concat(prefixCls, "-inner-required"));
|
661 | }
|
662 |
|
663 | highlight = field.get('highlight');
|
664 |
|
665 | if (highlight) {
|
666 | innerClassName.push("".concat(prefixCls, "-inner-highlight"));
|
667 | }
|
668 | }
|
669 | }
|
670 |
|
671 | if (fieldDisabled) {
|
672 | innerClassName.push("".concat(prefixCls, "-inner-disabled"));
|
673 | }
|
674 |
|
675 | if (multiLine) {
|
676 | innerClassName.push("".concat(prefixCls, "-inner-multiLine"));
|
677 | }
|
678 |
|
679 | if (!isStickySupport() && !hasEditor) {
|
680 | innerProps.onKeyDown = handleEditorKeyDown;
|
681 | }
|
682 |
|
683 | if (inValid || tooltip) {
|
684 | innerProps.onMouseEnter = handleMouseEnter;
|
685 | innerProps.onMouseLeave = handleMouseLeave;
|
686 | }
|
687 |
|
688 | if (rowHeight === 'auto') {
|
689 | innerClassName.push("".concat(prefixCls, "-inner-auto-height"));
|
690 | } else {
|
691 | innerClassName.push("".concat(prefixCls, "-inner-row-height-fixed"));
|
692 | }
|
693 |
|
694 | if (height !== undefined && rows === 0) {
|
695 | innerClassName.push("".concat(prefixCls, "-inner-fixed-height"));
|
696 | }
|
697 |
|
698 | var indentText = children && React.createElement("span", {
|
699 | style: {
|
700 | paddingLeft: pxToRem(indentSize * record.level)
|
701 | }
|
702 | });
|
703 | var prefix = (indentText || children || checkBox) && React.createElement("span", {
|
704 | key: "prefix",
|
705 | className: "".concat(prefixCls, "-prefix"),
|
706 | style: prefixStyle
|
707 | }, indentText, children, checkBox);
|
708 | var output = React.createElement("span", _extends({
|
709 | key: "output"
|
710 | }, innerProps, {
|
711 | style: innerStyle,
|
712 | className: innerClassName.join(' ')
|
713 | }));
|
714 | return React.createElement(React.Fragment, null, prefix, highlight ? (column.highlightRenderer || tableStore.cellHighlightRenderer)(transformHighlightProps(highlight, {
|
715 | dataSet: dataSet,
|
716 | record: record,
|
717 | name: name
|
718 | }), output) : output);
|
719 | });
|
720 | TableCellInner.displayName = 'TableCellInner';
|
721 | export default TableCellInner;
|
722 |
|