All files / src/table/addons rowtooltip.tsx

0% Statements 0/9
0% Branches 0/2
0% Functions 0/4
0% Lines 0/9

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                                                                                               
import React from "react";
import { TableAddon } from "../TableProps";
import { Tooltip } from "../../tooltip";
 
/**
 * `rowtooltip` 插件用于支持为表格行生成 `tooltip`。
 */
export interface RowTooltipAddonOption<T = any> {
  /**
   * 为指定的行生成 `tooltip` 内容,返回空则不显示 `tooltip`
   */
  tooltip: (record: T) => React.ReactNode;
}
 
export function rowtooltip<T = any>(
  options: RowTooltipAddonOption<T>
): TableAddon<T> {
  return {
    onInjectRow: next => (...args) => {
      const result = next(...args);
 
      // 对于提供了 tooltip 的,用 tooltip 包裹
      const [record] = args;
      const tooltip = options.tooltip(record);
      if (tooltip) {
        result.row = (
          <TooltipWrapper key={result.row.key} tooltip={tooltip}>
            {result.row}
          </TooltipWrapper>
        );
      }
 
      return result;
    },
  };
}
 
function TooltipWrapper({ children, tooltip, ...props }) {
  return (
    <Tooltip title={tooltip}>
      {React.cloneElement(
        React.Children.only(children as React.ReactElement<any>),
        props
      )}
    </Tooltip>
  );
}