All files / src/table/addons/scrollable scrollable.tsx

92.86% Statements 13/14
75% Branches 3/4
90% Functions 9/10
92.86% Lines 13/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130                                                                                                                                                2x       3x   3x 2x               2x 2x   2x                       2x 2x   2x                                 2x 2x   2x        
import React from "react";
import { TableAddon, TableProps } from "../../TableProps";
import {
  ScrollableTable,
  ScrollableTableBody,
  ScrollableTableHead,
} from "./ScrollableTable";
 
/**
 * `scrollable` 插件用于支持表格滚动。
 *
 * **纵向滚动**:需要指定表格内容区域最大高度 `maxHeight`,内容超过最大高度时,出现纵向滚动条。
 *
 * **横向滚动**:需要指定表格最小宽度的 `minWidth`,表格超过其容器宽度时,出现横向滚动条。
 */
 
export interface ScrollableAddonOptions {
  /**
   * 设置 maxHeight 属性来开启表格内容区域的纵向滚动
   */
  maxHeight?: number | string;
 
  /**
   * 设置表格内容区域的最小高度
   */
  minHeight?: number | string;
 
  /**
   * 哪些内容改变之后,会导致滚动高度变化
   *
   * 默认不传会使用 `props => [props.records.length]`
   */
  scrollHeightFactor?: (props: TableProps) => any[];
 
  /**
   * Table Body 滚动至底部的回调
   */
  onScrollBottom?: (event: React.UIEvent) => void;
 
  /**
   * 设置 minWidth 属性来开启表格内容区域的横向滚动
   */
  minWidth?: number | string;
 
  /**
   * 当依赖项变化后是否滚动到表格顶部
   *
   * - `true` - 依赖项包括 `records`/`columns`/`topTip`
   *
   * @default false
   * @version 2.1.0
   */
  scrollToTopOnChange?: boolean | any[];
}
 
/**
 * 支持表格内容区域滚动
 *
 * 如果遇到无法滚动情况,请尝试将该插件置于 Table 插件配置组最前
 *
```js
<Table
  records={records}
  columns={columns}
  addons={[scrollable({ maxHeight: 144 })]}
/>
```
 */
export function scrollable(options: ScrollableAddonOptions): TableAddon {
  const {
    minHeight,
    maxHeight,
    scrollHeightFactor = (props: TableProps) => [props.records.length],
    onScrollBottom = () => null,
    minWidth,
    scrollToTopOnChange,
  } = options;
 
  return {
    onInjectProps: props => ({
      ...props,
      boxStyle: { minWidth },
    }),
 
    /**
     * 对 div.tea-table 进行注入,提供滚动上下文
     */
    onInjectTable: render => props => {
      const table = render(props);
 
      return (
        <ScrollableTable
          scrollHeightFactor={scrollHeightFactor(props)}
          onScrollBottom={onScrollBottom}
          table={table}
        />
      );
    },
 
    /**
     * 对 div.tea-table__body 进行注入,提供 bodyRef 用于检测滚动状态变化
     */
    onInjectBody: render => (records, columns, topTip, ...args) => {
      const body = render(records, columns, topTip, ...args);
 
      return (
        <ScrollableTableBody
          body={body}
          bodyDeps={
            Array.isArray(scrollToTopOnChange)
              ? scrollToTopOnChange
              : [records, columns, topTip]
          }
          scrollToTopOnChange={!!scrollToTopOnChange}
          style={{ maxHeight, minHeight }}
        />
      );
    },
 
    /**
     * 对 div.tea-table__head 进行注入,根据滚动状态决定要不要使用 padding
     */
    onInjectHead: render => (...args) => {
      const head = render(...args);
 
      return <ScrollableTableHead head={head} />;
    },
  };
}