From 5f13610dc88ae959704ca0509ed1efd439393ec5 Mon Sep 17 00:00:00 2001 From: Alan Smith Date: Fri, 16 May 2025 13:06:32 -0400 Subject: [PATCH 01/40] Add a tabs component and sample menu and tabs --- src/App.tsx | 158 ++++++++++++++++++++++++++--------- src/reactComponents/Tabs.tsx | 97 +++++++++++++++++++++ 2 files changed, 214 insertions(+), 41 deletions(-) create mode 100644 src/reactComponents/Tabs.tsx diff --git a/src/App.tsx b/src/App.tsx index a484174b..1471e254 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,11 @@ import * as Antd from 'antd'; import { SettingOutlined, + RobotOutlined, + CodeOutlined, + BlockOutlined, + FileOutlined, + ProjectOutlined } from '@ant-design/icons'; @@ -35,6 +40,7 @@ import ModuleOutline from './reactComponents/ModuleOutline'; import CodeDisplay from './reactComponents/CodeDisplay'; import BlocklyComponent, { BlocklyComponentType } from './reactComponents/BlocklyComponent'; import ToolboxSettingsModal from './reactComponents/ToolboxSettings'; +import * as Tabs from "./reactComponents/Tabs"; import { createGeneratorContext, GeneratorContext } from './editor/generator_context'; import * as editor from './editor/editor'; @@ -62,6 +68,9 @@ const App: React.FC = () => { const generatorContext = React.useRef(null); const blocklyComponent = React.useRef(null); + const [leftCollapsed, setLeftCollapsed] = React.useState(false); + const [rightCollapsed, setRightCollapsed] = React.useState(false); + // When the app is loaded, open storage and initialize the blocks we provide. React.useEffect(() => { openStorage(); @@ -205,13 +214,70 @@ const App: React.FC = () => { array.sort(); storage.saveEntry('shownPythonToolboxCategories', JSON.stringify(array)); }; - const areBlocksModified = () : boolean => { - if(blocksEditor.current){ + const areBlocksModified = (): boolean => { + if (blocksEditor.current) { return blocksEditor.current.isModified(); } return false; } + const myTabs: Tabs.TabItem[] = [ + { key: 'tab1', title: 'Robot', type: Tabs.TabType.ROBOT }, + { key: 'tab2', title: 'Claw', type: Tabs.TabType.MECHANISM }, + { key: 'tab3', title: 'ThreeSpecimenAuto', type: Tabs.TabType.OPMODE }, + { key: 'tab4', title: 'FieldRelativeTeleop', type: Tabs.TabType.OPMODE }, + ]; + type MenuItem = Required['items'][number]; + + function getItem( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], + ): MenuItem { + return { + key, + icon, + children, + label, + } as MenuItem; + } + function getDivider() : MenuItem { + return { + type: 'divider', // Must have + } as MenuItem; + } + + const items: MenuItem[] = [ + getItem('Files', 'files', ,[ + getItem('Manage...', 'manage'), + getDivider(), + getItem('Robot', '1', ), + getItem('Mechanisms', '2', , [ + getItem('Arm', '10'), + getItem('Drive', '11'), + ]), + getItem('Opmodes', '3', , [ + getItem('Auto', '40'), + getItem('Teleop', '41'), + ]), + ]), + getItem('Project', '100', , [ + getItem('New...', '14'), + getItem('Rename...', '100'), + getItem('Delete...', '101'), + getItem('Switch...', '102'), + getItem('Upload...', '103'), + getItem('Download...', '104') + ]), + + getItem('Settings', '4', ,[ + getItem('WPI toolbox', '41') + ]), + ]; + + const { Sider } = Antd.Layout; + return ( { alertErrorMessage={alertErrorMessage} setAlertErrorMessage={setAlertErrorMessage} /> - - - - - - - - - } - size="small" - onClick={handleToolboxSettingsClicked} - > - - - - - - - - - - + setLeftCollapsed(value)}> + + + + + + + + + + + + {/* + + + } + size="small" + onClick={handleToolboxSettingsClicked} + > + + + + */} + + + + + + + +