All files / src/transfer Transfer.tsx

100% Statements 5/5
90.91% Branches 10/11
100% Functions 2/2
100% Lines 5/5

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                                                                  1x 1x                                     1x                                                                                   2x 2x                                                  
import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { Icon } from "../icon";
import { Text } from "../text";
import { useConfig } from "../_util/config-context";
 
export interface TransferProps extends StyledProps {
  /**
   * 头部内容
   */
  header?: React.ReactNode;
 
  /**
   * 左侧 TransferCell
   * @docType React.ReactElement
   */
  leftCell: React.ReactElement;
 
  /**
   * 右侧 TransferCell
   * @docType React.ReactElement
   */
  rightCell: React.ReactElement;
}
 
export function Transfer({
  header,
  leftCell,
  rightCell,
  className,
  style,
}: TransferProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-transfer`, className)}
      style={style}
    >
      {header && (
        <div className={`${classPrefix}-transfer__header`}>{header}</div>
      )}
      <div className={`${classPrefix}-transfer__body`}>
        {leftCell}
        <div className={`${classPrefix}-transfer__separator`}>
          <Icon type="transfer" />
        </div>
        {rightCell}
      </div>
    </div>
  );
}
 
Transfer.Cell = TransferCell;
 
interface TransferCellProps extends StyledProps {
  /**
   * Cell 标题
   */
  title?: React.ReactNode;
 
  /**
   * Cell 内容区头部内容
   */
  header?: React.ReactNode;
 
  /**
   * Cell 底部提示
   */
  tip?: React.ReactNode;
 
  /**
   * Cell 内容
   */
  children: React.ReactNode;
 
  /**
   * Cell 内容区是否垂直可滚动
   *
   * 需要实现内容内部滚动时(如 Table),可禁用此选项
   *
   * @default true
   */
  scrollable?: boolean;
}
 
function TransferCell({
  title,
  tip,
  header,
  children,
  scrollable = true,
  className,
  style,
}: TransferCellProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-transfer__cell`, className)}
      style={style}
    >
      {typeof title !== "undefined" && (
        <div className={`${classPrefix}-transfer__title`}>
          {typeof title === "string" ? <h4>{title}</h4> : title}
        </div>
      )}
      <div className={`${classPrefix}-transfer__content`}>
        {header}
        <div
          className={`${classPrefix}-transfer__inner`}
          style={{ overflowY: scrollable ? undefined : "hidden" }}
        >
          {children}
        </div>
      </div>
      <div className={`${classPrefix}-transfer__tips`}>
        {typeof tip === "string" ? <Text theme="weak">{tip}</Text> : tip}
      </div>
    </div>
  );
}