89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
/*
|
|
* Copyright 2025 coze-dev Authors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import { Spin } from '@coze-arch/coze-design';
|
|
interface IPreviewTxtProps {
|
|
fileUrl: string;
|
|
}
|
|
|
|
function wait(ms: number) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
export const PreviewTxt = (props: IPreviewTxtProps) => {
|
|
const { fileUrl } = props;
|
|
const [txtContent, setTxtContent] = useState<string>('');
|
|
const [loading, setLoading] = useState(true);
|
|
useEffect(() => {
|
|
fetch(fileUrl)
|
|
.then(res => res.text())
|
|
.then(text => {
|
|
setLoading(false);
|
|
setTxtContent(text);
|
|
});
|
|
}, [fileUrl]);
|
|
|
|
const ref = useRef<HTMLPreElement>(null);
|
|
|
|
useEffect(() => {
|
|
async function render() {
|
|
if (ref.current) {
|
|
for (
|
|
let i = 0, len = txtContent.length;
|
|
i < Math.ceil(len / 50_000);
|
|
i++
|
|
) {
|
|
await wait(10);
|
|
if (ref.current) {
|
|
ref.current.textContent += txtContent.slice(
|
|
i * 50_000,
|
|
(i + 1) * 50_000,
|
|
);
|
|
}
|
|
}
|
|
if (ref.current) {
|
|
ref.current.textContent = txtContent;
|
|
}
|
|
}
|
|
}
|
|
|
|
render();
|
|
}, [txtContent]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center w-full h-full flex-1 py-2 px-4">
|
|
<Spin
|
|
wrapperClassName="w-full h-full grow"
|
|
spinning={loading}
|
|
childStyle={{
|
|
width: '100%',
|
|
height: '100%',
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<pre
|
|
className="max-w-full overflow-auto whitespace-pre-wrap break-all text-[14px] leading-[22px]"
|
|
ref={ref}
|
|
>
|
|
{/* {txtContent} */}
|
|
</pre>
|
|
</Spin>
|
|
</div>
|
|
);
|
|
};
|