linkmore-design/lib/table/rc-table/FixedHolder/index.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 _classnames = _interopRequireDefault(require("classnames"));
var _ref = require("rc-util/lib/ref");
var React = _interopRequireWildcard(require("react"));
var _ColGroup = _interopRequireDefault(require("../ColGroup"));
var _TableContext = _interopRequireDefault(require("../context/TableContext"));
var _ContextSelector = require("../ContextSelector");
function useColumnWidth(colWidths, columCount) {
  return (0, React.useMemo)(() => {
    const cloneColumns = [];
    for (let i = 0; i < columCount; i += 1) {
      const val = colWidths[i];
      if (val !== undefined) {
        cloneColumns[i] = val;
      } else {
        return null;
      }
    }
    return cloneColumns;
  }, [colWidths.join('_'), columCount]);
}
const FixedHolder = /*#__PURE__*/React.forwardRef(({
  className,
  noData,
  columns,
  flattenColumns,
  colWidths,
  columCount,
  stickyOffsets,
  direction,
  fixHeader,
  stickyTopOffset,
  stickyBottomOffset,
  stickyClassName,
  onScroll,
  maxContentScroll,
  children,
  ...props
}, ref) => {
  const {
    prefixCls,
    scrollbarSize,
    isSticky
  } = (0, _ContextSelector.useContextSelector)(_TableContext.default, ['prefixCls', 'scrollbarSize', 'isSticky']);
  const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;

  // Pass wheel to scroll event
  const scrollRef = React.useRef(null);
  const setScrollRef = React.useCallback(element => {
    (0, _ref.fillRef)(ref, element);
    (0, _ref.fillRef)(scrollRef, element);
  }, []);
  React.useEffect(() => {
    function onWheel(e) {
      const {
        currentTarget,
        deltaX
      } = e;
      if (deltaX) {
        onScroll({
          currentTarget,
          scrollLeft: currentTarget.scrollLeft + deltaX
        });
        e.preventDefault();
      }
    }
    scrollRef.current?.addEventListener('wheel', onWheel);
    return () => {
      scrollRef.current?.removeEventListener('wheel', onWheel);
    };
  }, []);

  // Check if all flattenColumns has width
  const allFlattenColumnsWithWidth = React.useMemo(() => flattenColumns.every(column => column.width >= 0), [flattenColumns]);

  // Add scrollbar column
  const lastColumn = flattenColumns[flattenColumns.length - 1];
  const ScrollBarColumn = {
    fixed: lastColumn ? lastColumn.fixed : null,
    scrollbar: true,
    onHeaderCell: () => ({
      className: `${prefixCls}-cell-scrollbar`
    })
  };
  const columnsWithScrollbar = (0, React.useMemo)(() => combinationScrollBarSize ? [...columns, ScrollBarColumn] : columns, [combinationScrollBarSize, columns]);
  const flattenColumnsWithScrollbar = (0, React.useMemo)(() => combinationScrollBarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns, [combinationScrollBarSize, flattenColumns]);

  // Calculate the sticky offsets
  const headerStickyOffsets = (0, React.useMemo)(() => {
    const {
      right,
      left
    } = stickyOffsets;
    return {
      ...stickyOffsets,
      left: direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
      right: direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0],
      isSticky
    };
  }, [combinationScrollBarSize, stickyOffsets, isSticky]);
  const mergedColumnWidth = useColumnWidth(colWidths, columCount);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      overflow: 'hidden',
      ...(isSticky ? {
        top: stickyTopOffset,
        bottom: stickyBottomOffset
      } : {})
    },
    ref: setScrollRef,
    className: (0, _classnames.default)(className, {
      [stickyClassName]: !!stickyClassName
    })
  }, /*#__PURE__*/React.createElement("table", {
    style: {
      tableLayout: 'fixed',
      visibility: noData || mergedColumnWidth ? null : 'hidden'
    }
  }, (!noData || !maxContentScroll || allFlattenColumnsWithWidth) && /*#__PURE__*/React.createElement(_ColGroup.default, {
    colWidths: mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : [],
    columCount: columCount + 1,
    columns: flattenColumnsWithScrollbar
  }), children({
    ...props,
    stickyOffsets: headerStickyOffsets,
    columns: columnsWithScrollbar,
    flattenColumns: flattenColumnsWithScrollbar
  })));
});
FixedHolder.displayName = 'FixedHolder';
var _default = FixedHolder;
exports.default = _default;