Merge pull request #3679 from LiteFarmOrg/LF-4718-Repair-deployment-o…

…f-webapp

LF-4718: fix web deploy tsc error

packages/webapp/src/components/Menu/FloatingButtonMenu/FloatingMenu.tsx

@@ -0,0 +1,52 @@
+/*
+ *  Copyright 2023 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import styles from './styles.module.scss';
+
+export type FloatingMenuProps = {
+  options: { label: React.ReactNode; onClick: () => void }[];
+  classes?: { menuList?: string; menuItem?: string };
+  onCloseMenu?: () => void;
+};
+
+const FloatingMenu = forwardRef<HTMLUListElement, FloatingMenuProps>(
+  ({ options, classes = {}, onCloseMenu, ...props }, ref) => {
+    return (
+      <MenuList ref={ref} className={clsx(styles.menuList, classes.menuList)} {...props}>
+        {options.map(({ label, onClick }, index) => {
+          return (
+            <MenuItem
+              key={index}
+              onClick={() => {
+                onClick();
+                onCloseMenu?.();
+              }}
+              className={clsx(styles.menuItem, classes.menuItem)}
+            >
+              {label}
+            </MenuItem>
+          );
+        })}
+      </MenuList>
+    );
+  },
+);
+
+FloatingMenu.displayName = 'FloatingMenu';
+
+export default FloatingMenu;

packages/webapp/src/components/Menu/MeatballsMenu/index.tsx

@@ -15,7 +15,7 @@
 import { forwardRef, ReactNode } from 'react';
 import clsx from 'clsx';
 import { BsThreeDots } from 'react-icons/bs';
-import FloatingMenu from '../FloatingButtonMenu/FloatingMenu';
+import FloatingMenu, { FloatingMenuProps } from '../FloatingButtonMenu/FloatingMenu';
 import DropdownButton from '../../Form/DropDownButton';
 import styles from './styles.module.scss';
 
@@ -26,19 +26,17 @@ export type MeatballsMenuProps = {
 };
 
 const MeatballsMenu = ({ options, classes, disabled = false }: MeatballsMenuProps) => {
+  const Menu = forwardRef<HTMLUListElement, FloatingMenuProps>((menuProps, ref) => (
+    <FloatingMenu ref={ref} classes={{ menuItem: styles.menuItem }} {...menuProps} />
+  ));
+  Menu.displayName = 'Menu';
+
   return (
     <DropdownButton
       type={'v2'}
       noIcon
       classes={{ button: clsx(styles.menuButton, classes?.button) }}
-      Menu={forwardRef((menuProps, ref) => (
-        <FloatingMenu
-          ref={ref}
-          options={options}
-          classes={{ menuItem: styles.menuItem }}
-          {...menuProps}
-        />
-      ))}
+      Menu={Menu}
       menuPositionOffset={[0, 1]}
       disabled={disabled}
     >

packages/webapp/src/components/Modals/ModalComponent/v2/index.jsx → packages/webapp/src/components/Modals/ModalComponent/v2/index.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { VscWarning } from 'react-icons/vsc';
 import { Info, Semibold } from '../../../Typography';
 import { Modal } from '../../index';
@@ -12,6 +12,20 @@ import { IconButton } from '@mui/material';
 import { BsX } from 'react-icons/bs';
 import { Close } from '@mui/icons-material';
 
+export type ModalComponentProps = {
+  title: ReactNode;
+  titleClassName?: string;
+  icon?: React.ReactNode;
+  contents?: string[];
+  dismissModal: () => void;
+  buttonGroup?: React.ReactNode;
+  children?: React.ReactNode;
+  warning?: boolean;
+  error?: boolean;
+  tooltipContent?: string;
+  className?: string;
+};
+
 export default function ModalComponent({
   title,
   titleClassName,
@@ -24,7 +38,7 @@ export default function ModalComponent({
   error,
   tooltipContent,
   className = '',
-}) {
+}: ModalComponentProps) {
   if (warning && error) {
     console.error('warning and error cannot be true at the same time');
   }
@@ -60,9 +74,7 @@ export default function ModalComponent({
             <Close />
           </IconButton>
         </div>
-        {contents?.map((line, index) => (
-          <Info key={index}>{line}</Info>
-        ))}
+        {contents?.map((line, index) => <Info key={index}>{line}</Info>)}
 
         {children}
         {!!buttonGroup && <div className={styles.buttonGroup}>{buttonGroup}</div>}