1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix order of selected namespaces jumping while menu is open

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-21 14:57:25 -04:00
parent 821169738c
commit 753b953df9

View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import { observable, action, computed, makeObservable, comparer } from "mobx";
import { observable, action, computed, makeObservable, comparer, reaction } from "mobx";
import type { NamespaceStore } from "../store";
import type { ActionMeta } from "react-select";
import { Icon } from "../../icon";
@ -32,20 +32,37 @@ export class NamespaceSelectFilterModel {
constructor(private readonly dependencies: Dependencies) {
makeObservable(this);
autoBind(this);
reaction(
() => this.menuIsOpen.get(),
(isOpen) => {
if (!isOpen) { // falling edge of menu being open
this.optionsSortingSelected.replace(this.selectedNames.get());
}
},
);
}
readonly selectedNames = computed(() => new Set(this.dependencies.namespaceStore.contextNamespaces), {
readonly menuIsOpen = observable.box(false);
private readonly selectedNames = computed(() => new Set(this.dependencies.namespaceStore.contextNamespaces), {
equals: comparer.structural,
});
/**
* This set is only updated on the falling edge of the menu being open. That way while the menu is
* open the order of the items doesn't change
*/
private readonly optionsSortingSelected = observable.set<string>(this.selectedNames.get());
readonly options = computed((): readonly NamespaceSelectFilterOption[] => {
const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName());
const selectedNames = this.selectedNames.get();
baseOptions.sort((
(left, right) =>
+selectedNames.has(right)
- +selectedNames.has(left)
+this.optionsSortingSelected.has(right)
- +this.optionsSortingSelected.has(left)
));
return [
@ -82,8 +99,6 @@ export class NamespaceSelectFilterModel {
);
}
readonly menuIsOpen = observable.box(false);
@action
closeMenu() {
this.menuIsOpen.set(false);