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 { useEffect, useRef, useState } from 'react';
import Element from 'src/components/Element/Element'; import Element from 'src/components/Element/Element';
import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; 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 { getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
import type { Widget } from 'src/types/widget'; import type { Widget } from 'src/types/widget';
@ -12,7 +15,9 @@ type ListWidgetProps = {
const ListWidget = ({ widget }: ListWidgetProps) => { const ListWidget = ({ widget }: ListWidgetProps) => {
const elementsInGaze = useAppSelector(getElementsInGaze); const elementsInGaze = useAppSelector(getElementsInGaze);
const gazesAndKeys = useAppSelector(getGazesAndKeys); 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 [listOverflowed, setListOverflowed] = useState<boolean>(false);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -39,7 +44,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
gazeAndKey.keyPress === 'KeyS' || gazeAndKey.keyPress === 'ArrowDown', gazeAndKey.keyPress === 'KeyS' || gazeAndKey.keyPress === 'ArrowDown',
) )
) { ) {
console.log('scrolling down');
listRef.current?.scrollBy(0, 100); listRef.current?.scrollBy(0, 100);
} }
// check if any key is 'W' or 'ArrowUp' and scroll up // 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', gazeAndKey.keyPress === 'KeyW' || gazeAndKey.keyPress === 'ArrowUp',
) )
) { ) {
console.log('scrolling up');
listRef.current?.scrollBy(0, -100); listRef.current?.scrollBy(0, -100);
} }
}, [listInGaze, gazesAndKeys]); }, [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(() => { useEffect(() => {
const mouseLeftClick = gazesAndKeys.find(
(gazeAndKey) => gazeAndKey.keyPress === '0',
);
if (!mouseLeftClick || !mouseLeftClick.elemsInGaze.length) return;
widget.elements.forEach((element) => { 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 // @ts-ignore
if (!element.message) { if (!element.message) {
// FIX: all elements should have a message (at least the ones in the list) // 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 // check if the list is overflowed
useEffect(() => { useEffect(() => {
@ -123,7 +133,10 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
: 'bg-[#323235] text-[24px]'; : 'bg-[#323235] text-[24px]';
// style for active element (element due to which the history widget is open) // 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 ( return (
// ListWidget enforces a certain layout and style for its Elements // ListWidget enforces a certain layout and style for its Elements
@ -131,7 +144,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
id={element.id} id={element.id}
key={element.id} key={element.id}
style={{ height: 80 }} 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"> <Element element={element} styleClass="w-full h-full">
{/* Nested children here if wanted.. */} {/* Nested children here if wanted.. */}