Migrate Ons.Fab

DerGoogler · Oct 31, 2023 · f1f4f47 · f1f4f47
1 parent cdffc76
commit f1f4f47
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/Website/src/activitys/MainApplication.tsx b/Website/src/activitys/MainApplication.tsx
@@ -5,8 +5,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FetchTextActivity from "./FetchTextActivity";
 import ModuleFragment from "./fragments/ModuleFragment";
 import TerminalActivity from "./TerminalActivity";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 import DeviceModule from "@Components/DeviceModule";
 import ModuleViewActivity from "./ModuleViewActivity";
 import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
@@ -26,12 +24,12 @@ import { useNewerVersion } from "@Hooks/useNewerVersion";
 import { ExploreModule } from "@Components/ExploreModule";
 import { useSettings } from "@Hooks/useSettings";
 import { useTheme } from "@Hooks/useTheme";
-import { Fab } from "react-onsenui";
 import { AnimatePresence, motion } from "framer-motion";
 import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
 import { useModConf } from "@Hooks/useModConf";
+import Fab from "@Components/onsenui/Fab";
 
 interface SearchbarRef {
   clear(): void;
@@ -159,7 +157,6 @@ const MainApplication = () => {
                   renderItem={(module, key) => <DeviceModule key={key} module={module} />}
                   renderFixed={() => {
                     return (
-                      // @ts-ignore
                       <Fab
                         onClick={() => {
                           Chooser.getFile(

diff --git a/Website/src/components/onsenui/Fab.tsx b/Website/src/components/onsenui/Fab.tsx
@@ -0,0 +1,14 @@
+import "onsenui/esm/elements/ons-fab";
+import onsCustomElement from "@Util/onsCustomElement";
+
+export interface FabProps extends React.PropsWithChildren {
+  modifier?: string;
+  ripple?: boolean;
+  position?: string;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export const Fab = onsCustomElement<HTMLElement, FabProps>("ons-fab")({});
+
+export default Fab;
diff --git a/Website/src/typings/global.d.ts b/Website/src/typings/global.d.ts
@@ -38,6 +38,7 @@ declare global {
       "ons-tab": HTMLAttributes<HTMLElement>;
       "ons-gesture-detector": HTMLAttributes<HTMLElement>;
       "ons-bottom-toolbar": HTMLAttributes<HTMLElement>;
+      "ons-fab": HTMLAttributes<HTMLElement>;
     }
   }