Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: explicit mouse move event user action #6549

Merged
merged 4 commits into from
Nov 27, 2024
+42 −27
Merged

fix: explicit mouse move event user action #6549

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
efa5795
fix: explicit mouse move event user action
vikrantgupta25 Nov 27, 2024
e89b64b
fix: handle next element selection on click
vikrantgupta25 Nov 27, 2024
ee1d153
fix: handle the last 0 case
vikrantgupta25 Nov 27, 2024
02af141
fix: handle search reset
vikrantgupta25 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 41 additions & 27 deletions frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import './LogsFormatOptionsMenu.styles.scss';

import { Button, Input, InputNumber, Tooltip, Typography } from 'antd';
import { DefaultOptionType } from 'antd/es/select';
import cx from 'classnames';
import { LogViewMode } from 'container/LogsTable';
import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
Expand Down Expand Up @@ -106,6 +107,39 @@ export default function LogsFormatOptionsMenu({
}
}, [fontSizeValue]);

function handleColumnSelection(
currentIndex: number,
optionsData: DefaultOptionType[],
): void {
const currentItem = optionsData[currentIndex];
const itemLength = optionsData.length;
if (addColumn && addColumn?.onSelect) {
addColumn?.onSelect(selectedValue, {
label: currentItem.label,
disabled: false,
});

// if the last element is selected then select the previous one
if (currentIndex === itemLength - 1) {
// there should be more than 1 element in the list
if (currentIndex - 1 > 0) {
vikrantgupta25 marked this conversation as resolved.
Show resolved Hide resolved
const prevValue = optionsData[currentIndex - 1]?.value || null;
setSelectedValue(prevValue as string | null);
} else {
// if there is only one element then just select and do nothing
setSelectedValue(null);
}
} else {
// selecting any random element from the list except the last one
const nextIndex = currentIndex + 1;

const nextValue = optionsData[nextIndex]?.value || null;

setSelectedValue(nextValue as string | null);
}
}
}

const handleKeyDown = (e: KeyboardEvent): void => {
if (!selectedValue) return;

Expand All @@ -115,8 +149,6 @@ export default function LogsFormatOptionsMenu({
(item) => item?.value === selectedValue,
);

const currentItem = optionsData[currentIndex];

const itemLength = optionsData.length;

switch (e.key) {
Expand All @@ -137,24 +169,7 @@ export default function LogsFormatOptionsMenu({
}
case 'Enter':
e.preventDefault();
if (addColumn && addColumn?.onSelect) {
addColumn?.onSelect(selectedValue, {
label: currentItem.label,
disabled: false,
});

if (currentIndex === itemLength - 1) {
setSelectedValue(null);
break;
} else {
const nextIndex = currentIndex + 1;

const nextValue = optionsData[nextIndex]?.value || null;

setSelectedValue(nextValue as string | null);
}
}

handleColumnSelection(currentIndex, optionsData);
break;
default:
break;
Expand Down Expand Up @@ -279,7 +294,7 @@ export default function LogsFormatOptionsMenu({
)}

<div className="column-format-new-options" ref={listRef}>
{addColumn?.options?.map(({ label, value }) => (
{addColumn?.options?.map(({ label, value }, index) => (
<div
className={cx('column-name', value === selectedValue && 'selected')}
key={value}
Expand All @@ -290,14 +305,13 @@ export default function LogsFormatOptionsMenu({

initialMouseEnterRef.current = true;
}}
onMouseMove={(): void => {
vikrantgupta25 marked this conversation as resolved.
Show resolved Hide resolved
// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
setSelectedValue(value as string | null);
}}
onClick={(eve): void => {
eve.stopPropagation();

if (addColumn && addColumn?.onSelect) {
addColumn?.onSelect(value, { label, disabled: false });
}

setSelectedValue(null);
handleColumnSelection(index, addColumn?.options || []);
}}
>
<div className="name">
Expand Down
Loading