apphouse/dist/models/AppLayout.ts

Component library for React that uses observable state management and theme-able components.

import { makeAutoObservable } from 'mobx';
import { WindowSizeStore } from './WindowSizeStore';

export interface AppLayoutType {
  leftPanelWidth?: number;
}

export class AppLayout {
  containerHeight: number;
  globalHeaderHeight: number;
  leftPanelWidth: number;
  mainPanelWidth: number;
  appStatusBarHeight: number;
  windowSize: WindowSizeStore;
  showMobileMenu: boolean;

  constructor(props: AppLayoutType) {
    this.windowSize = new WindowSizeStore();
    this.containerHeight = this.windowSize.height;
    this.globalHeaderHeight = 70;
    this.showMobileMenu = false;
    this.leftPanelWidth = props.leftPanelWidth || 200;
    this.mainPanelWidth = this.windowSize.width - this.leftPanelWidth;
    this.appStatusBarHeight = 20;

    makeAutoObservable(this);
  }

  get currentMainPanelWidth() {
    return this.windowSize.width - this.leftPanelWidth;
  }

  get windowHeight() {
    return this.windowSize.height;
  }

  get mainPanelHeight() {
    return (
      this.windowHeight - this.globalHeaderHeight - this.appStatusBarHeight
    );
  }

  get windowWidth() {
    return this.windowSize.width;
  }

  setLeftPanelWidth = (width: number) => {
    this.leftPanelWidth = width;
  };

  setMainPanelWidth = (width: number) => {
    this.mainPanelWidth = width;
  };

  setShowMobileMenu = (value: boolean) => {
    this.showMobileMenu = value;
  };
}