IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 10:03:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

DataLinks: Fix url field not releasing focus (#19804)

Browse Source
This commit is contained in:
Andrej Ocenas 2019-10-16 09:57:51 +02:00 committed by GitHub
parent 7f702f881c
commit 09a599900c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useMemo, useContext, useRef, RefObject } from 'react'; import React, { useState, useMemo, useContext, useRef, RefObject, memo } from 'react';
import { VariableSuggestion, VariableOrigin, DataLinkSuggestions } from './DataLinkSuggestions'; import { VariableSuggestion, VariableOrigin, DataLinkSuggestions } from './DataLinkSuggestions';
import { ThemeContext, DataLinkBuiltInVars, makeValue } from '../../index'; import { ThemeContext, DataLinkBuiltInVars, makeValue } from '../../index';
import { SelectionReference } from './SelectionReference'; import { SelectionReference } from './SelectionReference';
@ -41,7 +41,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`, `,
})); }));
export const DataLinkInput: React.FC<DataLinkInputProps> = ({ value, onChange, suggestions }) => { // This memoised also because rerendering the slate editor grabs focus which created problem in some cases this
// was used and changes to different state were propagated here.
export const DataLinkInput: React.FC<DataLinkInputProps> = memo(({ value, onChange, suggestions }) => {
const editorRef = useRef<Editor>() as RefObject<Editor>; const editorRef = useRef<Editor>() as RefObject<Editor>;
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
const styles = getStyles(theme); const styles = getStyles(theme);
@ -91,6 +93,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = ({ value, onChange, s
const onUrlBlur = React.useCallback((event: Event, editor: CoreEditor, next: () => any) => { const onUrlBlur = React.useCallback((event: Event, editor: CoreEditor, next: () => any) => {
// Callback needed for blur to work correctly // Callback needed for blur to work correctly
stateRef.current.onChange(Plain.serialize(stateRef.current.linkUrl), () => { stateRef.current.onChange(Plain.serialize(stateRef.current.linkUrl), () => {
// This needs to be called after state is updated.
editorRef.current!.blur(); editorRef.current!.blur();
}); });
}, []); }, []);
@ -161,6 +164,6 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = ({ value, onChange, s
</div> </div>
</div> </div>
); );
}; });
DataLinkInput.displayName = 'DataLinkInput'; DataLinkInput.displayName = 'DataLinkInput';

6
packages/grafana-ui/src/types/panel.ts
View File

@ -37,7 +37,11 @@ export interface PanelProps<T = any> {
export interface PanelEditorProps<T = any> { export interface PanelEditorProps<T = any> {
options: T; options: T;
onOptionsChange: (options: T) => void; onOptionsChange: (
options: T,
// callback can be used to run something right after update.
callback?: () => void
) => void;
data: PanelData; data: PanelData;
} }

4
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@ -165,9 +165,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.setState({ searchQuery: '' }); this.setState({ searchQuery: '' });
}; };
onPanelOptionsChanged = (options: any) => { onPanelOptionsChanged = (options: any, callback?: () => void) => {
this.props.panel.updateOptions(options); this.props.panel.updateOptions(options);
this.forceUpdate(); this.forceUpdate(callback);
}; };
onOpenVizPicker = () => { onOpenVizPicker = () => {

45
public/app/plugins/panel/gauge/GaugePanelEditor.tsx
View File

@ -48,24 +48,39 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
}); });
}; };
onDisplayOptionsChanged = (fieldOptions: FieldDisplayOptions) => onDisplayOptionsChanged = (
this.props.onOptionsChange({ fieldOptions: FieldDisplayOptions,
...this.props.options, event?: React.SyntheticEvent<HTMLElement>,
fieldOptions, callback?: () => void
}); ) =>
this.props.onOptionsChange(
{
...this.props.options,
fieldOptions,
},
callback
);
onDefaultsChange = (field: FieldConfig) => { onDefaultsChange = (field: FieldConfig, event?: React.SyntheticEvent<HTMLElement>, callback?: () => void) => {
this.onDisplayOptionsChanged({ this.onDisplayOptionsChanged(
...this.props.options.fieldOptions, {
defaults: field, ...this.props.options.fieldOptions,
}); defaults: field,
},
event,
callback
);
}; };
onDataLinksChanged = (links: DataLink[]) => { onDataLinksChanged = (links: DataLink[], callback?: () => void) => {
this.onDefaultsChange({ this.onDefaultsChange(
...this.props.options.fieldOptions.defaults, {
links, ...this.props.options.fieldOptions.defaults,
}); links,
},
undefined,
callback
);
}; };
render() { render() {