fix(web): Cancel variable snapshot
This commit is contained in:
@@ -40,7 +40,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [expandedParent, setExpandedParent] = useState<Suggestion | null>(null);
|
const [expandedParentKey, setExpandedParentKey] = useState<string | null>(null);
|
||||||
const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 });
|
const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 });
|
||||||
const [childPanelPos, setChildPanelPos] = useState({ top: 0, right: 0 });
|
const [childPanelPos, setChildPanelPos] = useState({ top: 0, right: 0 });
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -84,6 +84,10 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
? filteredOptions.find(o => o.children?.some(c => `{{${c.value}}}` === value))
|
? filteredOptions.find(o => o.children?.some(c => `{{${c.value}}}` === value))
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
|
const expandedParent = expandedParentKey
|
||||||
|
? filteredOptions.find(o => o.key === expandedParentKey) ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
const groupedSuggestions = filteredOptions.reduce((groups: Record<string, Suggestion[]>, s) => {
|
const groupedSuggestions = filteredOptions.reduce((groups: Record<string, Suggestion[]>, s) => {
|
||||||
const nodeId = s.nodeData.id as string;
|
const nodeId = s.nodeData.id as string;
|
||||||
if (!groups[nodeId]) groups[nodeId] = [];
|
if (!groups[nodeId]) groups[nodeId] = [];
|
||||||
@@ -139,7 +143,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
) {
|
) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setSearch('');
|
setSearch('');
|
||||||
setExpandedParent(null);
|
setExpandedParentKey(null);
|
||||||
setChildPanelPos({ top: 0, right: 0 });
|
setChildPanelPos({ top: 0, right: 0 });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -159,7 +163,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
onChange?.(`{{${suggestion.value}}}`, suggestion);
|
onChange?.(`{{${suggestion.value}}}`, suggestion);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setSearch('');
|
setSearch('');
|
||||||
setExpandedParent(null);
|
setExpandedParentKey(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -312,16 +316,16 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
if (s.disabled) return;
|
if (s.disabled) return;
|
||||||
if (hasChildren) {
|
if (hasChildren) {
|
||||||
updateChildPos(s.key);
|
updateChildPos(s.key);
|
||||||
setExpandedParent(prev => prev?.key === s.key ? null : s);
|
setExpandedParentKey(prev => prev === s.key ? null : s.key);
|
||||||
}
|
}
|
||||||
handleSelect(s);
|
handleSelect(s);
|
||||||
}}
|
}}
|
||||||
onMouseEnter={() => {
|
onMouseEnter={() => {
|
||||||
if (hasChildren) {
|
if (hasChildren) {
|
||||||
updateChildPos(s.key);
|
updateChildPos(s.key);
|
||||||
setExpandedParent(s);
|
setExpandedParentKey(s.key);
|
||||||
} else {
|
} else {
|
||||||
setExpandedParent(null);
|
setExpandedParentKey(null);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -358,7 +362,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
|
|||||||
id="variable-select-child-panel"
|
id="variable-select-child-panel"
|
||||||
className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:text-[12px] rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
|
className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:text-[12px] rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
|
||||||
style={{ top: childPanelPos.top, right: childPanelPos.right }}
|
style={{ top: childPanelPos.top, right: childPanelPos.right }}
|
||||||
onMouseEnter={() => setExpandedParent(expandedParent)}
|
onMouseEnter={() => setExpandedParentKey(expandedParentKey)}
|
||||||
>
|
>
|
||||||
<div className="rb:pb-2 rb:mb-1 rb:font-medium rb:text-[#5B6167] rb-border-b">
|
<div className="rb:pb-2 rb:mb-1 rb:font-medium rb:text-[#5B6167] rb-border-b">
|
||||||
<Flex justify="space-between" align="center" gap={8}>
|
<Flex justify="space-between" align="center" gap={8}>
|
||||||
|
|||||||
Reference in New Issue
Block a user