-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
48 lines (48 loc) · 1.4 KB
/
index.tsx
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
import { CSSProperties, ReactNode } from "react";
type Props = {
id?: string;
className?: string;
style?: CSSProperties;
/**
* 容器在允许子元素自然展开
* 这个值的默认值是`'row'`
* 如果你在容器的内联样式上应用了flex布局
* 那么默认值改为与`flex-direction`的方向相同
*/
direction?: 'column' | 'row';
/** 容器内容是否可见 */
visible?: boolean;
children?: ReactNode;
}
/**
* 退化为线段的容器 可以通过元素的间隙与下方内容互动
* 建议在此容器上应用flex布局 可以自动设置自然展开方向
*/
export default function VirtualContainer(props: Props) {
const containerStyle: CSSProperties = {
width: 0,
height: 0,
overflow: 'visible',
}
if (!props.visible) {
containerStyle.overflow = 'hidden'
}
if (props.direction === 'row') {
containerStyle.width = 'auto';
} else if (props.direction === 'column') {
containerStyle.height = 'auto';
} else if (props.style?.display === 'flex') {
if (!props.style?.flexDirection || props.style?.flexDirection.search('row') !== -1) {
containerStyle.width = 'auto';
} else {
containerStyle.height = 'auto';
}
} else {
containerStyle.width = 'auto';
}
return (
<div id={props.id} className={props.className} style={{ ...props.style, ...containerStyle }}>
{props.children}
</div>
);
}