ListElement
This commit is contained in:
parent
9ce9389ecb
commit
f4cc43fbf1
36
src/components/Element/Complex/ListElement.tsx
Normal file
36
src/components/Element/Complex/ListElement.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { type ReactNode } from 'react';
|
||||
import type { Element } from 'src/types/element';
|
||||
import RequestApprovalElement from './RequestApprovalElement';
|
||||
import MissileIncomingElement from './MissileIncomingElement';
|
||||
|
||||
type ListElementProps = {
|
||||
element: Element;
|
||||
outerDivStyleClass: string;
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
const ListElement = ({
|
||||
element,
|
||||
outerDivStyleClass,
|
||||
children,
|
||||
}: ListElementProps) => {
|
||||
const renderElement = () => {
|
||||
switch (element.type) {
|
||||
case 'request-approval':
|
||||
return <RequestApprovalElement element={element} />;
|
||||
case 'missile-incoming':
|
||||
return <MissileIncomingElement element={element} />;
|
||||
default:
|
||||
return <div>{element.type}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={outerDivStyleClass}>
|
||||
{renderElement()}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListElement;
|
@ -1,9 +0,0 @@
|
||||
import type { Element as ElementType } from 'src/types/modalities';
|
||||
|
||||
type ElementListProps = {
|
||||
elements: ElementType[];
|
||||
};
|
||||
|
||||
const ElementList = ({ elements }: ElementListProps) => {};
|
||||
|
||||
export default ElementList;
|
@ -1,5 +1,4 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Element from 'src/components/Element/Element';
|
||||
import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
|
||||
import {
|
||||
updateCommunication,
|
||||
@ -7,6 +6,7 @@ import {
|
||||
} from 'src/redux/slices/communicationSlice';
|
||||
import { getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
|
||||
import type { Widget } from 'src/types/widget';
|
||||
import ListElement from 'src/components/Element/Complex/ListElement';
|
||||
|
||||
type ListWidgetProps = {
|
||||
widget: Widget;
|
||||
@ -156,16 +156,15 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
: '';
|
||||
|
||||
return (
|
||||
// ListWidget enforces a certain layout and style for its Elements
|
||||
<div
|
||||
id={element.id}
|
||||
key={element.id}
|
||||
style={{ height: LIST_ELEMENT_HEIGHT }}
|
||||
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle} ${activeElementStyle}`}
|
||||
>
|
||||
<Element element={element} styleClass="w-full h-full">
|
||||
<ListElement element={element} outerDivStyleClass="w-full h-full">
|
||||
{/* Nested children here if wanted.. */}
|
||||
</Element>
|
||||
</ListElement>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
Loading…
Reference in New Issue
Block a user