fix(ts) make tsc (almost) not cry on native

Co-authored-by: Calinteodor <calin.chitu@8x8.com>
Co-authored-by: Robert Pintilii <robert.pin9@gmail.com>

react/features/base/ui/components/web/ContextMenu.tsx

@@ -3,7 +3,6 @@ import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from '
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { getComputedOuterHeight } from '../../../../participants-pane/functions';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Drawer, JitsiPortal } from '../../../../toolbox/components/web';
@@ -11,6 +10,30 @@ import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
+/**
+ * Get a style property from a style declaration as a float.
+ *
+ * @param {CSSStyleDeclaration} styles - Style declaration.
+ * @param {string} name - Property name.
+ * @returns {number} Float value.
+ */
+const getFloatStyleProperty = (styles: CSSStyleDeclaration, name: string) =>
+    parseFloat(styles.getPropertyValue(name));
+
+/**
+* Gets the outer height of an element, including margins.
+*
+* @param {Element} element - Target element.
+* @returns {number} Computed height.
+*/
+const getComputedOuterHeight = (element: HTMLElement) => {
+    const computedStyle = getComputedStyle(element);
+
+    return element.offsetHeight
+        + getFloatStyleProperty(computedStyle, 'margin-top')
+        + getFloatStyleProperty(computedStyle, 'margin-bottom');
+};
+
 type Props = {
 
     /**

react/features/base/ui/constants.any.ts

@@ -0,0 +1,18 @@
+/**
+ * The types of the buttons.
+ */
+export enum BUTTON_TYPES {
+    DESTRUCTIVE = 'destructive',
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary'
+}
+
+/**
+ * The modes of the buttons.
+ */
+export const BUTTON_MODES: {
+    CONTAINED: 'contained';
+} = {
+    CONTAINED: 'contained'
+};

react/features/base/ui/constants.native.ts

@@ -0,0 +1 @@
+export * from './constants.any';

react/features/base/ui/constants.web.ts

@@ -1,23 +1,6 @@
 import { Theme } from '@mui/material';
 
-/**
- * The types of the buttons.
- */
-export enum BUTTON_TYPES {
-    DESTRUCTIVE = 'destructive',
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    TERTIARY = 'tertiary'
-}
-
-/**
- * The modes of the buttons.
- */
-export const BUTTON_MODES: {
-    CONTAINED: 'contained';
-} = {
-    CONTAINED: 'contained'
-};
+export * from './constants.any';
 
 /**
  * Returns an object containing the declaration of the common, reusable CSS classes.

react/features/base/ui/functions.web.ts

@@ -45,3 +45,17 @@ export function createWebTheme({ font, colors, colorMap, shape, spacing, typogra
     }));
 }
 
+/**
+ * Find the first styled ancestor component of an element.
+ *
+ * @param {HTMLElement|null} target - Element to look up.
+ * @param {string} cssClass - Styled component reference.
+ * @returns {HTMLElement|null} Ancestor.
+ */
+export const findAncestorByClass = (target: HTMLElement | null, cssClass: string): HTMLElement | null => {
+    if (!target || target.classList.contains(cssClass)) {
+        return target;
+    }
+
+    return findAncestorByClass(target.parentElement, cssClass);
+};

react/features/base/ui/hooks/useContextMenu.web.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-import { findAncestorByClass } from '../../../participants-pane/functions';
+import { findAncestorByClass } from '../functions.web';
 
 
 type RaiseContext = {