choerodon-ui/pro/lib/table/TableCell.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _classnames = _interopRequireDefault(require("classnames"));

var _raf = _interopRequireDefault(require("raf"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _max = _interopRequireDefault(require("lodash/max"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _measureScrollbar = _interopRequireDefault(require("../../../lib/_util/measureScrollbar"));

var _resizeObserver = _interopRequireDefault(require("../../../lib/_util/resizeObserver"));

var _configure = require("../../../lib/configure");

var _Record = _interopRequireDefault(require("../data-set/Record"));

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _utils = require("./utils");

var _enum = require("./enum");

var _CheckBox = _interopRequireDefault(require("../check-box/CheckBox"));

var _Output = _interopRequireDefault(require("../output/Output"));

var _enum2 = require("../field/enum");

var _Button = _interopRequireDefault(require("../button/Button"));

var _localeContext = require("../locale-context");

var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));

var _enum3 = require("../data-set/enum");

var _enum4 = require("../form/enum");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _TableStore = require("./TableStore");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var inTab = false;

var TableCell =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(TableCell, _Component);

  var _super = _createSuper(TableCell);

  function TableCell() {
    (0, _classCallCheck2["default"])(this, TableCell);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(TableCell, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.connect();
      var currentEditor = this.currentEditor;

      if (currentEditor) {
        currentEditor.alignEditor();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.disconnect();
      this.connect();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.disconnect();
      var currentEditor = this.currentEditor;

      if (currentEditor) {
        currentEditor.hideEditor();
      }
    }
  }, {
    key: "saveOutput",
    value: function saveOutput(node) {
      if (node) {
        this.element = node.element;
      } else {
        this.element = null;
      }
    }
  }, {
    key: "connect",
    value: function connect() {
      var column = this.props.column;
      var tableStore = this.context.tableStore;

      if (tableStore.getColumnTooltip(column) === _enum.TableColumnTooltip.overflow) {
        var dataSet = tableStore.dataSet;
        dataSet.addEventListener(_enum3.DataSetEvents.update, this.handleOutputChange);
        this.handleResize();
      }
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      var dataSet = this.context.tableStore.dataSet;
      dataSet.removeEventListener(_enum3.DataSetEvents.update, this.handleOutputChange);
    }
  }, {
    key: "handleResize",
    value: function handleResize() {
      var element = this.element;
      var tableStore = this.context.tableStore;

      if (element && !tableStore.hidden) {
        if (this.nextFrameActionId !== undefined) {
          _raf["default"].cancel(this.nextFrameActionId);
        }

        this.nextFrameActionId = (0, _raf["default"])(this.syncSize);
      }
    }
  }, {
    key: "handleOutputChange",
    value: function handleOutputChange(_ref) {
      var record = _ref.record,
          name = _ref.name;
      var _this$props = this.props,
          thisRecord = _this$props.record,
          thisName = _this$props.column.name;

      if (thisRecord && thisName) {
        var field = thisRecord.getField(thisName);
        var bind = field ? field.get('bind') : undefined;

        if (record === thisRecord && (thisName === name || (0, _isString["default"])(bind) && bind.startsWith("".concat(name, ".")))) {
          this.handleResize();
        }
      }
    }
  }, {
    key: "syncSize",
    value: function syncSize() {
      this.overflow = this.computeOverFlow();
    }
  }, {
    key: "computeOverFlow",
    value: function computeOverFlow() {
      var element = this.element;

      if (element && element.textContent) {
        var column = this.props.column;
        var tableStore = this.context.tableStore;

        if (tableStore.getColumnTooltip(column) === _enum.TableColumnTooltip.overflow) {
          var clientWidth = element.clientWidth,
              scrollWidth = element.scrollWidth;
          return scrollWidth > clientWidth;
        }
      }

      return false;
    }
  }, {
    key: "handleEditorKeyDown",
    value: function handleEditorKeyDown(e) {
      switch (e.keyCode) {
        case _KeyCode["default"].TAB:
          {
            var column = this.props.column;
            var tableStore = this.context.tableStore;
            var cell = (0, _utils.findCell)(tableStore, (0, _utils.getColumnKey)(column));

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

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

            break;
          }

        default:
      }
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      var tableStore = this.context.tableStore;
      var dataSet = tableStore.dataSet;
      var _this$props2 = this.props,
          record = _this$props2.record,
          column = _this$props2.column,
          lock = _this$props2.column.lock;

      if (this.canFocus) {
        if (column.key !== _TableStore.SELECTION_KEY) {
          dataSet.current = record;
        }

        this.showEditor(e.currentTarget, lock);

        if (!(0, _utils.isStickySupport)() && (column.key === _TableStore.SELECTION_KEY || !this.cellEditor || this.cellEditorInCell)) {
          var cell = (0, _utils.findCell)(tableStore, (0, _utils.getColumnKey)(column), lock);

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

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

      inTab = false;
    }
  }, {
    key: "handleCommandEdit",
    value: function handleCommandEdit() {
      var record = this.props.record;
      var tableStore = this.context.tableStore;

      if (tableStore.inlineEdit) {
        tableStore.currentEditRecord = record;
      }
    }
  }, {
    key: "handleCommandDelete",
    value: function handleCommandDelete() {
      var record = this.props.record;
      var tableStore = this.context.tableStore;
      var dataSet = tableStore.dataSet;
      dataSet["delete"](record);
    }
  }, {
    key: "handleCommandSave",
    value: function () {
      var _handleCommandSave = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee() {
        var tableStore, dataSet;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                tableStore = this.context.tableStore;
                dataSet = tableStore.dataSet;
                _context.next = 4;
                return dataSet.submit();

              case 4:
                _context.t0 = _context.sent;

                if (!(_context.t0 !== false)) {
                  _context.next = 7;
                  break;
                }

                tableStore.currentEditRecord = undefined;

              case 7:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function handleCommandSave() {
        return _handleCommandSave.apply(this, arguments);
      }

      return handleCommandSave;
    }()
  }, {
    key: "handleCommandCancel",
    value: function handleCommandCancel() {
      var record = this.props.record;
      var tableStore = this.context.tableStore;

      if (record.status === _enum3.RecordStatus.add) {
        var dataSet = tableStore.dataSet;
        dataSet.remove(record);
      } else {
        record.reset();
        tableStore.currentEditRecord = undefined;
      }
    }
  }, {
    key: "getButtonProps",
    value: function getButtonProps(type, record) {
      var disabled = (0, _utils.isDisabledRow)(record);

      switch (type) {
        case _enum.TableCommandType.edit:
          return {
            icon: 'mode_edit',
            onClick: this.handleCommandEdit,
            disabled: disabled,
            title: (0, _localeContext.$l)('Table', 'edit_button')
          };

        case _enum.TableCommandType["delete"]:
          return {
            icon: 'delete',
            onClick: this.handleCommandDelete,
            disabled: disabled,
            title: (0, _localeContext.$l)('Table', 'delete_button')
          };

        default:
      }
    }
  }, {
    key: "renderCommand",
    value: function renderCommand() {
      var _this = this;

      var record = this.props.record;
      var command = this.getCommand();
      var tableCommandProps = (0, _configure.getConfig)('tableCommandProps');

      if (record.editing) {
        return [_react["default"].createElement(_Tooltip["default"], {
          key: "save",
          title: (0, _localeContext.$l)('Table', 'save_button')
        }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableCommandProps, {
          icon: "finished",
          onClick: this.handleCommandSave
        }))), _react["default"].createElement(_Tooltip["default"], {
          key: "cancel",
          title: (0, _localeContext.$l)('Table', 'cancel_button')
        }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableCommandProps, {
          icon: "cancle_a",
          onClick: this.handleCommandCancel
        })))];
      }

      if (command) {
        var children = [];
        command.forEach(function (button) {
          var props = {};

          if ((0, _mobx.isArrayLike)(button)) {
            props = button[1] || {};
            button = button[0];
          }

          if ((0, _isString["default"])(button) && button in _enum.TableCommandType) {
            var defaultButtonProps = _this.getButtonProps(button, record);

            if (defaultButtonProps) {
              var _props = props,
                  afterClick = _props.afterClick,
                  buttonProps = (0, _objectWithoutProperties2["default"])(_props, ["afterClick"]);

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

                defaultButtonProps.onClick =
                /*#__PURE__*/
                function () {
                  var _ref2 = (0, _asyncToGenerator2["default"])(
                  /*#__PURE__*/
                  _regenerator["default"].mark(function _callee2(e) {
                    return _regenerator["default"].wrap(function _callee2$(_context2) {
                      while (1) {
                        switch (_context2.prev = _context2.next) {
                          case 0:
                            e.persist();
                            _context2.prev = 1;
                            _context2.next = 4;
                            return onClick(e);

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

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

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

              var title = defaultButtonProps.title,
                  otherProps = (0, _objectWithoutProperties2["default"])(defaultButtonProps, ["title"]);
              children.push(_react["default"].createElement(_Tooltip["default"], {
                key: button,
                title: title
              }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableCommandProps, otherProps, buttonProps))));
            }
          } else if ((0, _react.isValidElement)(button)) {
            children.push((0, _react.cloneElement)(button, (0, _objectSpread2["default"])({}, tableCommandProps, {}, button.props)));
          } else if ((0, _isObject["default"])(button)) {
            children.push(_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableCommandProps, button)));
          }
        });
        return children;
      }
    }
  }, {
    key: "renderEditor",
    value: function renderEditor() {
      var cellEditor = this.cellEditor;

      if ((0, _react.isValidElement)(cellEditor)) {
        var _this$context$tableSt = this.context.tableStore,
            dataSet = _this$context$tableSt.dataSet,
            pristine = _this$context$tableSt.pristine,
            inlineEdit = _this$context$tableSt.inlineEdit;
        var _this$props3 = this.props,
            name = _this$props3.column.name,
            record = _this$props3.record;
        var field = record.getField(name);
        var checkField = dataSet.props.checkField;
        var newEditorProps = (0, _objectSpread2["default"])({}, cellEditor.props, {
          record: record,
          name: name,
          pristine: pristine,
          disabled: (0, _utils.isDisabledRow)(record) || inlineEdit && !record.editing,
          indeterminate: checkField && checkField === name && record.isIndeterminate,
          labelLayout: _enum4.LabelLayout.none,
          _inTable: true
        });
        /**
         * 渲染多行编辑器
         */

        if (field === null || field === void 0 ? void 0 : field.get('multiLine')) {
          return cellEditor;
        }

        return (0, _react.cloneElement)(cellEditor, newEditorProps);
      }
    }
  }, {
    key: "getCheckBox",
    value: function getCheckBox() {
      var record = this.props.record;
      var dataSet = this.context.tableStore.dataSet;
      var checkField = dataSet.props.checkField;

      if (checkField) {
        return _react["default"].createElement(_CheckBox["default"], {
          name: checkField,
          record: record,
          disabled: (0, _utils.isDisabledRow)(record),
          indeterminate: record.isIndeterminate
        });
      }
    }
  }, {
    key: "getCommand",
    value: function getCommand() {
      var _this$props4 = this.props,
          command = _this$props4.column.command,
          record = _this$props4.record;
      var dataSet = this.context.tableStore.dataSet;

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

      return command;
    }
  }, {
    key: "getCellRenderer",
    value: function getCellRenderer(command) {
      var column = this.props.column;
      var renderer = column.renderer;

      if (command) {
        return this.renderCommand;
      }

      if (this.cellEditorInCell) {
        return this.renderEditor;
      }

      return renderer;
    }
  }, {
    key: "getInnerSimple",
    value: function getInnerSimple(prefixCls) {
      var hasEditor = this.hasEditor,
          tableStore = this.context.tableStore;
      var rowHeight = tableStore.rowHeight;
      var innerProps = {
        tabIndex: hasEditor && this.canFocus ? 0 : -1,
        onFocus: this.handleFocus
      };

      if (rowHeight === 'auto') {
        innerProps.style = {
          minHeight: 30
        };
      } else {
        innerProps.style = {
          height: (0, _UnitConvertor.pxToRem)(rowHeight)
        };
        innerProps.style = {
          minHeight: 30
        };
      }

      return _react["default"].createElement("span", (0, _extends2["default"])({
        key: "output"
      }, innerProps, {
        className: "".concat(prefixCls, "-inner")
      }));
    }
  }, {
    key: "getInnerNode",
    value: function getInnerNode(prefixCls, command, textAlign, onCellStyle) {
      var _this2 = this;

      var tableStore = this.context.tableStore,
          children = this.props.children;

      if (tableStore.expandIconAsCell && children) {
        return children;
      }

      var dataSet = tableStore.dataSet,
          rowHeight = tableStore.rowHeight,
          hasCheckFieldColumn = tableStore.hasCheckFieldColumn,
          pristine = tableStore.pristine,
          indentSize = tableStore.props.indentSize;
      var _this$props5 = this.props,
          column = _this$props5.column,
          record = _this$props5.record,
          lock = _this$props5.lock;
      var name = column.name,
          key = column.key;
      var tooltip = tableStore.getColumnTooltip(column);
      var hasEditor = this.hasEditor; // 计算多行编辑单元格高度

      var field = record.getField(name);
      var innerClassName = ["".concat(prefixCls, "-inner")];
      var innerProps = {
        tabIndex: hasEditor && this.canFocus ? 0 : -1,
        onFocus: this.handleFocus,
        pristine: pristine
      };
      var rows = 0;

      if (field === null || field === void 0 ? void 0 : field.get('multiLine')) {
        var _dataSet$props$fields;

        rows = (_dataSet$props$fields = dataSet.props.fields) === null || _dataSet$props$fields === void 0 ? void 0 : _dataSet$props$fields.map(function (fields) {
          if (fields.bind && fields.bind.split('.')[0] === name) {
            return record.getField(fields.name) || dataSet.getField(fields.name);
          }
        }).filter(function (f) {
          return f;
        }).length;
        var multiLineHeight = rows > 0 ? (rowHeight + 2) * rows + 1 : rowHeight;

        if (multiLineHeight > Number((0, _max["default"])(tableStore.multiLineHeight) || 0)) {
          (0, _mobx.runInAction)(function () {
            tableStore.setMultiLineHeight(multiLineHeight);
          });
        }
      }

      if (!(0, _utils.isStickySupport)() && !hasEditor) {
        innerProps.onKeyDown = this.handleEditorKeyDown;
      }

      if (rowHeight !== 'auto') {
        var isCheckBox = field && field.type === _enum3.FieldType["boolean"] || key === _TableStore.SELECTION_KEY;
        var borderPadding = isCheckBox ? 4 : 2;
        var heightPx = rows > 0 ? (rowHeight + 2) * rows + 1 : rowHeight;
        var lineHeightPx = hasEditor || isCheckBox ? rowHeight - borderPadding : rowHeight;
        innerProps.style = {
          height: (0, _UnitConvertor.pxToRem)(heightPx),
          lineHeight: rows > 0 ? 'inherit' : (0, _UnitConvertor.pxToRem)(lineHeightPx)
        }; // 处理多行横向滚动lock列高度

        if (tableStore.multiLineHeight.length && lock) {
          innerProps.style = {
            height: (0, _UnitConvertor.pxToRem)((0, _max["default"])(tableStore.multiLineHeight) || 0),
            lineHeight: (0, _UnitConvertor.pxToRem)((0, _max["default"])(tableStore.multiLineHeight) || 0)
          };
        }

        if (tooltip === _enum.TableColumnTooltip.overflow || key === _TableStore.DRAG_KEY) {
          innerProps.ref = this.saveOutput;
        } // 如果为拖拽结点强制给予焦点


        if (key === _TableStore.DRAG_KEY) {
          innerProps.onMouseDown = function () {
            if (_this2.element) {
              _this2.element.focus();
            }
          };
        }
      } else {
        innerClassName.push("".concat(prefixCls, "-inner-auto-height"));
      }

      var height = record.getState("__column_resize_height_".concat(name));

      if (height !== undefined && rows === 0) {
        innerProps.style = {
          height: (0, _UnitConvertor.pxToRem)(height),
          lineHeight: 1
        };
        innerClassName.push("".concat(prefixCls, "-inner-fixed-height"));
      }

      var indentText = children && _react["default"].createElement("span", {
        style: {
          paddingLeft: (0, _UnitConvertor.pxToRem)(indentSize * record.level)
        }
      });

      var checkBox = children && !hasCheckFieldColumn && this.getCheckBox();

      var prefix = (indentText || children || checkBox) && _react["default"].createElement("span", {
        key: "prefix",
        className: "".concat(prefixCls, "-prefix"),
        style: innerProps.style
      }, indentText, children, checkBox);

      var output = _react["default"].createElement(_Output["default"], (0, _extends2["default"])({
        key: "output"
      }, innerProps, {
        style: (0, _objectSpread2["default"])({}, innerProps.style, {}, onCellStyle),
        className: innerClassName.join(' '),
        record: record,
        renderer: this.getCellRenderer(command),
        name: name,
        disabled: (0, _utils.isDisabledRow)(record),
        showHelp: _enum2.ShowHelp.none
      }));

      var text = tooltip === _enum.TableColumnTooltip.always || this.overflow ? _react["default"].createElement(_Tooltip["default"], {
        key: "tooltip",
        title: (0, _react.cloneElement)(output, {
          ref: null,
          className: null
        }),
        placement: (0, _utils.getPlacementByAlign)(textAlign)
      }, output) : output;
      return [prefix, text];
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props6 = this.props,
          column = _this$props6.column,
          record = _this$props6.record,
          isDragging = _this$props6.isDragging,
          provided = _this$props6.provided,
          colSpan = _this$props6.colSpan,
          propsStyle = _this$props6.style,
          propsClassName = _this$props6.className,
          intersectionRef = _this$props6.intersectionRef,
          inView = _this$props6.inView;
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls,
          inlineEdit = tableStore.inlineEdit,
          pristine = tableStore.pristine,
          node = tableStore.node;
      var tableColumnOnCell = (0, _configure.getConfig)('tableColumnOnCell');
      var className = column.className,
          style = column.style,
          align = column.align,
          name = column.name,
          onCell = column.onCell,
          lock = column.lock;
      var command = this.getCommand();
      var field = name ? record.getField(name) : undefined;
      var cellPrefix = "".concat(prefixCls, "-cell");
      var columnOnCell = !this.isInnerColumn && (onCell || tableColumnOnCell);
      var cellExternalProps = typeof columnOnCell === 'function' ? columnOnCell({
        dataSet: record.dataSet,
        record: record,
        column: column
      }) : {};
      var cellStyle = (0, _objectSpread2["default"])({
        textAlign: align || (command ? _enum.ColumnAlign.center : (0, _utils.getAlignByField)(field))
      }, style, {}, cellExternalProps.style, {}, provided && {
        cursor: 'move'
      });
      var columnLock = (0, _utils.isStickySupport)() && tableStore.overflowX && (0, _utils.getColumnLock)(lock);
      var classString = (0, _classnames["default"])(cellPrefix, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(cellPrefix, "-dirty"), field && !pristine && field.dirty), (0, _defineProperty2["default"])(_classNames, "".concat(cellPrefix, "-required"), field && !inlineEdit && field.required), (0, _defineProperty2["default"])(_classNames, "".concat(cellPrefix, "-editable"), !inlineEdit && this.hasEditor), (0, _defineProperty2["default"])(_classNames, "".concat(cellPrefix, "-multiLine"), field && field.get('multiLine')), (0, _defineProperty2["default"])(_classNames, "".concat(cellPrefix, "-fix-").concat(columnLock), columnLock), _classNames), className, propsClassName, cellExternalProps.className);

      var widthDraggingStyle = function widthDraggingStyle() {
        var draggingStyle = {};

        if (isDragging) {
          var dom = node.element.querySelector(".".concat(prefixCls, "-tbody .").concat(prefixCls, "-cell[data-index=").concat((0, _utils.getColumnKey)(column), "]"));

          if (dom) {
            draggingStyle.width = dom.clientWidth;
            draggingStyle.whiteSpace = 'nowrap';
          }
        }

        return draggingStyle;
      }; // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现


      var onCellStyle = !this.isInnerColumn && tableColumnOnCell === columnOnCell && typeof tableColumnOnCell === 'function' ? (0, _omit["default"])(cellExternalProps.style, ['width', 'height']) : undefined;

      var td = _react["default"].createElement("td", (0, _extends2["default"])({
        ref: intersectionRef,
        colSpan: colSpan
      }, cellExternalProps, {
        className: classString,
        "data-index": (0, _utils.getColumnKey)(column)
      }, provided && provided.dragHandleProps, {
        style: (0, _objectSpread2["default"])({}, (0, _omit["default"])(cellStyle, ['width', 'height']), {}, widthDraggingStyle(), {}, propsStyle)
      }), inView ? this.getInnerNode(cellPrefix, command, cellStyle.textAlign, onCellStyle) : this.getInnerSimple(cellPrefix));

      return tableStore.getColumnTooltip(column) === _enum.TableColumnTooltip.overflow ? _react["default"].createElement(_resizeObserver["default"], {
        onResize: this.handleResize,
        resizeProp: "width"
      }, td) : td;
    }
  }, {
    key: "showEditor",
    value: function showEditor(cell, lock) {
      var column = this.props.column;
      var name = column.name;
      var cellEditor = this.cellEditor;

      if (name && cellEditor && !this.cellEditorInCell) {
        var tableStore = this.context.tableStore;

        if (!lock) {
          var node = tableStore.node,
              overflowX = tableStore.overflowX,
              virtual = tableStore.virtual;

          if (overflowX) {
            var tableBodyWrap = virtual ? cell.offsetParent.parentNode.parentNode : cell.offsetParent;

            if (tableBodyWrap) {
              var leftLeafColumnsWidth = tableStore.leftLeafColumnsWidth,
                  rightLeafColumnsWidth = tableStore.rightLeafColumnsWidth;
              var offsetLeft = cell.offsetLeft,
                  offsetWidth = cell.offsetWidth;
              var scrollLeft = tableBodyWrap.scrollLeft;

              var _tableBodyWrap$getBou = tableBodyWrap.getBoundingClientRect(),
                  width = _tableBodyWrap$getBou.width;

              var leftSide = offsetLeft - leftLeafColumnsWidth;
              var rightSide = offsetLeft + offsetWidth - width + rightLeafColumnsWidth + (0, _measureScrollbar["default"])();
              var sl = scrollLeft;

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

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

              if (sl !== scrollLeft) {
                tableBodyWrap.scrollLeft = sl;
                node.handleBodyScrollLeft({
                  target: tableBodyWrap,
                  currentTarget: tableBodyWrap
                });
              }
            }
          }
        }

        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 {
            (0, _raf["default"])(function () {
              editor.alignEditor(!(0, _utils.isStickySupport)() && lock ? (0, _utils.findCell)(tableStore, (0, _utils.getColumnKey)(column), lock) : cell);
              editor.focus();
            });
          }
        }
      }
    }
  }, {
    key: "cellEditor",
    get: function get() {
      var _this$props7 = this.props,
          column = _this$props7.column,
          record = _this$props7.record;
      return (0, _utils.getEditorByColumnAndRecord)(column, record);
    }
  }, {
    key: "cellEditorInCell",
    get: function get() {
      return (0, _utils.isInCellEditor)(this.cellEditor);
    }
  }, {
    key: "hasEditor",
    get: function get() {
      var pristine = this.context.tableStore.pristine;
      return !pristine && this.cellEditor && !this.cellEditorInCell;
    }
  }, {
    key: "canFocus",
    get: function get() {
      var tableStore = this.context.tableStore;
      var record = this.props.record;
      return !(0, _utils.isDisabledRow)(record) && (!tableStore.inlineEdit || record === tableStore.currentEditRecord);
    }
  }, {
    key: "currentEditor",
    get: function get() {
      var tableStore = this.context.tableStore;
      var _this$props8 = this.props,
          record = _this$props8.record,
          column = _this$props8.column;

      if (tableStore.inlineEdit && record === tableStore.currentEditRecord) {
        return tableStore.editors.get((0, _utils.getColumnKey)(column));
      }

      return undefined;
    }
  }, {
    key: "isInnerColumn",
    get: function get() {
      var key = this.props.column.key;
      return key === _TableStore.DRAG_KEY || key === _TableStore.SELECTION_KEY;
    }
  }]);
  return TableCell;
}(_react.Component);

TableCell.displayName = 'TableCell';
TableCell.propTypes = {
  column: _propTypes["default"].object.isRequired,
  record: _propTypes["default"].instanceOf(_Record["default"]).isRequired
};
TableCell.contextType = _TableContext["default"];
(0, _tslib.__decorate)([_mobx.observable], TableCell.prototype, "overflow", void 0);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "cellEditor", null);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "cellEditorInCell", null);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "hasEditor", null);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "canFocus", null);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "currentEditor", null);
(0, _tslib.__decorate)([_mobx.computed], TableCell.prototype, "isInnerColumn", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableCell.prototype, "saveOutput", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleOutputChange", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableCell.prototype, "syncSize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleEditorKeyDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleCommandEdit", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleCommandDelete", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleCommandSave", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "handleCommandCancel", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "renderCommand", null);
(0, _tslib.__decorate)([_autobind["default"]], TableCell.prototype, "renderEditor", null);
TableCell = (0, _tslib.__decorate)([_mobxReact.observer], TableCell);
var _default = TableCell;
exports["default"] = _default;
//# sourceMappingURL=TableCell.js.map