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

### VirtualTable

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContainerSize, createMiddleware } from '@are-visual/virtual-table';
import { useMemo, createElement, useCallback } from 'react';

const EmptyRow = props => {
  const {
    colSpan,
    children
  } = props;
  const {
    tableWidth
  } = useContainerSize();
  return jsx("tr", {
    children: jsx("td", {
      colSpan: colSpan,
      style: {
        padding: 0
      },
      children: jsx("div", {
        style: {
          boxSizing: 'border-box',
          position: 'sticky',
          left: 0,
          top: 0,
          padding: 16,
          width: tableWidth <= 0 ? undefined : tableWidth
        },
        children: children
      })
    })
  });
};

function useTableEmpty(ctx, args) {
  const {
    children: component,
    visible = true
  } = args;
  const {
    dataSource
  } = ctx;
  const isNoData = !Array.isArray(dataSource) ? true : dataSource.length === 0;
  const showEmpty = isNoData && visible;
  const node = useMemo(() => {
    if (typeof component === 'function') {
      return /*#__PURE__*/createElement(component);
    }
    return component;
  }, [component]);
  const renderBodyContent = useCallback((children, options) => {
    const {
      columnDescriptor
    } = options;
    return jsxs(Fragment, {
      children: [children, jsx(EmptyRow, {
        colSpan: columnDescriptor.length,
        children: node
      }, "virtual-table-placeholder$")]
    });
  }, [node]);
  if (!showEmpty) {
    return ctx;
  }
  return {
    ...ctx,
    renderBodyContent
  };
}
const tableEmpty = createMiddleware(useTableEmpty);

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