gomtm 0.0.387 → 0.0.389
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/block/BlockItem.d.ts +16 -0
- package/dist/esm/block/BlockItem.js +195 -0
- package/dist/esm/block/BlockPage.js +22 -16
- package/dist/esm/block/blocks/hello/edit.d.ts +3 -3
- package/dist/esm/block/blocks/hello/edit.js +4 -5
- package/dist/esm/block/blocks/hello/index.d.ts +0 -2
- package/dist/esm/block/blocks/hello/index.js +1 -3
- package/dist/tsconfig.type.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
export interface BlockItemProps {
|
|
3
|
+
id?: string;
|
|
4
|
+
originPropsList?: any;
|
|
5
|
+
designMode?: boolean;
|
|
6
|
+
overrideData?: any;
|
|
7
|
+
}
|
|
8
|
+
export interface DemoChildrenState extends BlockItemProps {
|
|
9
|
+
setOriginPropsList: (debugData: any) => void;
|
|
10
|
+
setDesignMode: (designMode: boolean) => void;
|
|
11
|
+
setOverrideData: (overrideData: any) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const blockItemContext: import("react").Context<import("zustand").StoreApi<DemoChildrenState> | null>;
|
|
14
|
+
export declare const BlockItemProvider: (props: PropsWithChildren<BlockItemProps>) => import("react").JSX.Element;
|
|
15
|
+
export declare function useBlockItem<T>(selector: (state: DemoChildrenState) => T): T;
|
|
16
|
+
export declare const BlockItem: (props: any) => import("react").JSX.Element;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
+
import { cn } from "mtxuilib/lib/utils";
|
|
35
|
+
import { Dialog, DialogContent, DialogTrigger } from "mtxuilib/ui/dialog";
|
|
36
|
+
import { MtButton } from "mtxuilib/ui/ui-mt/Button";
|
|
37
|
+
import { Children, createContext, createElement, useContext, useMemo, useRef, useState } from "react";
|
|
38
|
+
import { createStore, useStore } from "zustand";
|
|
39
|
+
import { useDemoChildrenBlock } from "./BlockPage";
|
|
40
|
+
import { MtBlockRender, getComponentName } from "./blockRegister";
|
|
41
|
+
const createDemoChildrenStore = (initProps) => {
|
|
42
|
+
return createStore()((set, get) => __spreadProps(__spreadValues({}, initProps), {
|
|
43
|
+
setOriginPropsList: (debugData) => set({ originPropsList: debugData }),
|
|
44
|
+
setDesignMode: (designMode) => set({ designMode }),
|
|
45
|
+
setOverrideData: (overrideData) => set({ overrideData })
|
|
46
|
+
}));
|
|
47
|
+
};
|
|
48
|
+
const blockItemContext = createContext(null);
|
|
49
|
+
const BlockItemProvider = (props) => {
|
|
50
|
+
const _a = props, { children } = _a, etc = __objRest(_a, ["children"]);
|
|
51
|
+
const storeRef = useRef();
|
|
52
|
+
if (!storeRef.current) {
|
|
53
|
+
storeRef.current = createDemoChildrenStore(props);
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsxs(blockItemContext.Provider, { value: storeRef.current, children: [
|
|
56
|
+
/* @__PURE__ */ jsx(BlockItemDesignToolbar, {}),
|
|
57
|
+
children
|
|
58
|
+
] });
|
|
59
|
+
};
|
|
60
|
+
function useBlockItem(selector) {
|
|
61
|
+
const store = useContext(blockItemContext);
|
|
62
|
+
if (!store)
|
|
63
|
+
throw new Error("useBlockItem Missing BlockItemProvider in the tree");
|
|
64
|
+
return useStore(store, selector);
|
|
65
|
+
}
|
|
66
|
+
const BlockItem = (props) => {
|
|
67
|
+
const { children } = props;
|
|
68
|
+
if (!children) {
|
|
69
|
+
return /* @__PURE__ */ jsx("div", { children: "no children" });
|
|
70
|
+
}
|
|
71
|
+
return /* @__PURE__ */ jsxs(BlockItemProvider, { children: [
|
|
72
|
+
/* @__PURE__ */ jsx(BlockItemSetup, {}),
|
|
73
|
+
/* @__PURE__ */ jsx(BlockItemDesignToolbar, {}),
|
|
74
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
75
|
+
/* @__PURE__ */ jsx("h1", { children: "BlockItem" }),
|
|
76
|
+
/* @__PURE__ */ jsx(ChildrenDebugInner, { children })
|
|
77
|
+
] })
|
|
78
|
+
] });
|
|
79
|
+
};
|
|
80
|
+
const BlockItemSetup = () => {
|
|
81
|
+
const setDesignMode = useDemoChildrenBlock((x) => x.setDesignMode);
|
|
82
|
+
const designMode = useDemoChildrenBlock((x) => x.designMode);
|
|
83
|
+
return null;
|
|
84
|
+
};
|
|
85
|
+
const ChildrenDebugInner = (props) => {
|
|
86
|
+
const { children } = props;
|
|
87
|
+
const setDebugData = useDemoChildrenBlock((x) => x.setOriginPropsList);
|
|
88
|
+
const designMode = useDemoChildrenBlock((x) => x.designMode);
|
|
89
|
+
useMemo(() => {
|
|
90
|
+
let data2 = [];
|
|
91
|
+
{
|
|
92
|
+
Children.map(children, (child) => {
|
|
93
|
+
const compName = getComponentName(child.type);
|
|
94
|
+
const debugData = {
|
|
95
|
+
"blockType": compName,
|
|
96
|
+
"props": child.props
|
|
97
|
+
};
|
|
98
|
+
data2 = [...data2, debugData];
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
setDebugData(data2);
|
|
102
|
+
}, [children, setDebugData]);
|
|
103
|
+
if (!children) {
|
|
104
|
+
return /* @__PURE__ */ jsx("div", { children: "no children" });
|
|
105
|
+
}
|
|
106
|
+
return /* @__PURE__ */ jsx("div", { className: cn(
|
|
107
|
+
designMode && "bg-red-300 shadow-md outline"
|
|
108
|
+
), children: Children.map(children, (child, i) => {
|
|
109
|
+
return designMode ? /* @__PURE__ */ jsx(ChildrenEditMode, { child, i }) : /* @__PURE__ */ jsx(ChildrenOrigin, { child, i });
|
|
110
|
+
}) });
|
|
111
|
+
};
|
|
112
|
+
function ChildrenOrigin(props) {
|
|
113
|
+
const { child, i } = props;
|
|
114
|
+
const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
|
|
115
|
+
const overProps = useMemo(() => originPropsList && originPropsList[i].props, [i, originPropsList]);
|
|
116
|
+
return /* @__PURE__ */ jsx(Fragment, { children: createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)) });
|
|
117
|
+
}
|
|
118
|
+
function ChildrenEditMode(props) {
|
|
119
|
+
var _a;
|
|
120
|
+
const { child, i } = props;
|
|
121
|
+
const [open, setOpen] = useState(false);
|
|
122
|
+
const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
|
|
123
|
+
const setOriginPropsList = useDemoChildrenBlock((x) => x.setOriginPropsList);
|
|
124
|
+
const oriProps = useMemo(() => {
|
|
125
|
+
return originPropsList[i];
|
|
126
|
+
}, [i, originPropsList]);
|
|
127
|
+
const Editor = (_a = child.type) == null ? void 0 : _a.Editor;
|
|
128
|
+
console.log("child.type555555555", child.type);
|
|
129
|
+
const overProps = useMemo(() => {
|
|
130
|
+
var _a2;
|
|
131
|
+
if (originPropsList) {
|
|
132
|
+
return (_a2 = originPropsList[i]) == null ? void 0 : _a2.props;
|
|
133
|
+
}
|
|
134
|
+
}, [i, originPropsList]);
|
|
135
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
136
|
+
/* @__PURE__ */ jsxs(
|
|
137
|
+
MtButton,
|
|
138
|
+
{
|
|
139
|
+
className: " absolute right-0 top-0",
|
|
140
|
+
onClick: () => {
|
|
141
|
+
setOpen(true);
|
|
142
|
+
},
|
|
143
|
+
children: [
|
|
144
|
+
"ed(",
|
|
145
|
+
i,
|
|
146
|
+
")"
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)),
|
|
151
|
+
/* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogContent, { children: !Editor ? /* @__PURE__ */ jsx("div", { children: "missing editor" }) : /* @__PURE__ */ jsx(Editor, { props: oriProps, setProps: (values) => {
|
|
152
|
+
console.log("\u8BBE\u7F6E\u65B0\u503C", values);
|
|
153
|
+
setOriginPropsList(originPropsList.map((item, j) => {
|
|
154
|
+
if (i == j) {
|
|
155
|
+
return { props: values };
|
|
156
|
+
}
|
|
157
|
+
return item;
|
|
158
|
+
}));
|
|
159
|
+
} }) }) })
|
|
160
|
+
] });
|
|
161
|
+
}
|
|
162
|
+
const BlockItemDesignToolbar = () => {
|
|
163
|
+
const debugData = useDemoChildrenBlock((x) => x.originPropsList);
|
|
164
|
+
const designMode = useDemoChildrenBlock((x) => x.designMode);
|
|
165
|
+
const setDesignMode = useDemoChildrenBlock((x) => x.setDesignMode);
|
|
166
|
+
if (!designMode) {
|
|
167
|
+
return null;
|
|
168
|
+
}
|
|
169
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1 bg-blue-300 p-1", children: [
|
|
170
|
+
/* @__PURE__ */ jsx(MtButton, { onClick: () => {
|
|
171
|
+
setDesignMode(!designMode);
|
|
172
|
+
}, children: "edit" }),
|
|
173
|
+
/* @__PURE__ */ jsxs(Dialog, { children: [
|
|
174
|
+
/* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "info" }) }),
|
|
175
|
+
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(debugData, null, 2) }) })
|
|
176
|
+
] }),
|
|
177
|
+
/* @__PURE__ */ jsxs(Dialog, { children: [
|
|
178
|
+
/* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { children: "reRender" }) }),
|
|
179
|
+
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(RenderByPresistData, { data: debugData }) })
|
|
180
|
+
] })
|
|
181
|
+
] });
|
|
182
|
+
};
|
|
183
|
+
function RenderByPresistData(props) {
|
|
184
|
+
const { data } = props;
|
|
185
|
+
const items = data;
|
|
186
|
+
return /* @__PURE__ */ jsx("div", { className: "bg-yellow-100 p-2", children: items.map((item, i) => {
|
|
187
|
+
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MtBlockRender, { type: item.blockType, compProps: item.props }) }, i);
|
|
188
|
+
}) });
|
|
189
|
+
}
|
|
190
|
+
export {
|
|
191
|
+
BlockItem,
|
|
192
|
+
BlockItemProvider,
|
|
193
|
+
blockItemContext,
|
|
194
|
+
useBlockItem
|
|
195
|
+
};
|
|
@@ -82,7 +82,6 @@ const BlockPageSetup = () => {
|
|
|
82
82
|
};
|
|
83
83
|
const ChildrenDebugInner = (props) => {
|
|
84
84
|
const { children } = props;
|
|
85
|
-
const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
|
|
86
85
|
const setDebugData = useDemoChildrenBlock((x) => x.setOriginPropsList);
|
|
87
86
|
const designMode = useDemoChildrenBlock((x) => x.designMode);
|
|
88
87
|
useMemo(() => {
|
|
@@ -111,7 +110,12 @@ const ChildrenDebugInner = (props) => {
|
|
|
111
110
|
function ChildrenOrigin(props) {
|
|
112
111
|
const { child, i } = props;
|
|
113
112
|
const originPropsList = useDemoChildrenBlock((x) => x.originPropsList);
|
|
114
|
-
const overProps = useMemo(() =>
|
|
113
|
+
const overProps = useMemo(() => {
|
|
114
|
+
var _a;
|
|
115
|
+
if (originPropsList) {
|
|
116
|
+
return (_a = originPropsList[i]) == null ? void 0 : _a.props;
|
|
117
|
+
}
|
|
118
|
+
}, [i, originPropsList]);
|
|
115
119
|
return /* @__PURE__ */ jsx(Fragment, { children: createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)) });
|
|
116
120
|
}
|
|
117
121
|
function ChildrenEditMode(props) {
|
|
@@ -124,8 +128,13 @@ function ChildrenEditMode(props) {
|
|
|
124
128
|
return originPropsList[i];
|
|
125
129
|
}, [i, originPropsList]);
|
|
126
130
|
const Editor = (_a = child.type) == null ? void 0 : _a.Editor;
|
|
127
|
-
const overProps = useMemo(() =>
|
|
128
|
-
|
|
131
|
+
const overProps = useMemo(() => {
|
|
132
|
+
var _a2;
|
|
133
|
+
if (originPropsList) {
|
|
134
|
+
return (_a2 = originPropsList[i]) == null ? void 0 : _a2.props;
|
|
135
|
+
}
|
|
136
|
+
}, [i, originPropsList]);
|
|
137
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
129
138
|
/* @__PURE__ */ jsxs(
|
|
130
139
|
MtButton,
|
|
131
140
|
{
|
|
@@ -141,18 +150,15 @@ function ChildrenEditMode(props) {
|
|
|
141
150
|
}
|
|
142
151
|
),
|
|
143
152
|
createElement(child.type, __spreadValues(__spreadValues({}, child.props), overProps)),
|
|
144
|
-
/* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */
|
|
145
|
-
"
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}));
|
|
154
|
-
} })
|
|
155
|
-
] }) })
|
|
153
|
+
/* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogContent, { children: !Editor ? /* @__PURE__ */ jsx("div", { children: "missing editor" }) : /* @__PURE__ */ jsx(Editor, { props: oriProps, setProps: (values) => {
|
|
154
|
+
console.log("\u8BBE\u7F6E\u65B0\u503C", values);
|
|
155
|
+
setOriginPropsList(originPropsList.map((item, j) => {
|
|
156
|
+
if (i == j) {
|
|
157
|
+
return { props: values };
|
|
158
|
+
}
|
|
159
|
+
return item;
|
|
160
|
+
}));
|
|
161
|
+
} }) }) })
|
|
156
162
|
] });
|
|
157
163
|
}
|
|
158
164
|
const BlockDesignToolbar = () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export default function HelloBlockEditor(
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export default function HelloBlockEditor(_props: {
|
|
3
|
+
props: any;
|
|
4
|
+
setProps: (props: any) => void;
|
|
5
5
|
}): import("react").JSX.Element;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MtButton } from "mtxuilib/ui/ui-mt/Button";
|
|
3
|
-
function HelloBlockEditor(
|
|
4
|
-
const {
|
|
3
|
+
function HelloBlockEditor(_props) {
|
|
4
|
+
const { props, setProps } = _props;
|
|
5
5
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
6
6
|
/* @__PURE__ */ jsx("h1", { children: "hello editor" }),
|
|
7
7
|
/* @__PURE__ */ jsx(MtButton, { onClick: () => {
|
|
8
8
|
console.log("todo set text");
|
|
9
|
-
|
|
10
|
-
}, children: "set text" })
|
|
11
|
-
/* @__PURE__ */ jsx("pre", { children: JSON.stringify(preProps, null, 2) })
|
|
9
|
+
setProps({ text: "new text-------------------" });
|
|
10
|
+
}, children: "set text" })
|
|
12
11
|
] });
|
|
13
12
|
}
|
|
14
13
|
export {
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare function HelloBlock(props: {
|
|
3
|
-
id: string;
|
|
4
3
|
text?: string;
|
|
5
4
|
}): import("react").JSX.Element;
|
|
6
5
|
declare namespace HelloBlock {
|
|
7
|
-
var blockName: string;
|
|
8
6
|
var Editor: import("react").LazyExoticComponent<typeof import("./edit").default>;
|
|
9
7
|
}
|
|
10
8
|
export default HelloBlock;
|
|
@@ -18,12 +18,10 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
import { jsx } from "react/jsx-runtime";
|
|
19
19
|
import { lazy } from "react";
|
|
20
20
|
const LzHelloBlock = lazy(() => import("./Hello"));
|
|
21
|
-
const LzEdit = lazy(() => import("./edit"));
|
|
22
21
|
function HelloBlock(props) {
|
|
23
22
|
return /* @__PURE__ */ jsx(LzHelloBlock, __spreadValues({}, props));
|
|
24
23
|
}
|
|
25
|
-
HelloBlock.
|
|
26
|
-
HelloBlock.Editor = LzEdit;
|
|
24
|
+
HelloBlock.Editor = lazy(() => import("./edit"));
|
|
27
25
|
export {
|
|
28
26
|
HelloBlock as default
|
|
29
27
|
};
|