72 |
73 | );
74 | };
75 |
76 | export default ContextManager;
77 |
--------------------------------------------------------------------------------
/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React, { useEffect, useState } from 'react';
3 | import { useSelector } from 'react-redux';
4 | import { Chart } from 'react-google-charts';
5 | import Grid from '@mui/material/Grid';
6 | import { RootState } from '../../../redux/store';
7 |
8 | /**
9 | * A React component that displays a WordTree chart based on context data from a Redux store.
10 | * Utilizes the `react-google-charts` library to visualize relationships between components in the application,
11 | * fetching data from the `contextSlice.allContext` in the Redux store. The data should include objects with names and components arrays.
12 | *
13 | * @component
14 | * @example
15 | * ```jsx
16 | *
17 | * ```
18 | *
19 | * @param {Object} props - The component does not accept any props.
20 | *
21 | * State:
22 | * - `contextData`: An array of arrays structured for the WordTree chart, with the initial element being ["Phrases"].
23 | *
24 | * Redux State Dependencies:
25 | * - `allContext`: Retrieved from `contextSlice.allContext`, expected to be an array of objects each containing a `name` and a `components` array.
26 | *
27 | * Effects:
28 | * - On mount, transforms the Redux store data into a format suitable for the WordTree chart by calling `transformData`.
29 | *
30 | * Methods:
31 | * - `transformData`: Transforms raw context data from the Redux store to be usable by the `Chart` component,
32 | * mapping each context object to phrases connecting the application name with the context name and its components.
33 | *
34 | * @returns {JSX.Element} A React element containing a Grid layout. If data is available, displays a WordTree chart, otherwise shows a message indicating no data.
35 | */
36 | const DisplayContainer = (): JSX.Element => {
37 | const allContext = useSelector(
38 | (store: RootState) => store.contextSlice.allContext,
39 | );
40 | const [contextData, setContextData] = useState([]);
41 |
42 | useEffect(() => {
43 | transformData();
44 | }, []);
45 |
46 | // formats context data for use in react google charts
47 | const transformData = () => {
48 | const formattedData = allContext
49 | .map((obj) => obj.components.map((component) => [`App ⎯⎯ ${obj.name} ⎯⎯ ${component}`]))
50 | .flat();
51 | setContextData([['Phrases'], ...formattedData]);
52 | };
53 |
54 | // format options for google chart
55 | const options = {
56 | wordtree: {
57 | format: 'implicit',
58 | word: 'App',
59 | },
60 | backgroundColor: '#1E2024',
61 | };
62 |
63 | return (
64 |
65 | {contextData.length < 2 &&
27 | );
28 | };
29 |
30 | export default CustomEditIcon;
31 |
--------------------------------------------------------------------------------
/app/src/components/StateManagement/CreateTab/CreateContainer.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React from 'react';
3 | import Grid from '@mui/material/Grid';
4 | import StatePropsPanel from './components/StatePropsPanel';
5 |
6 | /**
7 | * `CreateContainer` is a React functional component that renders a container for managing the creation or configuration
8 | * of component properties and state within an application. It is primarily used as a layout container for the `StatePropsPanel`.
9 | *
10 | * @param {Object} props - Properties passed to the component.
11 | * @param {boolean} props.isThemeLight - Indicates if the application's theme is light. This is used to adjust the visual styling of the contents.
12 | * @param {Array} props.data - The data passed to the `StatePropsPanel`, typically representing the application's components or elements.
13 | * @returns {JSX.Element} A `Grid` container from Material-UI that includes a `StatePropsPanel` component, configured for managing and displaying component properties and state based on the passed `isThemeLight` and `data` props.
14 | *
15 | * This component uses Material-UI's `Grid` to create a flexible column layout that adjusts based on its content. It serves as a wrapper
16 | * for the `StatePropsPanel` to provide consistent spacing and alignment.
17 | *
18 | * Example Usage:
19 | * ```jsx
20 | *
24 | * ```
25 | */
26 | const CreateContainer = ({ isThemeLight, data }) => {
27 | return (
28 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default CreateContainer;
40 |
--------------------------------------------------------------------------------
/app/src/components/StateManagement/DisplayTab/useResizeObserver.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import ResizeObserver from 'resize-observer-polyfill';
3 |
4 | /**
5 | * A custom React hook that allows you to monitor changes in the dimensions of an HTML element.
6 | * It uses the `ResizeObserver` API to observe the specified element and updates the state
7 | * with the new dimensions whenever a change is detected.
8 | *
9 | * This hook is useful for responsive components that need to adjust their layout or functionality
10 | * based on their size, and it abstracts the setup and teardown logic associated with `ResizeObserver`
11 | * to make it easy to use within a React component.
12 | *
13 | * @param {React.RefObject} ref - A React ref attached to the element whose dimensions you want to monitor.
14 | * @returns {DOMRectReadOnly | null} The latest dimensions of the observed element, or `null` if the dimensions are not available.
15 | *
16 | * The returned object includes properties such as `width`, `height`, `top`, `right`, `bottom`, and `left`,
17 | * providing a comprehensive overview of the element's size and position relative to its containing block.
18 | *
19 | * Usage:
20 | * 1. Attach a ref to your component using `React.useRef()`.
21 | * 2. Pass this ref to the `useResizeObserver` hook.
22 | * 3. Use the returned dimensions to adjust your component's styling or behavior.
23 | *
24 | * Example:
25 | * ```jsx
26 | * const MyResponsiveComponent = () => {
27 | * const myRef = useRef();
28 | * const dimensions = useResizeObserver(myRef);
29 | *
30 | * return
;
33 | * };
34 | * ```
35 | *
36 | * Note:
37 | * Make sure to polyfill `ResizeObserver` in environments that do not support it, as this hook
38 | * relies on that API to function properly.
39 | */
40 | const useResizeObserver = (
41 | ref: React.RefObject
42 | ): DOMRectReadOnly | null => {
43 | const [dimensions, setDimensions] = useState(null);
44 | useEffect(() => {
45 | // the element being observed (div with green border)
46 | const observeTarget = ref.current;
47 | const resizeObserver = new ResizeObserver((entries) => {
48 | entries.forEach((entry) => {
49 | // contentRect is an object containing the dimensions of the observed element
50 | setDimensions(entry.contentRect);
51 | });
52 | });
53 | resizeObserver.observe(observeTarget);
54 | return () => {
55 | resizeObserver.unobserve(observeTarget);
56 | };
57 | }, [ref]);
58 | return dimensions;
59 | };
60 |
61 | export default useResizeObserver;
62 |
--------------------------------------------------------------------------------
/app/src/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | interface TooltipProps {
4 | label: string;
5 | isCollabTab: boolean;
6 | children: React.ReactNode;
7 | }
8 |
9 | const Tooltip: React.FC = ({ label, isCollabTab, children }) => {
10 | const [showTooltip, setShowTooltip] = useState(false);
11 |
12 | const handleMouseEnter = () => {
13 | setShowTooltip(true);
14 | };
15 |
16 | const handleMouseLeave = () => {
17 | setShowTooltip(false);
18 | };
19 |
20 | return (
21 |
22 | {children}
23 | {showTooltip && (
24 |
41 | {label}
42 |
56 |
57 | )}
58 |
59 | );
60 | };
61 |
62 | export default Tooltip;
63 |
--------------------------------------------------------------------------------
/app/src/components/bottom/CreationPanel.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React from 'react';
3 | import HTMLPanel from '../left/HTMLPanel';
4 | import { useSelector } from 'react-redux';
5 | import { RootState } from '../../redux/store';
6 |
7 | /**
8 | * A container component that organizes the user interface elements for creating various aspects of the application.
9 | * It includes the ComponentPanel and HTMLPanel, each responsible for different parts of the application's creation process.
10 | * The appearance of these panels is controlled by the Redux store's style state, allowing for dynamic styling.
11 | *
12 | * @param {Object} props - Component props.
13 | * @param {boolean} props.isThemeLight - Indicates if the light theme is active, used to adjust the styling of child components.
14 | *
15 | * Redux State Dependencies:
16 | * - `styleSlice`: The style settings from the Redux store which determine the CSS styles applied to the creation panel.
17 | *
18 | * @returns {JSX.Element} A React element that renders the creation panel containing the component and HTML panels,
19 | * configured according to the theme specified in the props.
20 | */
21 | const CreationPanel = (props): JSX.Element => {
22 | const style = useSelector((store: RootState) => store.styleSlice);
23 | return (
24 |
25 | {/* NOTE: This component has been moved to ModulePanel.tsx
26 | */}
27 |
28 |
29 | );
30 | };
31 |
32 | export default CreationPanel;
33 |
--------------------------------------------------------------------------------
/app/src/components/bottom/UseStateModal.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React, { useState, useRef } from 'react';
3 | import Modal from '@mui/material/Modal';
4 | import TableStateProps from '../StateManagement/CreateTab/components/TableStateProps';
5 |
6 | /**
7 | * A React component that provides a modal interface for linking state properties to component attributes.
8 | * It displays a list of available state properties in a table format and allows the user to select one to associate
9 | * with a specified attribute of a component. The modal can be opened by clicking a button and closed using a dedicated close button.
10 | *
11 | * @param {Object} props - Component props.
12 | * @param {Function} props.updateAttributeWithState - Function to update the component attribute with the selected state property.
13 | * @param {string} props.attributeToChange - The name of the attribute in the component to which the state is to be linked.
14 | *
15 | * State:
16 | * - `open`: Boolean to control the visibility of the modal.
17 | * - `stateKey`: Stores the key part of the state property being linked.
18 | * - `statePropsId`: Stores the ID of the state property being linked.
19 | * - `componentProviderId`: Stores the ID of the component that provides the state. Set initially to 1 and can be changed as needed.
20 | *
21 | * @returns {JSX.Element} A React element that renders a button to open the modal and the modal itself containing the TableStateProps component.
22 | */
23 | function UseStateModal({
24 | updateAttributeWithState,
25 | attributeToChange,
26 | }): JSX.Element {
27 | const [open, setOpen] = useState(false);
28 | const [stateKey, setStateKey] = useState('');
29 | const [statePropsId, setStatePropsId] = useState(-1);
30 | const [componentProviderId, setComponentProviderId] = useState(1);
31 | const container = useRef(null);
32 | // table to choose state from
33 | const body = (
34 |
81 | );
82 | }
83 |
84 | export default UseStateModal;
85 |
--------------------------------------------------------------------------------
/app/src/components/left/ComponentsContainer.tsx:
--------------------------------------------------------------------------------
1 | import Grid from '@mui/material/Grid';
2 | import React from 'react';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import { useSelector } from 'react-redux';
5 | import { RootState } from '../../redux/store';
6 | import ComponentPanelItem from '../right/ComponentPanelItem';
7 |
8 | /**
9 | * Displays a panel of reusable components that are not root components.
10 | * This panel lists components that can be reused across different parts of the application.
11 | * Each component item in the list is capable of being focused, which is visually indicated.
12 | * @params
13 | * @returns {JSX.Element} A container that holds a list of `ComponentPanelItem` elements,
14 | * each representing a non-root component from the application state. These components are not
15 | * designated as top-level pages or structures but are reusable UI elements.
16 | */
17 | const ComponentsContainer = ({ handleClickEditModule }): JSX.Element => {
18 | const classes = useStyles();
19 | const state = useSelector((store: RootState) => store.appState);
20 |
21 | const isFocus = (targetId: number) => (state.canvasFocus.componentId === targetId);
22 | return (
23 |
45 | );
46 | };
47 |
48 | const useStyles = makeStyles({
49 | panelWrapper: {
50 | display: 'flex',
51 | flexDirection: 'column',
52 | alignItems: 'center',
53 | flexGrow: 1,
54 | overflow: 'auto',
55 | },
56 | panelWrapperList: {
57 | minHeight: 'auto',
58 | },
59 | lightThemeFontColor: {
60 | color: '#fff',
61 | },
62 | darkThemeFontColor: {
63 | color: '#fff',
64 | },
65 | });
66 |
67 | export default ComponentsContainer;
68 |
--------------------------------------------------------------------------------
/app/src/components/left/ContentArea.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import Box from '@mui/material/Box';
3 | import ModulePanel from './ModulePanel';
4 | import React from 'react';
5 | import RoomsContainer from './RoomsContainer';
6 | import Settings from './Settings';
7 | import CreateContainer from './CreateContainer';
8 |
9 | interface ContentAreaProps {
10 | activeTab: number | null;
11 | isVisible: boolean;
12 | }
13 |
14 | /**
15 | * TabPanel is a functional component that conditionally renders its children
16 | * based on whether its index matches the currently active tab. This allows for
17 | * efficient rendering of tabbed content only when the tab is active, improving
18 | * performance and user experience by not rendering hidden tab content.
19 | *
20 | * @param {Object} props - Component props
21 | * @param {React.ReactNode} props.children - The content to be rendered when this tab is active.
22 | * @param {number | null} props.activeTab - The index of the currently active tab.
23 | * @param {number} props.index - The index of this specific tab panel.
24 | * @returns {JSX.Element} A Box component from MUI that renders children if it's the active tab.
25 | */
26 | const TabPanel: React.FC<{
27 | children: React.ReactNode;
28 | activeTab: number | null;
29 | index: number;
30 | }> = ({ children, activeTab, index }) => {
31 | return (
32 | {activeTab === index && children}
33 | );
34 | };
35 |
36 | const panels = [, , ];
37 |
38 | /**
39 | * ContentArea component that renders different panels based on the active tab.
40 | * This component acts as a dynamic container for switching between different sections
41 | * of the application like elements, components, rooms, profile page, and settings
42 | * depending on user interaction with the tab interface.
43 | *
44 | * The visibility of the entire container can be toggled, which is controlled by the `isVisible` prop.
45 | *
46 | * @param {Object} props - Component props
47 | * @param {number | null} props.activeTab - The index of the currently active tab; controls which tab content is visible.
48 | * @param {boolean} props.isVisible - Flag indicating whether the content area should be displayed.
49 | * @returns {JSX.Element} The content area component with conditional rendering based on the active tab.
50 | */
51 | const ContentArea: React.FC = ({ activeTab, isVisible }) => {
52 | return (
53 |
65 | );
66 | };
67 |
68 | export default ContentArea;
69 |
--------------------------------------------------------------------------------
/app/src/components/left/CreateContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Grid from '@mui/material/Grid';
3 | import makeStyles from '@mui/styles/makeStyles';
4 | import MUIItem from './MUIItem';
5 | import HTMLItem from './HTMLItem';
6 | import { useSelector, useDispatch } from 'react-redux';
7 | import { RootState } from '../../redux/store';
8 | import CreatePanel from './CreatePanel';
9 | import Box from '@mui/material/Box';
10 | import { useCallback, useEffect } from 'react';
11 | import ComponentDrag from './ComponentDrag';
12 |
13 | import {
14 | deleteChild,
15 | deleteElement
16 | } from '../../redux/reducers/slice/appStateSlice';
17 | import { emitEvent } from '../../helperFunctions/socket';
18 |
19 | /**
20 | *
21 | * A functional component that renders the CreatePanel within a simple container.
22 | * The CreateContainer currently acts as a wrapper for the CreatePanel.
23 | * /**
24 | * CreateContainer serves as the left-hand side container in the application, primarily responsible
25 | * for hosting user interaction elements such as `DragDropPanel` and `MUIDragDropPanel`. This component handles user inputs
26 | * related to component selection and arrangement via drag-and-drop interfaces.
27 | *
28 | * It also includes key bindings to enhance user interaction, such as deleting a child component
29 | * with the 'Backspace' key when focus is not on text input fields.
30 | *
31 | * Props:
32 | * @param {Object} props - The properties passed down to this component.
33 | * @param {boolean} props.isThemeLight - Indicates if the current theme is light, affecting the visual styling.
34 | *
35 | * @returns {JSX.Element} The container element that holds UI sections for component interaction.
36 | *
37 | *
38 | * @returns {JSX.Element}
39 | * @example
40 | * return (
41 | *
42 | * )
43 | */
44 |
45 | const CreateContainer = (props): JSX.Element => {
46 | const contextParam = useSelector((store: RootState) => store.contextSlice);
47 | const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
48 |
49 | const dispatch = useDispatch();
50 |
51 | const handleDelete = () => {
52 | dispatch(deleteChild({ id: {}, contextParam: contextParam }));
53 | if (roomCode) {
54 | emitEvent('deleteChildAction', roomCode, {
55 | id: {},
56 | contextParam: contextParam
57 | });
58 | }
59 | };
60 |
61 | const keyBindedFunc = useCallback((e) => {
62 | if (
63 | e.key === 'Backspace' &&
64 | e.target.tagName !== 'TEXTAREA' &&
65 | e.target.tagName !== 'INPUT'
66 | )
67 | handleDelete();
68 | }, []);
69 |
70 | // useEffect(() => {
71 | // document.addEventListener('keydown', keyBindedFunc);
72 | // return () => {
73 | // document.removeEventListener('keydown', keyBindedFunc);
74 | // };
75 | // }, []);
76 |
77 | return (
78 |
89 |
90 |
91 | );
92 | };
93 |
94 | export default CreateContainer;
95 |
--------------------------------------------------------------------------------
/app/src/components/left/HeaderButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Popover, { PopoverProps } from '@mui/material/Popover';
4 | import Typography from '@mui/material/Typography';
5 | import makeStyles from '@mui/styles/makeStyles';
6 | import Button from '@mui/material/Button';
7 | import HelpIcon from '@mui/icons-material/Help';
8 |
9 | const HeaderButton = (props) => {
10 | const [anchorEl, setAnchorEl] =
11 | React.useState(null);
12 | const classes = useStyles();
13 | const handleClickPopover = (event: React.MouseEvent) => {
14 | setAnchorEl(anchorEl ? null : event.currentTarget);
15 | };
16 |
17 | const handleClose = () => {
18 | setAnchorEl(null);
19 | };
20 | const open = Boolean(anchorEl);
21 | const id = open ? open : undefined;
22 |
23 | return (
24 |
25 |
55 |
56 | );
57 | };
58 |
59 | const useStyles = makeStyles({
60 | headerButton: {
61 | alignSelf: 'center'
62 | },
63 | popover: {
64 | backgroundColor: '#ffdbbb',
65 | display: 'flex',
66 | color: 'black',
67 | fontSize: '0.8rem',
68 | padding: '8px',
69 | width: '300px'
70 | },
71 | popoverIcon: {
72 | paddingRight: '10px',
73 | paddingLeft: '8px',
74 | paddingTop: '10px'
75 | }
76 | });
77 | export default HeaderButton;
78 |
--------------------------------------------------------------------------------
/app/src/components/left/TabWithTooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tab } from '@mui/material';
3 | import { AddBox, Folder, Groups2 } from '@mui/icons-material';
4 | import Tooltip from '../Tooltip';
5 |
6 | interface TabWithTooltipProps {
7 | label: string;
8 | value: number;
9 | activeTab: number;
10 | handleTabChange: (event: React.ChangeEvent<{}>, value: number) => void;
11 | }
12 |
13 | const TabWithTooltip: React.FC = ({
14 | label,
15 | value,
16 | activeTab,
17 | handleTabChange
18 | }) => {
19 | let iconType;
20 | if (value === 0) {
21 | iconType = ;
22 | } else if (value === 1) {
23 | iconType = ;
24 | } else if (value === 2) {
25 | iconType = ;
26 | }
27 |
28 | const isCollabTab = label === 'Collab';
29 |
30 | return (
31 |
32 | handleTabChange(event, value)}
46 | />
47 |
48 | );
49 | };
50 |
51 | export default TabWithTooltip;
52 |
--------------------------------------------------------------------------------
/app/src/components/main/AddRoute.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 | import { AddRoutes } from '../../interfaces/Interfaces';
5 | import { addChild } from '../../redux/reducers/slice/appStateSlice';
6 | import { RootState } from '../../redux/store';
7 | import { emitEvent } from '../../helperFunctions/socket';
8 |
9 | /**
10 | * Provides a button that when clicked, dispatches an action to add a new route as a child element in the application's state.
11 | * This component is typically used in scenarios where dynamic route addition is needed within a React application managing routes state via Redux.
12 | *
13 | * @param {Object} props - Component props.
14 | * @param {number} props.id - The ID of the parent element to which the new route should be added.
15 | * @returns {JSX.Element} A React element representing a button that adds a route.
16 | */
17 | function AddRoute({ id }: AddRoutes): JSX.Element {
18 | const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
19 | const dispatch = useDispatch();
20 | const contextParam = useSelector((store: RootState) => store.contextSlice);
21 | const handleClick = (id: number): void => {
22 | dispatch(
23 | addChild({
24 | type: 'HTML Element',
25 | typeId: -1,
26 | childId: id, // this is the id of the parent to attach it to
27 | contextParam: contextParam,
28 | }),
29 | );
30 | if (roomCode) {
31 | emitEvent('addChildAction', roomCode, {
32 | type: 'HTML Element',
33 | typeId: -1,
34 | childId: id,
35 | contextParam: contextParam,
36 | });
37 |
38 | console.log('emit addChildAction event is triggered in AddRoute!');
39 | }
40 | };
41 |
42 | return (
43 |
44 |
47 |
48 | );
49 | }
50 |
51 | export default AddRoute;
52 |
--------------------------------------------------------------------------------
/app/src/components/main/DeleteButton.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 | import { Clear } from '@mui/icons-material';
5 | import { DeleteButtons } from '../../interfaces/Interfaces';
6 | import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
7 | import { RootState } from '../../redux/store';
8 | import { emitEvent } from '../../helperFunctions/socket';
9 |
10 | /**
11 | * `DeleteButton` is a React component that renders a button for deleting a specific HTML element or component within the application.
12 | * It uses Redux actions to manage the state and potentially emits events over sockets for collaborative environments.
13 | *
14 | * @param {Object} props - The component props.
15 | * @param {number} props.id - The unique identifier of the component or HTML element to be deleted.
16 | * @param {string} props.name - The name of the component or HTML element, used for identification in the UI or logs.
17 | * @param {Function} [props.onClickHandler] - An optional function to handle additional or preparatory actions on button click before the deletion occurs.
18 | *
19 | * @returns {JSX.Element} A button element that triggers the deletion of the specified component or HTML element when clicked.
20 | */
21 | function DeleteButton({
22 | id,
23 | name,
24 | onClickHandler,
25 | }: DeleteButtons): JSX.Element {
26 | const contextParam = useSelector((store: RootState) => store.contextSlice);
27 |
28 | const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
29 |
30 | const dispatch = useDispatch();
31 |
32 | const deleteHTMLtype = (id: number) => {
33 | dispatch(deleteChild({ id: id, contextParam: contextParam }));
34 | if (roomCode) {
35 | emitEvent('deleteChildAction', roomCode, {
36 | id,
37 | contextParam,
38 | });
39 | }
40 | };
41 |
42 | return (
43 |
44 |
57 |
58 | );
59 | }
60 |
61 | export default DeleteButton;
62 |
--------------------------------------------------------------------------------
/app/src/components/main/IndirectChild.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import React from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 | import { combineStyles } from '../../helperFunctions/combineStyles';
5 | import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
6 | import { Component } from '../../interfaces/Interfaces';
7 | import DeleteButton from './DeleteButton';
8 | import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
9 | import { RootState } from '../../redux/store';
10 |
11 | /**
12 | * A component representing an indirect child element that may contain a navigation link to another component.
13 | * It can display either a placeholder or a direct link to another component based on its configuration.
14 | *
15 | * @param {Object} props - The properties passed to the component.
16 | * @param {Object} props.style - Custom styles applied to the component instance.
17 | * @param {React.ReactNode} props.children - Nested child components or elements.
18 | * @param {string} props.placeHolder - Placeholder text displayed when no link is active.
19 | * @param {number} props.linkId - Identifier for the linked component if available.
20 | * @param {number} props.childId - Unique identifier for the child component instance.
21 | * @param {string} props.name - Display name of the component, used for identification within the UI.
22 | * @returns {JSX.Element} A styled component that optionally acts as a navigation link to another component.
23 | */
24 | function IndirectChild({
25 | style,
26 | children,
27 | placeHolder,
28 | linkId,
29 | childId,
30 | name,
31 | }) {
32 | const state = useSelector((store: RootState) => store.appState);
33 | const dispatch = useDispatch();
34 | let combinedStyle = combineStyles(globalDefaultStyle, style);
35 | // when a user clicks a link, the focus should change to that component
36 | function onClickHandlerRoute(event) {
37 | event.stopPropagation();
38 | dispatch(changeFocus({ componentId: linkId, childId: null }));
39 | }
40 | let linkName: string;
41 | // if there's a link in this component, then include a link
42 | if (linkId) {
43 | linkName = state.components.find(
44 | (comp: Component) => comp.id === linkId,
45 | ).name;
46 | combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
47 | }
48 |
49 | return (
50 |