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

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

"use strict";

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

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

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

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

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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

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

var _mobx = require("mobx");

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

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

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

var _noop = _interopRequireDefault(require("lodash/noop"));

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

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

var _row = _interopRequireDefault(require("../../../lib/row"));

var _col = _interopRequireDefault(require("../../../lib/col"));

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

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

var _EventManager = require("../_util/EventManager");

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

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

var _enum2 = require("../text-area/enum");

var _transform = _interopRequireDefault(require("../_util/transform"));

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

var _excluded = ["style"],
    _excluded2 = ["style"];

function isTextArea(editor) {
  return editor.type.__PRO_TEXTAREA;
}

function isHTMLElement(el) {
  return el;
}

function offset(node, topNode) {
  var initialize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [node.offsetLeft, node.offsetTop];

  if (topNode) {
    var offsetParent = node.offsetParent;

    if (isHTMLElement(offsetParent)) {
      if (offsetParent === topNode) {
        return initialize;
      }

      return offset(offsetParent, topNode, [offsetParent.offsetLeft + initialize[0], offsetParent.offsetTop + initialize[1]]);
    }
  }

  return initialize;
}

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

  var _super = (0, _createSuper2["default"])(TableEditor);

  function TableEditor() {
    var _this;

    (0, _classCallCheck2["default"])(this, TableEditor);
    _this = _super.apply(this, arguments);
    _this.inTab = false;
    return _this;
  }

  (0, _createClass2["default"])(TableEditor, [{
    key: "lock",
    get: function get() {
      var column = this.props.column;
      return column.lock;
    }
  }, {
    key: "handleWindowResize",
    value: function handleWindowResize() {
      if (this.cellNode) {
        this.alignEditor();
      }
    }
    /**
     * 触发多行编辑器失焦切换编辑/只读模式
     * @param e
     */

  }, {
    key: "handleWindowClick",
    value: function handleWindowClick(e) {
      var prefixCls = this.context.prefixCls;

      if (e.target.className !== "".concat(prefixCls, "-content") && e.target.className !== "".concat(prefixCls, "-body")) {
        this.handleEditorBlur(e);
      }
    }
  }, {
    key: "connect",
    value: function connect() {
      var _this2 = this;

      var tableStore = this.context.tableStore;
      var dataSet = tableStore.dataSet,
          virtual = tableStore.virtual;

      if (virtual) {
        this.reaction = (0, _mobx.reaction)(function () {
          return [tableStore.virtualVisibleStartIndex, tableStore.virtualVisibleEndIndex];
        }, function () {
          return dataSet.current && (0, _utils.findRow)(tableStore, dataSet.current) && _this2.cellNode ? (0, _raf["default"])(function () {
            return _this2.alignEditor(_this2.cellNode);
          }) : _this2.hideEditor();
        });
      } else {
        this.reaction = (0, _mobx.reaction)(function () {
          return dataSet.current;
        }, function (r) {
          return r && _this2.cellNode ? (0, _raf["default"])(function () {
            return _this2.alignEditor();
          }) : _this2.hideEditor();
        });
      }
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      if (this.reaction) {
        this.reaction();
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this3 = this;

      var name = this.props.column.name;

      if (name) {
        var tableStore = this.context.tableStore;
        var dataSet = tableStore.dataSet,
            currentEditRecord = tableStore.currentEditRecord,
            editors = tableStore.editors;
        var record = currentEditRecord || dataSet.current;
        var field = dataSet.getField(name);

        if (field && field.get('multiLine', record)) {
          window.addEventListener('click', this.handleWindowClick);
        }

        window.addEventListener('resize', this.handleWindowResize);

        if (tableStore.inlineEdit) {
          this.reaction = (0, _mobx.reaction)(function () {
            return tableStore.currentEditRecord;
          }, function (r) {
            return r ? (0, _raf["default"])(function () {
              return _this3.alignEditor();
            }) : _this3.hideEditor();
          });
        }

        editors.set(name, this);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var name = this.props.column.name;

      if (name) {
        var editors = this.context.tableStore.editors;
        editors["delete"](name);
        window.removeEventListener('resize', this.handleWindowResize);
        window.removeEventListener('click', this.handleWindowClick);
        this.disconnect();
      }
    }
  }, {
    key: "saveRef",
    value: function saveRef(node) {
      this.editor = node;
    }
  }, {
    key: "saveWrap",
    value: function saveWrap(node) {
      this.wrap = node;

      if (node) {
        this.alignEditor(this.cellNode);
      }
    }
  }, {
    key: "handleEditorKeyEnterDown",
    value: function handleEditorKeyEnterDown(e) {
      var tableStore = this.context.tableStore;
      var editorNextKeyEnterDown = tableStore.editorNextKeyEnterDown;

      if (!e.isDefaultPrevented() && editorNextKeyEnterDown) {
        this.showNextEditor(e.shiftKey);
      }
    } // copy the previous tr value to to this cell value

  }, {
    key: "handleKeyDownCTRLD",
    value: function handleKeyDownCTRLD(e) {
      e.preventDefault();
      var cellNode = this.cellNode,
          tableStore = this.context.tableStore;
      var name = this.props.column.name;
      var dataSet = tableStore.dataSet;

      if (cellNode && tableStore && dataSet) {
        var parentTdNode = cellNode.parentNode;

        if (parentTdNode) {
          var parentTrNode = parentTdNode.parentNode;

          if (parentTrNode) {
            var previousElementSibling = (0, _utils.findIndexedSibling)(parentTrNode, -1);

            if (previousElementSibling) {
              var index = previousElementSibling.dataset.index;
              var currentIndex = parentTrNode.dataset.index;

              if (index && currentIndex) {
                var record = dataSet.findRecordById(index);
                var currentRecord = dataSet.findRecordById(currentIndex);

                if (record && currentRecord && tableStore) {
                  var cloneRecordData = record.clone().toData() || {};
                  var dealCloneRecordData = {};

                  if (name) {
                    dealCloneRecordData[name] = cloneRecordData[name];
                    currentRecord.set(dealCloneRecordData);
                  }
                }
              }
            }
          }
        }
      }
    }
  }, {
    key: "handleKeyDownCTRLS",
    value: function handleKeyDownCTRLS(e) {
      e.preventDefault();
      var dataSet = this.context.tableStore.dataSet;
      dataSet.submit();
    }
  }, {
    key: "handleEditorKeyDown",
    value: function handleEditorKeyDown(e) {
      if (![_KeyCode["default"].ESC, _KeyCode["default"].TAB].includes(e.keyCode) || !e.isDefaultPrevented()) {
        var ctrlKey = e.ctrlKey || e.metaKey;
        var tableStore = this.context.tableStore;
        var keyboard = tableStore.keyboard;

        switch (e.keyCode) {
          case _KeyCode["default"].ESC:
            this.blur();
            break;

          case _KeyCode["default"].TAB:
            {
              this.inTab = true;
              var column = this.props.column;
              var cellNode = !(0, _utils.isStickySupport)() && column.lock ? (0, _utils.findCell)(tableStore, (0, _utils.getColumnKey)(column)) : this.cellNode;

              if (cellNode) {
                cellNode.focus();
              }

              break;
            }

          case _KeyCode["default"].PAGE_UP:
          case _KeyCode["default"].PAGE_DOWN:
            (0, _EventManager.stopEvent)(e);
            break;

          case _KeyCode["default"].D:
            if (ctrlKey === true && keyboard) this.handleKeyDownCTRLD(e);
            break;

          case _KeyCode["default"].S:
            if (ctrlKey === true && keyboard) this.handleKeyDownCTRLS(e);
            break;

          default:
        }
      }

      var editorProps = this.editorProps;

      if (editorProps) {
        var _editorProps$onKeyDow = editorProps.onKeyDown,
            onKeyDown = _editorProps$onKeyDow === void 0 ? _noop["default"] : _editorProps$onKeyDow;
        onKeyDown(e);
      }
    }
  }, {
    key: "handleEditorBlur",
    value: function handleEditorBlur(e) {
      var editorProps = this.editorProps,
          inTab = this.inTab,
          inlineEdit = this.context.tableStore.inlineEdit;

      if (!inTab && !inlineEdit) {
        this.hideEditor();
      }

      if (editorProps) {
        var _editorProps$onBlur = editorProps.onBlur,
            onBlur = _editorProps$onBlur === void 0 ? _noop["default"] : _editorProps$onBlur;
        onBlur(e);
      }
    }
    /**
     * 多行编辑切换编辑器阻止冒泡
     * @param e
     */

  }, {
    key: "handleEditorClick",
    value: function handleEditorClick(e) {
      var editorProps = this.editorProps;

      if (editorProps) {
        var _editorProps$onClick = editorProps.onClick,
            onClick = _editorProps$onClick === void 0 ? _noop["default"] : _editorProps$onClick;
        onClick(e);
      }

      (0, _EventManager.stopEvent)(e);
    }
  }, {
    key: "handleEditorResize",
    value: function handleEditorResize(width, height, target) {
      var _this4 = this;

      var editorProps = this.editorProps,
          cellNode = this.cellNode;
      var name = this.props.column.name;

      if (cellNode && editorProps) {
        var _this$context = this.context,
            tableStore = _this$context.tableStore,
            dataSet = _this$context.dataSet,
            inlineEdit = _this$context.inlineEdit,
            rowHeight = _this$context.rowHeight;
        var currentEditRecord = tableStore.currentEditRecord;
        var _editorProps$onResize = editorProps.onResize,
            onResize = _editorProps$onResize === void 0 ? _noop["default"] : _editorProps$onResize;
        onResize(width, height, target);
        var current = currentEditRecord || dataSet.current;

        if (current && name && (rowHeight !== height || current.getState("__column_resize_height_".concat(name)) !== undefined)) {
          current.setState("__column_resize_height_".concat(name), height);
        }

        if (inlineEdit) {
          tableStore.editors.forEach(function (editor) {
            var editorCellNode = editor.cellNode;

            if (editorCellNode) {
              editor.alignEditor(editorCellNode, editor === _this4 ? height : undefined);
            }
          });
        } else {
          this.alignEditor(cellNode, height);
        }
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      var editor = this.editor;

      if (editor && editor.blur) {
        editor.blur();
      }
    }
  }, {
    key: "focus",
    value: function focus() {
      var editor = this.editor;

      if (editor && editor.focus) {
        editor.focus();
      }
    }
  }, {
    key: "alignEditor",
    value: function alignEditor(cellNode, height) {
      var wrap = this.wrap,
          editor = this.editor;
      var tableStore = this.context.tableStore;

      if (!cellNode) {
        var column = this.props.column;
        cellNode = (0, _utils.findCell)(tableStore, (0, _utils.getColumnKey)(column));
      }

      if (!this.cellNode && !tableStore.inlineEdit) {
        this.connect();
      }

      this.cellNode = cellNode;

      if (cellNode) {
        if (height === undefined) {
          var _cellNode = cellNode,
              offsetHeight = _cellNode.offsetHeight;

          if (offsetHeight !== this.height) {
            this.height = offsetHeight;
          }
        } else {
          this.height = height;
        }

        if (!this.rendered) {
          this.rendered = true;
        } else if (editor && wrap) {
          var _cellNode2 = cellNode,
              offsetWidth = _cellNode2.offsetWidth;

          var _offset = offset(cellNode, wrap.parentElement),
              _offset2 = (0, _slicedToArray2["default"])(_offset, 2),
              left = _offset2[0],
              top = _offset2[1];

          if (this.originalCssText === undefined) {
            this.originalCssText = wrap.style.cssText;
          }

          var width = (0, _UnitConvertor.pxToRem)(offsetWidth, true);

          if (width !== this.width) {
            this.width = width;
          }

          wrap.style.cssText = "width:".concat(width, ";").concat((0, _transform["default"])("translate(".concat((0, _UnitConvertor.pxToRem)(left, true), ", ").concat((0, _UnitConvertor.pxToRem)(top, true), ")")));

          if (editor.forcePositionChanged) {
            editor.forcePositionChanged();
          }
        }
      }
    }
  }, {
    key: "hideEditor",
    value: function hideEditor() {
      this.inTab = false;

      if (this.cellNode) {
        var tableStore = this.context.tableStore;
        tableStore.hideEditor();
        var wrap = this.wrap;

        if (wrap) {
          if (this.originalCssText !== undefined) {
            wrap.style.cssText = "width:".concat(this.width, ";").concat(this.originalCssText);
            this.originalCssText = undefined;
          }
        }

        this.cellNode = undefined;

        if (!tableStore.inlineEdit) {
          this.disconnect();
        }
      }
    }
  }, {
    key: "showNextEditor",
    value: function showNextEditor(reserve) {
      var name = this.props.column.name;

      if (name) {
        this.blur();
        var tableStore = this.context.tableStore;
        tableStore.showNextEditor(name, reserve);
        this.alignEditor();
        this.focus();
      }
    }
    /**
     * 渲染多行编辑单元格
     */

  }, {
    key: "renderMultiLineEditor",
    value: function renderMultiLineEditor() {
      var _this5 = this;

      var name = this.props.column.name;

      if (name) {
        var _this$context2 = this.context,
            prefixCls = _this$context2.prefixCls,
            dataSet = _this$context2.dataSet,
            inlineEdit = _this$context2.inlineEdit,
            rowHeight = _this$context2.rowHeight,
            currentEditRecord = _this$context2.tableStore.currentEditRecord;
        var record = currentEditRecord || dataSet.current;

        if (record) {
          var multiLineFields = [];
          var ref = true;
          dataSet.fields.forEach(function (dsField, fieldName) {
            var bind = dsField.get('bind', record);

            if (bind && bind.split('.')[0] === name) {
              var field = record.fields.get(fieldName) || dsField;
              var editor = (0, _utils.getEditorByField)(field, record);
              _this5.editorProps = editor.props;
              var _this5$editorProps = _this5.editorProps,
                  _this5$editorProps$st = _this5$editorProps.style,
                  style = _this5$editorProps$st === void 0 ? {} : _this5$editorProps$st,
                  otherProps = (0, _objectWithoutProperties2["default"])(_this5$editorProps, _excluded);

              if (rowHeight !== 'auto') {
                style.height = (0, _UnitConvertor.pxToRem)(rowHeight);
              }

              var newEditorProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
                style: style,
                ref: ref ? _this5.saveRef : undefined,
                record: record,
                name: fieldName,
                onKeyDown: _this5.handleEditorKeyDown,
                onEnterDown: _this5.handleEditorKeyEnterDown,
                onClick: _this5.handleEditorClick,
                tabIndex: -1,
                showHelp: _enum.ShowHelp.none,
                labelLayout: _enum3.LabelLayout.none,
                // 目前测试inline时候需要放开限制
                _inTable: !inlineEdit
              });
              ref = false;
              var label = field.get('label', record);
              var key = "".concat(record.index, "-multi-").concat(fieldName);
              multiLineFields.push( /*#__PURE__*/_react["default"].createElement(_row["default"], {
                key: key,
                className: "".concat(prefixCls, "-multi")
              }, label && /*#__PURE__*/_react["default"].createElement(_col["default"], {
                span: 8,
                className: "".concat(prefixCls, "-multi-label")
              }, label), /*#__PURE__*/_react["default"].createElement(_col["default"], {
                span: label ? 16 : 24,
                className: "".concat(prefixCls, "-multi-value")
              }, /*#__PURE__*/(0, _react.cloneElement)(editor, newEditorProps))));
            }
          });

          if (multiLineFields.length) {
            return /*#__PURE__*/_react["default"].createElement("div", null, multiLineFields);
          }
        }
      }
    }
  }, {
    key: "renderEditor",
    value: function renderEditor() {
      var column = this.props.column;
      var name = column.name;

      if (name) {
        var _this$context3 = this.context,
            dataSet = _this$context3.dataSet,
            pristine = _this$context3.pristine,
            inlineEdit = _this$context3.inlineEdit,
            _this$context3$tableS = _this$context3.tableStore,
            currentEditRecord = _this$context3$tableS.currentEditRecord,
            currentEditorName = _this$context3$tableS.currentEditorName;
        var record = currentEditRecord || dataSet.current;
        var field = dataSet.getField(name); // 多行编辑拦截返回渲染器

        if (!pristine && field && field.get('multiLine', record)) {
          return this.renderMultiLineEditor();
        }

        var cellEditor = (0, _utils.getEditorByColumnAndRecord)(column, record);

        if (!pristine && /*#__PURE__*/(0, _react.isValidElement)(cellEditor) && !(0, _utils.isInCellEditor)(cellEditor)) {
          this.editorProps = cellEditor.props;
          var height = this.height;
          var _this$editorProps = this.editorProps,
              _this$editorProps$sty = _this$editorProps.style,
              style = _this$editorProps$sty === void 0 ? {} : _this$editorProps$sty,
              otherProps = (0, _objectWithoutProperties2["default"])(_this$editorProps, _excluded2);

          if (height !== undefined) {
            style.height = (0, _UnitConvertor.pxToRem)(height, true);
          }

          var newEditorProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
            style: style,
            ref: this.saveRef,
            record: record,
            name: name,
            onKeyDown: this.handleEditorKeyDown,
            onEnterDown: isTextArea(cellEditor) ? undefined : this.handleEditorKeyEnterDown,
            onBlur: this.handleEditorBlur,
            tabIndex: currentEditorName ? 0 : -1,
            showHelp: _enum.ShowHelp.none,
            labelLayout: _enum3.LabelLayout.none,
            // 目前测试inline时候需要放开限制
            _inTable: !inlineEdit,
            preventRenderer: true
          });
          return /*#__PURE__*/(0, _react.cloneElement)(cellEditor, newEditorProps);
        }
      }

      this.cellNode = undefined;
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      if (this.rendered) {
        var editor = this.renderEditor();

        if (editor) {
          var lock = this.props.column.lock;
          var prefixCls = this.context.prefixCls;
          var props = {
            className: (0, _classnames["default"])("".concat(prefixCls, "-editor"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-editor-lock"), (0, _utils.isStickySupport)() && lock))
          };
          var editorProps = {};

          if (isTextArea(editor)) {
            var _editor$props$resize = editor.props.resize,
                resize = _editor$props$resize === void 0 ? _enum2.ResizeType.vertical : _editor$props$resize;
            editorProps.resize = resize;

            if (resize !== _enum2.ResizeType.none) {
              editorProps.onResize = this.handleEditorResize;
            }
          }

          return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, props, {
            ref: this.saveWrap
          }), /*#__PURE__*/(0, _react.cloneElement)(editor, editorProps));
        }

        var tableStore = this.context.tableStore;

        if (!tableStore.inlineEdit) {
          (0, _mobx.runInAction)(function () {
            _this6.rendered = false;
          });
        }
      }

      return null;
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return TableEditor;
}(_react.Component);

TableEditor.displayName = 'TableEditor';
(0, _tslib.__decorate)([_mobx.observable], TableEditor.prototype, "height", void 0);
(0, _tslib.__decorate)([_mobx.observable], TableEditor.prototype, "rendered", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleWindowResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleWindowClick", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "saveRef", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "saveWrap", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleEditorKeyEnterDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleKeyDownCTRLD", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleKeyDownCTRLS", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleEditorKeyDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleEditorBlur", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleEditorClick", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "handleEditorResize", null);
(0, _tslib.__decorate)([_mobx.action], TableEditor.prototype, "alignEditor", null);
(0, _tslib.__decorate)([_autobind["default"]], TableEditor.prototype, "hideEditor", null);
TableEditor = (0, _tslib.__decorate)([_mobxReact.observer], TableEditor);
var _default = TableEditor;
exports["default"] = _default;
//# sourceMappingURL=TableEditor.js.map