frontend/src/tabs-hook.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

import Logger from './logger';

declare global {
  interface Window {
    __TABS_HOOK_INSTANCE: any;
  }
  interface Array<T> {
    __filter: any;
  }
}

const isTabsArray = (tabs) => {
  const length = tabs.length;
  return length === 7 && tabs[length - 1]?.key === 6 && tabs[length - 1]?.tab;
};

interface Tab {
  id: string;
  title: any;
  content: any;
  icon: any;
}

class TabsHook extends Logger {
  // private keys = 7;
  tabs: Tab[] = [];

  constructor() {
    super('TabsHook');

    this.log('Initialized');
    window.__TABS_HOOK_INSTANCE = this;

    const self = this;

    const filter = Array.prototype.__filter ?? Array.prototype.filter;
    Array.prototype.__filter = filter;
    Array.prototype.filter = function (...args) {
      if (isTabsArray(this)) {
        self.render(this);
      }
      // @ts-ignore
      return filter.call(this, ...args);
    };
  }

  add(tab: Tab) {
    this.log('Adding tab', tab.id, 'to render array');
    this.tabs.push(tab);
  }

  removeById(id: string) {
    this.log('Removing tab', id);
    this.tabs = this.tabs.filter((tab) => tab.id !== id);
  }

  render(existingTabs: any[]) {
    for (const { title, icon, content, id } of this.tabs) {
      existingTabs.push({
        key: id,
        title,
        tab: icon,
        panel: content,
      });
    }
  }
}

export default TabsHook;