forked from 77media/video-flow
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useState, useCallback, useEffect, SetStateAction, forwardRef } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { FileText } from 'lucide-react';
|
|
import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
|
|
import { useEditData } from '@/components/pages/work-flow/use-edit-data';
|
|
|
|
|
|
interface ScriptTabContentProps {
|
|
setIsPauseWorkFlow: (isPauseWorkFlow: boolean) => void;
|
|
isPauseWorkFlow: boolean;
|
|
originalText?: string;
|
|
}
|
|
|
|
export const ScriptTabContent = forwardRef<
|
|
{ checkUpdate: () => boolean },
|
|
ScriptTabContentProps
|
|
>((props, ref) => {
|
|
const { setIsPauseWorkFlow, isPauseWorkFlow, originalText } = props;
|
|
const { loading, scriptData, setAnyAttribute, applyScript } = useEditData('script', originalText);
|
|
|
|
const [isUpdate, setIsUpdate] = useState(false);
|
|
|
|
useEffect(() => {
|
|
console.log('contentEditableRef---scriptTabContentIsChange', isUpdate);
|
|
}, [isUpdate]);
|
|
|
|
// 暴露方法给父组件
|
|
React.useImperativeHandle(ref, () => ({
|
|
checkUpdate: () => isUpdate
|
|
}));
|
|
|
|
// 如果loading 显示loading状态
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
|
<div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
|
|
<p>Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (!scriptData || scriptData.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
|
<FileText className="w-16 h-16 mb-4" />
|
|
<p>No script data</p>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<motion.div
|
|
className="relative w-full h-[90vh] backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden flex flex-col"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
>
|
|
<ScriptRenderer
|
|
data={scriptData}
|
|
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
|
setAnyAttribute={setAnyAttribute}
|
|
isPauseWorkFlow={isPauseWorkFlow}
|
|
applyScript={applyScript}
|
|
mode='manual'
|
|
from='tab'
|
|
setIsUpdate={setIsUpdate}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
});
|