render treeSelect popup relatively

This commit is contained in:
Bowen Tan 2021-11-12 10:42:37 +08:00
parent 9629be23f3
commit 988c72d446

View File

@ -6,7 +6,11 @@ import { TreeSelect } from 'antd';
import { Box } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { ComponentImplementation } from '../../services/registry';
import 'antd/lib/select/style/index.css';
import 'antd/lib/empty/style/index.css';
import 'antd/lib/tree-select/style/index.css';
import 'antd/lib/style/index.css';
import { useRef } from 'react';
const StateSchema = Type.Object({
value: Type.String(),
@ -22,6 +26,7 @@ const TreeSelectImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
autoSelectAncestors,
}) => {
const [value, setValue] = useState<string[]>();
const popContainerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
mergeState({ value });
}, [value]);
@ -63,6 +68,7 @@ const TreeSelectImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
css={css`
${customStyle?.content}
`}
ref={popContainerRef}
>
<TreeSelect
multiple={multiple}
@ -72,6 +78,7 @@ const TreeSelectImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
placeholder={placeholder}
style={{ width: '100%' }}
treeDefaultExpandAll={treeDefaultExpandAll}
getPopupContainer={() => popContainerRef.current || document.body}
/>
</Box>
);