IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas - Clear button bugfix (#53068)

Browse Source
This commit is contained in:
Adela Almasan 2022-08-01 14:40:01 -05:00 committed by GitHub
parent 0d817987ec
commit f2436b15bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/OptionsUI/string.tsx
View File

@ -1,15 +1,14 @@
import React, { useCallback } from 'react';
import React, { ReactNode, useCallback } from 'react';
import { StandardEditorProps, StringFieldConfigSettings } from '@grafana/data';
import { Input, TextArea } from '@grafana/ui';
export const StringValueEditor: React.FC<StandardEditorProps<string, StringFieldConfigSettings>> = ({
value,
onChange,
item,
}) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
suffix?: ReactNode;
}
export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
const onValueChange = useCallback(
(e: React.SyntheticEvent) => {
let nextValue = value ?? '';
@ -39,6 +38,7 @@ export const StringValueEditor: React.FC<StandardEditorProps<string, StringField
rows={(item.settings?.useTextarea && item.settings.rows) || 5}
onBlur={onValueChange}
onKeyDown={onValueChange}
suffix={suffix}
/>
);
};

41
public/app/features/dimensions/editors/TextDimensionEditor.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useCallback } from 'react';
import React, { FC, useCallback, useState } from 'react';
import {
FieldNamePickerConfigSettings,
@ -30,6 +30,9 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
const { value, context, onChange } = props;
const labelWidth = 9;
// force re-render on clear fixed text
const [refresh, setRefresh] = useState(0);
const onModeChange = useCallback(
(mode) => {
onChange({
@ -56,15 +59,11 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
...value,
fixed,
});
},
[onChange, value]
);
const onClearFixedText = () => {
// Need to first change to field in order to clear fixed value in editor
onChange({ mode: TextDimensionMode.Field, fixed: '', field: '' });
onChange({ mode: TextDimensionMode.Fixed, fixed: '', field: '' });
};
setRefresh(refresh + 1);
},
[onChange, refresh, value]
);
const mode = value?.mode ?? TextDimensionMode.Fixed;
@ -88,19 +87,19 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
</InlineFieldRow>
)}
{mode === TextDimensionMode.Fixed && (
<InlineFieldRow>
<InlineFieldRow key={refresh}>
<InlineField label={'Value'} labelWidth={labelWidth} grow={true}>
<>
<StringValueEditor
context={context}
value={value?.fixed}
onChange={onFixedChange}
item={dummyStringSettings}
/>
{value?.fixed && (
<Button icon="times" variant="secondary" fill="text" size="sm" onClick={onClearFixedText} />
)}
</>
<StringValueEditor
context={context}
value={value?.fixed}
onChange={onFixedChange}
item={dummyStringSettings}
suffix={
value?.fixed && (
<Button icon="times" variant="secondary" fill="text" size="sm" onClick={() => onFixedChange('')} />
)
}
/>
</InlineField>
</InlineFieldRow>
)}