thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

show history widget on left mouse click

Browse Source
This commit is contained in:
bedlam343 2024-05-23 00:26:05 -07:00
parent c0b11d37a9
commit e9c90ae728
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Widget/ListWidget.tsx
View File

@ -1,7 +1,10 @@
import { useEffect, useRef, useState } from 'react';
import Element from 'src/components/Element/Element';
import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
import { updateListHistoryChannel } from 'src/redux/slices/componentSlice';
import {
getListHistoryChannel,
updateListHistoryChannel,
} from 'src/redux/slices/componentSlice';
import { getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
import type { Widget } from 'src/types/widget';
@ -12,7 +15,9 @@ type ListWidgetProps = {
const ListWidget = ({ widget }: ListWidgetProps) => {
const elementsInGaze = useAppSelector(getElementsInGaze);
const gazesAndKeys = useAppSelector(getGazesAndKeys);
const { activeElementId } = useAppSelector(getListHistoryChannel);
// use this to control the UI to show if the list is overflowed or not
const [listOverflowed, setListOverflowed] = useState<boolean>(false);
const dispatch = useAppDispatch();
@ -39,7 +44,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
gazeAndKey.keyPress === 'KeyS' || gazeAndKey.keyPress === 'ArrowDown',
)
) {
console.log('scrolling down');
listRef.current?.scrollBy(0, 100);
}
// check if any key is 'W' or 'ArrowUp' and scroll up
@ -49,15 +53,21 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
gazeAndKey.keyPress === 'KeyW' || gazeAndKey.keyPress === 'ArrowUp',
)
) {
console.log('scrolling up');
listRef.current?.scrollBy(0, -100);
}
}, [listInGaze, gazesAndKeys]);
// update the active conversation and element in the list-history channel
// update the active conversation and element in the list-history channel on mouse left-click
useEffect(() => {
const mouseLeftClick = gazesAndKeys.find(
(gazeAndKey) => gazeAndKey.keyPress === '0',
);
if (!mouseLeftClick || !mouseLeftClick.elemsInGaze.length) return;
widget.elements.forEach((element) => {
if (element.id === elementInGazeId) {
// just pick the first element in the gaze for now
if (element.id === mouseLeftClick.elemsInGaze[0].id) {
// @ts-ignore
if (!element.message) {
// FIX: all elements should have a message (at least the ones in the list)
@ -75,7 +85,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
);
}
});
}, [elementInGazeId, dispatch, widget.elements]);
}, [gazesAndKeys, dispatch, elementInGazeId, widget.elements]);
// check if the list is overflowed
useEffect(() => {
@ -123,7 +133,10 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
: 'bg-[#323235] text-[24px]';
// style for active element (element due to which the history widget is open)
const activeElementStyle = '';
const activeElementStyle =
element.id === activeElementId
? 'bg-[#444449] text-[28px] font-medium border-4 border-white'
: '';
return (
// ListWidget enforces a certain layout and style for its Elements
@ -131,7 +144,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
id={element.id}
key={element.id}
style={{ height: 80 }}
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle}`}
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle} ${activeElementStyle}`}
>
<Element element={element} styleClass="w-full h-full">
{/* Nested children here if wanted.. */}