diff --git a/package.json b/package.json index bd8d22eafd..67a49f9b0c 100644 --- a/package.json +++ b/package.json @@ -210,7 +210,6 @@ "@types/circular-dependency-plugin": "5.0.5", "abort-controller": "^3.0.0", "auto-bind": "^4.0.0", - "autobind-decorator": "^2.4.0", "await-lock": "^2.1.0", "byline": "^5.0.0", "chokidar": "^3.5.3", diff --git a/src/common/utils/autobind.ts b/src/common/utils/autobind.ts index 716de551c3..a543781715 100644 --- a/src/common/utils/autobind.ts +++ b/src/common/utils/autobind.ts @@ -3,7 +3,6 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -import { boundMethod, boundClass } from "autobind-decorator"; import type { Options } from "auto-bind"; import autoBindClass from "auto-bind"; import autoBindReactClass from "auto-bind/react"; @@ -16,10 +15,3 @@ export function autoBind(obj: T, opts?: Options): T { return autoBindClass(obj, opts); } - -// Class/method decorators -// Note: @boundClass doesn't work with mobx-6.x/@action decorator -export { - boundClass, - boundMethod, -}; diff --git a/src/renderer/components/+catalog/catalog-add-button.tsx b/src/renderer/components/+catalog/catalog-add-button.tsx index 8d5daa6025..c56259837c 100644 --- a/src/renderer/components/+catalog/catalog-add-button.tsx +++ b/src/renderer/components/+catalog/catalog-add-button.tsx @@ -9,7 +9,7 @@ import { SpeedDial, SpeedDialAction } from "@material-ui/lab"; import { Icon } from "../icon"; import { observer } from "mobx-react"; import { observable, makeObservable, action } from "mobx"; -import { boundMethod } from "../../../common/utils"; +import { autoBind } from "../../../common/utils"; import type { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityAddMenu } from "../../api/catalog-entity"; import { EventEmitter } from "events"; import { navigate } from "../../navigation"; @@ -29,6 +29,7 @@ export class CatalogAddButton extends React.Component { constructor(props: CatalogAddButtonProps) { super(props); makeObservable(this); + autoBind(this); } componentDidMount() { @@ -74,17 +75,14 @@ export class CatalogAddButton extends React.Component { return category.filteredItems(this.menuItems.get(category.getId()) || []); }; - @boundMethod onOpen() { this.isOpen = true; } - @boundMethod onClose() { this.isOpen = false; } - @boundMethod onButtonClick() { const defaultAction = this.items.find(item => item.defaultAction)?.onClick; const clickAction = defaultAction || (this.items.length === 1 ? this.items[0].onClick : null); diff --git a/src/renderer/components/+cluster/cluster-issues.tsx b/src/renderer/components/+cluster/cluster-issues.tsx index de69b1b1da..a2555feefd 100644 --- a/src/renderer/components/+cluster/cluster-issues.tsx +++ b/src/renderer/components/+cluster/cluster-issues.tsx @@ -13,7 +13,7 @@ import { SubHeader } from "../layout/sub-header"; import { Table, TableCell, TableHead, TableRow } from "../table"; import { nodesStore } from "../+nodes/nodes.store"; import { eventStore } from "../+events/event.store"; -import { boundMethod, cssNames, prevDefault } from "../../utils"; +import { cssNames, prevDefault } from "../../utils"; import type { ItemObject } from "../../../common/item.store"; import { Spinner } from "../spinner"; import { ThemeStore } from "../../theme.store"; @@ -72,8 +72,7 @@ export class ClusterIssues extends React.Component { ]; } - @boundMethod - getTableRow(uid: string) { + getTableRow = (uid: string) => { const { warnings } = this; const warning = warnings.find(warn => warn.getId() == uid); const { getId, getName, message, kind, selfLink, renderAge } = warning; @@ -99,7 +98,7 @@ export class ClusterIssues extends React.Component { ); - } + }; renderContent() { const { warnings } = this; diff --git a/src/renderer/components/+helm-charts/helm-chart-details.tsx b/src/renderer/components/+helm-charts/helm-chart-details.tsx index c5808a254f..182b4a0878 100644 --- a/src/renderer/components/+helm-charts/helm-chart-details.tsx +++ b/src/renderer/components/+helm-charts/helm-chart-details.tsx @@ -11,7 +11,7 @@ import { getChartDetails } from "../../../common/k8s-api/endpoints/helm-charts.a import { observable, makeObservable, reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { Drawer, DrawerItem } from "../drawer"; -import { boundMethod, stopPropagation } from "../../utils"; +import { autoBind, stopPropagation } from "../../utils"; import { MarkdownViewer } from "../markdown-viewer"; import { Spinner } from "../spinner"; import { Button } from "../button"; @@ -48,6 +48,7 @@ class NonInjectedHelmChartDetails extends Component) { this.selectedChart = chart; this.readme = null; @@ -94,7 +94,6 @@ class NonInjectedHelmChartDetails extends Component { this.metrics = await getMetricsForNamespace(this.props.object.getName(), ""); - } + }; render() { const { object: namespace } = this.props; diff --git a/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx b/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx index b2e1e858c7..ec27f77134 100644 --- a/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx +++ b/src/renderer/components/+network-endpoints/endpoint-subset-list.tsx @@ -9,10 +9,10 @@ import React from "react"; import { observer } from "mobx-react"; import type { EndpointSubset, Endpoint, EndpointAddress } from "../../../common/k8s-api/endpoints"; import { Table, TableCell, TableHead, TableRow } from "../table"; -import { boundMethod } from "../../utils"; import { apiManager } from "../../../common/k8s-api/api-manager"; import { Link } from "react-router-dom"; import { getDetailsUrl } from "../kube-detail-params"; +import { autoBind } from "../../../common/utils"; export interface EndpointSubsetListProps { subset: EndpointSubset; @@ -21,6 +21,10 @@ export interface EndpointSubsetListProps { @observer export class EndpointSubsetList extends React.Component { + constructor(props: EndpointSubsetListProps) { + super(props); + autoBind(this); + } getAddressTableRow(ip: string) { const { subset } = this.props; @@ -29,7 +33,6 @@ export class EndpointSubsetList extends React.Component return this.renderAddressTableRow(address); } - @boundMethod getNotReadyAddressTableRow(ip: string) { const { subset } = this.props; const address = subset.getNotReadyAddresses().find(address => address.getId() == ip); @@ -37,7 +40,6 @@ export class EndpointSubsetList extends React.Component return this.renderAddressTableRow(address); } - @boundMethod renderAddressTable(addresses: EndpointAddress[], virtual: boolean) { return (
@@ -63,7 +65,6 @@ export class EndpointSubsetList extends React.Component ); } - @boundMethod renderAddressTableRow(address: EndpointAddress) { const { endpoint } = this.props; diff --git a/src/renderer/components/+network-ingresses/ingress-details.tsx b/src/renderer/components/+network-ingresses/ingress-details.tsx index ee8c1a3198..bb088be389 100644 --- a/src/renderer/components/+network-ingresses/ingress-details.tsx +++ b/src/renderer/components/+network-ingresses/ingress-details.tsx @@ -19,7 +19,6 @@ import { KubeObjectMeta } from "../kube-object-meta"; import { computeRuleDeclarations, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; export interface IngressDetailsProps extends KubeObjectDetailsProps { @@ -42,12 +41,11 @@ export class IngressDetails extends React.Component { ]); } - @boundMethod - async loadMetrics() { + loadMetrics = async () => { const { object: ingress } = this.props; this.metrics = await getMetricsForIngress(ingress.getName(), ingress.getNs()); - } + }; renderPaths(ingress: Ingress) { return ingress.getRules() diff --git a/src/renderer/components/+network-port-forwards/port-forward-menu.tsx b/src/renderer/components/+network-port-forwards/port-forward-menu.tsx index 928728e068..67a0867e94 100644 --- a/src/renderer/components/+network-port-forwards/port-forward-menu.tsx +++ b/src/renderer/components/+network-port-forwards/port-forward-menu.tsx @@ -4,7 +4,7 @@ */ import React from "react"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import type { PortForwardItem, PortForwardStore } from "../../port-forward"; import { openPortForward } from "../../port-forward"; import type { MenuActionsProps } from "../menu/menu-actions"; @@ -26,8 +26,12 @@ interface Dependencies { openPortForwardDialog: (item: PortForwardItem) => void; } -class NonInjectedPortForwardMenu extends React.Component { - @boundMethod +class NonInjectedPortForwardMenu extends React.Component { + constructor(props: Props) { + super(props); + autoBind(this); + } + remove() { const { portForward } = this.props; diff --git a/src/renderer/components/+nodes/details.tsx b/src/renderer/components/+nodes/details.tsx index 9e57322576..9fe1af6675 100644 --- a/src/renderer/components/+nodes/details.tsx +++ b/src/renderer/components/+nodes/details.tsx @@ -25,7 +25,6 @@ import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import { NodeDetailsResources } from "./details-resources"; import { DrawerTitle } from "../drawer/drawer-title"; import type { Disposer } from "../../utils"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -61,12 +60,11 @@ class NonInjectedNodeDetails extends React.Component { const { object: node } = this.props; this.metrics = await getMetricsByNodeNames([node.getName()]); - } + }; render() { const { object: node } = this.props; diff --git a/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx b/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx index bf2d824729..d5ca96b19b 100644 --- a/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx +++ b/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx @@ -20,7 +20,6 @@ import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import { KubeObjectMeta } from "../kube-object-meta"; import { getDetailsUrl } from "../kube-detail-params"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; export interface PersistentVolumeClaimDetailsProps extends KubeObjectDetailsProps { @@ -43,12 +42,11 @@ export class PersistentVolumeClaimDetails extends React.Component { const { object: volumeClaim } = this.props; this.metrics = await getMetricsForPvc(volumeClaim); - } + }; render() { const { object: volumeClaim } = this.props; diff --git a/src/renderer/components/+storage-volumes/volume-details-list.tsx b/src/renderer/components/+storage-volumes/volume-details-list.tsx index 1e9a8a93c4..3dba5682be 100644 --- a/src/renderer/components/+storage-volumes/volume-details-list.tsx +++ b/src/renderer/components/+storage-volumes/volume-details-list.tsx @@ -8,7 +8,6 @@ import "./volume-details-list.scss"; import React from "react"; import { observer } from "mobx-react"; import type { PersistentVolume } from "../../../common/k8s-api/endpoints/persistent-volume.api"; -import { boundMethod } from "../../../common/utils/autobind"; import { TableRow } from "../table/table-row"; import { cssNames, prevDefault } from "../../utils"; import { showDetails } from "../kube-detail-params"; @@ -38,8 +37,7 @@ export class VolumeDetailsList extends React.Component { [sortBy.status]: (volume: PersistentVolume) => volume.getStatus(), }; - @boundMethod - getTableRow(uid: string) { + getTableRow = (uid: string) => { const { persistentVolumes } = this.props; const volume = persistentVolumes.find(volume => volume.getId() === uid); @@ -55,7 +53,7 @@ export class VolumeDetailsList extends React.Component { {volume.getStatus()} ); - } + }; render() { const { persistentVolumes } = this.props; diff --git a/src/renderer/components/+user-management/+role-bindings/details.tsx b/src/renderer/components/+user-management/+role-bindings/details.tsx index bbc3d56015..3fec19e8fb 100644 --- a/src/renderer/components/+user-management/+role-bindings/details.tsx +++ b/src/renderer/components/+user-management/+role-bindings/details.tsx @@ -9,7 +9,7 @@ import { reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import React from "react"; import type { RoleBinding, RoleBindingSubject } from "../../../../common/k8s-api/endpoints"; -import { prevDefault, boundMethod } from "../../../utils"; +import { prevDefault } from "../../../utils"; import { AddRemoveButtons } from "../../add-remove-buttons"; import { ConfirmDialog } from "../../confirm-dialog"; import { DrawerTitle } from "../../drawer"; @@ -36,8 +36,7 @@ export class RoleBindingDetails extends React.Component ]); } - @boundMethod - removeSelectedSubjects() { + removeSelectedSubjects = () => { const { object: roleBinding } = this.props; const { selectedSubjects } = this; @@ -48,7 +47,7 @@ export class RoleBindingDetails extends React.Component

Remove selected bindings for {roleBinding.getName()}?

), }); - } + }; render() { const { selectedSubjects } = this; diff --git a/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx b/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx index 114f3c499f..92084e9312 100644 --- a/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx +++ b/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx @@ -24,7 +24,6 @@ import { KubeObjectMeta } from "../kube-object-meta"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import type { Disposer } from "../../utils"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -59,12 +58,11 @@ class NonInjectedDaemonSetDetails extends React.Component { const { object: daemonSet } = this.props; this.metrics = await getMetricsForDaemonSets([daemonSet], daemonSet.getNs(), ""); - } + }; render() { const { object: daemonSet } = this.props; diff --git a/src/renderer/components/+workloads-deployments/deployment-details.tsx b/src/renderer/components/+workloads-deployments/deployment-details.tsx index 0ab7721229..2c143989c0 100644 --- a/src/renderer/components/+workloads-deployments/deployment-details.tsx +++ b/src/renderer/components/+workloads-deployments/deployment-details.tsx @@ -26,7 +26,6 @@ import { DeploymentReplicaSets } from "./deployment-replicasets"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import type { Disposer } from "../../utils"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -63,12 +62,11 @@ class NonInjectedDeploymentDetails extends React.Component { const { object: deployment } = this.props; this.metrics = await getMetricsForDeployments([deployment], deployment.getNs(), ""); - } + }; render() { const { object: deployment } = this.props; diff --git a/src/renderer/components/+workloads-jobs/job-details.tsx b/src/renderer/components/+workloads-jobs/job-details.tsx index a571a1a4b7..c77af55cca 100644 --- a/src/renderer/components/+workloads-jobs/job-details.tsx +++ b/src/renderer/components/+workloads-jobs/job-details.tsx @@ -25,7 +25,6 @@ import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ResourceMetrics } from "../resource-metrics"; -import { boundMethod } from "autobind-decorator"; import { getDetailsUrl } from "../kube-detail-params"; import { apiManager } from "../../../common/k8s-api/api-manager"; import logger from "../../../common/logger"; @@ -63,12 +62,11 @@ class NonInjectedJobDetails extends React.Component { const { object: job } = this.props; this.metrics = await getMetricsForJobs([job], job.getNs(), ""); - } + }; render() { const { object: job } = this.props; diff --git a/src/renderer/components/+workloads-pods/pod-details-list.tsx b/src/renderer/components/+workloads-pods/pod-details-list.tsx index 6b12e44193..30f4711437 100644 --- a/src/renderer/components/+workloads-pods/pod-details-list.tsx +++ b/src/renderer/components/+workloads-pods/pod-details-list.tsx @@ -11,7 +11,7 @@ import { reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { podsStore } from "./pods.store"; import type { Pod } from "../../../common/k8s-api/endpoints"; -import { boundMethod, bytesToUnits, cssNames, interval, prevDefault } from "../../utils"; +import { autoBind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils"; import { LineProgress } from "../line-progress"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; import { Table, TableCell, TableHead, TableRow } from "../table"; @@ -36,6 +36,11 @@ export interface PodDetailsListProps { @observer export class PodDetailsList extends React.Component { + constructor(props: PodDetailsListProps) { + super(props); + autoBind(this); + } + private metricsWatcher = interval(120, () => { podsStore.loadKubeMetrics(this.props.owner.getNs()); }); @@ -88,7 +93,6 @@ export class PodDetailsList extends React.Component { ); } - @boundMethod getTableRow(uid: string) { const { pods } = this.props; const pod = pods.find(pod => pod.getId() == uid); diff --git a/src/renderer/components/+workloads-pods/pod-details.tsx b/src/renderer/components/+workloads-pods/pod-details.tsx index 857faeefab..0eda7209fe 100644 --- a/src/renderer/components/+workloads-pods/pod-details.tsx +++ b/src/renderer/components/+workloads-pods/pod-details.tsx @@ -13,7 +13,7 @@ import { observable, reaction, makeObservable } from "mobx"; import { type IPodMetrics, nodesApi, Pod, getMetricsForPods } from "../../../common/k8s-api/endpoints"; import { DrawerItem, DrawerTitle } from "../drawer"; import { Badge } from "../badge"; -import { boundMethod, cssNames, toJS } from "../../utils"; +import { cssNames, toJS } from "../../utils"; import { PodDetailsContainer } from "./pod-details-container"; import { PodDetailsAffinities } from "./pod-details-affinities"; import { PodDetailsTolerations } from "./pod-details-tolerations"; @@ -51,13 +51,12 @@ export class PodDetails extends React.Component { ]); } - @boundMethod - async loadMetrics() { + loadMetrics = async () => { const { object: pod } = this.props; this.metrics = await getMetricsForPods([pod], pod.getNs()); this.containerMetrics = await getMetricsForPods([pod], pod.getNs(), "container, namespace"); - } + }; render() { const { object: pod } = this.props; diff --git a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx index 9ef630d36d..2ab2c4480f 100644 --- a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx +++ b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx @@ -23,7 +23,6 @@ import { KubeObjectMeta } from "../kube-object-meta"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import type { Disposer } from "../../utils"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -59,12 +58,11 @@ class NonInjectedReplicaSetDetails extends React.Component { const { object: replicaSet } = this.props; this.metrics = await getMetricsForReplicaSets([replicaSet], replicaSet.getNs(), ""); - } + }; render() { const { object: replicaSet } = this.props; diff --git a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx index d5c33f0ac0..e024973e2a 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx +++ b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx @@ -24,7 +24,6 @@ import { KubeObjectMeta } from "../kube-object-meta"; import { getActiveClusterEntity } from "../../api/catalog-entity-registry"; import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import type { Disposer } from "../../utils"; -import { boundMethod } from "../../utils"; import logger from "../../../common/logger"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -60,12 +59,11 @@ class NonInjectedStatefulSetDetails extends React.Component { const { object: statefulSet } = this.props; this.metrics = await getMetricsForStatefulSets([statefulSet], statefulSet.getNs(), ""); - } + }; render() { const { object: statefulSet } = this.props; diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx index f4b06b74a3..5883d8fd82 100644 --- a/src/renderer/components/badge/badge.tsx +++ b/src/renderer/components/badge/badge.tsx @@ -11,7 +11,7 @@ import { observer } from "mobx-react"; import { cssNames } from "../../utils/cssNames"; import type { TooltipDecoratorProps } from "../tooltip"; import { withTooltip } from "../tooltip"; -import { boundMethod } from "../../utils"; +import { autoBind } from "../../utils"; export interface BadgeProps extends React.HTMLAttributes, TooltipDecoratorProps { small?: boolean; @@ -44,6 +44,7 @@ export class Badge extends React.Component { constructor(props: BadgeProps) { super(props); makeObservable(this); + autoBind(this); } @computed get isExpandable() { @@ -52,7 +53,6 @@ export class Badge extends React.Component { return this.elem?.clientWidth < this.elem?.scrollWidth; } - @boundMethod onMouseUp() { if (!this.isExpandable || Badge.badgeMeta.hasTextSelected) { Badge.badgeMeta.hasTextSelected = false; @@ -61,7 +61,6 @@ export class Badge extends React.Component { } } - @boundMethod bindRef(elem: HTMLElement) { this.elem = elem; } diff --git a/src/renderer/components/checkbox/checkbox.tsx b/src/renderer/components/checkbox/checkbox.tsx index 98623b7b28..63d7cfd062 100644 --- a/src/renderer/components/checkbox/checkbox.tsx +++ b/src/renderer/components/checkbox/checkbox.tsx @@ -5,7 +5,7 @@ import "./checkbox.scss"; import React from "react"; -import { boundMethod, cssNames } from "../../utils"; +import { cssNames } from "../../utils"; export interface CheckboxProps { className?: string; @@ -19,12 +19,11 @@ export interface CheckboxProps { export class Checkbox extends React.PureComponent { private input: HTMLInputElement; - @boundMethod - onChange(evt: React.ChangeEvent) { + onChange = (evt: React.ChangeEvent) => { if (this.props.onChange) { this.props.onChange(this.input.checked, evt); } - } + }; getValue() { if (this.props.value !== undefined) return this.props.value; diff --git a/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx b/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx index ec4e3c3595..f213c1eeca 100644 --- a/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx +++ b/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx @@ -5,7 +5,7 @@ import React from "react"; import type { Cluster } from "../../../../common/cluster/cluster"; -import { boundMethod } from "../../../utils"; +import { autoBind } from "../../../utils"; import { observable } from "mobx"; import { observer } from "mobx-react"; import type { KubernetesCluster } from "../../../../common/catalog-entities"; @@ -28,9 +28,13 @@ export class ClusterIconSetting extends React.Component @observable status = GeneralInputStatus.CLEAN; @observable errorText?: string; + constructor(props: ClusterIconSettingProps) { + super(props); + autoBind(this); + } + private element = React.createRef(); - @boundMethod async onIconPick([file]: File[]) { if (!file) { return; @@ -56,7 +60,6 @@ export class ClusterIconSetting extends React.Component this.props.cluster.preferences.icon = null; } - @boundMethod onUploadClick() { this.element .current diff --git a/src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx b/src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx index b6b6db3b4b..cc94ab4548 100644 --- a/src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx +++ b/src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx @@ -7,7 +7,6 @@ import React from "react"; import type { Cluster } from "../../../../common/cluster/cluster"; import { observer } from "mobx-react"; import { SubTitle } from "../../layout/sub-title"; -import { boundMethod } from "../../../../common/utils"; import { shell } from "electron"; import { Notice } from "../../+extensions/notice"; @@ -17,13 +16,11 @@ export interface ClusterKubeconfigProps { @observer export class ClusterKubeconfig extends React.Component { - - @boundMethod - openKubeconfig() { + openKubeconfig = () => { const { cluster } = this.props; shell.showItemInFolder(cluster.kubeConfigPath); - } + }; render() { return ( diff --git a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx index 0fd44c48c2..09b13dd8c0 100644 --- a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx +++ b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx @@ -11,7 +11,7 @@ import React from "react"; import { Button } from "../button"; import { saveKubeconfig } from "./save-config"; import { Notifications } from "../notifications"; -import { boundMethod } from "autobind-decorator"; +import { autoBind } from "../../../common/utils"; import { Dialog } from "../dialog"; import { Icon } from "../icon"; import { Select } from "../select"; @@ -36,9 +36,9 @@ class NonInjectedDeleteClusterDialog extends React.Component { constructor(props: Dependencies) { super(props); makeObservable(this); + autoBind(this); } - @boundMethod onOpen() { this.newCurrentContext = ""; @@ -47,7 +47,6 @@ class NonInjectedDeleteClusterDialog extends React.Component { } } - @boundMethod onClose() { this.props.model.close(); this.showContextSwitch = false; @@ -65,7 +64,6 @@ class NonInjectedDeleteClusterDialog extends React.Component { } } - @boundMethod async onDelete() { const { cluster, config } = this.props.model; diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx index 32ff2d8391..2ad9492584 100644 --- a/src/renderer/components/dock/dock-tab.tsx +++ b/src/renderer/components/dock/dock-tab.tsx @@ -7,7 +7,7 @@ import styles from "./dock-tab.module.scss"; import React from "react"; import { observer } from "mobx-react"; -import { boundMethod, cssNames, prevDefault, isMiddleClick } from "../../utils"; +import { autoBind, cssNames, prevDefault, isMiddleClick } from "../../utils"; import type { DockStore, DockTab as DockTabModel } from "./dock/store"; import type { TabProps } from "../tabs"; import { Tab } from "../tabs"; @@ -34,13 +34,13 @@ class NonInjectedDockTab extends React.Component { constructor(props: DockTabProps & Dependencies) { super(props); makeObservable(this); + autoBind(this); } get tabId() { return this.props.value.id; } - @boundMethod close() { this.props.dockStore.closeTab(this.tabId); } diff --git a/src/renderer/components/dock/logs/list.tsx b/src/renderer/components/dock/logs/list.tsx index 273a6ee32f..256dc5f26f 100644 --- a/src/renderer/components/dock/logs/list.tsx +++ b/src/renderer/components/dock/logs/list.tsx @@ -15,7 +15,7 @@ import moment from "moment-timezone"; import type { Align, ListOnScrollProps } from "react-window"; import { SearchStore } from "../../../search-store/search-store"; import { UserStore } from "../../../../common/user-store"; -import { array, boundMethod, cssNames } from "../../../utils"; +import { array, autoBind, cssNames } from "../../../utils"; import { VirtualList } from "../../virtual-list"; import { ToBottom } from "./to-bottom"; import type { LogTabViewModel } from "../logs/logs-view-model"; @@ -39,6 +39,7 @@ export class LogList extends React.Component { constructor(props: LogListProps) { super(props); makeObservable(this); + autoBind(this); } componentDidMount() { @@ -51,14 +52,12 @@ export class LogList extends React.Component { ]); } - @boundMethod onLogsInitialLoad(logs: string[], prevLogs: string[]) { if (!prevLogs.length && logs.length) { this.isLastLineVisible = true; } } - @boundMethod onLogsUpdate() { if (this.isLastLineVisible) { setTimeout(() => { @@ -67,7 +66,6 @@ export class LogList extends React.Component { } } - @boundMethod onUserScrolledUp(logs: string[], prevLogs: string[]) { if (!this.virtualListDiv.current) return; diff --git a/src/renderer/components/dock/terminal/dock-tab.tsx b/src/renderer/components/dock/terminal/dock-tab.tsx index daa4627062..7e9eb14221 100644 --- a/src/renderer/components/dock/terminal/dock-tab.tsx +++ b/src/renderer/components/dock/terminal/dock-tab.tsx @@ -5,8 +5,8 @@ import "./terminal-dock-tab.scss"; import React from "react"; -import { observer } from "mobx-react"; -import { boundMethod, cssNames } from "../../../utils"; +import { disposeOnUnmount, observer } from "mobx-react"; +import { autoBind, cssNames } from "../../../utils"; import type { DockTabProps } from "../dock-tab"; import { DockTab } from "../dock-tab"; import { Icon } from "../../icon"; @@ -26,11 +26,18 @@ interface Dependencies { } @observer -class NonInjectedTerminalTab extends React.Component { +class NonInjectedTerminalTab extends React.Component { + constructor(props: Props) { + super(props); + autoBind(this); + } + componentDidMount() { - reaction(() => this.isDisconnected === true, () => { - this.props.dockStore.closeTab(this.tabId); - }); + disposeOnUnmount(this, [ + reaction(() => this.isDisconnected === true, () => { + this.props.dockStore.closeTab(this.tabId); + }), + ]); } get tabId() { @@ -41,7 +48,6 @@ class NonInjectedTerminalTab extends React.Component { items: T[]; @@ -36,7 +36,11 @@ const defaultProps: Partial> = { export class EditableList extends React.Component> { static defaultProps = defaultProps as EditableListProps; - @boundMethod + constructor(props: EditableListProps) { + super(props); + autoBind(this); + } + onSubmit(val: string, evt: React.KeyboardEvent) { if (val) { evt.preventDefault(); diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx index 8a48e33cc2..fcd5bba17d 100644 --- a/src/renderer/components/icon/icon.tsx +++ b/src/renderer/components/icon/icon.tsx @@ -9,7 +9,7 @@ import type { ReactNode } from "react"; import React, { createRef } from "react"; import { NavLink } from "react-router-dom"; import type { LocationDescriptor } from "history"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import type { TooltipDecoratorProps } from "../tooltip"; import { withTooltip } from "../tooltip"; import isNumber from "lodash/isNumber"; @@ -43,13 +43,17 @@ export class Icon extends React.PureComponent { return String(content).includes("svg+xml"); // data-url for raw svg-icon } + constructor(props: IconProps) { + super(props); + autoBind(this); + } + get isInteractive() { const { interactive, onClick, href, link } = this.props; return interactive ?? !!(onClick || href || link); } - @boundMethod onClick(evt: React.MouseEvent) { if (this.props.disabled) { return; @@ -60,7 +64,6 @@ export class Icon extends React.PureComponent { } } - @boundMethod onKeyDown(evt: React.KeyboardEvent) { switch (evt.nativeEvent.code) { case "Space": diff --git a/src/renderer/components/input/drop-file-input.tsx b/src/renderer/components/input/drop-file-input.tsx index 02c1b1f364..fae93c336d 100644 --- a/src/renderer/components/input/drop-file-input.tsx +++ b/src/renderer/components/input/drop-file-input.tsx @@ -6,7 +6,7 @@ import "./drop-file-input.scss"; import React from "react"; import type { IClassName } from "../../utils"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import logger from "../../../main/logger"; @@ -29,15 +29,14 @@ export class DropFileInput extends React.Component< constructor(props: DropFileInputProps) { super(props); makeObservable(this); + autoBind(this); } - @boundMethod onDragEnter() { this.dragCounter++; this.dropAreaActive = true; } - @boundMethod onDragLeave() { this.dragCounter--; @@ -46,7 +45,6 @@ export class DropFileInput extends React.Component< } } - @boundMethod onDragOver(evt: React.DragEvent) { if (this.props.onDragOver) { this.props.onDragOver(evt); @@ -55,7 +53,6 @@ export class DropFileInput extends React.Component< evt.dataTransfer.dropEffect = "move"; } - @boundMethod onDrop(evt: React.DragEvent) { if (this.props.onDrop) { this.props.onDrop(evt); diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx index 6bc2579f65..795f520acd 100644 --- a/src/renderer/components/input/input.tsx +++ b/src/renderer/components/input/input.tsx @@ -7,7 +7,7 @@ import "./input.scss"; import type { DOMAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react"; import React from "react"; -import { boundMethod, cssNames, debouncePromise, getRandId } from "../../utils"; +import { autoBind, cssNames, debouncePromise, getRandId } from "../../utils"; import { Icon } from "../icon"; import type { TooltipProps } from "../tooltip"; import { Tooltip } from "../tooltip"; @@ -91,6 +91,11 @@ export class Input extends React.Component { submitted: false, }; + constructor(props: InputProps) { + super(props); + autoBind(this); + } + componentWillUnmount(): void { this.setDirtyOnChange.cancel(); } @@ -220,7 +225,6 @@ export class Input extends React.Component { this.setState({ dirty }); } - @boundMethod onFocus(evt: React.FocusEvent) { const { onFocus, autoSelectOnFocus } = this.props; @@ -229,7 +233,6 @@ export class Input extends React.Component { this.setState({ focused: true }); } - @boundMethod onBlur(evt: React.FocusEvent) { this.props.onBlur?.(evt); this.setState({ focused: false }); @@ -237,7 +240,6 @@ export class Input extends React.Component { setDirtyOnChange = debounce(() => this.setDirty(), 500); - @boundMethod onChange(evt: React.ChangeEvent) { this.props.onChange?.(evt.currentTarget.value, evt); this.validate(); @@ -251,7 +253,6 @@ export class Input extends React.Component { } } - @boundMethod onKeyDown(evt: React.KeyboardEvent) { this.props.onKeyDown?.(evt); @@ -329,7 +330,6 @@ export class Input extends React.Component { }; } - @boundMethod bindRef(elem: InputElement) { this.input = elem; } diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx index 0290144ee0..3357a76f7b 100644 --- a/src/renderer/components/input/search-input.tsx +++ b/src/renderer/components/input/search-input.tsx @@ -7,7 +7,7 @@ import "./search-input.scss"; import React, { createRef } from "react"; import { observer } from "mobx-react"; -import { boundMethod, cssNames } from "../../utils"; +import { cssNames, autoBind } from "../../utils"; import { Icon } from "../icon"; import type { InputProps } from "./input"; import { Input } from "./input"; @@ -33,6 +33,11 @@ export class SearchInput extends React.Component { private inputRef = createRef(); + constructor(props: SearchInputProps) { + super(props); + autoBind(this); + } + componentDidMount() { if (!this.props.bindGlobalFocusHotkey) return; window.addEventListener("keydown", this.onGlobalKey); @@ -42,14 +47,12 @@ export class SearchInput extends React.Component { window.removeEventListener("keydown", this.onGlobalKey); } - @boundMethod onGlobalKey(evt: KeyboardEvent) { if (evt.key === "f" && (isMac ? evt.metaKey : evt.ctrlKey)) { this.inputRef.current.focus(); } } - @boundMethod onKeyDown(evt: React.KeyboardEvent) { this.props.onKeyDown?.(evt); @@ -59,7 +62,6 @@ export class SearchInput extends React.Component { } } - @boundMethod clear() { if (this.props.onClear) { this.props.onClear(); diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx index 28fa8b0459..190884df42 100644 --- a/src/renderer/components/item-object-list/content.tsx +++ b/src/renderer/components/item-object-list/content.tsx @@ -14,7 +14,7 @@ import { ConfirmDialog } from "../confirm-dialog"; import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table"; import { Table, TableCell, TableHead, TableRow } from "../table"; import type { IClassName } from "../../utils"; -import { boundMethod, cssNames, isReactNode, prevDefault, stopPropagation } from "../../utils"; +import { autoBind, cssNames, isReactNode, prevDefault, stopPropagation } from "../../utils"; import type { AddRemoveButtonsProps } from "../add-remove-buttons"; import { AddRemoveButtons } from "../add-remove-buttons"; import { NoItems } from "../no-items"; @@ -68,13 +68,13 @@ export class ItemListLayoutContent extends React.Component constructor(props: ItemListLayoutContentProps) { super(props); makeObservable(this); + autoBind(this); } @computed get failedToLoad() { return this.props.store.failedLoading; } - @boundMethod renderRow(item: I) { return this.getTableRow(item); } @@ -133,7 +133,6 @@ export class ItemListLayoutContent extends React.Component ); } - @boundMethod getRow(uid: string) { return (
@@ -150,7 +149,6 @@ export class ItemListLayoutContent extends React.Component ); } - @boundMethod removeItemsDialog(selectedItems: I[]) { const { customizeRemoveDialog, store } = this.props; const visibleMaxNamesCount = 5; diff --git a/src/renderer/components/item-object-list/list-layout.tsx b/src/renderer/components/item-object-list/list-layout.tsx index d0b035179a..7d57019bb7 100644 --- a/src/renderer/components/item-object-list/list-layout.tsx +++ b/src/renderer/components/item-object-list/list-layout.tsx @@ -11,7 +11,7 @@ import { computed, makeObservable, untracked } from "mobx"; import type { ConfirmDialogParams } from "../confirm-dialog"; import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table"; import type { IClassName, StorageHelper } from "../../utils"; -import { boundMethod, cssNames, noop } from "../../utils"; +import { autoBind, cssNames, noop } from "../../utils"; import type { AddRemoveButtonsProps } from "../add-remove-buttons"; import type { ItemObject, ItemStore } from "../../../common/item.store"; import type { SearchInputUrlProps } from "../input"; @@ -120,6 +120,7 @@ class NonInjectedItemListLayout extends React.Component & Dependencies) { super(props); makeObservable(this); + autoBind(this); } async componentDidMount() { @@ -160,7 +161,6 @@ class NonInjectedItemListLayout extends React.Component void; } -class NonInjectedKubeObjectMenu extends React.Component & Dependencies> { +class NonInjectedKubeObjectMenu & Dependencies> extends React.Component { + constructor(props: Props) { + super(props); + autoBind(this); + } get store() { const { object } = this.props; @@ -49,13 +53,11 @@ class NonInjectedKubeObjectMenu extends React.Co return this.props.removable ?? Boolean(this.store?.remove); } - @boundMethod async update() { this.props.hideDetails(); this.props.createEditResourceTab(this.props.object); } - @boundMethod async remove() { this.props.hideDetails(); const { object, removeAction } = this.props; @@ -64,7 +66,6 @@ class NonInjectedKubeObjectMenu extends React.Co else await this.store.remove(object); } - @boundMethod renderRemoveMessage() { const { object } = this.props; diff --git a/src/renderer/components/menu/menu-actions.tsx b/src/renderer/components/menu/menu-actions.tsx index 4e8fc6a331..14d5bd17b4 100644 --- a/src/renderer/components/menu/menu-actions.tsx +++ b/src/renderer/components/menu/menu-actions.tsx @@ -8,7 +8,7 @@ import "./menu-actions.scss"; import React, { isValidElement } from "react"; import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import { ConfirmDialog } from "../confirm-dialog"; import type { IconProps } from "../icon"; import { Icon } from "../icon"; @@ -48,9 +48,9 @@ export class MenuActions extends React.Component { constructor(props: MenuActionsProps) { super(props); makeObservable(this); + autoBind(this); } - @boundMethod remove() { const { removeAction } = this.props; let { removeConfirmationMessage } = this.props; diff --git a/src/renderer/components/render-delay/render-delay.tsx b/src/renderer/components/render-delay/render-delay.tsx index 8180c9aac3..2639bb9693 100644 --- a/src/renderer/components/render-delay/render-delay.tsx +++ b/src/renderer/components/render-delay/render-delay.tsx @@ -6,7 +6,6 @@ import React from "react"; import { makeObservable, observable } from "mobx"; import { observer } from "mobx-react"; -import { boundMethod } from "../../utils"; export interface RenderDelayProps { placeholder?: React.ReactNode; @@ -32,10 +31,7 @@ export class RenderDelay extends React.Component { window.cancelIdleCallback(this.showContents); } - @boundMethod - showContents() { - this.isVisible = true; - } + showContents = () => this.isVisible = true; render() { if (!this.isVisible) { diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx index eb333cb6c5..69d92ec8ff 100644 --- a/src/renderer/components/select/select.tsx +++ b/src/renderer/components/select/select.tsx @@ -17,7 +17,7 @@ import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } fr import type { CreatableProps } from "react-select/creatable"; import { ThemeStore } from "../../theme.store"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; const { Menu } = components; @@ -52,6 +52,7 @@ export class Select extends React.Component { constructor(props: SelectProps) { super(props); makeObservable(this); + autoBind(this); } @computed get themeClass() { @@ -97,14 +98,12 @@ export class Select extends React.Component { return options as SelectOption[]; } - @boundMethod onChange(value: SelectOption, meta: ActionMeta) { if (this.props.onChange) { this.props.onChange(value, meta); } } - @boundMethod onKeyDown(evt: React.KeyboardEvent) { if (this.props.onKeyDown) { this.props.onKeyDown(evt); diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx index 3764f73e8f..2196efa34c 100644 --- a/src/renderer/components/table/table-cell.tsx +++ b/src/renderer/components/table/table-cell.tsx @@ -8,7 +8,7 @@ import type { TableSortBy, TableSortParams } from "./table"; import type { ReactNode } from "react"; import React from "react"; -import { boundMethod, cssNames, displayBooleans } from "../../utils"; +import { autoBind, cssNames, displayBooleans } from "../../utils"; import { Icon } from "../icon"; import { Checkbox } from "../checkbox"; @@ -78,7 +78,11 @@ export interface TableCellProps extends React.DOMAttributes { } export class TableCell extends React.Component { - @boundMethod + constructor(props: TableCellProps) { + super(props); + autoBind(this); + } + onClick(evt: React.MouseEvent) { if (this.props.onClick) { this.props.onClick(evt); diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx index 05d1ff5c0c..3cb6ad6378 100644 --- a/src/renderer/components/table/table.tsx +++ b/src/renderer/components/table/table.tsx @@ -7,7 +7,7 @@ import "./table.scss"; import React from "react"; import { observer } from "mobx-react"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import type { TableRowElem, TableRowProps } from "./table-row"; import { TableRow } from "./table-row"; import type { TableHeadElem, TableHeadProps } from "./table-head"; @@ -99,6 +99,7 @@ class NonInjectedTable extends React.Component & Dependen constructor(props: TableProps & Dependencies) { super(props); makeObservable(this); + autoBind(this); } componentDidMount() { @@ -173,7 +174,6 @@ class NonInjectedTable extends React.Component & Dependen onSort?.({ sortBy, orderBy }); } - @boundMethod sort(colName: TableSortBy) { const { sortBy, orderBy } = this.sortParams; const sameColumn = sortBy == colName; diff --git a/src/renderer/components/tabs/tabs.tsx b/src/renderer/components/tabs/tabs.tsx index 1de69624f8..70b4730de2 100644 --- a/src/renderer/components/tabs/tabs.tsx +++ b/src/renderer/components/tabs/tabs.tsx @@ -6,7 +6,7 @@ import "./tabs.scss"; import type { DOMAttributes } from "react"; import React from "react"; -import { boundMethod, cssNames } from "../../utils"; +import { autoBind, cssNames } from "../../utils"; import { Icon } from "../icon"; const TabsContext = React.createContext({}); @@ -28,10 +28,7 @@ export interface TabsProps extends TabsContextValue, Omit { public elem: HTMLElement; - @boundMethod - protected bindRef(elem: HTMLElement) { - this.elem = elem; - } + bindRef = (elem: HTMLElement) => this.elem = elem; render() { const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props; @@ -69,6 +66,11 @@ export class Tab extends React.PureComponent { declare context: TabsContextValue; public ref = React.createRef(); + constructor(props: TabProps) { + super(props); + autoBind(this); + } + get isActive() { const { active, value } = this.props; @@ -84,7 +86,6 @@ export class Tab extends React.PureComponent { this.ref.current?.scrollIntoViewIfNeeded?.(); } - @boundMethod onClick(evt: React.MouseEvent) { const { value, active, disabled, onClick } = this.props; @@ -96,13 +97,11 @@ export class Tab extends React.PureComponent { this.context.onChange?.(value); } - @boundMethod onFocus(evt: React.FocusEvent) { this.props.onFocus?.(evt); this.scrollIntoView(); } - @boundMethod onKeyDown(evt: React.KeyboardEvent) { if (evt.key === " " || evt.key === "Enter") { this.ref.current?.click(); diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index 33e0652404..c244a09497 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -9,7 +9,7 @@ import React from "react"; import { createPortal } from "react-dom"; import { observer } from "mobx-react"; import type { IClassName } from "../../utils"; -import { boundMethod, cssNames } from "../../utils"; +import { cssNames, autoBind } from "../../utils"; import { observable, makeObservable, action } from "mobx"; export enum TooltipPosition { @@ -61,6 +61,7 @@ export class Tooltip extends React.Component { constructor(props: TooltipProps) { super(props); makeObservable(this); + autoBind(this); } get targetElem(): HTMLElement { @@ -89,19 +90,18 @@ export class Tooltip extends React.Component { this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget); } - @action.bound + @action protected onEnterTarget() { this.isVisible = true; requestAnimationFrame(action(() => this.isContentVisible = true)); } - @action.bound + @action protected onLeaveTarget() { this.isVisible = false; this.isContentVisible = false; } - @boundMethod refreshPosition() { const { preferredPositions } = this.props; const { elem, targetElem } = this; @@ -219,7 +219,6 @@ export class Tooltip extends React.Component { }; } - @boundMethod bindRef(elem: HTMLElement) { this.elem = elem; } diff --git a/src/renderer/search-store/search-store.ts b/src/renderer/search-store/search-store.ts index ad6e464b7d..aa5b74dc97 100644 --- a/src/renderer/search-store/search-store.ts +++ b/src/renderer/search-store/search-store.ts @@ -4,7 +4,7 @@ */ import { action, computed, observable, makeObservable } from "mobx"; -import { boundMethod } from "../utils"; +import autoBind from "auto-bind"; export class SearchStore { /** @@ -15,6 +15,11 @@ export class SearchStore { return value ? value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") : ""; } + constructor() { + makeObservable(this); + autoBind(this); + } + /** * Text in the search input * @@ -36,10 +41,6 @@ export class SearchStore { */ @observable activeOverlayIndex = -1; - constructor() { - makeObservable(this); - } - /** * Sets default activeOverlayIndex * @param text An array of any textual data (logs, for example) @@ -109,12 +110,10 @@ export class SearchStore { return prev; } - @boundMethod public setNextOverlayActive(): void { this.activeOverlayIndex = this.getNextOverlay(true); } - @boundMethod public setPrevOverlayActive(): void { this.activeOverlayIndex = this.getPrevOverlay(true); } @@ -140,7 +139,6 @@ export class SearchStore { * @param line Index of the line where overlay is located * @param occurrence Number of the overlay within one line */ - @boundMethod public isActiveOverlay(line: number, occurrence: number): boolean { const firstLineIndex = this.occurrences.findIndex(item => item === line); diff --git a/yarn.lock b/yarn.lock index f45e2f817d..360e3ffa55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2913,11 +2913,6 @@ auto-bind@^4.0.0: resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb" integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ== -autobind-decorator@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-2.4.0.tgz#ea9e1c98708cf3b5b356f7cf9f10f265ff18239c" - integrity sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw== - await-lock@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/await-lock/-/await-lock-2.1.0.tgz#bc78c51d229a34d5d90965a1c94770e772c6145e"