Kiu/VictoriaMetrics
Kiu/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-12-13 13:11:37 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

vmui: fix display of selected value in the selector (#3919)

Browse Source 
vmui: fix selected value in dropdowns for Explore page
This commit is contained in:
Yury Molodov 2023-03-07 16:23:02 +01:00 committed by Aliaksandr Valialkin
parent 77e0e847a8
commit 3e3e23a483
No known key found for this signature in database
GPG Key ID: A72BEC6CD3D0DED1
3 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/vmui/packages/vmui/src/components/Main/Select/MultipleSelectedValue/MultipleSelectedValue.tsx Normal file
View File

@ -0,0 +1,42 @@
import React, { FC } from "preact/compat";
import useDeviceDetect from "../../../../hooks/useDeviceDetect";
import { CloseIcon } from "../../Icons";
import { MouseEvent } from "react";
interface MultipleSelectedValueProps {
values: string[]
onRemoveItem: (val: string) => void
}
const MultipleSelectedValue: FC<MultipleSelectedValueProps> = ({ values, onRemoveItem }) => {
const { isMobile } = useDeviceDetect();
const createHandleClick = (value: string) => (e: MouseEvent) => {
onRemoveItem(value);
e.stopPropagation();
};
if (isMobile) {
return (
<span className="vm-select-input-content__counter">
selected {values.length}
</span>
);
}
return <>
{values.map(item => (
<div
className="vm-select-input-content__selected"
key={item}
>
<span>{item}</span>
<div onClick={createHandleClick(item)}>
<CloseIcon/>
</div>
</div>
))}
</>;
};
export default MultipleSelectedValue;

28
app/vmui/packages/vmui/src/components/Main/Select/Select.tsx
View File

@ -6,6 +6,7 @@ import Autocomplete from "../Autocomplete/Autocomplete";
import { useAppState } from "../../../state/common/StateContext";
import "./style.scss";
import useDeviceDetect from "../../../hooks/useDeviceDetect";
import MultipleSelectedValue from "./MultipleSelectedValue/MultipleSelectedValue";
interface SelectProps {
value: string | string[]
@ -39,8 +40,9 @@ const Select: FC<SelectProps> = ({
const inputRef = useRef<HTMLInputElement>(null);
const isMultiple = useMemo(() => Array.isArray(value), [value]);
const selectedValues = useMemo(() => Array.isArray(value) ? value : undefined, [isMultiple, value]);
const isMultiple = Array.isArray(value);
const selectedValues = Array.isArray(value) ? value : undefined;
const hideInput = isMobile && isMultiple && !!selectedValues?.length;
const textFieldValue = useMemo(() => {
if (openList) return search;
@ -124,23 +126,13 @@ const Select: FC<SelectProps> = ({
ref={autocompleteAnchorEl}
>
<div className="vm-select-input-content">
{!isMobile && selectedValues && selectedValues.map(item => (
<div
className="vm-select-input-content__selected"
key={item}
>
<span>{item}</span>
<div onClick={createHandleClick(item)}>
<CloseIcon/>
</div>
</div>
))}
{isMobile && !!selectedValues?.length && (
<span className="vm-select-input-content__counter">
selected {selectedValues.length}
</span>
{!!selectedValues?.length && (
<MultipleSelectedValue
values={selectedValues}
onRemoveItem={handleSelected}
/>
)}
{!isMobile || (isMobile && (!selectedValues || !selectedValues?.length)) && (
{!hideInput && (
<input
value={textFieldValue}
type="text"

1
docs/CHANGELOG.md
View File

@ -21,6 +21,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
* BUGFIX: prevent from possible panic during [background merge process](https://docs.victoriametrics.com/#storage). It may occur in rare case and was introduced at [v1.85.0](https://docs.victoriametrics.com/CHANGELOG.html#v1850) when implementing [this feature](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3337).
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): stop showing `Please enter a valid Query and execute it` error message on the first load of vmui.
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): support old format of URL params. This should make compatible copying URL between vmui of versions or using `Run in VMUI` button in datasource plugin.
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of the selected value for dropdowns on `Explore` page.
## [v1.88.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.88.1)