import { ItemType, useEditorState } from '@designcombo/core'; import { useCallback, useEffect, useState } from 'react'; import { Icons } from '@/components/shared/icons'; import { Button } from '@/components/ui/button'; import useLayoutStore from '@/store/use-layout-store'; export default function ControlList() { const { activeIds, trackItemsMap } = useEditorState(); const [controlType, setControlType] = useState(null); useEffect(() => { if (activeIds.length === 1) { const [id] = activeIds; const trackItem = trackItemsMap[id]; setControlType(trackItem.type); } else { setControlType(null); } }, [activeIds, trackItemsMap]); return <>{controlType && }; } function ControlMenu({ controlType }: { controlType: ItemType }) { const { setShowToolboxItem, setActiveToolboxItem, activeToolboxItem } = useLayoutStore(); const openToolboxItem = useCallback( (type: string) => { if (type === activeToolboxItem) { setShowToolboxItem(false); setActiveToolboxItem(null); } else { setShowToolboxItem(true); setActiveToolboxItem(type); } }, [activeToolboxItem], ); return (
{ { image: ( ), video: ( ), audio: ( ), text: ( ), }[controlType] }
); } const ImageMenuList = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: ItemType; }) => { return (
); }; const TextMenuList = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: ItemType; }) => { return (
); }; const VideoMenuList = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: ItemType; }) => { return (
); }; const AudioMenuList = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: ItemType; }) => { return (
); }; const PresetsMenuListItem = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: ItemType; }) => { return ( ); }; const BasicMenuListItem = ({ openToolboxItem, type, }: { openToolboxItem: (type: string) => void; type: string; }) => { const Icon = Icons[type]; return ( ); }; const SmartMenuListItem = ({ openToolboxItem, }: { openToolboxItem: (type: string) => void; }) => { return ( ); }; const AnimationMenuListItem = ({ openToolboxItem, }: { openToolboxItem: (type: string) => void; }) => { return ( ); };