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>
);
}
|