@are-visual/virtual-table/middleware/loading/index.js

### VirtualTable

import { jsx } from 'react/jsx-runtime';
import { getKey, useTableSticky, isValidFixedRight, isValidFixedLeft, isValidFixed, useTableRowManager, findLastIndex, createMiddleware, onResize } from '@are-visual/virtual-table';
import { memo, useState, useEffect, useMemo, isValidElement, cloneElement } from 'react';
import clsx from 'clsx';

function LoadingCell(props) {
  const {
    column,
    className
  } = props;
  const {
    align,
    fixed
  } = column;
  const key = getKey(column);
  const {
    size: stickySizes
  } = useTableSticky();
  return jsx("td", {
    className: clsx('virtual-table-cell', className, align != null && `virtual-table-align-${align}`, isValidFixed(fixed) && 'virtual-table-sticky-cell'),
    style: {
      left: isValidFixedLeft(fixed) ? stickySizes.get(key) : undefined,
      right: isValidFixedRight(fixed) ? stickySizes.get(key) : undefined
    },
    children: jsx("div", {
      className: "virtual-table-loading-skeleton"
    })
  });
}
var LoadingCell$1 = /*#__PURE__*/memo(LoadingCell);

function LoadingRow(props) {
  const {
    descriptor,
    style,
    rowKey
  } = props;
  const {
    setRowHeightByRowKey
  } = useTableRowManager();
  const lastFixedLeftColumnIndex = findLastIndex(descriptor, x => {
    if (x.type === 'blank') {
      return false;
    }
    return isValidFixedLeft(x.column.fixed);
  });
  const firstFixedRightColumnIndex = descriptor.findIndex(x => {
    if (x.type === 'blank') {
      return false;
    }
    return isValidFixedRight(x.column.fixed);
  });
  return jsx("tr", {
    className: "virtual-table-row virtual-table-loading-cell",
    style: style,
    ref: node => {
      if (node == null) return;
      setRowHeightByRowKey(rowKey, 'loading-tr', node.offsetHeight);
    },
    children: descriptor.map((item, index) => {
      const {
        key
      } = item;
      if (item.type === 'blank') {
        return jsx("td", {}, key);
      }
      const {
        column
      } = item;
      return jsx(LoadingCell$1, {
        className: clsx(lastFixedLeftColumnIndex === index && 'virtual-table-cell-fix-left-last', firstFixedRightColumnIndex === index && 'virtual-table-cell-fix-right-first'),
        column: column
      }, key);
    })
  });
}
var LoadingRow$1 = /*#__PURE__*/memo(LoadingRow);

function useTableLoading(ctx, options) {
  const {
    loading = false
  } = options ?? {};
  const {
    estimatedRowHeight,
    headerWrapperRef,
    getScroller
  } = ctx;
  const [count, setCount] = useState(10);
  useEffect(() => {
    const header = headerWrapperRef.current;
    const container = getScroller();
    if (container == null) return;
    return onResize(container, _ref => {
      let {
        height
      } = _ref;
      const headerHeight = header?.offsetHeight ?? 0;
      setCount(Math.ceil((height - headerHeight) / estimatedRowHeight));
    });
  }, [getScroller, headerWrapperRef, estimatedRowHeight]);
  const fakeDataSource = useMemo(() => {
    return Array.from({
      length: count
    }, (_, index) => {
      return {
        key: index
      };
    });
  }, [count]);
  if (!loading) {
    return ctx;
  }
  return {
    ...ctx,
    renderBodyRoot: children => {
      if (/*#__PURE__*/isValidElement(children)) {
        if (Object.prototype.hasOwnProperty.call(children.props, 'style')) {
          const style = children.props.style;
          return /*#__PURE__*/cloneElement(children, {
            style: {
              ...style,
              paddingBottom: undefined,
              paddingTop: undefined
            }
          });
        }
      }
      return children;
    },
    renderBodyContent: (_ignore, _ref2) => {
      let {
        columnDescriptor,
        startRowIndex
      } = _ref2;
      return fakeDataSource.map((item, index) => {
        return jsx(LoadingRow$1, {
          style: {
            height: estimatedRowHeight
          },
          descriptor: columnDescriptor,
          rowKey: `__loading$-${index + startRowIndex}`
        }, item.key);
      });
    }
  };
}
const tableLoading = createMiddleware(useTableLoading);

export { tableLoading };
//# sourceMappingURL=index.js.map