GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 04:39:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: explicit mouse move event user action (#6549)

Browse Source 
* fix: explicit mouse move event user action

* fix: handle next element selection on click

* fix: handle the last 0 case

* fix: handle search reset
This commit is contained in:
Vikrant Gupta 2024-11-27 19:51:57 +05:30 committed by GitHub
parent 6aee991633
commit 813cd845f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
View File

@ -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';
@ -81,6 +82,7 @@ export default function LogsFormatOptionsMenu({
}, 300);
const handleToggleAddNewColumn = (): void => {
addColumn?.onSearch?.('');
setShowAddNewColumnContainer(!showAddNewColumnContainer);
};
@ -106,6 +108,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) {
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;
@ -115,8 +150,6 @@ export default function LogsFormatOptionsMenu({
(item) => item?.value === selectedValue,
);
const currentItem = optionsData[currentIndex];
const itemLength = optionsData.length;
switch (e.key) {
@ -137,24 +170,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;
@ -279,7 +295,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}
@ -290,14 +306,13 @@ export default function LogsFormatOptionsMenu({
initialMouseEnterRef.current = true;
}}
onMouseMove={(): void => {
// 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">