mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
fix flashing issue (#41)
This commit is contained in:
parent
bdcdc202a1
commit
4000baa6c5
@ -23,6 +23,11 @@
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.probe {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@ -39,9 +44,9 @@
|
|||||||
|
|
||||||
th {
|
th {
|
||||||
color: @term-white;
|
color: @term-white;
|
||||||
border: 1px solid @scrollbar-thumb;
|
border-right: 1px solid @scrollbar-thumb;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding: 2px 10px 4px 10px;
|
padding: 2px 10px;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
display: block;
|
display: block;
|
||||||
@ -80,7 +85,7 @@
|
|||||||
td {
|
td {
|
||||||
border-right: 1px solid @scrollbar-thumb;
|
border-right: 1px solid @scrollbar-thumb;
|
||||||
border-left: 1px solid @scrollbar-thumb;
|
border-left: 1px solid @scrollbar-thumb;
|
||||||
padding: 2px 10px;
|
padding: 3px 10px;
|
||||||
flex-basis:100%;
|
flex-basis:100%;
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -43,48 +43,40 @@ const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data: Blob;
|
data: Blob;
|
||||||
cmdstr: string;
|
|
||||||
cwd: string;
|
|
||||||
readOnly: boolean;
|
readOnly: boolean;
|
||||||
notFound: boolean;
|
|
||||||
exitcode: number;
|
|
||||||
context: RendererContext;
|
context: RendererContext;
|
||||||
opts: RendererOpts;
|
opts: RendererOpts;
|
||||||
savedHeight: number;
|
savedHeight: number;
|
||||||
scrollToBringIntoViewport: () => void;
|
scrollToBringIntoViewport: () => void;
|
||||||
lineState: LineStateType;
|
lineState: LineStateType;
|
||||||
isSelected: boolean;
|
|
||||||
shouldFocus: boolean;
|
|
||||||
rendererApi: RendererModelContainerApi;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
content: string | null;
|
content: string | null;
|
||||||
message: { status: string; text: string } | null;
|
|
||||||
isPreviewerAvailable: boolean;
|
|
||||||
showReadonly: boolean;
|
showReadonly: boolean;
|
||||||
totalHeight: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const columnHelper = createColumnHelper<any>();
|
const columnHelper = createColumnHelper<any>();
|
||||||
|
|
||||||
const CSVRenderer: FC<Props> = (props: Props) => {
|
const CSVRenderer: FC<Props> = (props: Props) => {
|
||||||
|
const { data, opts, lineState, context, savedHeight } = props;
|
||||||
|
const { height: maxHeight } = opts.maxSize;
|
||||||
|
|
||||||
const csvCacheRef = useRef(new Map<string, string>());
|
const csvCacheRef = useRef(new Map<string, string>());
|
||||||
const rowRef = useRef<(HTMLTableRowElement | null)[]>([]);
|
const rowRef = useRef<(HTMLTableRowElement | null)[]>([]);
|
||||||
const headerRef = useRef<HTMLTableRowElement | null>(null);
|
const headerRef = useRef<HTMLTableRowElement | null>(null);
|
||||||
|
const probeRef = useRef<HTMLTableRowElement | null>(null);
|
||||||
const [state, setState] = useState<State>({
|
const [state, setState] = useState<State>({
|
||||||
content: null,
|
content: null,
|
||||||
message: null,
|
|
||||||
isPreviewerAvailable: false,
|
|
||||||
showReadonly: true,
|
showReadonly: true,
|
||||||
totalHeight: 0,
|
|
||||||
});
|
});
|
||||||
const [globalFilter, setGlobalFilter] = useState('')
|
const [globalFilter, setGlobalFilter] = useState('')
|
||||||
const [isFileTooLarge, setIsFileTooLarge] = useState<boolean>(false);
|
const [isFileTooLarge, setIsFileTooLarge] = useState<boolean>(false);
|
||||||
|
|
||||||
const filePath = props.lineState["prompt:file"];
|
const filePath = lineState["prompt:file"];
|
||||||
const { screenId, lineId } = props.context;
|
const { screenId, lineId } = context;
|
||||||
const cacheKey = `${screenId}-${lineId}-${filePath}`;
|
const cacheKey = `${screenId}-${lineId}-${filePath}`;
|
||||||
|
const rowHeight = probeRef.current?.offsetHeight as number;
|
||||||
|
|
||||||
// Parse the CSV data
|
// Parse the CSV data
|
||||||
const parsedData = useMemo<CSVRow[]>(() => {
|
const parsedData = useMemo<CSVRow[]>(() => {
|
||||||
@ -127,6 +119,8 @@ const CSVRenderer: FC<Props> = (props: Props) => {
|
|||||||
});
|
});
|
||||||
}, [state.content]);
|
}, [state.content]);
|
||||||
|
|
||||||
|
const tbodyHeight = rowHeight * parsedData.length;
|
||||||
|
|
||||||
// Column Definitions
|
// Column Definitions
|
||||||
const columns = useMemo(() => {
|
const columns = useMemo(() => {
|
||||||
if (parsedData.length === 0) {
|
if (parsedData.length === 0) {
|
||||||
@ -147,46 +141,20 @@ const CSVRenderer: FC<Props> = (props: Props) => {
|
|||||||
setState((prevState) => ({ ...prevState, content }));
|
setState((prevState) => ({ ...prevState, content }));
|
||||||
} else {
|
} else {
|
||||||
// Check if the file size exceeds 10MB
|
// Check if the file size exceeds 10MB
|
||||||
if (props.data.size > MAX_DATA_SIZE) { // 10MB in bytes
|
if (data.size > MAX_DATA_SIZE) { // 10MB in bytes
|
||||||
setIsFileTooLarge(true);
|
setIsFileTooLarge(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
props.data.text().then((content: string) => {
|
data.text().then((content: string) => {
|
||||||
setState((prevState) => ({ ...prevState, content }));
|
setState((prevState) => ({ ...prevState, content }));
|
||||||
csvCacheRef.current.set(cacheKey, content);
|
csvCacheRef.current.set(cacheKey, content);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Effect to compute height after rendering
|
|
||||||
useEffect(() => {
|
|
||||||
if (headerRef.current && rowRef.current && rowRef.current[0]) {
|
|
||||||
const rowHeight = rowRef.current[0]?.offsetHeight ?? 0; // Using optional chaining
|
|
||||||
const totalHeight = rowHeight * parsedData.length;
|
|
||||||
const th = Math.min(totalHeight, props.opts.maxSize.height);
|
|
||||||
|
|
||||||
setState((prevState) => ({ ...prevState, totalHeight: th }));
|
const { content } = state;
|
||||||
}
|
|
||||||
}, [parsedData, props.opts]);
|
|
||||||
|
|
||||||
|
|
||||||
const getMessage = () => (
|
|
||||||
<div style={{ position: "absolute", bottom: "-3px", left: "14px" }}>
|
|
||||||
<div
|
|
||||||
className="message"
|
|
||||||
style={{
|
|
||||||
fontSize: GlobalModel.termFontSize.get(),
|
|
||||||
background: `${state.message?.status === "error" ? "red" : "#4e9a06"}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{state.message?.text}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const { exitcode } = props;
|
|
||||||
const { content, message } = state;
|
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
manualPagination: true,
|
manualPagination: true,
|
||||||
@ -213,10 +181,13 @@ const CSVRenderer: FC<Props> = (props: Props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (content == null) return <div className="csv-renderer" style={{ height: props.savedHeight }} />;
|
if (content == null) return <div className="csv-renderer" style={{ height: savedHeight }} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="csv-renderer">
|
<div className="csv-renderer">
|
||||||
|
<table className="probe">
|
||||||
|
<tbody><tr ref={probeRef}><td>dummy data</td></tr></tbody>
|
||||||
|
</table>
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
{table.getHeaderGroups().map(headerGroup => (
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
@ -253,7 +224,7 @@ const CSVRenderer: FC<Props> = (props: Props) => {
|
|||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</thead>
|
</thead>
|
||||||
<tbody style={{"height": `${state.totalHeight}px`}}>
|
<tbody style={{"height": `${Math.min(tbodyHeight, maxHeight)}px`}}>
|
||||||
{table.getRowModel().rows.map((row, index) => (
|
{table.getRowModel().rows.map((row, index) => (
|
||||||
<tr key={row.id} ref={el => rowRef.current[index] = el}>
|
<tr key={row.id} ref={el => rowRef.current[index] = el}>
|
||||||
{row.getVisibleCells().map(cell => (
|
{row.getVisibleCells().map(cell => (
|
||||||
@ -265,9 +236,9 @@ const CSVRenderer: FC<Props> = (props: Props) => {
|
|||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{message && getMessage()}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { CSVRenderer };
|
export { CSVRenderer };
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user