80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { useRef } from "react";
|
|
import ReactDOM, { flushSync } from "react-dom";
|
|
import { createRoot } from "react-dom/client";
|
|
import { AppViewInstance, bootstrapAppAt, LowcoderAppView } from "./src/index";
|
|
|
|
const url = new URL(location.href);
|
|
const appId = url.searchParams.get("appId");
|
|
const baseUrl = url.searchParams.get("baseUrl") || "http://localhost:8000";
|
|
|
|
function ReactDemoApp() {
|
|
const ref = useRef<AppViewInstance | null>(null);
|
|
if (!appId) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div>
|
|
<LowcoderAppView
|
|
ref={ref}
|
|
appId={appId}
|
|
baseUrl={baseUrl}
|
|
onModuleEventTriggered={(e) => {
|
|
console.info("trigger:", e);
|
|
}}
|
|
onModuleOutputChange={(data) => {
|
|
console.info("output:", data);
|
|
}}
|
|
/>
|
|
<div className="ops">
|
|
<button
|
|
onClick={() => {
|
|
ref.current?.setModuleInputs({ userName: "Jack", userAge: 99 });
|
|
}}
|
|
>
|
|
setModuleInputs
|
|
</button>
|
|
<button onClick={() => ref.current?.invokeMethod("setSlider")}>invokeMethod</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
async function bootstrap() {
|
|
if (!appId) {
|
|
return;
|
|
}
|
|
// vanilla js
|
|
const instance = await bootstrapAppAt(appId, document.querySelector("#app1"), {
|
|
baseUrl,
|
|
moduleInputs: { userName: "Lucy" },
|
|
});
|
|
|
|
instance?.on("moduleOutputChange", (output) => {
|
|
console.info("output change:", output);
|
|
});
|
|
|
|
instance?.on("moduleEventTriggered", (eventName) => {
|
|
console.info("event triggered:", eventName);
|
|
});
|
|
|
|
document.querySelector("#app1-ops")?.addEventListener("click", (e) => {
|
|
const target = e.target as HTMLButtonElement;
|
|
const key = target.dataset.key;
|
|
if (key === "setModuleInputs") {
|
|
instance?.setModuleInputs({
|
|
userName: "Tom",
|
|
});
|
|
}
|
|
if (key === "invokeMethod") {
|
|
instance?.invokeMethod("setSlider");
|
|
}
|
|
});
|
|
|
|
// React
|
|
const container = document.querySelector("#app2");
|
|
const root = createRoot(container!);
|
|
root.render(<ReactDemoApp />);
|
|
}
|
|
|
|
bootstrap();
|