暂时去掉 vlist

This commit is contained in:
whyour 2023-02-24 23:04:18 +08:00
parent e05b0a2491
commit 697bcb5922
3 changed files with 54 additions and 84 deletions

View File

@ -9,6 +9,11 @@
url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype'); url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype');
} }
#root {
height: 100vh;
height: calc(100vh - var(--vh-offset, 0px));
}
.ant-modal-body { .ant-modal-body {
max-height: calc(80vh - 110px); max-height: calc(80vh - 110px);
max-height: calc(80vh - var(--vh-offset, 110px)); max-height: calc(80vh - var(--vh-offset, 110px));
@ -349,7 +354,3 @@ pre {
white-space: break-spaces !important; white-space: break-spaces !important;
padding: 0 !important; padding: 0 !important;
} }
.virtuallist .ant-table-tbody > tr > td > div {
white-space: unset !important;
}

View File

@ -921,13 +921,6 @@ const Crontab = () => {
setViewConf(view ? view : null); setViewConf(view ? view : null);
}; };
const vComponents = useMemo(() => {
return VList({
height: tableScrollHeight!,
resetTopWhenDataChange: false,
});
}, [tableScrollHeight]);
return ( return (
<PageContainer <PageContainer
className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab" className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
@ -939,8 +932,6 @@ const Crontab = () => {
enterButton enterButton
allowClear allowClear
loading={loading} loading={loading}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
onSearch={onSearch} onSearch={onSearch}
/>, />,
<Button key="2" type="primary" onClick={() => addCron()}> <Button key="2" type="primary" onClick={() => addCron()}>
@ -1062,7 +1053,6 @@ const Crontab = () => {
rowSelection={rowSelection} rowSelection={rowSelection}
rowClassName={getRowClassName} rowClassName={getRowClassName}
onChange={onPageChange} onChange={onPageChange}
components={vComponents}
/> />
</div> </div>
<CronLogModal <CronLogModal

View File

@ -1,10 +1,4 @@
import React, { import React, { useCallback, useRef, useState, useEffect } from 'react';
useCallback,
useRef,
useState,
useEffect,
useMemo,
} from 'react';
import { import {
Button, Button,
message, message,
@ -39,8 +33,6 @@ import { useOutletContext } from '@umijs/max';
import { SharedContext } from '@/layouts'; import { SharedContext } from '@/layouts';
import useTableScrollHeight from '@/hooks/useTableScrollHeight'; import useTableScrollHeight from '@/hooks/useTableScrollHeight';
import Copy from '../../components/copy'; import Copy from '../../components/copy';
import { VList } from 'virtuallist-antd';
const { Text } = Typography; const { Text } = Typography;
const { Search } = Input; const { Search } = Input;
@ -66,6 +58,50 @@ 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 = [
@ -331,69 +367,12 @@ const Env = () => {
getEnvs(); getEnvs();
}; };
const vComponents = useMemo(() => { const components = {
return VList({ body: {
height: tableScrollHeight!, row: DragableBodyRow,
resetTopWhenDataChange: false, },
});
}, [tableScrollHeight]);
const DragableBodyRow = (props: any) => {
const { index, moveRow, className, style, ...restProps } = props;
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(),
}),
});
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,
body: {
...vComponents.body,
row: DragableBodyRow,
},
};
}, [vComponents]);
const moveRow = useCallback( const moveRow = useCallback(
(dragIndex: number, hoverIndex: number) => { (dragIndex: number, hoverIndex: number) => {
if (dragIndex === hoverIndex) { if (dragIndex === hoverIndex) {