You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.2 KiB

import * as React from 'react';
import { LastIndexContext } from '.';
import { SizeType } from '../config-provider/SizeContext';
const spaceSize = {
small: 8,
middle: 16,
large: 24,
};
export interface ItemProps {
className: string;
children: React.ReactNode;
index: number;
direction?: 'horizontal' | 'vertical';
size?: SizeType | number;
marginDirection: 'marginLeft' | 'marginRight';
split?: string | React.ReactNode;
}
export default function Item({
className,
direction,
index,
size,
marginDirection,
children,
split,
}: ItemProps) {
const latestIndex = React.useContext(LastIndexContext);
if (children === null || children === undefined) {
return null;
}
const style =
index >= latestIndex
? {}
: {
[direction === 'vertical' ? 'marginBottom' : marginDirection]:
((typeof size === 'string' ? spaceSize[size] : size) ?? 0) / (split ? 2 : 1),
};
return (
<>
<div className={className} style={style}>
{children}
</div>
{index < latestIndex && split && (
<span className={`${className}-split`} style={style}>
{split}
</span>
)}
</>
);
}