aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/ContextMenu.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-08-08 12:27:40 -0400
committerbobzel <zzzman@gmail.com>2024-08-08 12:27:40 -0400
commit4574b7f03ccc85c4bebdbfd9475788456086704f (patch)
treed23d30343541b9af029ef418492d629d3cc710d7 /src/client/views/ContextMenu.tsx
parente1db06d59d580aa640212a0d3a6aeecb9122bdf0 (diff)
many changes to add typing in place of 'any's etc
Diffstat (limited to 'src/client/views/ContextMenu.tsx')
-rw-r--r--src/client/views/ContextMenu.tsx33
1 files changed, 17 insertions, 16 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d784a14b8..05634f376 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -2,7 +2,7 @@
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable default-param-last */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { DivHeight, DivWidth } from '../../ClientUtils';
@@ -12,7 +12,7 @@ import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextM
import { ObservableReactComponent } from './ObservableReactComponent';
@observer
-export class ContextMenu extends ObservableReactComponent<{}> {
+export class ContextMenu extends ObservableReactComponent<{ noexpand?: boolean }> {
// eslint-disable-next-line no-use-before-define
static Instance: ContextMenu;
@@ -39,7 +39,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
@observable _mouseY: number = -1;
@observable _shouldDisplay: boolean = false;
- constructor(props: any) {
+ constructor(props: object) {
super(props);
makeObservable(this);
ContextMenu.Instance = this;
@@ -151,21 +151,21 @@ export class ContextMenu extends ObservableReactComponent<{}> {
@computed get filteredItems(): (OriginalMenuProps | string[])[] {
const searchString = this._searchString.toLowerCase().split(' ');
const matches = (descriptions: string[]) => searchString.every(s => descriptions.some(desc => desc.toLowerCase().includes(s)));
- const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: any) => string[]) => {
+ const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: string) => string[]) => {
let eles: (OriginalMenuProps | string[])[] = [];
const leaves: OriginalMenuProps[] = [];
items.forEach(item => {
const { description } = item;
const path = groupFunc(description);
- if ('subitems' in item) {
+ if (item.subitems) {
const children = flattenItems(item.subitems, name => [...groupFunc(description), name]);
if (children.length || matches(path)) {
eles.push(path);
eles = eles.concat(children);
}
} else if (matches(path)) {
- leaves.push(item);
+ leaves.push(item as OriginalMenuProps);
}
});
@@ -182,7 +182,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
@computed get menuItems() {
if (!this._searchString) {
- return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />);
+ return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : item.noexpand} closeMenu={this.closeMenu} />);
}
return this.filteredItems.map((value, index) =>
Array.isArray(value) ? (
@@ -201,7 +201,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
}
@computed get itemsNeedSearch() {
- return this._showSearch ? 1 : this._items.reduce((p, mi) => p + ((mi as any).noexpand ? 1 : (mi as any).subitems?.length || 1), 0) > 15;
+ return this._showSearch ? 1 : this._items.reduce((p, mi) => p + (mi.noexpand ? 1 : mi.subitems?.length || 1), 0) > 15;
}
_searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do...
@@ -211,13 +211,15 @@ export class ContextMenu extends ObservableReactComponent<{}> {
return (
<div
className="contextMenu-cont"
- ref={action((r: any) => {
- if (r) {
- this._width = DivWidth(r);
- this._height = DivHeight(r);
- }
- this._searchRef.current?.focus();
- })}
+ ref={r =>
+ runInAction(() => {
+ if (r) {
+ this._width = DivWidth(r);
+ this._height = DivHeight(r);
+ }
+ this._searchRef.current?.focus();
+ })
+ }
style={{
display: this._display ? '' : 'none',
left: this.pageX,
@@ -239,7 +241,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
value={this._searchString}
onKeyDown={this.onKeyDown}
onChange={this.onChange}
- // eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
/>
</span>