diff --git a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx b/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx index f0ef7acf31..4afa930059 100644 --- a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx +++ b/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx @@ -18,7 +18,7 @@ import { Icon } from "../../icon"; import { showDetails } from "../../kube-detail-params"; import { SubTitle } from "../../layout/sub-title"; import { Notifications } from "../../notifications"; -import { Select } from "../../select"; +import { onMultiSelectFor, Select } from "../../select"; import { Wizard, WizardStep } from "../../wizard"; import { clusterRoleBindingStore } from "./legacy-store"; import { clusterRoleStore } from "../+cluster-roles/legacy-store"; @@ -244,25 +244,7 @@ export class ClusterRoleBindingDialog extends React.Component )} - onChange={(selected, meta) => { - switch (meta.action) { - case "clear": - this.selectedAccounts.clear(); - break; - case "deselect-option": - case "remove-value": - case "pop-value": - if (meta.option) { - this.selectedAccounts.delete(meta.option.value); - } - break; - case "select-option": - if (meta.option) { - this.selectedAccounts.add(meta.option.value); - } - break; - } - }} + onChange={onMultiSelectFor(this.selectedAccounts)} maxMenuHeight={200} /> diff --git a/src/renderer/components/+user-management/+role-bindings/dialog.tsx b/src/renderer/components/+user-management/+role-bindings/dialog.tsx index 9c670877d0..49ac40d7d1 100644 --- a/src/renderer/components/+user-management/+role-bindings/dialog.tsx +++ b/src/renderer/components/+user-management/+role-bindings/dialog.tsx @@ -22,7 +22,7 @@ import { showDetails } from "../../kube-detail-params"; import { SubTitle } from "../../layout/sub-title"; import { Notifications } from "../../notifications"; import type { SelectOption } from "../../select"; -import { Select } from "../../select"; +import { onMultiSelectFor, Select } from "../../select"; import { Wizard, WizardStep } from "../../wizard"; import { roleBindingStore } from "./legacy-store"; import { clusterRoleStore } from "../+cluster-roles/legacy-store"; @@ -252,25 +252,7 @@ export class RoleBindingDialog extends React.Component { {` ${option.label}`} )} - onChange={(selected, meta) => { - switch (meta.action) { - case "clear": - this.selectedAccounts.clear(); - break; - case "deselect-option": - case "remove-value": - case "pop-value": - if (meta.option) { - this.selectedAccounts.delete(meta.option.value); - } - break; - case "select-option": - if (meta.option) { - this.selectedAccounts.add(meta.option.value); - } - break; - } - }} + onChange={onMultiSelectFor(this.selectedAccounts)} maxMenuHeight={200} /> diff --git a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx index 0ba792e6cc..937ec44d4a 100644 --- a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx +++ b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx @@ -5,7 +5,7 @@ import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; -import { Select } from "../../select/select"; +import { onMultiSelectFor, Select } from "../../select/select"; import { Icon } from "../../icon/icon"; import { Button } from "../../button/button"; import { SubTitle } from "../../layout/sub-title"; @@ -70,10 +70,7 @@ export class ClusterMetricsSetting extends React.Component { - this.hiddenMetrics.replace(options.map(opt => opt.value)); - this.save(); - }} + onChange={onMultiSelectFor(this.hiddenMetrics)} formatOptionLabel={(option) => (
{option.value} diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx index cde8686b21..62513645d9 100644 --- a/src/renderer/components/select/select.tsx +++ b/src/renderer/components/select/select.tsx @@ -8,6 +8,7 @@ import "./select.scss"; import React from "react"; +import type { ObservableSet } from "mobx"; import { action, computed, makeObservable } from "mobx"; import { observer } from "mobx-react"; import ReactSelect, { components, createFilter } from "react-select"; @@ -81,6 +82,28 @@ interface Dependencies { themeStore: ThemeStore; } +export function onMultiSelectFor, Group extends GroupBase