@fe6/water-pro/lib/table-pro/src/hooks/use-table-scroll.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTableScroll = useTableScroll;

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

var _tslib = require("tslib");

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _dom = require("../../../_util/dom");

var _useWindowSizeFn = require("../../../_util/hooks/use-window-size-fn");

var _useDebounce3 = require("../../../_util/hooks/use-debounce");

var _modalPro = require("../../../modal-pro");

var _onMountedOrActivated = require("./on-mounted-or-activated");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function useTableScroll(propsRef, tableElRef, columnsRef, rowSelectionRef, getDataSourceRef) {
  var tableHeightRef = (0, _vue.ref)(null);
  var modalFn = (0, _modalPro.useModalContext)(); // Greater than animation time 280

  var _useDebounce = (0, _useDebounce3.useDebounce)(redoHeight, 100),
      _useDebounce2 = _slicedToArray(_useDebounce, 1),
      debounceRedoHeight = _useDebounce2[0];

  var getCanResize = (0, _vue.computed)(function () {
    var _unref = (0, _vue.unref)(propsRef),
        canResize = _unref.canResize,
        scroll = _unref.scroll;

    return canResize && !(scroll || {}).y;
  });
  (0, _vue.watch)(function () {
    var _a;

    return [(0, _vue.unref)(getCanResize), (_a = (0, _vue.unref)(getDataSourceRef)) === null || _a === void 0 ? void 0 : _a.length];
  }, function () {
    debounceRedoHeight();
  }, {
    flush: 'post'
  });

  function redoHeight() {
    (0, _vue.nextTick)(function () {
      calcTableHeight();
    });
  }

  function setHeight(heigh) {
    var _a;

    tableHeightRef.value = heigh; //  Solve the problem of modal adaptive height calculation when the form is placed in the modal

    (_a = modalFn === null || modalFn === void 0 ? void 0 : modalFn.redoModalHeight) === null || _a === void 0 ? void 0 : _a.call(modalFn);
  } // No need to repeat queries


  var paginationEl;
  var footerEl;
  var bodyEl;

  function calcTableHeight() {
    var _a;

    return (0, _tslib.__awaiter)(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
      var _unref2, resizeHeightOffset, pagination, maxHeight, tableData, table, tableEl, headEl, _getViewportOffset, bottomIncludeBody, paddingHeight, borderHeight, paginationHeight, offsetHeight, footerHeight, _offsetHeight, headerHeight, height;

      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _unref2 = (0, _vue.unref)(propsRef), resizeHeightOffset = _unref2.resizeHeightOffset, pagination = _unref2.pagination, maxHeight = _unref2.maxHeight;
              tableData = (0, _vue.unref)(getDataSourceRef);
              table = (0, _vue.unref)(tableElRef);

              if (table) {
                _context.next = 5;
                break;
              }

              return _context.abrupt("return");

            case 5:
              tableEl = table.$el;

              if (tableEl) {
                _context.next = 8;
                break;
              }

              return _context.abrupt("return");

            case 8:
              if (!bodyEl) {
                bodyEl = tableEl.querySelector('.ant-table-body');
              }

              bodyEl.style.height = 'unset';

              if (!(!(0, _vue.unref)(getCanResize) || tableData.length === 0)) {
                _context.next = 12;
                break;
              }

              return _context.abrupt("return");

            case 12:
              _context.next = 14;
              return (0, _vue.nextTick)();

            case 14:
              // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
              headEl = tableEl.querySelector('.ant-table-thead');

              if (headEl) {
                _context.next = 17;
                break;
              }

              return _context.abrupt("return");

            case 17:
              // Table height from bottom
              _getViewportOffset = (0, _dom.getViewportOffset)(headEl), bottomIncludeBody = _getViewportOffset.bottomIncludeBody; // Table height from bottom height-custom offset

              paddingHeight = 32;
              borderHeight = 0; // Pager height

              paginationHeight = 2;

              if (!(0, _shared.isBoolean)(pagination)) {
                if (!paginationEl) {
                  paginationEl = tableEl.querySelector('.ant-pagination');
                }

                if (paginationEl) {
                  offsetHeight = paginationEl.offsetHeight;
                  paginationHeight += offsetHeight || 0;
                } else {
                  // TODO First fix 24
                  paginationHeight += 24;
                }
              }

              footerHeight = 0;

              if (!(0, _shared.isBoolean)(pagination)) {
                if (!footerEl) {
                  footerEl = tableEl.querySelector('.ant-table-footer');
                } else {
                  _offsetHeight = footerEl.offsetHeight;
                  footerHeight += _offsetHeight || 0;
                }
              }

              headerHeight = 0;

              if (headEl) {
                headerHeight = headEl.offsetHeight;
              }

              height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - borderHeight - paginationHeight - footerHeight - headerHeight;
              height = (_a = height > maxHeight ? maxHeight : height) !== null && _a !== void 0 ? _a : height;
              setHeight(height);
              bodyEl.style.height = "".concat(height, "px");

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

  (0, _useWindowSizeFn.useWindowSizeFn)(calcTableHeight, 280);
  (0, _onMountedOrActivated.onMountedOrActivated)(function () {
    calcTableHeight();
    (0, _vue.nextTick)(function () {
      debounceRedoHeight();
    });
  });
  var getScrollX = (0, _vue.computed)(function () {
    var _a, _b;

    var width = 0;

    if ((0, _vue.unref)(rowSelectionRef)) {
      width += 60;
    } // TODO props ?? 0;


    var NORMAL_WIDTH = 150;
    var columns = (0, _vue.unref)(columnsRef).filter(function (item) {
      return !item.defaultHidden;
    });
    columns.forEach(function (item) {
      width += Number.parseInt(item.width) || 0;
    });
    var unsetWidthColumns = columns.filter(function (item) {
      return !Reflect.has(item, 'width');
    });
    var len = unsetWidthColumns.length;

    if (len !== 0) {
      width += len * NORMAL_WIDTH;
    }

    var table = (0, _vue.unref)(tableElRef);
    var tableWidth = (_b = (_a = table === null || table === void 0 ? void 0 : table.$el) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
    return tableWidth > width ? '100%' : width;
  });
  var getScrollRef = (0, _vue.computed)(function () {
    var tableHeight = (0, _vue.unref)(tableHeightRef);

    var _unref3 = (0, _vue.unref)(propsRef),
        canResize = _unref3.canResize,
        scroll = _unref3.scroll;

    return _extends({
      x: (0, _vue.unref)(getScrollX),
      y: canResize ? tableHeight : null,
      scrollToFirstRowOnChange: false
    }, scroll);
  });
  return {
    getScrollRef: getScrollRef,
    redoHeight: redoHeight
  };
}