mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { SpaceContext } from '.';
|
|
|
|
export interface ItemProps {
|
|
className: string;
|
|
children: React.ReactNode;
|
|
index: number;
|
|
direction?: 'horizontal' | 'vertical';
|
|
marginDirection: 'marginLeft' | 'marginRight';
|
|
split?: string | React.ReactNode;
|
|
wrap?: boolean;
|
|
}
|
|
|
|
export default function Item({
|
|
className,
|
|
direction,
|
|
index,
|
|
marginDirection,
|
|
children,
|
|
split,
|
|
wrap,
|
|
}: ItemProps) {
|
|
const { horizontalSize, verticalSize, latestIndex, supportFlexGap } =
|
|
React.useContext(SpaceContext);
|
|
|
|
let style: React.CSSProperties = {};
|
|
|
|
if (!supportFlexGap) {
|
|
if (direction === 'vertical') {
|
|
if (index < latestIndex) {
|
|
style = { marginBottom: horizontalSize / (split ? 2 : 1) };
|
|
}
|
|
} else {
|
|
style = {
|
|
...(index < latestIndex && { [marginDirection]: horizontalSize / (split ? 2 : 1) }),
|
|
...(wrap && { paddingBottom: verticalSize }),
|
|
};
|
|
}
|
|
}
|
|
|
|
if (children === null || children === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={className} style={style}>
|
|
{children}
|
|
</div>
|
|
{index < latestIndex && split && (
|
|
<span className={`${className}-split`} style={style}>
|
|
{split}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
}
|