refactor: 修改AutoFolder的逻辑以支持异步组件实现

pull/81/head
moonrailgun 3 years ago
parent 3a7d1126e7
commit b086739199

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
interface AutoFolderProps { interface AutoFolderProps {
maxHeight: number; maxHeight: number;
@ -12,22 +12,40 @@ export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
backgroundColor = 'rgba(0,0,0,0)', backgroundColor = 'rgba(0,0,0,0)',
} = props; } = props;
const [isShowFull, setIsShowFull] = useState(false); const [isShowFull, setIsShowFull] = useState(false);
const contentRef = useRef<HTMLDivElement>(); const contentRef = useRef<HTMLDivElement>(null);
useEffect(() => { const observer = useMemo(
if (contentRef.current) { () =>
if (contentRef.current.scrollHeight > maxHeight) { new window.ResizeObserver((entries) => {
if (entries[0]) {
const { height } = entries[0].contentRect;
if (height > maxHeight) {
setIsShowFull(false); setIsShowFull(false);
observer.disconnect(); // 触发一次则解除连接
} else { } else {
setIsShowFull(true); setIsShowFull(true);
} }
} }
}, [props.maxHeight]); }),
[]
);
useEffect(() => {
if (!contentRef.current) {
return;
}
observer.observe(contentRef.current);
return () => {
observer.disconnect();
};
}, []);
return ( return (
<div <div
style={{ style={{
height: isShowFull ? 'auto' : maxHeight, maxHeight: isShowFull ? 'none' : maxHeight,
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
}} }}

@ -1,3 +1,4 @@
export { AutoFolder } from './AutoFolder';
export { Avatar } from './Avatar'; export { Avatar } from './Avatar';
export { CombinedAvatar } from './Avatar/combined'; export { CombinedAvatar } from './Avatar/combined';
export { DelayTip } from './DelayTip'; export { DelayTip } from './DelayTip';

Loading…
Cancel
Save