@object-ui/plugin-form 0.3.0 → 0.5.0
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/.turbo/turbo-build.log +19 -0
- package/CHANGELOG.md +13 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +212 -197
- package/dist/index.umd.cjs +2 -2
- package/dist/packages/plugin-form/src/ObjectForm.msw.test.d.ts +0 -0
- package/dist/packages/plugin-form/src/ObjectForm.test.d.ts +1 -0
- package/package.json +10 -8
- package/src/ObjectForm.msw.test.tsx +129 -0
- package/src/ObjectForm.test.tsx +61 -0
- package/src/ObjectForm.tsx +63 -9
- package/src/index.tsx +5 -2
- package/vite.config.ts +18 -0
- /package/dist/{plugin-form → packages/plugin-form}/src/ObjectForm.d.ts +0 -0
- /package/dist/{plugin-form → packages/plugin-form}/src/index.d.ts +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
> @object-ui/plugin-form@0.5.0 build /home/runner/work/objectui/objectui/packages/plugin-form
|
|
3
|
+
> vite build
|
|
4
|
+
|
|
5
|
+
[36mvite v7.3.1 [32mbuilding client environment for production...[36m[39m
|
|
6
|
+
transforming...
|
|
7
|
+
[32m✓[39m 11 modules transformed.
|
|
8
|
+
rendering chunks...
|
|
9
|
+
[32m
|
|
10
|
+
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
11
|
+
computing gzip size...
|
|
12
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m15.72 kB[22m[1m[22m[2m │ gzip: 5.05 kB[22m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 12353ms.
|
|
14
|
+
[39m
|
|
15
|
+
[33mNo name was provided for external module "@object-ui/core" in "output.globals" – guessing "core".[39m
|
|
16
|
+
[33mNo name was provided for external module "@object-ui/react" in "output.globals" – guessing "react".[39m
|
|
17
|
+
[33mNo name was provided for external module "@object-ui/fields" in "output.globals" – guessing "fields".[39m
|
|
18
|
+
[2mdist/[22m[36mindex.umd.cjs [39m[1m[2m11.34 kB[22m[1m[22m[2m │ gzip: 4.55 kB[22m
|
|
19
|
+
[32m✓ built in 13.58s[39m
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# @object-ui/plugin-form
|
|
2
|
+
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Maintenance release - Documentation and build improvements
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @object-ui/types@0.3.1
|
|
10
|
+
- @object-ui/core@0.3.1
|
|
11
|
+
- @object-ui/react@0.3.1
|
|
12
|
+
- @object-ui/components@0.3.1
|
|
13
|
+
- @object-ui/fields@0.3.1
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './plugin-form/src/index'
|
|
1
|
+
export * from './packages/plugin-form/src/index'
|
|
2
2
|
export {}
|
package/dist/index.js
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ComponentRegistry as
|
|
3
|
-
import { SchemaRenderer as
|
|
4
|
-
import { buildValidationRules as
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
function
|
|
8
|
-
if (
|
|
9
|
-
|
|
10
|
-
var r = /* @__PURE__ */ Symbol.for("react.transitional.element"),
|
|
11
|
-
function
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
for (var
|
|
16
|
-
|
|
17
|
-
} else
|
|
18
|
-
return
|
|
1
|
+
import re, { useState as A, useEffect as I, useCallback as Q } from "react";
|
|
2
|
+
import { ComponentRegistry as oe } from "@object-ui/core";
|
|
3
|
+
import { SchemaRenderer as ie } from "@object-ui/react";
|
|
4
|
+
import { buildValidationRules as ae, mapFieldTypeToFormType as le, formatFileSize as se, evaluateCondition as ue } from "@object-ui/fields";
|
|
5
|
+
var D = { exports: {} }, P = {};
|
|
6
|
+
var Z;
|
|
7
|
+
function ce() {
|
|
8
|
+
if (Z) return P;
|
|
9
|
+
Z = 1;
|
|
10
|
+
var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), c = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
11
|
+
function f(_, m, b) {
|
|
12
|
+
var T = null;
|
|
13
|
+
if (b !== void 0 && (T = "" + b), m.key !== void 0 && (T = "" + m.key), "key" in m) {
|
|
14
|
+
b = {};
|
|
15
|
+
for (var y in m)
|
|
16
|
+
y !== "key" && (b[y] = m[y]);
|
|
17
|
+
} else b = m;
|
|
18
|
+
return m = b.ref, {
|
|
19
19
|
$$typeof: r,
|
|
20
|
-
type:
|
|
21
|
-
key:
|
|
22
|
-
ref:
|
|
23
|
-
props:
|
|
20
|
+
type: _,
|
|
21
|
+
key: T,
|
|
22
|
+
ref: m !== void 0 ? m : null,
|
|
23
|
+
props: b
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
|
-
return
|
|
26
|
+
return P.Fragment = c, P.jsx = f, P.jsxs = f, P;
|
|
27
27
|
}
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
function
|
|
31
|
-
return
|
|
28
|
+
var F = {};
|
|
29
|
+
var K;
|
|
30
|
+
function fe() {
|
|
31
|
+
return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
32
32
|
function r(e) {
|
|
33
33
|
if (e == null) return null;
|
|
34
34
|
if (typeof e == "function")
|
|
35
|
-
return e.$$typeof ===
|
|
35
|
+
return e.$$typeof === O ? null : e.displayName || e.name || null;
|
|
36
36
|
if (typeof e == "string") return e;
|
|
37
37
|
switch (e) {
|
|
38
|
-
case
|
|
38
|
+
case N:
|
|
39
39
|
return "Fragment";
|
|
40
|
-
case w:
|
|
41
|
-
return "Profiler";
|
|
42
40
|
case a:
|
|
41
|
+
return "Profiler";
|
|
42
|
+
case $:
|
|
43
43
|
return "StrictMode";
|
|
44
|
-
case
|
|
44
|
+
case x:
|
|
45
45
|
return "Suspense";
|
|
46
|
-
case
|
|
46
|
+
case t:
|
|
47
47
|
return "SuspenseList";
|
|
48
|
-
case
|
|
48
|
+
case o:
|
|
49
49
|
return "Activity";
|
|
50
50
|
}
|
|
51
51
|
if (typeof e == "object")
|
|
52
52
|
switch (typeof e.tag == "number" && console.error(
|
|
53
53
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
54
54
|
), e.$$typeof) {
|
|
55
|
-
case
|
|
55
|
+
case W:
|
|
56
56
|
return "Portal";
|
|
57
|
-
case
|
|
57
|
+
case p:
|
|
58
58
|
return e.displayName || "Context";
|
|
59
|
-
case
|
|
59
|
+
case l:
|
|
60
60
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
61
|
-
case
|
|
61
|
+
case j:
|
|
62
62
|
var n = e.render;
|
|
63
63
|
return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
64
|
-
case
|
|
64
|
+
case V:
|
|
65
65
|
return n = e.displayName || null, n !== null ? n : r(e.type) || "Memo";
|
|
66
|
-
case
|
|
66
|
+
case g:
|
|
67
67
|
n = e._payload, e = e._init;
|
|
68
68
|
try {
|
|
69
69
|
return r(e(n));
|
|
@@ -72,29 +72,29 @@ function de() {
|
|
|
72
72
|
}
|
|
73
73
|
return null;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function c(e) {
|
|
76
76
|
return "" + e;
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function f(e) {
|
|
79
79
|
try {
|
|
80
|
-
|
|
80
|
+
c(e);
|
|
81
81
|
var n = !1;
|
|
82
82
|
} catch {
|
|
83
83
|
n = !0;
|
|
84
84
|
}
|
|
85
85
|
if (n) {
|
|
86
86
|
n = console;
|
|
87
|
-
var i = n.error,
|
|
87
|
+
var i = n.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
88
88
|
return i.call(
|
|
89
89
|
n,
|
|
90
90
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
91
|
-
|
|
92
|
-
),
|
|
91
|
+
s
|
|
92
|
+
), c(e);
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
function
|
|
96
|
-
if (e ===
|
|
97
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
95
|
+
function _(e) {
|
|
96
|
+
if (e === N) return "<>";
|
|
97
|
+
if (typeof e == "object" && e !== null && e.$$typeof === g)
|
|
98
98
|
return "<...>";
|
|
99
99
|
try {
|
|
100
100
|
var n = r(e);
|
|
@@ -103,23 +103,23 @@ function de() {
|
|
|
103
103
|
return "<...>";
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
function
|
|
107
|
-
var e =
|
|
106
|
+
function m() {
|
|
107
|
+
var e = L.A;
|
|
108
108
|
return e === null ? null : e.getOwner();
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function b() {
|
|
111
111
|
return Error("react-stack-top-frame");
|
|
112
112
|
}
|
|
113
|
-
function
|
|
114
|
-
if (
|
|
113
|
+
function T(e) {
|
|
114
|
+
if (U.call(e, "key")) {
|
|
115
115
|
var n = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
116
116
|
if (n && n.isReactWarning) return !1;
|
|
117
117
|
}
|
|
118
118
|
return e.key !== void 0;
|
|
119
119
|
}
|
|
120
|
-
function
|
|
120
|
+
function y(e, n) {
|
|
121
121
|
function i() {
|
|
122
|
-
|
|
122
|
+
J || (J = !0, console.error(
|
|
123
123
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
124
124
|
n
|
|
125
125
|
));
|
|
@@ -129,23 +129,23 @@ function de() {
|
|
|
129
129
|
configurable: !0
|
|
130
130
|
});
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function Y() {
|
|
133
133
|
var e = r(this.type);
|
|
134
|
-
return
|
|
134
|
+
return G[e] || (G[e] = !0, console.error(
|
|
135
135
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
136
136
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
137
137
|
}
|
|
138
|
-
function
|
|
139
|
-
var
|
|
138
|
+
function v(e, n, i, s, C, q) {
|
|
139
|
+
var u = i.ref;
|
|
140
140
|
return e = {
|
|
141
|
-
$$typeof:
|
|
141
|
+
$$typeof: h,
|
|
142
142
|
type: e,
|
|
143
143
|
key: n,
|
|
144
144
|
props: i,
|
|
145
|
-
_owner:
|
|
146
|
-
}, (
|
|
145
|
+
_owner: s
|
|
146
|
+
}, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
|
|
147
147
|
enumerable: !1,
|
|
148
|
-
get:
|
|
148
|
+
get: Y
|
|
149
149
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
150
150
|
configurable: !1,
|
|
151
151
|
enumerable: !1,
|
|
@@ -160,219 +160,233 @@ function de() {
|
|
|
160
160
|
configurable: !1,
|
|
161
161
|
enumerable: !1,
|
|
162
162
|
writable: !0,
|
|
163
|
-
value:
|
|
163
|
+
value: C
|
|
164
164
|
}), Object.defineProperty(e, "_debugTask", {
|
|
165
165
|
configurable: !1,
|
|
166
166
|
enumerable: !1,
|
|
167
167
|
writable: !0,
|
|
168
|
-
value:
|
|
168
|
+
value: q
|
|
169
169
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
170
170
|
}
|
|
171
|
-
function
|
|
172
|
-
var
|
|
173
|
-
if (
|
|
174
|
-
if (
|
|
175
|
-
if (
|
|
176
|
-
for (
|
|
177
|
-
R(s
|
|
178
|
-
Object.freeze && Object.freeze(
|
|
171
|
+
function S(e, n, i, s, C, q) {
|
|
172
|
+
var u = n.children;
|
|
173
|
+
if (u !== void 0)
|
|
174
|
+
if (s)
|
|
175
|
+
if (te(u)) {
|
|
176
|
+
for (s = 0; s < u.length; s++)
|
|
177
|
+
R(u[s]);
|
|
178
|
+
Object.freeze && Object.freeze(u);
|
|
179
179
|
} else
|
|
180
180
|
console.error(
|
|
181
181
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
182
182
|
);
|
|
183
|
-
else R(
|
|
184
|
-
if (
|
|
185
|
-
|
|
186
|
-
var
|
|
187
|
-
return
|
|
183
|
+
else R(u);
|
|
184
|
+
if (U.call(n, "key")) {
|
|
185
|
+
u = r(e);
|
|
186
|
+
var k = Object.keys(n).filter(function(ne) {
|
|
187
|
+
return ne !== "key";
|
|
188
188
|
});
|
|
189
|
-
|
|
189
|
+
s = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", B[u + s] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
190
190
|
`A props object containing a "key" prop is being spread into JSX:
|
|
191
191
|
let props = %s;
|
|
192
192
|
<%s {...props} />
|
|
193
193
|
React keys must be passed directly to JSX without using spread:
|
|
194
194
|
let props = %s;
|
|
195
195
|
<%s key={someKey} {...props} />`,
|
|
196
|
-
l,
|
|
197
196
|
s,
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
197
|
+
u,
|
|
198
|
+
k,
|
|
199
|
+
u
|
|
200
|
+
), B[u + s] = !0);
|
|
201
201
|
}
|
|
202
|
-
if (
|
|
202
|
+
if (u = null, i !== void 0 && (f(i), u = "" + i), T(n) && (f(n.key), u = "" + n.key), "key" in n) {
|
|
203
203
|
i = {};
|
|
204
|
-
for (var
|
|
205
|
-
|
|
204
|
+
for (var z in n)
|
|
205
|
+
z !== "key" && (i[z] = n[z]);
|
|
206
206
|
} else i = n;
|
|
207
|
-
return
|
|
207
|
+
return u && y(
|
|
208
208
|
i,
|
|
209
209
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
210
|
-
),
|
|
210
|
+
), v(
|
|
211
211
|
e,
|
|
212
|
-
|
|
212
|
+
u,
|
|
213
213
|
i,
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
214
|
+
m(),
|
|
215
|
+
C,
|
|
216
|
+
q
|
|
217
217
|
);
|
|
218
218
|
}
|
|
219
219
|
function R(e) {
|
|
220
|
-
|
|
220
|
+
d(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? d(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
221
221
|
}
|
|
222
|
-
function
|
|
223
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
222
|
+
function d(e) {
|
|
223
|
+
return typeof e == "object" && e !== null && e.$$typeof === h;
|
|
224
224
|
}
|
|
225
|
-
var
|
|
225
|
+
var w = re, h = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), N = /* @__PURE__ */ Symbol.for("react.fragment"), $ = /* @__PURE__ */ Symbol.for("react.strict_mode"), a = /* @__PURE__ */ Symbol.for("react.profiler"), l = /* @__PURE__ */ Symbol.for("react.consumer"), p = /* @__PURE__ */ Symbol.for("react.context"), j = /* @__PURE__ */ Symbol.for("react.forward_ref"), x = /* @__PURE__ */ Symbol.for("react.suspense"), t = /* @__PURE__ */ Symbol.for("react.suspense_list"), V = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), o = /* @__PURE__ */ Symbol.for("react.activity"), O = /* @__PURE__ */ Symbol.for("react.client.reference"), L = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, te = Array.isArray, M = console.createTask ? console.createTask : function() {
|
|
226
226
|
return null;
|
|
227
227
|
};
|
|
228
|
-
|
|
228
|
+
w = {
|
|
229
229
|
react_stack_bottom_frame: function(e) {
|
|
230
230
|
return e();
|
|
231
231
|
}
|
|
232
232
|
};
|
|
233
|
-
var
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
)(),
|
|
237
|
-
|
|
238
|
-
var
|
|
239
|
-
return
|
|
233
|
+
var J, G = {}, X = w.react_stack_bottom_frame.bind(
|
|
234
|
+
w,
|
|
235
|
+
b
|
|
236
|
+
)(), H = M(_(b)), B = {};
|
|
237
|
+
F.Fragment = N, F.jsx = function(e, n, i) {
|
|
238
|
+
var s = 1e4 > L.recentlyCreatedOwnerStacks++;
|
|
239
|
+
return S(
|
|
240
240
|
e,
|
|
241
241
|
n,
|
|
242
242
|
i,
|
|
243
243
|
!1,
|
|
244
|
-
|
|
245
|
-
|
|
244
|
+
s ? Error("react-stack-top-frame") : X,
|
|
245
|
+
s ? M(_(e)) : H
|
|
246
246
|
);
|
|
247
|
-
},
|
|
248
|
-
var
|
|
249
|
-
return
|
|
247
|
+
}, F.jsxs = function(e, n, i) {
|
|
248
|
+
var s = 1e4 > L.recentlyCreatedOwnerStacks++;
|
|
249
|
+
return S(
|
|
250
250
|
e,
|
|
251
251
|
n,
|
|
252
252
|
i,
|
|
253
253
|
!0,
|
|
254
|
-
|
|
255
|
-
|
|
254
|
+
s ? Error("react-stack-top-frame") : X,
|
|
255
|
+
s ? M(_(e)) : H
|
|
256
256
|
);
|
|
257
257
|
};
|
|
258
|
-
})()),
|
|
258
|
+
})()), F;
|
|
259
259
|
}
|
|
260
|
-
var
|
|
261
|
-
function
|
|
262
|
-
return
|
|
260
|
+
var ee;
|
|
261
|
+
function de() {
|
|
262
|
+
return ee || (ee = 1, process.env.NODE_ENV === "production" ? D.exports = ce() : D.exports = fe()), D.exports;
|
|
263
263
|
}
|
|
264
|
-
var
|
|
265
|
-
const
|
|
264
|
+
var E = de();
|
|
265
|
+
const pe = ({
|
|
266
266
|
schema: r,
|
|
267
|
-
dataSource:
|
|
267
|
+
dataSource: c
|
|
268
268
|
}) => {
|
|
269
|
-
const [
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}, [
|
|
273
|
-
const
|
|
269
|
+
const [f, _] = A(null), [m, b] = A([]), [T, y] = A(null), [Y, v] = A(!0), [S, R] = A(null), d = r.customFields && r.customFields.length > 0;
|
|
270
|
+
I(() => {
|
|
271
|
+
d && (y(r.initialData || r.initialValues || {}), v(!1));
|
|
272
|
+
}, [d, r.initialData, r.initialValues]), I(() => {
|
|
273
|
+
const a = async () => {
|
|
274
274
|
try {
|
|
275
|
-
if (!
|
|
275
|
+
if (!c)
|
|
276
276
|
throw new Error("DataSource is required when using ObjectQL schema fetching (inline fields not provided)");
|
|
277
|
-
const
|
|
278
|
-
|
|
279
|
-
} catch (
|
|
280
|
-
console.error("Failed to fetch object schema:",
|
|
277
|
+
const l = await c.getObjectSchema(r.objectName);
|
|
278
|
+
_(l);
|
|
279
|
+
} catch (l) {
|
|
280
|
+
console.error("Failed to fetch object schema:", l), R(l);
|
|
281
281
|
}
|
|
282
282
|
};
|
|
283
|
-
|
|
283
|
+
d ? _({
|
|
284
284
|
name: r.objectName,
|
|
285
285
|
fields: {}
|
|
286
|
-
}) : r.objectName &&
|
|
287
|
-
}, [r.objectName,
|
|
288
|
-
|
|
286
|
+
}) : r.objectName && c && a();
|
|
287
|
+
}, [r.objectName, c, d]), I(() => {
|
|
288
|
+
f && !d && (async () => {
|
|
289
289
|
if (!r.recordId || r.mode === "create") {
|
|
290
|
-
|
|
290
|
+
y(r.initialData || r.initialValues || {}), v(!1);
|
|
291
291
|
return;
|
|
292
292
|
}
|
|
293
|
-
if (!
|
|
294
|
-
if (!
|
|
295
|
-
R(new Error("DataSource is required for fetching record data (inline data not provided)")),
|
|
293
|
+
if (!d) {
|
|
294
|
+
if (!c) {
|
|
295
|
+
R(new Error("DataSource is required for fetching record data (inline data not provided)")), v(!1);
|
|
296
296
|
return;
|
|
297
297
|
}
|
|
298
|
-
|
|
298
|
+
v(!0);
|
|
299
299
|
try {
|
|
300
|
-
const
|
|
301
|
-
|
|
302
|
-
} catch (
|
|
303
|
-
console.error("Failed to fetch record:",
|
|
300
|
+
const l = await c.findOne(r.objectName, r.recordId);
|
|
301
|
+
y(l);
|
|
302
|
+
} catch (l) {
|
|
303
|
+
console.error("Failed to fetch record:", l), R(l);
|
|
304
304
|
} finally {
|
|
305
|
-
|
|
305
|
+
v(!1);
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
308
|
})();
|
|
309
|
-
}, [r.objectName, r.recordId, r.mode, r.initialValues, r.initialData,
|
|
310
|
-
if (
|
|
311
|
-
|
|
309
|
+
}, [r.objectName, r.recordId, r.mode, r.initialValues, r.initialData, c, f, d]), I(() => {
|
|
310
|
+
if (d && r.customFields) {
|
|
311
|
+
b(r.customFields), v(!1);
|
|
312
312
|
return;
|
|
313
313
|
}
|
|
314
|
-
if (!
|
|
315
|
-
const
|
|
316
|
-
(
|
|
317
|
-
const
|
|
318
|
-
if (!
|
|
319
|
-
const
|
|
320
|
-
if (
|
|
321
|
-
const
|
|
322
|
-
if (
|
|
323
|
-
|
|
324
|
-
|
|
314
|
+
if (!f) return;
|
|
315
|
+
const a = [], l = r.fields || Object.keys(f.fields || {});
|
|
316
|
+
(Array.isArray(l) ? l : Object.keys(l)).forEach((j) => {
|
|
317
|
+
const x = typeof j == "string" ? j : j.name;
|
|
318
|
+
if (!x) return;
|
|
319
|
+
const t = f.fields?.[x];
|
|
320
|
+
if (!t && !d) return;
|
|
321
|
+
const V = !t?.permissions || t?.permissions.write !== !1;
|
|
322
|
+
if (r.mode !== "view" && !V) return;
|
|
323
|
+
const g = r.customFields?.find((o) => o.name === x);
|
|
324
|
+
if (g)
|
|
325
|
+
a.push(g);
|
|
326
|
+
else if (t) {
|
|
325
327
|
const o = {
|
|
326
|
-
name:
|
|
327
|
-
label: t.label ||
|
|
328
|
-
type:
|
|
328
|
+
name: x,
|
|
329
|
+
label: t.label || j,
|
|
330
|
+
type: le(t.type),
|
|
329
331
|
required: t.required || !1,
|
|
330
332
|
disabled: r.readOnly || r.mode === "view" || t.readonly,
|
|
331
333
|
placeholder: t.placeholder,
|
|
332
334
|
description: t.help || t.description,
|
|
333
|
-
validation:
|
|
335
|
+
validation: ae(t),
|
|
336
|
+
// Important: Pass the original field metadata so widgets can access properties like precision, currency, etc.
|
|
337
|
+
field: t
|
|
334
338
|
};
|
|
335
|
-
if ((t.type === "select" || t.type === "lookup" || t.type === "master_detail") && (o.options = t.options || [], o.multiple = t.multiple), (t.type === "number" || t.type === "currency" || t.type === "percent") && (o.min = t.min, o.max = t.max, o.step = t.precision ? Math.pow(10, -t.precision) : void 0), (t.type === "text" || t.type === "textarea" || t.type === "markdown" || t.type === "html") && (o.maxLength = t.max_length, o.minLength = t.min_length), (t.type === "file" || t.type === "image") && (o.multiple = t.multiple, o.accept = t.accept ? t.accept.join(",") : void 0, t.max_size)) {
|
|
336
|
-
const
|
|
337
|
-
o.description = o.description ? `${o.description} (${
|
|
339
|
+
if ((t.type === "select" || t.type === "lookup" || t.type === "master_detail") && (o.options = t.options || [], o.multiple = t.multiple), (t.type === "number" || t.type === "currency" || t.type === "percent") && (o.inputType = "number", o.min = t.min, o.max = t.max, o.step = t.precision ? Math.pow(10, -t.precision) : void 0), t.type === "date" && (o.inputType = "date"), t.type === "datetime" && (o.inputType = "datetime-local"), (t.type === "text" || t.type === "textarea" || t.type === "markdown" || t.type === "html") && (o.maxLength = t.max_length, o.minLength = t.min_length), (t.type === "file" || t.type === "image") && (o.inputType = "file", o.multiple = t.multiple, o.accept = t.accept ? t.accept.join(",") : void 0, t.max_size)) {
|
|
340
|
+
const O = `Max size: ${se(t.max_size)}`;
|
|
341
|
+
o.description = o.description ? `${o.description} (${O})` : O;
|
|
338
342
|
}
|
|
339
|
-
t.type === "email" && (o.inputType = "email"), t.type === "phone" && (o.inputType = "tel"), t.type === "url" && (o.inputType = "url"), t.type === "password" && (o.inputType = "password"), t.type === "time" && (o.inputType = "time"), (t.type === "formula" || t.type === "summary" || t.type === "auto_number") && (o.disabled = !0), t.visible_on && (o.visible = (
|
|
343
|
+
t.type === "email" && (o.inputType = "email"), t.type === "phone" && (o.inputType = "tel"), t.type === "url" && (o.inputType = "url"), t.type === "password" && (o.inputType = "password"), t.type === "time" && (o.inputType = "time"), (t.type === "formula" || t.type === "summary" || t.type === "auto_number") && (o.disabled = !0), t.visible_on && (o.visible = (O) => ue(t.visible_on, O)), a.push(o);
|
|
340
344
|
}
|
|
341
|
-
}),
|
|
342
|
-
}, [
|
|
343
|
-
const
|
|
344
|
-
if (
|
|
345
|
-
return r.onSuccess && await r.onSuccess(
|
|
346
|
-
if (!
|
|
345
|
+
}), b(a), v(!1);
|
|
346
|
+
}, [f, r.fields, r.customFields, r.readOnly, r.mode, d]);
|
|
347
|
+
const w = Q(async (a, l) => {
|
|
348
|
+
if (a && (a.nativeEvent || a._reactName === "onSubmit") && (console.warn("ObjectForm: Received Event instead of data in handleSubmit! This suggests a Form renderer issue."), l === void 0 && (l = a, a = {})), d && !c)
|
|
349
|
+
return r.onSuccess && await r.onSuccess(a), a;
|
|
350
|
+
if (!c)
|
|
347
351
|
throw new Error("DataSource is required for form submission (inline mode not configured)");
|
|
348
352
|
try {
|
|
349
|
-
let
|
|
353
|
+
let p;
|
|
350
354
|
if (r.mode === "create")
|
|
351
|
-
|
|
355
|
+
p = await c.create(r.objectName, a);
|
|
352
356
|
else if (r.mode === "edit" && r.recordId)
|
|
353
|
-
|
|
357
|
+
p = await c.update(r.objectName, r.recordId, a);
|
|
354
358
|
else
|
|
355
359
|
throw new Error("Invalid form mode or missing record ID");
|
|
356
|
-
return r.onSuccess && await r.onSuccess(
|
|
357
|
-
} catch (
|
|
358
|
-
throw console.error("Failed to submit form:",
|
|
360
|
+
return r.onSuccess && await r.onSuccess(p), p;
|
|
361
|
+
} catch (p) {
|
|
362
|
+
throw console.error("Failed to submit form:", p), r.onError && r.onError(p), p;
|
|
359
363
|
}
|
|
360
|
-
}, [r,
|
|
364
|
+
}, [r, c, d]), h = Q(() => {
|
|
361
365
|
r.onCancel && r.onCancel();
|
|
362
|
-
}, [r])
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
366
|
+
}, [r]), N = {
|
|
367
|
+
...re.useMemo(() => {
|
|
368
|
+
if (!f?.fields) return {};
|
|
369
|
+
const a = {};
|
|
370
|
+
return Object.keys(f.fields).forEach((l) => {
|
|
371
|
+
const p = f.fields[l];
|
|
372
|
+
p.defaultValue !== void 0 && (a[l] = p.defaultValue);
|
|
373
|
+
}), a;
|
|
374
|
+
}, [f]),
|
|
375
|
+
...T
|
|
376
|
+
};
|
|
377
|
+
if (S)
|
|
378
|
+
return /* @__PURE__ */ E.jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded-md", children: [
|
|
379
|
+
/* @__PURE__ */ E.jsx("h3", { className: "text-red-800 font-semibold", children: "Error loading form" }),
|
|
380
|
+
/* @__PURE__ */ E.jsx("p", { className: "text-red-600 text-sm mt-1", children: S.message })
|
|
367
381
|
] });
|
|
368
|
-
if (
|
|
369
|
-
return /* @__PURE__ */
|
|
370
|
-
/* @__PURE__ */
|
|
371
|
-
/* @__PURE__ */
|
|
382
|
+
if (Y)
|
|
383
|
+
return /* @__PURE__ */ E.jsxs("div", { className: "p-8 text-center", children: [
|
|
384
|
+
/* @__PURE__ */ E.jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" }),
|
|
385
|
+
/* @__PURE__ */ E.jsx("p", { className: "mt-2 text-sm text-gray-600", children: "Loading form..." })
|
|
372
386
|
] });
|
|
373
|
-
const
|
|
387
|
+
const $ = {
|
|
374
388
|
type: "form",
|
|
375
|
-
fields:
|
|
389
|
+
fields: m,
|
|
376
390
|
layout: r.layout === "vertical" || r.layout === "horizontal" ? r.layout : "vertical",
|
|
377
391
|
columns: r.columns,
|
|
378
392
|
submitLabel: r.submitText || (r.mode === "create" ? "Create" : "Update"),
|
|
@@ -380,15 +394,16 @@ const me = ({
|
|
|
380
394
|
showSubmit: r.showSubmit !== !1 && r.mode !== "view",
|
|
381
395
|
showCancel: r.showCancel !== !1,
|
|
382
396
|
resetOnSubmit: r.showReset,
|
|
383
|
-
defaultValues:
|
|
384
|
-
onSubmit:
|
|
385
|
-
onCancel:
|
|
397
|
+
defaultValues: N,
|
|
398
|
+
onSubmit: w,
|
|
399
|
+
onCancel: h,
|
|
386
400
|
className: r.className
|
|
387
401
|
};
|
|
388
|
-
return /* @__PURE__ */
|
|
389
|
-
},
|
|
390
|
-
|
|
391
|
-
|
|
402
|
+
return /* @__PURE__ */ E.jsx("div", { className: "w-full", children: /* @__PURE__ */ E.jsx(ie, { schema: $ }) });
|
|
403
|
+
}, me = ({ schema: r }) => /* @__PURE__ */ E.jsx(pe, { schema: r });
|
|
404
|
+
oe.register("object-form", me, {
|
|
405
|
+
namespace: "plugin-form"
|
|
406
|
+
});
|
|
392
407
|
export {
|
|
393
|
-
|
|
408
|
+
pe as ObjectForm
|
|
394
409
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(E,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/fields")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/core","@object-ui/react","@object-ui/fields"],c):(E=typeof globalThis<"u"?globalThis:E||self,c(E.ObjectUIPluginForm={},E.React,E.core,E.react,E.fields))})(this,(function(E,c,re,ne,C){"use strict";var I={exports:{}},A={};var G;function oe(){if(G)return A;G=1;var t=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function d(j,b,y){var R=null;if(y!==void 0&&(R=""+y),b.key!==void 0&&(R=""+b.key),"key"in b){y={};for(var _ in b)_!=="key"&&(y[_]=b[_])}else y=b;return b=y.ref,{$$typeof:t,type:j,key:R,ref:b!==void 0?b:null,props:y}}return A.Fragment=f,A.jsx=d,A.jsxs=d,A}var P={};var X;function ie(){return X||(X=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===k?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case F:return"Fragment";case a:return"Profiler";case L:return"StrictMode";case O:return"Suspense";case r:return"SuspenseList";case o:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case B:return"Portal";case m:return e.displayName||"Context";case l:return(e._context.displayName||"Context")+".Consumer";case g:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case M:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case S:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function f(e){return""+e}function d(e){try{f(e);var n=!1}catch{n=!0}if(n){n=console;var i=n.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),f(e)}}function j(e){if(e===F)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function b(){var e=z.A;return e===null?null:e.getOwner()}function y(){return Error("react-stack-top-frame")}function R(e){if(Q.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function _(e,n){function i(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function V(){var e=t(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,n,i,s,Y,W){var u=i.ref;return e={$$typeof:D,type:e,key:n,props:i,_owner:s},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:V}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,n,i,s,Y,W){var u=n.children;if(u!==void 0)if(s)if(se(u)){for(s=0;s<u.length;s++)w(u[s]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(u);if(Q.call(n,"key")){u=t(e);var N=Object.keys(n).filter(function(ue){return ue!=="key"});s=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",te[u+s]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,
|
|
6
|
+
<%s key={someKey} {...props} />`,s,u,N,u),te[u+s]=!0)}if(u=null,i!==void 0&&(d(i),u=""+i),R(n)&&(d(n.key),u=""+n.key),"key"in n){i={};for(var J in n)J!=="key"&&(i[J]=n[J])}else i=n;return u&&_(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,u,i,b(),Y,W)}function w(e){p(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var x=c,D=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),L=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),m=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),O=Symbol.for("react.suspense"),r=Symbol.for("react.suspense_list"),M=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),o=Symbol.for("react.activity"),k=Symbol.for("react.client.reference"),z=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=Object.prototype.hasOwnProperty,se=Array.isArray,U=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var Z,K={},$=x.react_stack_bottom_frame.bind(x,y)(),ee=U(j(y)),te={};P.Fragment=F,P.jsx=function(e,n,i){var s=1e4>z.recentlyCreatedOwnerStacks++;return h(e,n,i,!1,s?Error("react-stack-top-frame"):$,s?U(j(e)):ee)},P.jsxs=function(e,n,i){var s=1e4>z.recentlyCreatedOwnerStacks++;return h(e,n,i,!0,s?Error("react-stack-top-frame"):$,s?U(j(e)):ee)}})()),P}var q;function ae(){return q||(q=1,process.env.NODE_ENV==="production"?I.exports=oe():I.exports=ie()),I.exports}var v=ae();const H=({schema:t,dataSource:f})=>{const[d,j]=c.useState(null),[b,y]=c.useState([]),[R,_]=c.useState(null),[V,T]=c.useState(!0),[h,w]=c.useState(null),p=t.customFields&&t.customFields.length>0;c.useEffect(()=>{p&&(_(t.initialData||t.initialValues||{}),T(!1))},[p,t.initialData,t.initialValues]),c.useEffect(()=>{const a=async()=>{try{if(!f)throw new Error("DataSource is required when using ObjectQL schema fetching (inline fields not provided)");const l=await f.getObjectSchema(t.objectName);j(l)}catch(l){console.error("Failed to fetch object schema:",l),w(l)}};p?j({name:t.objectName,fields:{}}):t.objectName&&f&&a()},[t.objectName,f,p]),c.useEffect(()=>{d&&!p&&(async()=>{if(!t.recordId||t.mode==="create"){_(t.initialData||t.initialValues||{}),T(!1);return}if(!p){if(!f){w(new Error("DataSource is required for fetching record data (inline data not provided)")),T(!1);return}T(!0);try{const l=await f.findOne(t.objectName,t.recordId);_(l)}catch(l){console.error("Failed to fetch record:",l),w(l)}finally{T(!1)}}})()},[t.objectName,t.recordId,t.mode,t.initialValues,t.initialData,f,d,p]),c.useEffect(()=>{if(p&&t.customFields){y(t.customFields),T(!1);return}if(!d)return;const a=[],l=t.fields||Object.keys(d.fields||{});(Array.isArray(l)?l:Object.keys(l)).forEach(g=>{const O=typeof g=="string"?g:g.name;if(!O)return;const r=d.fields?.[O];if(!r&&!p)return;const M=!r?.permissions||r?.permissions.write!==!1;if(t.mode!=="view"&&!M)return;const S=t.customFields?.find(o=>o.name===O);if(S)a.push(S);else if(r){const o={name:O,label:r.label||g,type:C.mapFieldTypeToFormType(r.type),required:r.required||!1,disabled:t.readOnly||t.mode==="view"||r.readonly,placeholder:r.placeholder,description:r.help||r.description,validation:C.buildValidationRules(r),field:r};if((r.type==="select"||r.type==="lookup"||r.type==="master_detail")&&(o.options=r.options||[],o.multiple=r.multiple),(r.type==="number"||r.type==="currency"||r.type==="percent")&&(o.inputType="number",o.min=r.min,o.max=r.max,o.step=r.precision?Math.pow(10,-r.precision):void 0),r.type==="date"&&(o.inputType="date"),r.type==="datetime"&&(o.inputType="datetime-local"),(r.type==="text"||r.type==="textarea"||r.type==="markdown"||r.type==="html")&&(o.maxLength=r.max_length,o.minLength=r.min_length),(r.type==="file"||r.type==="image")&&(o.inputType="file",o.multiple=r.multiple,o.accept=r.accept?r.accept.join(","):void 0,r.max_size)){const k=`Max size: ${C.formatFileSize(r.max_size)}`;o.description=o.description?`${o.description} (${k})`:k}r.type==="email"&&(o.inputType="email"),r.type==="phone"&&(o.inputType="tel"),r.type==="url"&&(o.inputType="url"),r.type==="password"&&(o.inputType="password"),r.type==="time"&&(o.inputType="time"),(r.type==="formula"||r.type==="summary"||r.type==="auto_number")&&(o.disabled=!0),r.visible_on&&(o.visible=k=>C.evaluateCondition(r.visible_on,k)),a.push(o)}}),y(a),T(!1)},[d,t.fields,t.customFields,t.readOnly,t.mode,p]);const x=c.useCallback(async(a,l)=>{if(a&&(a.nativeEvent||a._reactName==="onSubmit")&&(console.warn("ObjectForm: Received Event instead of data in handleSubmit! This suggests a Form renderer issue."),l===void 0&&(l=a,a={})),p&&!f)return t.onSuccess&&await t.onSuccess(a),a;if(!f)throw new Error("DataSource is required for form submission (inline mode not configured)");try{let m;if(t.mode==="create")m=await f.create(t.objectName,a);else if(t.mode==="edit"&&t.recordId)m=await f.update(t.objectName,t.recordId,a);else throw new Error("Invalid form mode or missing record ID");return t.onSuccess&&await t.onSuccess(m),m}catch(m){throw console.error("Failed to submit form:",m),t.onError&&t.onError(m),m}},[t,f,p]),D=c.useCallback(()=>{t.onCancel&&t.onCancel()},[t]),F={...c.useMemo(()=>{if(!d?.fields)return{};const a={};return Object.keys(d.fields).forEach(l=>{const m=d.fields[l];m.defaultValue!==void 0&&(a[l]=m.defaultValue)}),a},[d]),...R};if(h)return v.jsxs("div",{className:"p-4 border border-red-300 bg-red-50 rounded-md",children:[v.jsx("h3",{className:"text-red-800 font-semibold",children:"Error loading form"}),v.jsx("p",{className:"text-red-600 text-sm mt-1",children:h.message})]});if(V)return v.jsxs("div",{className:"p-8 text-center",children:[v.jsx("div",{className:"inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"}),v.jsx("p",{className:"mt-2 text-sm text-gray-600",children:"Loading form..."})]});const L={type:"form",fields:b,layout:t.layout==="vertical"||t.layout==="horizontal"?t.layout:"vertical",columns:t.columns,submitLabel:t.submitText||(t.mode==="create"?"Create":"Update"),cancelLabel:t.cancelText,showSubmit:t.showSubmit!==!1&&t.mode!=="view",showCancel:t.showCancel!==!1,resetOnSubmit:t.showReset,defaultValues:F,onSubmit:x,onCancel:D,className:t.className};return v.jsx("div",{className:"w-full",children:v.jsx(ne.SchemaRenderer,{schema:L})})},le=({schema:t})=>v.jsx(H,{schema:t});re.ComponentRegistry.register("object-form",le,{namespace:"plugin-form"}),E.ObjectForm=H,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@object-ui/plugin-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Form plugin for Object UI",
|
|
@@ -16,21 +16,23 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"lucide-react": "^0.563.0",
|
|
19
|
-
"@object-ui/components": "0.
|
|
20
|
-
"@object-ui/core": "0.
|
|
21
|
-
"@object-ui/fields": "0.
|
|
22
|
-
"@object-ui/react": "0.
|
|
23
|
-
"@object-ui/types": "0.
|
|
19
|
+
"@object-ui/components": "0.5.0",
|
|
20
|
+
"@object-ui/core": "0.5.0",
|
|
21
|
+
"@object-ui/fields": "0.5.0",
|
|
22
|
+
"@object-ui/react": "0.5.0",
|
|
23
|
+
"@object-ui/types": "0.5.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": "^18.0.0 || ^19.0.0",
|
|
27
27
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@vitejs/plugin-react": "^
|
|
30
|
+
"@vitejs/plugin-react": "^5.1.3",
|
|
31
|
+
"msw": "^2.12.7",
|
|
31
32
|
"typescript": "^5.9.3",
|
|
32
33
|
"vite": "^7.3.1",
|
|
33
|
-
"vite-plugin-dts": "^4.5.4"
|
|
34
|
+
"vite-plugin-dts": "^4.5.4",
|
|
35
|
+
"@object-ui/data-objectstack": "0.5.0"
|
|
34
36
|
},
|
|
35
37
|
"scripts": {
|
|
36
38
|
"build": "vite build",
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
|
|
2
|
+
import { render, screen, waitFor } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom';
|
|
4
|
+
import { ObjectForm } from './ObjectForm';
|
|
5
|
+
import { ObjectStackAdapter } from '@object-ui/data-objectstack';
|
|
6
|
+
import { setupServer } from 'msw/node';
|
|
7
|
+
import { http, HttpResponse } from 'msw';
|
|
8
|
+
import { registerAllFields } from '@object-ui/fields';
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { ContactObject } from '../../../examples/crm/src/objects/contact.object';
|
|
11
|
+
|
|
12
|
+
// Register widget renderers
|
|
13
|
+
registerAllFields();
|
|
14
|
+
|
|
15
|
+
const BASE_URL = process.env.OBJECTSTACK_API_URL || 'http://localhost';
|
|
16
|
+
|
|
17
|
+
// --- Mock Data ---
|
|
18
|
+
|
|
19
|
+
const mockSchema = ContactObject;
|
|
20
|
+
|
|
21
|
+
const mockRecord = {
|
|
22
|
+
_id: '1',
|
|
23
|
+
name: 'Alice Johnson',
|
|
24
|
+
email: 'alice@example.com',
|
|
25
|
+
status: 'Active'
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
// --- MSW Setup ---
|
|
29
|
+
|
|
30
|
+
const handlers = [
|
|
31
|
+
// OPTIONS handler for CORS preflight
|
|
32
|
+
http.options(`${BASE_URL}/*`, () => {
|
|
33
|
+
return new HttpResponse(null, {
|
|
34
|
+
status: 200,
|
|
35
|
+
headers: {
|
|
36
|
+
'Access-Control-Allow-Origin': '*',
|
|
37
|
+
'Access-Control-Allow-Methods': 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH',
|
|
38
|
+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
}),
|
|
42
|
+
|
|
43
|
+
// Health check / Connection check (ObjectStackClient often pings root or /api/v1)
|
|
44
|
+
http.get(`${BASE_URL}/api/v1`, () => {
|
|
45
|
+
return HttpResponse.json({ status: 'ok', version: '1.0.0' });
|
|
46
|
+
}),
|
|
47
|
+
|
|
48
|
+
// Mock Schema Fetch: GET /api/v1/meta/object/:name
|
|
49
|
+
http.get(`${BASE_URL}/api/v1/meta/object/:name`, ({ params }) => {
|
|
50
|
+
const { name } = params;
|
|
51
|
+
if (name === 'contact') {
|
|
52
|
+
return HttpResponse.json(mockSchema);
|
|
53
|
+
}
|
|
54
|
+
return new HttpResponse(null, { status: 404 });
|
|
55
|
+
}),
|
|
56
|
+
|
|
57
|
+
// Mock Record Fetch: GET /api/v1/data/:object/:id
|
|
58
|
+
http.get(`${BASE_URL}/api/v1/data/:object/:id`, ({ params }) => {
|
|
59
|
+
const { object, id } = params;
|
|
60
|
+
if (object === 'contact' && id === '1') {
|
|
61
|
+
return HttpResponse.json(mockRecord);
|
|
62
|
+
}
|
|
63
|
+
return new HttpResponse(null, { status: 404 });
|
|
64
|
+
})
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
const server = setupServer(...handlers);
|
|
68
|
+
|
|
69
|
+
// --- Test Suite ---
|
|
70
|
+
|
|
71
|
+
describe('ObjectForm with ObjectStack/MSW', () => {
|
|
72
|
+
// Only start MSW if we are NOT using a real server
|
|
73
|
+
if (!process.env.OBJECTSTACK_API_URL) {
|
|
74
|
+
beforeAll(() => server.listen());
|
|
75
|
+
afterEach(() => server.resetHandlers());
|
|
76
|
+
afterAll(() => server.close());
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Create real adapter instance pointing to MSW or Real Server
|
|
80
|
+
const dataSource = new ObjectStackAdapter({
|
|
81
|
+
baseUrl: BASE_URL,
|
|
82
|
+
// Add custom fetch for environment that might need it, or rely on global fetch
|
|
83
|
+
// fetch: global.fetch
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
it('loads schema and renders form fields', async () => {
|
|
87
|
+
render(
|
|
88
|
+
<ObjectForm
|
|
89
|
+
schema={{
|
|
90
|
+
type: 'object-form',
|
|
91
|
+
objectName: 'contact', // Triggers schema fetch
|
|
92
|
+
mode: 'create'
|
|
93
|
+
}}
|
|
94
|
+
dataSource={dataSource} // Logic moves from mock fn to real adapter + MSW
|
|
95
|
+
/>
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
// Verify fields appear (async as schema loads via HTTP)
|
|
99
|
+
await waitFor(() => {
|
|
100
|
+
// Changed from 'Full Name' to 'Name' based on CRM example schema
|
|
101
|
+
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
102
|
+
}, { timeout: 2000 }); // Give slight buffer for network mock
|
|
103
|
+
expect(screen.getByText('Email')).toBeInTheDocument();
|
|
104
|
+
expect(screen.getByText('Status')).toBeInTheDocument();
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
it('loads record data in edit mode', async () => {
|
|
108
|
+
render(
|
|
109
|
+
<ObjectForm
|
|
110
|
+
schema={{
|
|
111
|
+
type: 'object-form',
|
|
112
|
+
objectName: 'contact',
|
|
113
|
+
mode: 'edit',
|
|
114
|
+
recordId: '1'
|
|
115
|
+
}}
|
|
116
|
+
dataSource={dataSource}
|
|
117
|
+
/>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
// Initial load of schema logic + data fetch
|
|
121
|
+
await waitFor(() => {
|
|
122
|
+
// Changed from 'Full Name' to 'Name'
|
|
123
|
+
expect(screen.getByRole('textbox', { name: /Name/i })).toHaveValue('Alice Johnson');
|
|
124
|
+
}, { timeout: 2000 }); // Give slight buffer for network mock
|
|
125
|
+
|
|
126
|
+
// Changed from 'Email Address' to 'Email'
|
|
127
|
+
expect(screen.getByRole('textbox', { name: /Email/i })).toHaveValue('alice@example.com');
|
|
128
|
+
});
|
|
129
|
+
});
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { describe, it, expect, vi } from 'vitest';
|
|
2
|
+
import { render, screen, waitFor } from '@testing-library/react';
|
|
3
|
+
import { ObjectForm } from './ObjectForm';
|
|
4
|
+
import { registerAllFields } from '@object-ui/fields';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
// Ensure fields are registered
|
|
8
|
+
registerAllFields();
|
|
9
|
+
|
|
10
|
+
describe('ObjectForm Integration', () => {
|
|
11
|
+
const objectSchema = {
|
|
12
|
+
name: 'test_object',
|
|
13
|
+
fields: {
|
|
14
|
+
name: {
|
|
15
|
+
type: 'text',
|
|
16
|
+
label: 'Name'
|
|
17
|
+
},
|
|
18
|
+
price: {
|
|
19
|
+
type: 'currency',
|
|
20
|
+
label: 'Price',
|
|
21
|
+
scale: 2
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const mockDataSource: any = {
|
|
27
|
+
getObjectSchema: vi.fn().mockResolvedValue(objectSchema),
|
|
28
|
+
createRecord: vi.fn(),
|
|
29
|
+
updateRecord: vi.fn(),
|
|
30
|
+
getRecord: vi.fn(),
|
|
31
|
+
query: vi.fn()
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
it('renders fields using specialized components', async () => {
|
|
35
|
+
render(
|
|
36
|
+
<ObjectForm
|
|
37
|
+
schema={{
|
|
38
|
+
type: 'object-form',
|
|
39
|
+
objectName: 'test_object',
|
|
40
|
+
mode: 'create'
|
|
41
|
+
}}
|
|
42
|
+
dataSource={mockDataSource}
|
|
43
|
+
/>
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
// Wait for schema to load (useEffect)
|
|
47
|
+
await waitFor(() => {
|
|
48
|
+
expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('test_object');
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
// Check if labels are present
|
|
52
|
+
await waitFor(() => {
|
|
53
|
+
expect(screen.queryByText('Name')).toBeTruthy();
|
|
54
|
+
});
|
|
55
|
+
expect(screen.getByText('Price')).toBeTruthy();
|
|
56
|
+
|
|
57
|
+
// Assert input exists
|
|
58
|
+
// Since we don't have getByLabelText working reliably without full accessibility tree in happy-dom sometimes,
|
|
59
|
+
// we can try looking for inputs.
|
|
60
|
+
});
|
|
61
|
+
});
|
package/src/ObjectForm.tsx
CHANGED
|
@@ -58,6 +58,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
58
58
|
schema,
|
|
59
59
|
dataSource,
|
|
60
60
|
}) => {
|
|
61
|
+
|
|
61
62
|
const [objectSchema, setObjectSchema] = useState<any>(null);
|
|
62
63
|
const [formFields, setFormFields] = useState<FormField[]>([]);
|
|
63
64
|
const [initialData, setInitialData] = useState<any>(null);
|
|
@@ -107,6 +108,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
107
108
|
const fetchInitialData = async () => {
|
|
108
109
|
if (!schema.recordId || schema.mode === 'create') {
|
|
109
110
|
setInitialData(schema.initialData || schema.initialValues || {});
|
|
111
|
+
setLoading(false);
|
|
110
112
|
return;
|
|
111
113
|
}
|
|
112
114
|
|
|
@@ -154,23 +156,33 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
154
156
|
// Determine which fields to include
|
|
155
157
|
const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
|
|
156
158
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
159
|
+
// Support object format for fields in schema (legacy/compat)
|
|
160
|
+
const fieldNames = Array.isArray(fieldsToShow)
|
|
161
|
+
? fieldsToShow
|
|
162
|
+
: Object.keys(fieldsToShow);
|
|
163
|
+
|
|
164
|
+
fieldNames.forEach((fieldName) => {
|
|
165
|
+
// If fieldsToShow is an array of strings, fieldName is the string
|
|
166
|
+
// If fieldsToShow is array of objects (unlikely but possible in some formats), we need to extract name
|
|
167
|
+
const name = typeof fieldName === 'string' ? fieldName : (fieldName as any).name;
|
|
168
|
+
if (!name) return;
|
|
169
|
+
|
|
170
|
+
const field = objectSchema.fields?.[name];
|
|
171
|
+
if (!field && !hasInlineFields) return; // Skip if not found in object definition unless inline
|
|
160
172
|
|
|
161
173
|
// Check field-level permissions for create/edit modes
|
|
162
|
-
const hasWritePermission = !field
|
|
174
|
+
const hasWritePermission = !field?.permissions || field?.permissions.write !== false;
|
|
163
175
|
if (schema.mode !== 'view' && !hasWritePermission) return; // Skip fields without write permission
|
|
164
176
|
|
|
165
177
|
// Check if there's a custom field configuration
|
|
166
|
-
const customField = schema.customFields?.find(f => f.name ===
|
|
178
|
+
const customField = schema.customFields?.find(f => f.name === name);
|
|
167
179
|
|
|
168
180
|
if (customField) {
|
|
169
181
|
generatedFields.push(customField);
|
|
170
|
-
} else {
|
|
182
|
+
} else if (field) {
|
|
171
183
|
// Auto-generate field from schema
|
|
172
184
|
const formField: FormField = {
|
|
173
|
-
name:
|
|
185
|
+
name: name,
|
|
174
186
|
label: field.label || fieldName,
|
|
175
187
|
type: mapFieldTypeToFormType(field.type),
|
|
176
188
|
required: field.required || false,
|
|
@@ -178,6 +190,8 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
178
190
|
placeholder: field.placeholder,
|
|
179
191
|
description: field.help || field.description,
|
|
180
192
|
validation: buildValidationRules(field),
|
|
193
|
+
// Important: Pass the original field metadata so widgets can access properties like precision, currency, etc.
|
|
194
|
+
field: field,
|
|
181
195
|
};
|
|
182
196
|
|
|
183
197
|
// Add field-specific properties
|
|
@@ -187,17 +201,27 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
187
201
|
}
|
|
188
202
|
|
|
189
203
|
if (field.type === 'number' || field.type === 'currency' || field.type === 'percent') {
|
|
204
|
+
formField.inputType = 'number';
|
|
190
205
|
formField.min = field.min;
|
|
191
206
|
formField.max = field.max;
|
|
192
207
|
formField.step = field.precision ? Math.pow(10, -field.precision) : undefined;
|
|
193
208
|
}
|
|
194
209
|
|
|
210
|
+
if (field.type === 'date') {
|
|
211
|
+
formField.inputType = 'date';
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
if (field.type === 'datetime') {
|
|
215
|
+
formField.inputType = 'datetime-local';
|
|
216
|
+
}
|
|
217
|
+
|
|
195
218
|
if (field.type === 'text' || field.type === 'textarea' || field.type === 'markdown' || field.type === 'html') {
|
|
196
219
|
formField.maxLength = field.max_length;
|
|
197
220
|
formField.minLength = field.min_length;
|
|
198
221
|
}
|
|
199
222
|
|
|
200
223
|
if (field.type === 'file' || field.type === 'image') {
|
|
224
|
+
formField.inputType = 'file';
|
|
201
225
|
formField.multiple = field.multiple;
|
|
202
226
|
formField.accept = field.accept ? field.accept.join(',') : undefined;
|
|
203
227
|
// Add validation hints for file size and dimensions
|
|
@@ -250,7 +274,19 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
250
274
|
}, [objectSchema, schema.fields, schema.customFields, schema.readOnly, schema.mode, hasInlineFields]);
|
|
251
275
|
|
|
252
276
|
// Handle form submission
|
|
253
|
-
const handleSubmit = useCallback(async (formData: any) => {
|
|
277
|
+
const handleSubmit = useCallback(async (formData: any, e?: any) => {
|
|
278
|
+
// If we receive an event as the first argument, it means the Form renderer passed the event instead of data
|
|
279
|
+
// This happens when react-hook-form's handleSubmit is bypassed or configured incorrectly
|
|
280
|
+
if (formData && (formData.nativeEvent || formData._reactName === 'onSubmit')) {
|
|
281
|
+
console.warn('ObjectForm: Received Event instead of data in handleSubmit! This suggests a Form renderer issue.');
|
|
282
|
+
// Proceed defensively - we can't do much if we don't have data, but let's try to not crash
|
|
283
|
+
// If we are here, formData is actually the event
|
|
284
|
+
if (e === undefined) {
|
|
285
|
+
e = formData;
|
|
286
|
+
formData = {}; // Reset to empty object or we try to submit the Event object
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
254
290
|
// For inline fields without a dataSource, just call the success callback
|
|
255
291
|
if (hasInlineFields && !dataSource) {
|
|
256
292
|
if (schema.onSuccess) {
|
|
@@ -299,6 +335,24 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
299
335
|
}
|
|
300
336
|
}, [schema]);
|
|
301
337
|
|
|
338
|
+
// Calculate default values from schema fields
|
|
339
|
+
const schemaDefaultValues = React.useMemo(() => {
|
|
340
|
+
if (!objectSchema?.fields) return {};
|
|
341
|
+
const defaults: Record<string, any> = {};
|
|
342
|
+
Object.keys(objectSchema.fields).forEach(key => {
|
|
343
|
+
const field = objectSchema.fields[key];
|
|
344
|
+
if (field.defaultValue !== undefined) {
|
|
345
|
+
defaults[key] = field.defaultValue;
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
|
+
return defaults;
|
|
349
|
+
}, [objectSchema]);
|
|
350
|
+
|
|
351
|
+
const finalDefaultValues = {
|
|
352
|
+
...schemaDefaultValues,
|
|
353
|
+
...initialData
|
|
354
|
+
};
|
|
355
|
+
|
|
302
356
|
// Render error state
|
|
303
357
|
if (error) {
|
|
304
358
|
return (
|
|
@@ -334,7 +388,7 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
|
|
|
334
388
|
showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
|
|
335
389
|
showCancel: schema.showCancel !== false,
|
|
336
390
|
resetOnSubmit: schema.showReset,
|
|
337
|
-
defaultValues:
|
|
391
|
+
defaultValues: finalDefaultValues,
|
|
338
392
|
onSubmit: handleSubmit,
|
|
339
393
|
onCancel: handleCancel,
|
|
340
394
|
className: schema.className,
|
package/src/index.tsx
CHANGED
|
@@ -18,5 +18,8 @@ const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
|
|
|
18
18
|
return <ObjectForm schema={schema} />;
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
ComponentRegistry.register('object-form', ObjectFormRenderer
|
|
22
|
-
|
|
21
|
+
ComponentRegistry.register('object-form', ObjectFormRenderer, {
|
|
22
|
+
namespace: 'plugin-form'
|
|
23
|
+
});
|
|
24
|
+
// Note: 'form' type is handled by @object-ui/components Form component
|
|
25
|
+
// This plugin only handles 'object-form' which integrates with ObjectQL/ObjectStack
|
package/vite.config.ts
CHANGED
|
@@ -11,6 +11,18 @@ export default defineConfig({
|
|
|
11
11
|
include: ['src'],
|
|
12
12
|
}),
|
|
13
13
|
],
|
|
14
|
+
resolve: {
|
|
15
|
+
alias: {
|
|
16
|
+
'@object-ui/core': resolve(__dirname, '../core/src'),
|
|
17
|
+
'@object-ui/types': resolve(__dirname, '../types/src'),
|
|
18
|
+
'@object-ui/data-objectstack': resolve(__dirname, '../data-objectstack/src'),
|
|
19
|
+
'@object-ui/react': resolve(__dirname, '../react/src'),
|
|
20
|
+
'@object-ui/components': resolve(__dirname, '../components/src'),
|
|
21
|
+
'@object-ui/fields': resolve(__dirname, '../fields/src'),
|
|
22
|
+
'@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
|
|
23
|
+
'@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
|
|
24
|
+
}
|
|
25
|
+
},
|
|
14
26
|
build: {
|
|
15
27
|
lib: {
|
|
16
28
|
entry: resolve(__dirname, 'src/index.tsx'),
|
|
@@ -36,4 +48,10 @@ export default defineConfig({
|
|
|
36
48
|
},
|
|
37
49
|
},
|
|
38
50
|
},
|
|
51
|
+
test: {
|
|
52
|
+
globals: true,
|
|
53
|
+
environment: 'happy-dom',
|
|
54
|
+
setupFiles: ['../../vitest.setup.tsx'],
|
|
55
|
+
passWithNoTests: true,
|
|
56
|
+
},
|
|
39
57
|
});
|
|
File without changes
|
|
File without changes
|