open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-23 23:06:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复环境变量滚动卡顿

Browse Source
This commit is contained in:
whyour 2023-01-31 23:46:42 +08:00
parent 9b0065e533
commit 4d34e0dd96
1 changed files with 57 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/env/index.tsx vendored
View File

@ -66,50 +66,6 @@ enum OperationPath {
const type = 'DragableBodyRow'; const type = 'DragableBodyRow';
const DragableBodyRow = ({
index,
moveRow,
className,
style,
...restProps
}: any) => {
const ref = useRef();
const [{ isOver, dropClassName }, drop] = useDrop({
accept: type,
collect: (monitor) => {
const { index: dragIndex } = (monitor.getItem() as any) || {};
if (dragIndex === index) {
return {};
}
return {
isOver: monitor.isOver(),
dropClassName:
dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
};
},
drop: (item: any) => {
moveRow(item.index, index);
},
});
const [, drag] = useDrag({
type,
item: { index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
drop(drag(ref));
return (
<tr
ref={ref}
className={`${className}${isOver ? dropClassName : ''}`}
style={{ cursor: 'move', ...style }}
{...restProps}
/>
);
};
const Env = () => { const Env = () => {
const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>(); const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
const columns: any = [ const columns: any = [
@ -392,30 +348,68 @@ const Env = () => {
const vComponents = useMemo(() => { const vComponents = useMemo(() => {
return VList({ return VList({
height: tableScrollHeight!, height: tableScrollHeight!,
resetTopWhenDataChange: false,
}); });
}, [tableScrollHeight]); }, [tableScrollHeight]);
// const components = useMemo(() => {
// return { const DragableBodyRow = (props: any) => {
// ...vlistComponent, const { index, moveRow, className, style, ...restProps } = props;
// body: { const ref = useRef();
// ...vlistComponent.body, const [{ isOver, dropClassName }, drop] = useDrop({
// row: DragableBodyRow accept: type,
// }, collect: (monitor) => {
// header: { const { index: dragIndex } = (monitor.getItem() as any) || {};
// cell: ResizableTitle if (dragIndex === index) {
// } return {};
// }; }
// }, []); return {
const components = { isOver: monitor.isOver(),
dropClassName:
dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
};
},
drop: (item: any) => {
moveRow(item.index, index);
},
});
const [, drag] = useDrag({
type,
item: { index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
useEffect(() => {
drop(drag(ref));
}, [drag, drop]);
const components = useMemo(() => vComponents.body.row, []);
const tempProps = useMemo(() => {
return {
ref: ref,
className: `${className}${isOver ? dropClassName : ''}`,
style: { cursor: 'move', ...style },
...restProps,
};
}, [className, dropClassName, restProps, style, isOver]);
return <> {components(tempProps, ref)} </>;
};
const components = useMemo(() => {
return {
...vComponents, ...vComponents,
body: { body: {
...vComponents.body, ...vComponents.body,
row: DragableBodyRow, row: DragableBodyRow,
}, },
}; };
}, [vComponents]);
const moveRow = useCallback( const moveRow = useCallback(
(dragIndex, hoverIndex) => { (dragIndex: number, hoverIndex: number) => {
if (dragIndex === hoverIndex) { if (dragIndex === hoverIndex) {
return; return;
} }