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-select-filter.tsx

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-04-12 14:53:24 -04:00
parent 9c388dc499
commit b2d36493ae
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,10 @@ export const selectAllNamespaces = Symbol("all-namespaces-selected");
export type SelectAllNamespaces = typeof selectAllNamespaces; export type SelectAllNamespaces = typeof selectAllNamespaces;
export interface NamespaceSelectFilterOption {
namespace: string | SelectAllNamespaces;
}
export class NamespaceSelectFilterModel { export class NamespaceSelectFilterModel {
constructor(private readonly dependencies: Dependencies) { constructor(private readonly dependencies: Dependencies) {
makeObservable(this, { makeObservable(this, {
@ -27,7 +31,7 @@ export class NamespaceSelectFilterModel {
}); });
} }
readonly options = computed(() => { readonly options = computed((): readonly NamespaceSelectFilterOption[] => {
const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName()); const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName());
baseOptions.sort(( baseOptions.sort((
@ -36,20 +40,22 @@ export class NamespaceSelectFilterModel {
- +this.selectedNames.has(left) - +this.selectedNames.has(left)
)); ));
return [selectAllNamespaces, ...baseOptions] as const; const res = [selectAllNamespaces, ...baseOptions] as const;
return res.map(namespace => ({ namespace }));
}); });
formatOptionLabel = (option: string | SelectAllNamespaces) => { formatOptionLabel = ({ namespace }: NamespaceSelectFilterOption) => {
if (option === selectAllNamespaces) { if (namespace === selectAllNamespaces) {
return "All Namespaces"; return "All Namespaces";
} }
const isSelected = this.isSelected(option); const isSelected = this.isSelected(namespace);
return ( return (
<div className="flex gaps align-center"> <div className="flex gaps align-center">
<Icon small material="layers" /> <Icon small material="layers" />
<span>{option}</span> <span>{namespace}</span>
{isSelected && ( {isSelected && (
<Icon <Icon
small small
@ -61,12 +67,12 @@ export class NamespaceSelectFilterModel {
); );
}; };
getOptionLabel = (option: string | SelectAllNamespaces) => { getOptionLabel = ({ namespace }: NamespaceSelectFilterOption) => {
if (option === selectAllNamespaces) { if (namespace === selectAllNamespaces) {
return "All Namespaces"; return "All Namespaces";
} }
return option; return namespace;
}; };
menuIsOpen = false; menuIsOpen = false;
@ -94,7 +100,7 @@ export class NamespaceSelectFilterModel {
this.dependencies.namespaceStore.selectAll(); this.dependencies.namespaceStore.selectAll();
}; };
onChange = (namespace: unknown, action: ActionMeta<string | SelectAllNamespaces>) => { onChange = (namespace: unknown, action: ActionMeta<NamespaceSelectFilterOption>) => {
switch (action.action) { switch (action.action) {
case "clear": case "clear":
this.dependencies.namespaceStore.selectAll(); this.dependencies.namespaceStore.selectAll();
@ -105,13 +111,13 @@ export class NamespaceSelectFilterModel {
} }
break; break;
case "select-option": case "select-option":
if (action.option === selectAllNamespaces) { if (action.option?.namespace === selectAllNamespaces) {
this.dependencies.namespaceStore.selectAll(); this.dependencies.namespaceStore.selectAll();
} else if (action.option) { } else if (action.option) {
if (this.isMultiSelection) { if (this.isMultiSelection) {
this.dependencies.namespaceStore.toggleSingle(action.option); this.dependencies.namespaceStore.toggleSingle(action.option.namespace);
} else { } else {
this.dependencies.namespaceStore.selectSingle(action.option); this.dependencies.namespaceStore.selectSingle(action.option.namespace);
} }
} }
break; break;

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

@ -12,7 +12,7 @@ import { components } from "react-select";
import type { NamespaceStore } from "./namespace-store/namespace.store"; import type { NamespaceStore } from "./namespace-store/namespace.store";
import { Select } from "../select"; import { Select } from "../select";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import type { NamespaceSelectFilterModel, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model"; import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable"; import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable"; import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
@ -31,7 +31,7 @@ const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies &
onKeyDown={model.onKeyDown} onKeyDown={model.onKeyDown}
onClick={model.onClick} onClick={model.onClick}
> >
<Select<string | SelectAllNamespaces, true> <Select<{ namespace: string | SelectAllNamespaces }, true>
id={id} id={id}
isMulti={true} isMulti={true}
isClearable={false} isClearable={false}
@ -58,7 +58,7 @@ export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSele
}), }),
}); });
export interface CustomPlaceholderProps extends PlaceholderProps<string | SelectAllNamespaces, boolean> {} export interface CustomPlaceholderProps extends PlaceholderProps<NamespaceSelectFilterOption, boolean> {}
interface PlaceholderDependencies { interface PlaceholderDependencies {
namespaceStore: NamespaceStore; namespaceStore: NamespaceStore;