hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix namespace selector not closing after multi select

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-21 14:23:14 -04:00
parent fc0baa5b3b
commit 8c6aabf29b
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
View File

@ -5,12 +5,14 @@
import { NamespaceSelectFilterModel } from "./namespace-select-filter-model"; import { NamespaceSelectFilterModel } from "./namespace-select-filter-model";
import { getInjectable } from "@ogre-tools/injectable"; import { getInjectable } from "@ogre-tools/injectable";
import namespaceStoreInjectable from "../store.injectable"; import namespaceStoreInjectable from "../store.injectable";
import isMacInjectable from "../../../../common/vars/is-mac.injectable";
const namespaceSelectFilterModelInjectable = getInjectable({ const namespaceSelectFilterModelInjectable = getInjectable({
id: "namespace-select-filter-model", id: "namespace-select-filter-model",
instantiate: (di) => new NamespaceSelectFilterModel({ instantiate: (di) => new NamespaceSelectFilterModel({
namespaceStore: di.inject(namespaceStoreInjectable), namespaceStore: di.inject(namespaceStoreInjectable),
isMac: di.inject(isMacInjectable),
}), }),
}); });

32
src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
View File

@ -5,7 +5,6 @@
import React from "react"; import React from "react";
import { observable, action, computed, makeObservable, comparer } from "mobx"; import { observable, action, computed, makeObservable, comparer } from "mobx";
import type { NamespaceStore } from "../store"; import type { NamespaceStore } from "../store";
import { isMac } from "../../../../common/vars";
import type { ActionMeta } from "react-select"; import type { ActionMeta } from "react-select";
import { Icon } from "../../icon"; import { Icon } from "../../icon";
import type { SelectOption } from "../../select"; import type { SelectOption } from "../../select";
@ -13,6 +12,7 @@ import { autoBind } from "../../../utils";
interface Dependencies { interface Dependencies {
readonly namespaceStore: NamespaceStore; readonly namespaceStore: NamespaceStore;
readonly isMac: boolean;
} }
export const selectAllNamespaces = Symbol("all-namespaces-selected"); export const selectAllNamespaces = Symbol("all-namespaces-selected");
@ -21,6 +21,14 @@ export type SelectAllNamespaces = typeof selectAllNamespaces;
export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>; export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>;
export class NamespaceSelectFilterModel { export class NamespaceSelectFilterModel {
private isSelectionKey = (event: React.KeyboardEvent): boolean => {
if (this.dependencies.isMac) {
return event.key === "Meta";
}
return event.key === "Control"; // windows or linux
};
constructor(private readonly dependencies: Dependencies) { constructor(private readonly dependencies: Dependencies) {
makeObservable(this); makeObservable(this);
autoBind(this); autoBind(this);
@ -105,13 +113,17 @@ export class NamespaceSelectFilterModel {
break; break;
case "deselect-option": case "deselect-option":
if (typeof action.option === "string") { if (typeof action.option === "string") {
this.didToggle = true;
this.dependencies.namespaceStore.toggleSingle(action.option); this.dependencies.namespaceStore.toggleSingle(action.option);
} }
break; break;
case "select-option": case "select-option":
if (action.option?.value === selectAllNamespaces) { if (action.option?.value === selectAllNamespaces) {
this.didToggle = true;
this.dependencies.namespaceStore.selectAll(); this.dependencies.namespaceStore.selectAll();
} else if (action.option) { } else if (action.option) {
this.didToggle = true;
if (this.isMultiSelection) { if (this.isMultiSelection) {
this.dependencies.namespaceStore.toggleSingle(action.option.value); this.dependencies.namespaceStore.toggleSingle(action.option.value);
} else { } else {
@ -133,14 +145,20 @@ export class NamespaceSelectFilterModel {
private isMultiSelection = false; private isMultiSelection = false;
onKeyDown(event: React.KeyboardEvent) { onKeyDown(event: React.KeyboardEvent) {
if (isSelectionKey(event)) { if (this.isSelectionKey(event)) {
this.isMultiSelection = true; this.isMultiSelection = true;
} }
} }
private didToggle = false;
onKeyUp(event: React.KeyboardEvent) { onKeyUp(event: React.KeyboardEvent) {
if (isSelectionKey(event)) { if (this.isSelectionKey(event)) {
this.isMultiSelection = false; this.isMultiSelection = false;
if (this.didToggle) {
this.closeMenu();
}
} }
} }
@ -150,11 +168,3 @@ export class NamespaceSelectFilterModel {
this.closeMenu(); this.closeMenu();
} }
} }
const isSelectionKey = (event: React.KeyboardEvent): boolean => {
if (isMac) {
return event.key === "Meta";
}
return event.key === "Control"; // windows or linux
};