gomtm 0.0.385 → 0.0.387

package/dist/esm/block/BlockPage.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+export interface DemoChildrenProps {
+    originPropsList?: any;
+    designMode?: boolean;
+    overrideData?: any;
+}
+export interface DemoChildrenState extends DemoChildrenProps {
+    setOriginPropsList: (debugData: any) => void;
+    setDesignMode: (designMode: boolean) => void;
+    setOverrideData: (overrideData: any) => void;
+}
+export declare const blockContext: import("react").Context<import("zustand").StoreApi<DemoChildrenState> | null>;
+export declare const DemoChildrenProvider: (props: PropsWithChildren<DemoChildrenProps>) => import("react").JSX.Element;
+export declare function useDemoChildrenBlock<T>(selector: (state: DemoChildrenState) => T): T;
+export declare const BlockPage: (props: any) => import("react").JSX.Element;

package/dist/esm/block/BlockPage.js

@@ -0,0 +1,191 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "mtxuilib/lib/utils";
+import { Dialog, DialogContent, DialogTrigger } from "mtxuilib/ui/dialog";
+import { MtButton } from "mtxuilib/ui/ui-mt/Button";
+import { Children, createContext, createElement, useContext, useMemo, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { createStore, useStore } from "zustand";
+import { MtBlockRender, getComponentName } from "./blockRegister";
+import { HOTKEY_Design_mode } from "./consts";
+const createDemoChildrenStore = (initProps) => {
+  return createStore()((set, get) => __spreadProps(__spreadValues({}, initProps), {
+    setOriginPropsList: (debugData) => set({ originPropsList: debugData }),
+    setDesignMode: (designMode) => set({ designMode }),
+    setOverrideData: (overrideData) => set({ overrideData })
+  }));
+};
+const blockContext = createContext(null);
+const DemoChildrenProvider = (props) => {
+  const _a = props, { children } = _a, etc = __objRest(_a, ["children"]);
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = createDemoChildrenStore(props);
+  }
+  return /* @__PURE__ */ jsxs(blockContext.Provider, { value: storeRef.current, children: [
+    /* @__PURE__ */ jsx(BlockDesignToolbar, {}),
+    children,
+    /* @__PURE__ */ jsx(BlockPageSetup, {})
+  ] });
+};
+function useDemoChildrenBlock(selector) {
+  const store = useContext(blockContext);
+  if (!store)
+    throw new Error("useDemoChildrenBlock Missing DemoChildrenProvider in the tree");
+  return useStore(store, selector);
+}
+const BlockPage = (props) => {
+  const { children } = props;
+  if (!children) {
+    return /* @__PURE__ */ jsx("div", { children: "no children" });
+  }
+  return /* @__PURE__ */ jsx(DemoChildrenProvider, { children: /* @__PURE__ */ jsx(ChildrenDebugInner, { children }) });
+};
+const BlockPageSetup = () => {
+  const setDesignMode = useDemoChildrenBlock((x) => x.setDesignMode);
+  const designMode = useDemoChildrenBlock((x) => x.designMode);
+  useHotkeys(HOTKEY_Design_mode, () => {
+    setDesignMode(!designMode);
+  }, [setDesignMode]);
+  return null;
+};
+const ChildrenDebugInner = (props) => {
+  const { children } = props;
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const setDebugData = useDemoChildrenBlock((x) => x.setOriginPropsList);
+  const designMode = useDemoChildrenBlock((x) => x.designMode);
+  useMemo(() => {
+    let data2 = [];
+    {
+      Children.map(children, (child) => {
+        const compName = getComponentName(child.type);
+        const debugData = {
+          "blockType": compName,
+          "props": child.props
+        };
+        data2 = [...data2, debugData];
+      });
+    }
+    setDebugData(data2);
+  }, [children, setDebugData]);
+  if (!children) {
+    return /* @__PURE__ */ jsx("div", { children: "no children" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(
+    designMode && "bg-red-300 shadow-md outline"
+  ), children: Children.map(children, (child, i) => {
+    return designMode ? /* @__PURE__ */ jsx(ChildrenEditMode, { child, i }) : /* @__PURE__ */ jsx(ChildrenOrigin, { child, i });
+  }) });
+};
+function ChildrenOrigin(props) {
+  const { child, i } = props;
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const overProps = useMemo(() => originPropsList && originPropsList[i].props, [i, originPropsList]);
+  return /* @__PURE__ */ jsx(Fragment, { children: createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)) });
+}
+function ChildrenEditMode(props) {
+  var _a;
+  const { child, i } = props;
+  const [open, setOpen] = useState(false);
+  const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
+  const setOriginPropsList = useDemoChildrenBlock((x) => x.setOriginPropsList);
+  const oriProps = useMemo(() => {
+    return originPropsList[i];
+  }, [i, originPropsList]);
+  const Editor = (_a = child.type) == null ? void 0 : _a.Editor;
+  const overProps = useMemo(() => originPropsList && originPropsList[i].props, [i, originPropsList]);
+  return /* @__PURE__ */ jsxs("div", { className: " relative", children: [
+    /* @__PURE__ */ jsxs(
+      MtButton,
+      {
+        className: " absolute right-0 top-0",
+        onClick: () => {
+          setOpen(true);
+        },
+        children: [
+          "ed(",
+          i,
+          ")"
+        ]
+      }
+    ),
+    createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      "editor",
+      Editor && /* @__PURE__ */ jsx(Editor, { preProps: oriProps, setNewProps: (values) => {
+        console.log("\u8BBE\u7F6E\u65B0\u503C", values);
+        setOriginPropsList(originPropsList.map((item, j) => {
+          if (i == j) {
+            return { props: values };
+          }
+          return item;
+        }));
+      } })
+    ] }) })
+  ] });
+}
+const BlockDesignToolbar = () => {
+  const debugData = useDemoChildrenBlock((x) => x.originPropsList);
+  const designMode = useDemoChildrenBlock((x) => x.designMode);
+  const setDesignMode = useDemoChildrenBlock((x) => x.setDesignMode);
+  if (!designMode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1 bg-slate-600 p-2", children: [
+    /* @__PURE__ */ jsx(MtButton, { onClick: () => {
+      setDesignMode(!designMode);
+    }, children: "edit" }),
+    /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "info" }) }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(debugData, null, 2) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "reRender" }) }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(RenderByPresistData, { data: debugData }) })
+    ] })
+  ] });
+};
+function RenderByPresistData(props) {
+  const { data } = props;
+  const items = data;
+  return /* @__PURE__ */ jsx("div", { className: "bg-yellow-100 p-2", children: items.map((item, i) => {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MtBlockRender, { type: item.blockType, compProps: item.props }) }, i);
+  }) });
+}
+export {
+  BlockPage,
+  DemoChildrenProvider,
+  blockContext,
+  useDemoChildrenBlock
+};

package/dist/esm/block/consts.d.ts

@@ -0,0 +1 @@
+export declare const HOTKEY_Design_mode = "alt+d";

package/dist/esm/block/consts.js

@@ -0,0 +1,4 @@
+const HOTKEY_Design_mode = "alt+d";
+export {
+  HOTKEY_Design_mode
+};