From 9e648d27296b77bec939dc871d934316a5694441 Mon Sep 17 00:00:00 2001 From: Der_Googler <54764558+DerGoogler@users.noreply.github.com> Date: Wed, 6 Mar 2024 18:31:13 +0100 Subject: [PATCH] introduce hoc's --- Website/src/components/ModConfView/libs.ts | 8 ++ Website/src/hoc/withRequireNewVersion.tsx | 67 ++++++++++++++++ docs/ModConf/README.md | 2 +- docs/ModConf/components/Image.md | 44 +++++------ docs/ModConf/components/Markdown.md | 44 +++++------ docs/ModConf/functions/Shell.md | 1 + docs/ModConf/functions/SuFile.md | 45 ++++++----- docs/ModConf/hoc/withRequireNewVersion.md | 55 ++++++++++++++ docs/ModConf/hooks/useActivity.md | 88 +++++++++++----------- docs/ModConf/hooks/useStrings.md | 57 +++++++------- 10 files changed, 270 insertions(+), 141 deletions(-) create mode 100644 Website/src/hoc/withRequireNewVersion.tsx create mode 100644 docs/ModConf/hoc/withRequireNewVersion.md diff --git a/Website/src/components/ModConfView/libs.ts b/Website/src/components/ModConfView/libs.ts index 56e6609f..535c0547 100644 --- a/Website/src/components/ModConfView/libs.ts +++ b/Website/src/components/ModConfView/libs.ts @@ -22,6 +22,7 @@ import { Markup } from "@Components/Markdown"; import { DialogEditTextListItem } from "@Components/DialogEditTextListItem"; import { SearchActivity } from "@Activitys/SearchActivity"; import React from "react"; +import { withRequireNewVersion } from "../../hoc/withRequireNewVersion"; export const libraries = [ { @@ -70,6 +71,13 @@ export const libraries = [ PicturePreviewActivity: PicturePreviewActivity, }, }, + { + // high order components + name: "@mmrl/hoc", + __esModule: { + withRequireNewVersion: withRequireNewVersion, + }, + }, { name: "@mmrl/ui", __esModule: { diff --git a/Website/src/hoc/withRequireNewVersion.tsx b/Website/src/hoc/withRequireNewVersion.tsx new file mode 100644 index 00000000..51c4103c --- /dev/null +++ b/Website/src/hoc/withRequireNewVersion.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import Anchor from "@Components/dapi/Anchor"; +import { Page } from "@Components/onsenui/Page"; +import { Toolbar } from "@Components/onsenui/Toolbar"; +import { useActivity } from "@Hooks/useActivity"; +import { BuildConfig } from "@Native/BuildConfig"; +import Box from "@mui/material/Box"; + +interface HOC_Options

{ + versionCode?: number; + component: React.FunctionComponent

| React.ComponentType

; + title?: string; + text?: React.ReactNode; +} + +function withRequireNewVersion

(opt: HOC_Options

): HOC_Options

["component"] { + const { + versionCode = BuildConfig.VERSION_CODE, + component, + title = "New version required!", + text = ( + <> + This config requires MMRL above {versionCode} (versionCode) +
+ Check the latest release + + ), + } = opt; + const { context } = useActivity(); + + if (BuildConfig.VERSION_CODE < versionCode) { + return () => { + return ( + { + return ( + + + + + {title} + + ); + }} + > + + {text} + + + ); + }; + } else { + return component; + } +} + +export { withRequireNewVersion }; diff --git a/docs/ModConf/README.md b/docs/ModConf/README.md index fdf7f6ed..ce6e3516 100644 --- a/docs/ModConf/README.md +++ b/docs/ModConf/README.md @@ -128,4 +128,4 @@ Will print - `atob()` - `bota()` -These function will throw a `IsolatedEvalError` and your config will stop immediately after calling the function \ No newline at end of file +These function will throw a `IsolatedEvalError` and your config will stop immediately after calling the function diff --git a/docs/ModConf/components/Image.md b/docs/ModConf/components/Image.md index 8d13c074..cb68e748 100644 --- a/docs/ModConf/components/Image.md +++ b/docs/ModConf/components/Image.md @@ -11,36 +11,36 @@ import { Image } from "@mmrl/ui"; ## Usage ```js -import React from "react" -import { useActivity } from "@mmrl/hooks" +import React from "react"; +import { useActivity } from "@mmrl/hooks"; import { Image, Page, Toolbar } from "@mmrl/ui"; function RenderToolbar() { - const { context, extra } = useActivity() - const { title = "Default" } = extra - return ( - - - - - {title} - - ) + const { context, extra } = useActivity(); + const { title = "Default" } = extra; + return ( + + + + + {title} + + ); } function App() { - return ( - - -
- -

Disable opening

- - - ); + return ( + + +
+ +

Disable opening

+ + + ); } -export default App +export default App; ``` ## API diff --git a/docs/ModConf/components/Markdown.md b/docs/ModConf/components/Markdown.md index 5f3a88cd..b9ad4b19 100644 --- a/docs/ModConf/components/Markdown.md +++ b/docs/ModConf/components/Markdown.md @@ -11,41 +11,41 @@ import { Markdown } from "@mmrl/ui"; ## Usage ```js -import React from "react" -import { useActivity } from "@mmrl/hooks" +import React from "react"; +import { useActivity } from "@mmrl/hooks"; import { Markdown, Page, Toolbar } from "@mmrl/ui"; function RenderToolbar() { - const { context, extra } = useActivity() - const { title = "Default" } = extra - return ( - - - - - {title} - - ) + const { context, extra } = useActivity(); + const { title = "Default" } = extra; + return ( + + + + + {title} + + ); } function App() { - return ( - - {` + return ( + + {` # Heading 1 Hello, world! `} - - ); + + ); } -export default App +export default App; ``` ## API -| Attr | Required | Type | -| ------------- | -------- | ----------------- | -| `children` | Yes | `React.ReactNode` | -| `fetch` | No | `url\|string` | +| Attr | Required | Type | +| ---------- | -------- | ----------------- | +| `children` | Yes | `React.ReactNode` | +| `fetch` | No | `url\|string` | diff --git a/docs/ModConf/functions/Shell.md b/docs/ModConf/functions/Shell.md index fe631af0..31a12522 100644 --- a/docs/ModConf/functions/Shell.md +++ b/docs/ModConf/functions/Shell.md @@ -1,2 +1,3 @@ # Shell + TODO diff --git a/docs/ModConf/functions/SuFile.md b/docs/ModConf/functions/SuFile.md index acdae53b..39c5f3bd 100644 --- a/docs/ModConf/functions/SuFile.md +++ b/docs/ModConf/functions/SuFile.md @@ -10,8 +10,8 @@ Here will you learn, how `SuFile` works in MMRL. Files can easily be read within MMRL, it returns a empty string if the file does not exists. ```js -const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop") -console.log(mkprop.read()) +const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop"); +console.log(mkprop.read()); ``` ## Check for existing @@ -19,13 +19,13 @@ console.log(mkprop.read()) It you want to make sure that your file exists ```js -const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop") +const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop"); if (mkprop.exist()) { - console.log("File exist!") + console.log("File exist!"); } else { // stops ModConf - throw new Error("File does not exist!") + throw new Error("File does not exist!"); } ``` @@ -34,7 +34,7 @@ if (mkprop.exist()) { Be careful with this function, changes that are made can't be restored. ```js -SuFile.write("/sdcard/file_test.txt", "foo") +SuFile.write("/sdcard/file_test.txt", "foo"); // new SuFile("/sdcard/file_test.txt").write("foo") ``` @@ -43,42 +43,41 @@ SuFile.write("/sdcard/file_test.txt", "foo") You also able to list whole folders. ```js -const modules = new SuFile("/data/adb/modules") +const modules = new SuFile("/data/adb/modules"); if (modules.exist()) { - console.log(modules.list()) + console.log(modules.list()); } else { - throw new Error("Modules folder does not exist") + throw new Error("Modules folder does not exist"); } ``` It also possible to change the delimiter ```js -modules.list(";") // other than "," +modules.list(";"); // other than "," ``` ## Get last modified date ```js -const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop") -console.log(mkprop.lastModified()) +const mkprop = new SuFile("/data/adb/modules/mkshrc/module.prop"); +console.log(mkprop.lastModified()); ``` ## Deleting files ```js - -const file = new SuFile("/sdcard/file_test.txt") +const file = new SuFile("/sdcard/file_test.txt"); if (file.delete()) { - console.log("Successful deleted") + console.log("Successful deleted"); } else { - console.log("Something went wrong") + console.log("Something went wrong"); } // deleting recursive -file.deleteRecursive() // void +file.deleteRecursive(); // void ``` ## Creating files and folders @@ -86,21 +85,21 @@ file.deleteRecursive() // void This method can multiple things like creating files, folders and parent folders ```js -const hello = new SuFile.create("/sdcard/hello.txt") +const hello = new SuFile.create("/sdcard/hello.txt"); // create a file (default) -hello.create() // hello.create(SuFile.NEW_FILE) +hello.create(); // hello.create(SuFile.NEW_FILE) // create a folder -hello.create(SuFile.NEW_FOLDER) +hello.create(SuFile.NEW_FOLDER); // create folder with parent folders -hello.create(SuFile.NEW_FOLDERS) +hello.create(SuFile.NEW_FOLDERS); ``` ## Access native methods ```js -const native = new SuFile.create("/sdcard/hello.txt") -native.interface +const native = new SuFile.create("/sdcard/hello.txt"); +native.interface; ``` diff --git a/docs/ModConf/hoc/withRequireNewVersion.md b/docs/ModConf/hoc/withRequireNewVersion.md new file mode 100644 index 00000000..3dc3c986 --- /dev/null +++ b/docs/ModConf/hoc/withRequireNewVersion.md @@ -0,0 +1,55 @@ +# Export with a new version requirement + +Only shows the page if the requirement is met + +## Setup + +```js +import { withRequireNewVersion } from "@mmrl/hoc"; +``` + +## Usage + +```jsx +import React from "react"; +import { Page, Toolbar } from "@mmrl/ui"; +import { useActivity } from "@mmrl/hooks"; +import { withRequireNewVersion } from "@mmrl/hoc"; +import { StringsProvider } from "@mmrl/providers"; + +function RenderToolbar() { + const { context, extra } = useActivity(); + const { title = "Default" } = extra; + return ( + + + + + {title} + + ); +} + +function App() { + return Lol; +} + +export default withRequireNewVersion({ + versionCode: 21510, + component: () => { + return ( + + + + ); + }, + // text: "Custom text", + // title: "Custom title" +}); +``` + diff --git a/docs/ModConf/hooks/useActivity.md b/docs/ModConf/hooks/useActivity.md index 18813ac4..d76b20de 100644 --- a/docs/ModConf/hooks/useActivity.md +++ b/docs/ModConf/hooks/useActivity.md @@ -17,59 +17,61 @@ import { Page, Toolbar } from "@mmrl/ui"; import { Button } from "@mui/material"; function RenderToolbar() { - const { context, extra } = useActivity() - const { title = "Default" } = extra - return ( - - - - - {title} - - ) + const { context, extra } = useActivity(); + const { title = "Default" } = extra; + return ( + + + + + {title} + + ); } function App() { - const { context } = useActivity(); + const { context } = useActivity(); - const handleOpen = () => { - context.pushPage({ - component: NewPage, - // don't forget this! - key: "MyNewPage", - // if your page has props - props: {}, - // push any object here - extra: { - title: "Hello", - }, - }); - }; + const handleOpen = () => { + context.pushPage({ + component: NewPage, + // don't forget this! + key: "MyNewPage", + // if your page has props + props: {}, + // push any object here + extra: { + title: "Hello", + }, + }); + }; - return ( - - - - ); + return ( + + + + ); } const allowBack = false; function NewPage() { - return ( - { - if (allowBack) { - e.callParentHandler(); - } - }} - renderToolbar={RenderToolbar} - > - Try to use your back button - - ); + return ( + { + if (allowBack) { + e.callParentHandler(); + } + }} + renderToolbar={RenderToolbar} + > + Try to use your back button + + ); } -export default App +export default App; ``` diff --git a/docs/ModConf/hooks/useStrings.md b/docs/ModConf/hooks/useStrings.md index db565988..d56c3b6d 100644 --- a/docs/ModConf/hooks/useStrings.md +++ b/docs/ModConf/hooks/useStrings.md @@ -3,8 +3,8 @@ ## Setup ```js -import { useStrings } from "@mmrl/hooks" -import { StringsProvider } from "@mmrl/providers" +import { useStrings } from "@mmrl/hooks"; +import { StringsProvider } from "@mmrl/providers"; ``` ## Usage @@ -12,41 +12,38 @@ import { StringsProvider } from "@mmrl/providers" ```jsx import React from "react"; import { Page, Toolbar } from "@mmrl/ui"; -import { useStrings, useActivity } from "@mmrl/hooks" -import { StringsProvider } from "@mmrl/providers" - +import { useStrings, useActivity } from "@mmrl/hooks"; +import { StringsProvider } from "@mmrl/providers"; function RenderToolbar() { - const { context, extra } = useActivity() - const { title = "Default" } = extra - return ( - - - - - {title} - - ) + const { context, extra } = useActivity(); + const { title = "Default" } = extra; + return ( + + + + + {title} + + ); } function App() { - const { strings } = useStrings() + const { strings } = useStrings(); - return ( - - {strings("hello")} - - ); + return {strings("hello")}; } export default () => { - return ( - - - - ) -} + return ( + + + + ); +}; ```