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

DataLinks: Improve Data-Links AutoComplete Logic (#58934)

Browse Source 
* refactor dollar-sign logic to consider cursor position

* refactor logic

* add inline comment for obscure collapse() function
This commit is contained in:
matt abrams 2022-11-23 16:59:37 -10:00 committed by GitHub
parent 5888f53aab
commit f4574f098d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,6 +121,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
default: default:
return next(); return next();
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -137,11 +138,12 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
}, []); }, []);
const onVariableSelect = (item: VariableSuggestion, editor = editorRef.current!) => { const onVariableSelect = (item: VariableSuggestion, editor = editorRef.current!) => {
const includeDollarSign = Plain.serialize(editor.value).slice(-1) !== '$'; const precedingChar: string = getCharactersAroundCaret();
const precedingDollar = precedingChar === '$';
if (item.origin !== VariableOrigin.Template || item.value === DataLinkBuiltInVars.includeVars) { if (item.origin !== VariableOrigin.Template || item.value === DataLinkBuiltInVars.includeVars) {
editor.insertText(`${includeDollarSign ? '$' : ''}\{${item.value}}`); editor.insertText(`${precedingDollar ? '' : '$'}\{${item.value}}`);
} else { } else {
editor.insertText(`${includeDollarSign ? '$' : ''}\{${item.value}:queryparam}`); editor.insertText(`${precedingDollar ? '' : '$'}\{${item.value}:queryparam}`);
} }
setLinkUrl(editor.value); setLinkUrl(editor.value);
@ -151,10 +153,28 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
stateRef.current.onChange(Plain.serialize(editor.value)); stateRef.current.onChange(Plain.serialize(editor.value));
}; };
const getCharactersAroundCaret = () => {
const input: HTMLSpanElement | null = document.getElementById('data-link-input')!;
let precedingChar = '',
sel: Selection | null,
range: Range;
if (window.getSelection) {
sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
range = sel.getRangeAt(0).cloneRange();
// Collapse to the start of the range
range.collapse(true);
range.setStart(input, 0);
precedingChar = range.toString().slice(-1);
}
}
return precedingChar;
};
return ( return (
<div className={styles.wrapperOverrides}> <div className={styles.wrapperOverrides}>
<div className="slate-query-field__wrapper"> <div className="slate-query-field__wrapper">
<div className="slate-query-field"> <div id="data-link-input" className="slate-query-field">
{showingSuggestions && ( {showingSuggestions && (
<Portal> <Portal>
<ReactPopper <ReactPopper