choerodon-ui/pro/es/table/TableCellInner.js

An enterprise-class UI design language and React-based implementation

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["afterClick"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { isArrayLike } from 'mobx';
import raf from 'raf';
import classNames from 'classnames';
import isNil from 'lodash/isNil';
import isPlainObject from 'lodash/isPlainObject';
import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import KeyCode from '../../../es/_util/KeyCode';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import TableContext from './TableContext';
import { findCell, getColumnKey, getEditorByColumnAndRecord, isInCellEditor, isStickySupport } from './utils';
import { FieldType, RecordStatus } from '../data-set/enum';
import { COMBOBAR_KEY, SELECTION_KEY } from './TableStore';
import { ColumnAlign, SelectionMode, TableCommandType } from './enum';
import ObserverCheckBox from '../check-box/CheckBox';
import { $l } from '../locale-context';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import { LabelLayout } from '../form/enum';
import { findFirstFocusableElement } from '../_util/focusable';
import SelectionTreeBox from './SelectionTreeBox';
import { getDateFormatByField, getValueKey, isFieldValueEmpty, processFieldValue, processValue as utilProcessValue, renderMultiLine, renderMultipleValues, renderRangeValue, renderValidationMessage as utilRenderValidationMessage, showValidationMessage as _showValidationMessage, toMultipleValue, toRangeValue, transformHighlightProps } from '../field/utils';
import localeContext from '../locale-context/LocaleContext';
import isEmpty from '../_util/isEmpty';
import { Tooltip as TextTooltip } from '../core/enum';
import isOverflow from '../overflow-tip/util';
import { hide, show } from '../tooltip/singleton';
import useComputed from '../use-computed';
import { ShowHelp } from '../field/enum';
import { defaultOutputRenderer } from '../output/utils';
import { iteratorReduce } from '../_util/iteratorUtils';
var inTab = false;

var TableCellInner = function TableCellInner(props) {
  var column = props.column,
      record = props.record,
      children = props.children,
      style = props.style,
      disabled = props.disabled,
      inAggregation = props.inAggregation,
      prefixCls = props.prefixCls,
      colSpan = props.colSpan,
      headerGroup = props.headerGroup,
      rowGroup = props.rowGroup;
  var multipleValidateMessageLengthRef = useRef(0);
  var tooltipShownRef = useRef();

  var _useContext = useContext(ConfigContext),
      getTooltip = _useContext.getTooltip,
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var _useContext2 = useContext(TableContext),
      pristine = _useContext2.pristine,
      aggregation = _useContext2.aggregation,
      inlineEdit = _useContext2.inlineEdit,
      rowHeight = _useContext2.rowHeight,
      tableStore = _useContext2.tableStore,
      dataSet = _useContext2.dataSet,
      columnEditorBorder = _useContext2.columnEditorBorder,
      indentSize = _useContext2.indentSize,
      checkField = _useContext2.checkField,
      selectionMode = _useContext2.selectionMode;

  var innerPrefixCls = "".concat(prefixCls, "-inner");
  var tooltip = tableStore.getColumnTooltip(column);
  var name = column.name,
      key = column.key,
      lock = column.lock,
      renderer = column.renderer,
      command = column.command,
      align = column.align,
      tooltipProps = column.tooltipProps;
  var columnKey = getColumnKey(column);
  var height = record.getState("__column_resize_height_".concat(name));
  var currentEditRecord = tableStore.currentEditRecord;
  var field = dataSet.getField(name);
  var fieldDisabled = disabled || field && field.get('disabled', record);
  var innerRef = useRef(null);
  var prefixRef = useRef(null);

  var _useState = useState(children ? indentSize * record.level : 0),
      _useState2 = _slicedToArray(_useState, 2),
      paddingLeft = _useState2[0],
      setPaddingLeft = _useState2[1];

  var columnCommand = useComputed(function () {
    if (typeof command === 'function') {
      return command({
        dataSet: dataSet,
        record: record,
        aggregation: aggregation
      });
    }

    return command;
  }, [record, command, dataSet, aggregation]);
  var canFocus = useMemo(function () {
    return !fieldDisabled && (!inlineEdit || record === currentEditRecord);
  }, [fieldDisabled, record, currentEditRecord, inlineEdit]);
  var cellEditor = getEditorByColumnAndRecord(column, record);
  var cellEditorInCell = isInCellEditor(cellEditor);
  var hasEditor = !pristine && cellEditor && !cellEditorInCell;
  var showEditor = useCallback(function (cell) {
    if (name) {
      if (!lock && tableStore.overflowX) {
        var tableBodyWrap = tableStore.virtual ? cell.offsetParent.parentNode.parentNode : cell.offsetParent;

        if (tableBodyWrap) {
          var _tableStore$columnGro = tableStore.columnGroups,
              leftLeafColumnsWidth = _tableStore$columnGro.leftLeafColumnsWidth,
              rightLeafColumnsWidth = _tableStore$columnGro.rightLeafColumnsWidth;
          var offsetLeft = cell.offsetLeft,
              offsetWidth = cell.offsetWidth;
          var scrollLeft = tableBodyWrap.scrollLeft;
          var width = Math.round(tableBodyWrap.getBoundingClientRect().width);
          var leftSide = offsetLeft - leftLeafColumnsWidth;
          var rightSide = offsetLeft + offsetWidth - width + rightLeafColumnsWidth + measureScrollbar();
          var sl = scrollLeft;

          if (sl < rightSide) {
            sl = rightSide;
          }

          if (sl > leftSide) {
            sl = leftSide;
          }

          if (sl !== scrollLeft) {
            tableBodyWrap.scrollLeft = sl;
          }
        }
      }

      tableStore.showEditor(name);
      var editor = tableStore.editors.get(name);

      if (editor) {
        if (editor.cellNode) {
          if (tableStore.inlineEdit) {
            if (editor.inTab) {
              editor.inTab = false;
            } else {
              editor.focus();
            }
          } else {
            editor.hideEditor();
          }
        } else if (tableStore.inlineEdit) {
          editor.focus();
        } else {
          raf(function () {
            editor.alignEditor(!isStickySupport() && lock ? findCell(tableStore, columnKey, lock, undefined, true) : cell);
            editor.focus();
          });
        }
      }
    }
  }, [column, name, columnKey, tableStore]);
  var handleEditorKeyDown = useCallback(function (e) {
    switch (e.keyCode) {
      case KeyCode.TAB:
        {
          var cell = findCell(tableStore, columnKey);

          if (cell) {
            if (cell.contains(document.activeElement)) {
              inTab = true;
            } else {
              var node = findFirstFocusableElement(cell);

              if (node) {
                inTab = true;
                node.focus();
              }
            }
          }

          break;
        }

      default:
    }
  }, [tableStore, columnKey]);
  var handleCommandSave = useCallback(function () {
    return dataSet.submit().then(function (result) {
      if (result !== false) {
        tableStore.currentEditRecord = undefined;
      }
    });
  }, [tableStore, dataSet]);
  var handleCommandCancel = useCallback(function () {
    if (record.status === RecordStatus.add) {
      dataSet.remove(record);
    } else {
      record.reset();
      tableStore.currentEditRecord = undefined;
    }
  }, [tableStore, record, dataSet]);
  var handleCommandEdit = useCallback(function () {
    if (tableStore.inlineEdit) {
      tableStore.currentEditRecord = record;
    }
  }, [tableStore, record]);
  var handleCommandDelete = useCallback(function () {
    dataSet["delete"](record);
  }, [dataSet, record]);
  var multiLine = field && field.get('multiLine', record);
  var fieldType = !aggregation && rowHeight !== 'auto' && field && field.get('type', record);
  var rows = multiLine ? iteratorReduce(dataSet.fields.values(), function (count, dsField) {
    var bind = dsField.get('bind', record);

    if (bind && bind.startsWith("".concat(name, "."))) {
      return count + 1;
    }

    return count;
  }, 0) : 0;

  var checkBox = function () {
    if (children) {
      if (selectionMode === SelectionMode.treebox) {
        return /*#__PURE__*/React.createElement(SelectionTreeBox, {
          record: record
        });
      }

      if (checkField && !tableStore.hasCheckFieldColumn) {
        var indeterminate = !dataSet.props.treeCheckStrictly && record.isIndeterminate;
        return /*#__PURE__*/React.createElement(ObserverCheckBox, {
          name: checkField,
          record: record,
          disabled: disabled,
          indeterminate: indeterminate
        });
      }
    }
  }();

  var renderCommand = useCallback(function () {
    var tableCommandProps = tableStore.getConfig('tableCommandProps');
    var classString = classNames("".concat(prefixCls, "-command"), tableCommandProps && tableCommandProps.className);

    if (record.editing) {
      return [/*#__PURE__*/React.createElement(Button, _extends({}, tableCommandProps, {
        key: "save",
        className: classString,
        onClick: handleCommandSave,
        funcType: FuncType.link
      }), $l('Table', 'save_button')), /*#__PURE__*/React.createElement(Button, _extends({}, tableCommandProps, {
        key: "cancel",
        className: classString,
        onClick: handleCommandCancel,
        funcType: FuncType.link
      }), $l('Table', 'cancel_button'))];
    }

    if (columnCommand) {
      var commands = [];
      columnCommand.forEach(function (button) {
        var tableButtonProps = {};

        if (isArrayLike(button)) {
          tableButtonProps = button[1] || {};
          button = button[0];
        }

        if (isString(button) && button in TableCommandType) {
          var getButtonProps = function getButtonProps(type) {
            switch (type) {
              case TableCommandType.edit:
                return {
                  funcType: FuncType.link,
                  onClick: handleCommandEdit,
                  disabled: disabled,
                  children: $l('Table', 'edit_button'),
                  key: 'edit'
                };

              case TableCommandType["delete"]:
                return {
                  funcType: FuncType.link,
                  onClick: handleCommandDelete,
                  disabled: disabled,
                  children: $l('Table', 'delete_button'),
                  key: 'delete'
                };

              default:
            }
          };

          var defaultButtonProps = getButtonProps(button);

          if (defaultButtonProps) {
            var _tableButtonProps = tableButtonProps,
                afterClick = _tableButtonProps.afterClick,
                buttonProps = _objectWithoutProperties(_tableButtonProps, _excluded);

            if (afterClick) {
              var onClick = defaultButtonProps.onClick;

              defaultButtonProps.onClick = /*#__PURE__*/function () {
                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
                  return _regeneratorRuntime.wrap(function _callee$(_context) {
                    while (1) {
                      switch (_context.prev = _context.next) {
                        case 0:
                          e.persist();
                          _context.prev = 1;
                          _context.next = 4;
                          return onClick(e);

                        case 4:
                          _context.prev = 4;
                          afterClick(e);
                          return _context.finish(4);

                        case 7:
                        case "end":
                          return _context.stop();
                      }
                    }
                  }, _callee, null, [[1,, 4, 7]]);
                }));

                return function (_x) {
                  return _ref.apply(this, arguments);
                };
              }();
            }

            var otherProps = _extends({}, defaultButtonProps);

            commands.push( /*#__PURE__*/React.createElement(Button, _extends({}, tableCommandProps, otherProps, buttonProps, {
              className: classNames(classString, otherProps.className, buttonProps.className)
            })));
          }
        } else if ( /*#__PURE__*/isValidElement(button)) {
          commands.push( /*#__PURE__*/cloneElement(button, _objectSpread(_objectSpread(_objectSpread({}, tableCommandProps), button.props), {}, {
            className: classNames(classString, button.props.className)
          })));
        } else if (isObject(button)) {
          commands.push( /*#__PURE__*/React.createElement(Button, _extends({}, tableCommandProps, button, {
            className: classNames(classString, button.className)
          })));
        }
      });
      return commands;
    }
  }, [tableStore, prefixCls, record, columnCommand, aggregation, disabled, handleCommandEdit, handleCommandDelete, handleCommandSave, handleCommandCancel]);
  var renderEditor = useCallback(function () {
    if ( /*#__PURE__*/isValidElement(cellEditor)) {
      /**
       * 渲染多行编辑器
       */
      if (multiLine) {
        return cellEditor;
      }

      var newEditorProps = _objectSpread(_objectSpread({}, cellEditor.props), {}, {
        record: record,
        name: name,
        pristine: pristine,
        disabled: disabled || inlineEdit && !record.editing,
        indeterminate: checkField && checkField === name && record.isIndeterminate,
        labelLayout: LabelLayout.none,
        showHelp: ShowHelp.none
      });

      return /*#__PURE__*/cloneElement(cellEditor, newEditorProps);
    }
  }, [disabled, cellEditor, checkField, multiLine, record, name, pristine, inlineEdit]);
  var cellRenderer = useMemo(function () {
    if (columnCommand) {
      return renderCommand;
    }

    if (cellEditorInCell) {
      return renderEditor;
    }

    if (aggregation && renderer) {
      return function (rendererProps) {
        return renderer(_objectSpread(_objectSpread({}, rendererProps), {}, {
          aggregation: aggregation
        }));
      };
    }

    return renderer;
  }, [columnCommand, cellEditorInCell, renderEditor, renderCommand, renderer, field, aggregation]);
  var prefixStyle = useMemo(function () {
    if (!aggregation || !tableStore.hasAggregationColumn) {
      if (height !== undefined && rows === 0) {
        return _objectSpread({
          height: pxToRem(height),
          lineHeight: 1.5
        }, style);
      }

      if (rowHeight !== 'auto') {
        var isComboQueryColumn = key === COMBOBAR_KEY;
        var isCheckBox = fieldType === FieldType["boolean"] || key === SELECTION_KEY;
        var multiple = field && field.get('multiple', record);
        var borderPadding = isCheckBox || multiple || isComboQueryColumn ? 4 : 2;
        var heightPx = rows > 0 ? (rowHeight + 2) * rows + 1 : rowHeight;
        var lineHeightPx = hasEditor || isCheckBox || multiple || isComboQueryColumn ? rowHeight - borderPadding : rowHeight;
        return _objectSpread({
          height: pxToRem(heightPx),
          lineHeight: rows > 0 ? 'inherit' : pxToRem(lineHeightPx)
        }, style);
      }
    }

    return style;
  }, [fieldType, key, rows, rowHeight, height, style, aggregation, hasEditor]);
  var textAlign = useMemo(function () {
    return align || (columnCommand ? ColumnAlign.center : tableStore.getConfig('tableColumnAlign')(column, field, record));
  }, [columnCommand, align, column, field, record]);
  var colSpanStyle = useMemo(function () {
    return colSpan && colSpan > 1 && (textAlign === ColumnAlign.right || textAlign === ColumnAlign.center) ? {
      width: "calc(100% - ".concat(pxToRem(30), ")")
    } : {};
  }, [colSpan, textAlign]);
  var innerStyle = useMemo(function () {
    if (inAggregation) {
      return _objectSpread(_objectSpread({}, prefixStyle), colSpanStyle);
    }

    return _objectSpread(_objectSpread({
      textAlign: textAlign
    }, prefixStyle), colSpanStyle);
  }, [inAggregation, textAlign, prefixStyle, colSpanStyle]);
  var value = name ? pristine ? record.getPristineValue(name) : record.get(name) : undefined;
  var renderValidationResult = useCallback(function (validationResult) {
    if (validationResult && validationResult.validationMessage) {
      var validationMessage = validationResult.validationMessage;

      if (name) {
        var editor = tableStore.editors.get(name);

        if (editor && editor.editorProps && typeof editor.editorProps.validationRenderer === 'function') {
          var validationRenderer = editor.editorProps.validationRenderer;
          validationMessage = validationRenderer(validationResult, validationResult.validationProps);

          if (isNil(validationMessage)) {
            return;
          }
        }
      }

      return utilRenderValidationMessage(validationMessage, true, tableStore.getProPrefixCls);
    }
  }, [name, tableStore.editors]);
  var isValidationMessageHidden = useCallback(function (message) {
    return !message || pristine;
  }, [pristine]);
  var editorBorder = !inlineEdit && hasEditor;

  var processValue = function processValue(v) {
    if (!isNil(v)) {
      var _text = isPlainObject(v) ? v : utilProcessValue(v, {
        dateFormat: getDateFormatByField(field, undefined, record),
        showInvalidDate: tableStore.getConfig('showInvalidDate'),
        isNumber: [FieldType.number, FieldType.currency, FieldType.bigNumber].includes(fieldType),
        precision: field && field.get('precision', record),
        useZeroFilledDecimal: tableStore.getConfig('useZeroFilledDecimal')
      });

      return processFieldValue(_text, field, {
        getProp: function getProp(propName) {
          return field && field.get(propName, record);
        },
        lang: dataSet && dataSet.lang || localeContext.locale.lang
      }, true, record, tableStore.getConfig);
    }

    return '';
  };

  var processRenderer = function processRenderer(value, repeat) {
    var processedValue;

    if (field && (field.getLookup(record) || field.get('options', record) || field.get('lovCode', record))) {
      if (isArrayLike(value)) {
        var isCascader = !field.get('multiple', record) || value.some(function (v) {
          return isArrayLike(v);
        });
        processedValue = value.map(function (v) {
          return field.getText(v, undefined, record);
        }).join(isCascader ? '/' : '、');
      } else {
        processedValue = field.getText(value, undefined, record);
      }
    } // 值集中不存在 再去取直接返回的值


    var text = isNil(processedValue) ? processValue(value) : processedValue;
    return (cellRenderer || defaultOutputRenderer)({
      value: value,
      text: text,
      record: record,
      dataSet: dataSet,
      name: name,
      repeat: repeat,
      headerGroup: headerGroup,
      rowGroup: rowGroup
    });
  };

  var getRenderedValue = function getRenderedValue() {
    if (field) {
      if (!cellEditorInCell) {
        var multiple = field.get('multiple', record);
        var range = field.get('range', record);
        var tagRenderer = tableStore.getColumnTagRenderer(column);

        if (multiple) {
          var _renderMultipleValues = renderMultipleValues(value, {
            disabled: disabled,
            readOnly: true,
            range: range,
            prefixCls: prefixCls,
            tagRenderer: tagRenderer,
            processRenderer: processRenderer,
            renderValidationResult: renderValidationResult,
            isValidationMessageHidden: isValidationMessageHidden,
            showValidationMessage: function showValidationMessage(e, message) {
              return _showValidationMessage(e, message, getTooltipTheme('validation'), getTooltipPlacement('validation'), tableStore.getConfig);
            },
            validationResults: field.getValidationErrorValues(record),
            rangeSeparator: tableStore.getConfig('rangeSeparator')
          }),
              tags = _renderMultipleValues.tags,
              multipleValidateMessageLength = _renderMultipleValues.multipleValidateMessageLength,
              _isOverflowMaxTagCount = _renderMultipleValues.isOverflowMaxTagCount;

          multipleValidateMessageLengthRef.current = multipleValidateMessageLength;
          return {
            result: tags,
            isOverflowMaxTagCount: _isOverflowMaxTagCount
          };
        }

        if (range) {
          return {
            result: renderRangeValue(toRangeValue(value, range), {
              processRenderer: processRenderer
            })
          };
        }
      }

      if (field.get('multiLine', record)) {
        var _renderMultiLine = renderMultiLine({
          name: name,
          field: field,
          record: record,
          dataSet: dataSet,
          prefixCls: innerPrefixCls,
          renderer: cellRenderer,
          renderValidationResult: renderValidationResult,
          isValidationMessageHidden: isValidationMessageHidden,
          processValue: processValue,
          tooltip: tooltip,
          labelTooltip: getTooltip('label')
        }),
            lines = _renderMultiLine.lines,
            _multipleValidateMessageLength = _renderMultiLine.multipleValidateMessageLength;

        multipleValidateMessageLengthRef.current = _multipleValidateMessageLength;
        return lines;
      }
    }

    var textNode = processRenderer(value);
    return {
      result: textNode === '' ? tableStore.getConfig('tableDefaultRenderer') : textNode
    };
  };

  var _getRenderedValue = getRenderedValue(),
      result = _getRenderedValue.result,
      isOverflowMaxTagCount = _getRenderedValue.isOverflowMaxTagCount;

  var text = isEmpty(result) || isArrayLike(result) && !result.length ? editorBorder ? undefined : tableStore.getConfig('renderEmpty')('Output') : result;
  var handleFocus = useCallback(function (e) {
    if (canFocus) {
      handleMouseEnter(e);

      if (key !== SELECTION_KEY) {
        dataSet.current = record;
      }

      if (hasEditor && !tableStore.shiftKey) {
        showEditor(e.currentTarget);
      }

      if (!isStickySupport() && (key === SELECTION_KEY || !hasEditor)) {
        var cell = findCell(tableStore, columnKey, lock);

        if (cell && !cell.contains(document.activeElement)) {
          var node = findFirstFocusableElement(cell);

          if (node && !inTab) {
            node.focus();
          }
        }
      }
    }

    inTab = false;
  }, [tableStore, dataSet, record, lock, columnKey, canFocus, hasEditor, showEditor, text]);
  var showTooltip = useCallback(function (e) {
    if (field && !(multipleValidateMessageLengthRef.current > 0 || !field.get('validator', record) && field.get('multiple', record) && toMultipleValue(value, field.get('range', record)).length)) {
      var validationResults = field.getValidationErrorValues(record);
      var message = validationResults && !!validationResults.length && renderValidationResult(validationResults[0]);

      if (!isValidationMessageHidden(message)) {
        _showValidationMessage(e, message, getTooltipTheme('validation'), getTooltipPlacement('validation'), tableStore.getConfig);

        return true;
      }
    }

    var element = e.currentTarget;

    if (element && !multiLine && (tooltip === TextTooltip.always || tooltip === TextTooltip.overflow && isOverflow(element)) || isOverflowMaxTagCount) {
      var current = innerRef.current;

      if (text && current && current.contains(element)) {
        var tooltipConfig = isObject(tooltipProps) ? tooltipProps : {};

        var getMultipleText = function getMultipleText() {
          var values = field ? toMultipleValue(value, field.get('range', record)) : [];
          var repeats = new Map();
          var texts = values.map(function (v) {
            var key = getValueKey(v);
            var repeat = repeats.get(key) || 0;
            var text = processRenderer(v);
            repeats.set(key, repeat + 1);

            if (!isNil(text)) {
              return text;
            }

            return undefined;
          });
          return texts.join('、');
        };

        var duration = (tooltipConfig.mouseEnterDelay || 0.1) * 1000;
        show(element, _objectSpread({
          title: isOverflowMaxTagCount ? getMultipleText() : text,
          placement: getTooltipPlacement('table-cell') || 'right',
          theme: getTooltipTheme('table-cell')
        }, tooltipConfig), duration);
        return true;
      }
    }

    return false;
  }, [getTooltipTheme, getTooltipPlacement, renderValidationResult, isValidationMessageHidden, field, record, tooltip, multiLine, text, innerRef]);
  var handleMouseEnter = useCallback(function (e) {
    if (!tableStore.columnResizing && !tooltipShownRef.current && showTooltip(e)) {
      tooltipShownRef.current = true;
    }
  }, [tooltipShownRef, tableStore, showTooltip]);
  var handleMouseLeave = useCallback(function () {
    if (!tableStore.columnResizing && tooltipShownRef.current) {
      var tooltipConfig = isObject(tooltipProps) ? tooltipProps : {};
      var duration = (tooltipConfig.mouseLeaveDelay || 0.1) * 1000;
      hide(duration);
      tooltipShownRef.current = false;
    }
  }, [tooltipShownRef, tableStore]);
  useEffect(function () {
    if (name && inlineEdit && record === currentEditRecord) {
      var currentEditor = tableStore.editors.get(name);

      if (currentEditor) {
        currentEditor.alignEditor();
      }

      return function () {
        if (currentEditor) {
          currentEditor.hideEditor();
        }
      };
    }
  }, []);
  useEffect(function () {
    return function () {
      if (tooltipShownRef.current) {
        hide();
        tooltipShownRef.current = false;
      }
    };
  }, [tooltipShownRef]);
  useLayoutEffect(function () {
    var current = innerRef.current;
    var activeEmptyCell = tableStore.activeEmptyCell;

    if (current && activeEmptyCell && activeEmptyCell.dataset.index === name && tableStore.dataSet.current === record) {
      delete tableStore.activeEmptyCell;

      if (current.tabIndex === -1) {
        var firstFocusableElement = findFirstFocusableElement(current);

        if (firstFocusableElement) {
          firstFocusableElement.focus();
        }
      } else {
        current.focus();
      }
    }
  }, [record]);
  var innerProps = {
    tabIndex: hasEditor && canFocus ? 0 : -1,
    onFocus: handleFocus,
    children: text,
    ref: innerRef
  };
  var empty = field ? isFieldValueEmpty(value, field.get('range', record), field.get('multiple', record), field.get('type', record) === FieldType.object ? field.get('valueField', record) : undefined, field.get('type', record) === FieldType.object ? field.get('textField', record) : undefined) : false;
  var innerClassName = [innerPrefixCls];

  if (columnEditorBorder) {
    innerClassName.push("".concat(prefixCls, "-inner-bordered"));
  }

  if (editorBorder) {
    innerClassName.push("".concat(prefixCls, "-inner-editable"));
  }

  var highlight;
  var inValid;

  if (field) {
    if (!pristine && field.isDirty(record)) {
      innerClassName.push("".concat(prefixCls, "-inner-dirty"));
    }

    if (!inlineEdit && !cellEditorInCell) {
      inValid = !field.isValid(record);
      field.get('required', record);

      if (inValid) {
        innerClassName.push("".concat(prefixCls, "-inner-invalid"));
      }
    }

    if (editorBorder) {
      if (field.get('required', record) && (empty || !tableStore.getConfig('showRequiredColorsOnlyEmpty'))) {
        innerClassName.push("".concat(prefixCls, "-inner-required"));
      }

      highlight = field.get('highlight', record);

      if (highlight) {
        innerClassName.push("".concat(prefixCls, "-inner-highlight"));
      }
    }
  }

  if (fieldDisabled) {
    innerClassName.push("".concat(prefixCls, "-inner-disabled"));
  }

  if (multiLine) {
    innerClassName.push("".concat(prefixCls, "-inner-multiLine"));
  }

  if (!isStickySupport() && !hasEditor) {
    innerProps.onKeyDown = handleEditorKeyDown;
  }

  if (inValid || tooltip) {
    innerProps.onMouseEnter = handleMouseEnter;
    innerProps.onMouseLeave = handleMouseLeave;
  }

  if (rowHeight === 'auto') {
    innerClassName.push("".concat(prefixCls, "-inner-auto-height"));
  } else {
    innerClassName.push("".concat(prefixCls, "-inner-row-height-fixed"));
  }

  if (height !== undefined && rows === 0) {
    innerClassName.push("".concat(prefixCls, "-inner-fixed-height"));
  }

  if (isString(innerProps.children) && innerProps.children.includes('\n') && (rowHeight === 'auto' || height !== undefined && rows === 0)) {
    innerClassName.push("".concat(prefixCls, "-inner-pre"));
  }

  useEffect(function () {
    // 兼容Table Tree模式嵌套过深样式
    var current = prefixRef.current;

    if (current && paddingLeft !== 0) {
      var parentElement = current.parentElement,
          prefixWidth = current.offsetWidth;

      if (parentElement) {
        var parentWidth = parentElement.clientWidth;

        if (prefixWidth > parentWidth) {
          setPaddingLeft(Math.max(paddingLeft - (prefixWidth - parentWidth), 0));
        }
      }
    }
  }, [prefixRef, paddingLeft, setPaddingLeft]);
  var indentText = children && /*#__PURE__*/React.createElement("span", {
    style: {
      paddingLeft: pxToRem(paddingLeft)
    }
  });
  var prefix = children && /*#__PURE__*/React.createElement("span", {
    key: "prefix",
    className: "".concat(prefixCls, "-prefix"),
    style: prefixStyle,
    ref: prefixRef
  }, indentText, children, checkBox);
  var output = /*#__PURE__*/React.createElement("span", _extends({
    key: "output"
  }, innerProps, {
    style: innerStyle,
    className: innerClassName.join(' ')
  }));
  return /*#__PURE__*/React.createElement(React.Fragment, null, prefix, highlight ? (column.highlightRenderer || tableStore.cellHighlightRenderer)(transformHighlightProps(highlight, {
    dataSet: dataSet,
    record: record,
    name: name
  }), output) : output);
};

TableCellInner.displayName = 'TableCellInner';
export default observer(TableCellInner);
//# sourceMappingURL=TableCellInner.js.map