OV-29: * show and remove active element of meu

BinaryStudioAcademy · Aug 22, 2024 · dd6dde1 · dd6dde1
1 parent b702100
commit dd6dde1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx
@@ -1,12 +1,31 @@
 import { Box, Flex, VStack } from '~/bundles/common/components/components.js';
+import { isEmptyArray, isNullOrUndefined } from '~/bundles/common/helpers/helpers.js';
+import { useCallback } from '~/bundles/common/hooks/hooks.js';
 
 import { type MenuItem } from '../../types/types.js';
 
 type MenuProperties = {
     items: MenuItem[];
+    activeIndex: number | null;
+    setActiveIndex: (index: number) => void;
 };
 
-const Menu: React.FC<MenuProperties> = ({ items }) => {
+const Menu: React.FC<MenuProperties> = ({ items, activeIndex, setActiveIndex }) => {
+    const handleClick = useCallback(
+        (index: number) => {
+            return () => {
+                if (isEmptyArray(items) || index >= items.length)
+                    {return;}
+
+                const item = items[index];
+                if(isNullOrUndefined(item)) {return;}
+
+                setActiveIndex(index);
+                item.onClick();
+            };
+        },
+        [setActiveIndex, items]
+    );
     return (
         <Box
             sx={{
@@ -26,7 +45,7 @@ const Menu: React.FC<MenuProperties> = ({ items }) => {
                 {items.map((item, index) => (
                     <Flex
                         key={index}
-                        onClick={item.onClick}
+                        onClick={handleClick(index)}
                         sx={{
                             flexDirection: 'column',
                             alignItems: 'center',
@@ -35,6 +54,7 @@ const Menu: React.FC<MenuProperties> = ({ items }) => {
                             gap: 1,
                             cursor: 'pointer',
                             borderRadius: '8px',
+                            bg: activeIndex === index ? 'background.600' : 'transparent',
                             _hover: {
                                 bg: 'background.600',
                             },

diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx
@@ -1,6 +1,5 @@
-import { useCallback, useState } from 'react';
-
 import { AssetsIcon, AvatarIcon, ScriptIcon, TemplatesIcon, TextIcon } from '~/bundles/common/components/icons/icons.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 
 import { Menu, MenuBody } from '../components/components.js';
 import {
@@ -14,6 +13,7 @@ import {
 import { type MenuItem } from '../types/menu-item.type.js';
 
 const VideoEditor: React.FC = () => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
     const [activeContent, setActiveContent] = useState<React.ReactNode | null>(
         null,
     );
@@ -26,8 +26,9 @@ const VideoEditor: React.FC = () => {
         setIsOpen(true);
     };
 
-    const handleClose = useCallback((): void => {
+    const resetActiveItem = useCallback((): void => {
         setIsOpen(false);
+        setActiveIndex(null);
     }, []);
 
     const menuItems: MenuItem[] = [
@@ -60,8 +61,8 @@ const VideoEditor: React.FC = () => {
 
     return (
         <>
-            <Menu items={menuItems} />
-            <MenuBody title={activeTitle} isOpen={isOpen} onClose={handleClose}>
+            <Menu items={menuItems} activeIndex={activeIndex} setActiveIndex={setActiveIndex}/>
+            <MenuBody title={activeTitle} isOpen={isOpen} onClose={resetActiveItem}>
                 {activeContent}
             </MenuBody>
         </>