All files / src/table/addons stylize.tsx

0% Statements 0/13
0% Branches 0/12
0% Functions 0/4
0% Lines 0/12

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                                                                                                                                                         
import React from "react";
import classNames from "classnames";
import { TableAddon, TableMiddleware } from "../TableProps";
import { mergeStyle } from "../../_util/merge-style";
 
/**
 * `stylize` 插件用于支持表格各部分的样式及类名配置。
 */
export interface StylizeOption {
  /**
   * 组件容器自定义类名
   */
  className?: string;
 
  /**
   * 组件容器自定义样式
   */
  style?: React.CSSProperties;
 
  /**
   * 表头容器自定义类名
   */
  headClassName?: string;
 
  /**
   * 表头容器自定义样式
   */
  headStyle?: React.CSSProperties;
 
  /**
   * 表格 Body 容器自定义类名
   */
  bodyClassName?: string;
 
  /**
   * 表格 Body 容器自定义样式
   */
  bodyStyle?: React.CSSProperties;
}
 
export function stylize({
  className,
  style,
  headClassName,
  headStyle,
  bodyClassName,
  bodyStyle,
}: StylizeOption): TableAddon {
  const addon: TableAddon = {};
 
  if (className || style) {
    addon.onInjectTable = withStyle(className, style);
  }
  if (headClassName || headStyle) {
    addon.onInjectHead = withStyle(headClassName, headStyle);
  }
  if (bodyClassName || bodyStyle) {
    addon.onInjectBody = withStyle(bodyClassName, bodyStyle);
  }
 
  return addon;
}
 
function withStyle(
  className: string,
  style: React.CSSProperties
): TableMiddleware<(...args: any[]) => JSX.Element> {
  return render => (...args) => {
    const element = render(...args);
    const elementProps = element.props;
    return React.cloneElement(element, {
      className: classNames(elementProps.className, className),
      style: mergeStyle(elementProps.style, style),
    });
  };
}