mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
82e5555ff3
* chore: code style optimization * revert: 直接解构, 不用 props * chore: fix classNames useless boolean * fix: remove classname useless boolean * fix: revert delete progress classnames boolean
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
import { SpaceContext } from './context';
|
|
|
|
export interface ItemProps {
|
|
className: string;
|
|
children: React.ReactNode;
|
|
index: number;
|
|
direction?: 'horizontal' | 'vertical';
|
|
marginDirection: 'marginLeft' | 'marginRight';
|
|
split?: React.ReactNode;
|
|
wrap?: boolean;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const Item: React.FC<ItemProps> = ({
|
|
className,
|
|
direction,
|
|
index,
|
|
marginDirection,
|
|
children,
|
|
split,
|
|
wrap,
|
|
style: customStyle,
|
|
}) => {
|
|
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, ...customStyle }}>
|
|
{children}
|
|
</div>
|
|
{index < latestIndex && split && (
|
|
<span className={`${className}-split`} style={style}>
|
|
{split}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Item;
|