show history widget on left mouse click
This commit is contained in:
parent
c0b11d37a9
commit
e9c90ae728
@ -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.. */}
|
||||||
|
Loading…
Reference in New Issue
Block a user