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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { cloneElement, Component, isValidElement } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { action, computed, isArrayLike, observable, runInAction } from 'mobx';
import classNames from 'classnames';
import raf from 'raf';
import omit from 'lodash/omit';
import isObject from 'lodash/isObject';
import isString from 'lodash/isString';
import max from 'lodash/max';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import KeyCode from '../../../es/_util/KeyCode';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import ReactResizeObserver from '../../../es/_util/resizeObserver';
import { getConfig } from '../../../es/configure';
import Record from '../data-set/Record';
import TableContext from './TableContext';
import { findCell, findFirstFocusableElement, getAlignByField, getColumnKey, getColumnLock, getEditorByColumnAndRecord, getPlacementByAlign, isDisabledRow, isInCellEditor, isStickySupport } from './utils';
import { ColumnAlign, TableColumnTooltip, TableCommandType } from './enum';
import ObserverCheckBox from '../check-box/CheckBox';
import Output from '../output/Output';
import { ShowHelp } from '../field/enum';
import Button from '../button/Button';
import { $l } from '../locale-context';
import Tooltip from '../tooltip/Tooltip';
import { DataSetEvents, FieldType, RecordStatus } from '../data-set/enum';
import { LabelLayout } from '../form/enum';
import autobind from '../_util/autobind';
import { DRAG_KEY, SELECTION_KEY } from './TableStore';
var inTab = false;

var TableCell =
/*#__PURE__*/
function (_Component) {
  _inherits(TableCell, _Component);

  var _super = _createSuper(TableCell);

  function TableCell() {
    _classCallCheck(this, TableCell);

    return _super.apply(this, arguments);
  }

  _createClass(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) === TableColumnTooltip.overflow) {
        var dataSet = tableStore.dataSet;
        dataSet.addEventListener(DataSetEvents.update, this.handleOutputChange);
        this.handleResize();
      }
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      var dataSet = this.context.tableStore.dataSet;
      dataSet.removeEventListener(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.cancel(this.nextFrameActionId);
        }

        this.nextFrameActionId = raf(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 || isString(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) === 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.TAB:
          {
            var column = this.props.column;
            var tableStore = this.context.tableStore;
            var cell = findCell(tableStore, getColumnKey(column));

            if (cell) {
              if (cell.contains(document.activeElement)) {
                inTab = true;
              } else {
                var node = 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 !== SELECTION_KEY) {
          dataSet.current = record;
        }

        this.showEditor(e.currentTarget, lock);

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

          if (cell && !cell.contains(document.activeElement)) {
            var node = 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 = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee() {
        var tableStore, dataSet;
        return _regeneratorRuntime.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 === RecordStatus.add) {
        var dataSet = tableStore.dataSet;
        dataSet.remove(record);
      } else {
        record.reset();
        tableStore.currentEditRecord = undefined;
      }
    }
  }, {
    key: "getButtonProps",
    value: function getButtonProps(type, record) {
      var disabled = isDisabledRow(record);

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

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

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

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

      if (record.editing) {
        return [React.createElement(Tooltip, {
          key: "save",
          title: $l('Table', 'save_button')
        }, React.createElement(Button, _extends({}, tableCommandProps, {
          icon: "finished",
          onClick: this.handleCommandSave
        }))), React.createElement(Tooltip, {
          key: "cancel",
          title: $l('Table', 'cancel_button')
        }, React.createElement(Button, _extends({}, tableCommandProps, {
          icon: "cancle_a",
          onClick: this.handleCommandCancel
        })))];
      }

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

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

          if (isString(button) && button in TableCommandType) {
            var defaultButtonProps = _this.getButtonProps(button, record);

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

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

                defaultButtonProps.onClick =
                /*#__PURE__*/
                function () {
                  var _ref2 = _asyncToGenerator(
                  /*#__PURE__*/
                  _regeneratorRuntime.mark(function _callee2(e) {
                    return _regeneratorRuntime.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 = _objectWithoutProperties(defaultButtonProps, ["title"]);

              children.push(React.createElement(Tooltip, {
                key: button,
                title: title
              }, React.createElement(Button, _extends({}, tableCommandProps, otherProps, buttonProps))));
            }
          } else if (isValidElement(button)) {
            children.push(cloneElement(button, _objectSpread({}, tableCommandProps, {}, button.props)));
          } else if (isObject(button)) {
            children.push(React.createElement(Button, _extends({}, tableCommandProps, button)));
          }
        });
        return children;
      }
    }
  }, {
    key: "renderEditor",
    value: function renderEditor() {
      var cellEditor = this.cellEditor;

      if (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 = _objectSpread({}, cellEditor.props, {
          record: record,
          name: name,
          pristine: pristine,
          disabled: isDisabledRow(record) || inlineEdit && !record.editing,
          indeterminate: checkField && checkField === name && record.isIndeterminate,
          labelLayout: LabelLayout.none,
          _inTable: true
        });
        /**
         * 渲染多行编辑器
         */


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

        return 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.createElement(ObserverCheckBox, {
          name: checkField,
          record: record,
          disabled: 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: pxToRem(rowHeight)
        };
        innerProps.style = {
          minHeight: 30
        };
      }

      return React.createElement("span", _extends({
        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(max(tableStore.multiLineHeight) || 0)) {
          runInAction(function () {
            tableStore.setMultiLineHeight(multiLineHeight);
          });
        }
      }

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

      if (rowHeight !== 'auto') {
        var isCheckBox = field && field.type === FieldType["boolean"] || key === 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: pxToRem(heightPx),
          lineHeight: rows > 0 ? 'inherit' : pxToRem(lineHeightPx)
        }; // 处理多行横向滚动lock列高度

        if (tableStore.multiLineHeight.length && lock) {
          innerProps.style = {
            height: pxToRem(max(tableStore.multiLineHeight) || 0),
            lineHeight: pxToRem(max(tableStore.multiLineHeight) || 0)
          };
        }

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


        if (key === 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: pxToRem(height),
          lineHeight: 1
        };
        innerClassName.push("".concat(prefixCls, "-inner-fixed-height"));
      }

      var indentText = children && React.createElement("span", {
        style: {
          paddingLeft: pxToRem(indentSize * record.level)
        }
      });
      var checkBox = children && !hasCheckFieldColumn && this.getCheckBox();
      var prefix = (indentText || children || checkBox) && React.createElement("span", {
        key: "prefix",
        className: "".concat(prefixCls, "-prefix"),
        style: innerProps.style
      }, indentText, children, checkBox);
      var output = React.createElement(Output, _extends({
        key: "output"
      }, innerProps, {
        style: _objectSpread({}, innerProps.style, {}, onCellStyle),
        className: innerClassName.join(' '),
        record: record,
        renderer: this.getCellRenderer(command),
        name: name,
        disabled: isDisabledRow(record),
        showHelp: ShowHelp.none
      }));
      var text = tooltip === TableColumnTooltip.always || this.overflow ? React.createElement(Tooltip, {
        key: "tooltip",
        title: cloneElement(output, {
          ref: null,
          className: null
        }),
        placement: 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 = 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 = _objectSpread({
        textAlign: align || (command ? ColumnAlign.center : getAlignByField(field))
      }, style, {}, cellExternalProps.style, {}, provided && {
        cursor: 'move'
      });

      var columnLock = isStickySupport() && tableStore.overflowX && getColumnLock(lock);
      var classString = classNames(cellPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(cellPrefix, "-dirty"), field && !pristine && field.dirty), _defineProperty(_classNames, "".concat(cellPrefix, "-required"), field && !inlineEdit && field.required), _defineProperty(_classNames, "".concat(cellPrefix, "-editable"), !inlineEdit && this.hasEditor), _defineProperty(_classNames, "".concat(cellPrefix, "-multiLine"), field && field.get('multiLine')), _defineProperty(_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(getColumnKey(column), "]"));

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

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


      var onCellStyle = !this.isInnerColumn && tableColumnOnCell === columnOnCell && typeof tableColumnOnCell === 'function' ? omit(cellExternalProps.style, ['width', 'height']) : undefined;
      var td = React.createElement("td", _extends({
        ref: intersectionRef,
        colSpan: colSpan
      }, cellExternalProps, {
        className: classString,
        "data-index": getColumnKey(column)
      }, provided && provided.dragHandleProps, {
        style: _objectSpread({}, omit(cellStyle, ['width', 'height']), {}, widthDraggingStyle(), {}, propsStyle)
      }), inView ? this.getInnerNode(cellPrefix, command, cellStyle.textAlign, onCellStyle) : this.getInnerSimple(cellPrefix));
      return tableStore.getColumnTooltip(column) === TableColumnTooltip.overflow ? React.createElement(ReactResizeObserver, {
        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 + measureScrollbar();
              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 {
            raf(function () {
              editor.alignEditor(!isStickySupport() && lock ? findCell(tableStore, 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 getEditorByColumnAndRecord(column, record);
    }
  }, {
    key: "cellEditorInCell",
    get: function get() {
      return 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 !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(getColumnKey(column));
      }

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

  return TableCell;
}(Component);

TableCell.displayName = 'TableCell';
TableCell.propTypes = {
  column: PropTypes.object.isRequired,
  record: PropTypes.instanceOf(Record).isRequired
};
TableCell.contextType = TableContext;

__decorate([observable], TableCell.prototype, "overflow", void 0);

__decorate([computed], TableCell.prototype, "cellEditor", null);

__decorate([computed], TableCell.prototype, "cellEditorInCell", null);

__decorate([computed], TableCell.prototype, "hasEditor", null);

__decorate([computed], TableCell.prototype, "canFocus", null);

__decorate([computed], TableCell.prototype, "currentEditor", null);

__decorate([computed], TableCell.prototype, "isInnerColumn", null);

__decorate([autobind, action], TableCell.prototype, "saveOutput", null);

__decorate([autobind], TableCell.prototype, "handleResize", null);

__decorate([autobind], TableCell.prototype, "handleOutputChange", null);

__decorate([autobind, action], TableCell.prototype, "syncSize", null);

__decorate([autobind], TableCell.prototype, "handleEditorKeyDown", null);

__decorate([autobind], TableCell.prototype, "handleFocus", null);

__decorate([autobind], TableCell.prototype, "handleCommandEdit", null);

__decorate([autobind], TableCell.prototype, "handleCommandDelete", null);

__decorate([autobind], TableCell.prototype, "handleCommandSave", null);

__decorate([autobind], TableCell.prototype, "handleCommandCancel", null);

__decorate([autobind], TableCell.prototype, "renderCommand", null);

__decorate([autobind], TableCell.prototype, "renderEditor", null);

TableCell = __decorate([observer], TableCell);
export default TableCell;
//# sourceMappingURL=TableCell.js.map