@are-visual/virtual-table/middleware/horizontal-scroll-bar/index.js

### VirtualTable

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useScrollSynchronize, onResize, createMiddleware } from '@are-visual/virtual-table';
import { getScrollbarSize } from '@are-visual/virtual-table/middleware/utils/getScrollbarSize';
import clsx from 'clsx';
import { useState, useEffect } from 'react';

const ScrollBar = props => {
  const {
    className,
    style,
    bottom,
    zIndex,
    bodyRef
  } = props;
  const wrapperRef = useScrollSynchronize('virtual-table-sticky-bottom-scroll');
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const body = bodyRef.current;
    if (body == null) return;
    return onResize(body, _ref => {
      let {
        width
      } = _ref;
      if (width === 0) return;
      setWidth(width);
    });
  }, [bodyRef]);
  const [size] = useState(getScrollbarSize);
  return jsx("div", {
    className: clsx('virtual-table-sticky-scroll', className),
    style: {
      ...style,
      // @ts-expect-error 使用 css 变量覆盖 bottom，而不是 bottom，这样需要高优先级的时候，就可以使用 style 代替
      '--virtual-table-sticky-scroll-bottom': Number.isFinite(bottom) ? `${bottom}px` : bottom,
      'paddingTop': size.height > 0 ? 0 : 15,
      'marginTop': size.height > 0 ? 0 : size.height * -1,
      'height': size.height + 1,
      zIndex
    },
    ref: wrapperRef,
    children: jsx("div", {
      className: "virtual-table-sticky-scroll-bar",
      style: {
        width
      }
    })
  });
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function useHorizontalScrollBar(ctx, options) {
  const {
    bodyRootRef
  } = ctx;
  return {
    ...ctx,
    renderContent(children) {
      return jsxs(Fragment, {
        children: [children, jsx(ScrollBar, {
          bodyRef: bodyRootRef,
          ...options
        })]
      });
    }
  };
}
const horizontalScrollBar = createMiddleware(useHorizontalScrollBar);

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