linkmore-design/lib/lm-table/virTual/VirtualRow.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _context = require("./context");
const useOptions = ({
  children,
  ref,
  trRef
}) => {
  const {
    state,
    dispatch,
    instance
  } = (0, _context.useStore)();
  const {
    columnVirtual: {
      virtualItems
    }
  } = instance;
  const {
    rowHeight,
    totalLen
  } = state;
  const sliceColumns = (0, _react.useMemo)(() => {
    return children?.reduce((pre, cur) => {
      if (typeof cur.props?.fixLeft === 'number') {
        pre.leftColumns.push(cur);
        return pre;
      }
      if (typeof cur.props?.fixRight === 'number') {
        pre.rightColumns.push(cur);
        return pre;
      }
      pre.centerColumns.push(cur);
      return pre;
    }, {
      leftColumns: [],
      rightColumns: [],
      centerColumns: []
    });
  }, [children]);
  (0, _react.useEffect)(() => {
    dispatch({
      type: 'changeSliceColumns',
      sliceColumns
    });
  }, [sliceColumns]);

  // 非固定列长度
  const centerColumnsLen = (0, _react.useMemo)(() => {
    return sliceColumns.centerColumns.length ?? 0;
  }, [sliceColumns]);
  (0, _react.useEffect)(() => {
    if (state.columnsLen !== centerColumnsLen) {
      dispatch({
        type: 'changeColumnsLen',
        columnsLen: centerColumnsLen ?? 0
      });
    }
  }, [centerColumnsLen, dispatch, state.columnsLen]);

  // 获取行的高度
  (0, _react.useEffect)(() => {
    const initHeight = tempRef => {
      if (tempRef?.current?.offsetHeight && !rowHeight && totalLen) {
        const tempRowHeight = tempRef?.current?.offsetHeight ?? 0;
        dispatch({
          type: 'initHeight',
          rowHeight: tempRowHeight + 1
        });
      }
    };
    initHeight(Object.prototype.hasOwnProperty.call(ref, 'current') ? ref : trRef);
  }, [trRef, dispatch, rowHeight, totalLen, ref]);

  // 横向单元格合并
  const leftColSpan = (0, _react.useMemo)(() => {
    return virtualItems[0]?.index;
  }, [virtualItems]);

  // 右侧隐藏数量
  const rightColSpan = (0, _react.useMemo)(() => sliceColumns.centerColumns.length - virtualItems.length - leftColSpan || 0, [sliceColumns.centerColumns.length, virtualItems.length, leftColSpan]);
  return {
    virtualItems,
    ...sliceColumns,
    leftColSpan,
    rightColSpan
  };
};
const VirtualRow = /*#__PURE__*/_react.default.memo(({
  children,
  ...resetProps
}, ref) => {
  const trRef = (0, _react.useRef)(null);
  const {
    virtualItems,
    leftColumns,
    centerColumns,
    rightColumns,
    leftColSpan,
    rightColSpan
  } = useOptions({
    children,
    ref,
    trRef
  });
  return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({}, resetProps, {
    ref: Object.prototype.hasOwnProperty.call(ref, 'current') ? ref : trRef
  }), leftColumns, !!leftColSpan && /*#__PURE__*/_react.default.createElement("td", {
    key: "leftColSpan",
    colSpan: leftColSpan
  }), virtualItems.map(virtualCol => centerColumns[virtualCol.index]), !!rightColSpan && /*#__PURE__*/_react.default.createElement("td", {
    key: "rightColSpan",
    colSpan: rightColSpan
  }), rightColumns);
});
var _default = VirtualRow;
exports.default = _default;