@dxos/react-ui-form 0.8.2-main.36232bc → 0.8.2-main.5885341
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/lib/browser/index.mjs +194 -70
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +248 -126
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +194 -70
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Form/Form.d.ts +3 -1
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +2 -0
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormContent.d.ts +13 -10
- package/dist/types/src/components/Form/FormContent.d.ts.map +1 -1
- package/dist/types/src/components/Form/RefField.d.ts +23 -0
- package/dist/types/src/components/Form/RefField.d.ts.map +1 -0
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/package.json +25 -25
- package/src/components/Form/Form.stories.tsx +44 -1
- package/src/components/Form/Form.tsx +4 -0
- package/src/components/Form/FormContent.tsx +59 -15
- package/src/components/Form/RefField.tsx +152 -0
- package/src/components/ViewEditor/ViewEditor.tsx +3 -2
package/dist/lib/node/index.cjs
CHANGED
|
@@ -128,17 +128,23 @@ var import_invariant2 = require("@dxos/invariant");
|
|
|
128
128
|
var import_react_ui10 = require("@dxos/react-ui");
|
|
129
129
|
var import_react_ui_theme9 = require("@dxos/react-ui-theme");
|
|
130
130
|
var import_schema4 = require("@dxos/schema");
|
|
131
|
-
var import_echo_schema7 = require("@dxos/echo-schema");
|
|
132
131
|
var import_react15 = __toESM(require("react"));
|
|
132
|
+
var import_echo_schema7 = require("@dxos/echo-schema");
|
|
133
|
+
var import_effect8 = require("@dxos/effect");
|
|
134
|
+
var import_keys2 = require("@dxos/keys");
|
|
135
|
+
var import_live_object = require("@dxos/live-object");
|
|
136
|
+
var import_log3 = require("@dxos/log");
|
|
133
137
|
var import_echo_schema8 = require("@dxos/echo-schema");
|
|
138
|
+
var import_react16 = __toESM(require("react"));
|
|
139
|
+
var import_echo_schema9 = require("@dxos/echo-schema");
|
|
134
140
|
var import_invariant3 = require("@dxos/invariant");
|
|
135
141
|
var import_react_ui11 = require("@dxos/react-ui");
|
|
136
142
|
var import_react_ui_list2 = require("@dxos/react-ui-list");
|
|
137
143
|
var import_react_ui_theme10 = require("@dxos/react-ui-theme");
|
|
138
144
|
var import_schema5 = require("@dxos/schema");
|
|
139
|
-
var import_echo_schema9 = require("@dxos/echo-schema");
|
|
140
|
-
var import_format = require("date-fns/format");
|
|
141
145
|
var import_echo_schema10 = require("@dxos/echo-schema");
|
|
146
|
+
var import_format = require("date-fns/format");
|
|
147
|
+
var import_echo_schema11 = require("@dxos/echo-schema");
|
|
142
148
|
var translationKey = "react-ui-form";
|
|
143
149
|
var translations_default = [
|
|
144
150
|
{
|
|
@@ -1086,11 +1092,105 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
|
|
|
1086
1092
|
onClick: handleAdd
|
|
1087
1093
|
})));
|
|
1088
1094
|
};
|
|
1095
|
+
var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/RefField.tsx";
|
|
1096
|
+
var RefField = ({ ast, type, label, readonly, placeholder, inline, onQueryRefOptions, inputProps }) => {
|
|
1097
|
+
const { getValue: getValue3, onValueChange, ...restInputProps } = inputProps;
|
|
1098
|
+
const refTypeInfo = (0, import_effect8.findAnnotation)(ast, import_echo_schema7.ReferenceAnnotationId);
|
|
1099
|
+
const [refOptions, setRefOptions] = (0, import_react15.useState)([]);
|
|
1100
|
+
const [loading, setLoading] = (0, import_react15.useState)(false);
|
|
1101
|
+
(0, import_react15.useEffect)(() => {
|
|
1102
|
+
if (!refTypeInfo || !onQueryRefOptions) {
|
|
1103
|
+
return;
|
|
1104
|
+
}
|
|
1105
|
+
const fetchOptions = async () => {
|
|
1106
|
+
setLoading(true);
|
|
1107
|
+
try {
|
|
1108
|
+
const options = await onQueryRefOptions(refTypeInfo);
|
|
1109
|
+
setRefOptions(options.map((option) => ({
|
|
1110
|
+
label: option.label,
|
|
1111
|
+
value: option.dxn.toString()
|
|
1112
|
+
})));
|
|
1113
|
+
} catch (error) {
|
|
1114
|
+
import_log3.log.error("Failed to fetch ref options:", error, {
|
|
1115
|
+
F: __dxlog_file3,
|
|
1116
|
+
L: 69,
|
|
1117
|
+
S: void 0,
|
|
1118
|
+
C: (f, a) => f(...a)
|
|
1119
|
+
});
|
|
1120
|
+
setRefOptions([]);
|
|
1121
|
+
} finally {
|
|
1122
|
+
setLoading(false);
|
|
1123
|
+
}
|
|
1124
|
+
};
|
|
1125
|
+
void fetchOptions();
|
|
1126
|
+
}, [
|
|
1127
|
+
refTypeInfo,
|
|
1128
|
+
onQueryRefOptions
|
|
1129
|
+
]);
|
|
1130
|
+
if (!refTypeInfo) {
|
|
1131
|
+
return null;
|
|
1132
|
+
}
|
|
1133
|
+
if (refTypeInfo.typename === (0, import_echo_schema7.getTypeAnnotation)(import_echo_schema7.Expando)?.typename || !onQueryRefOptions) {
|
|
1134
|
+
const handleOnValueChange = (_type, dxnString) => {
|
|
1135
|
+
const dxn = import_keys2.DXN.tryParse(dxnString);
|
|
1136
|
+
if (dxn) {
|
|
1137
|
+
onValueChange?.("object", (0, import_live_object.refFromDXN)(dxn));
|
|
1138
|
+
} else if (dxnString === "") {
|
|
1139
|
+
onValueChange?.("object", void 0);
|
|
1140
|
+
} else {
|
|
1141
|
+
onValueChange?.("string", dxnString);
|
|
1142
|
+
}
|
|
1143
|
+
};
|
|
1144
|
+
const handleGetValue2 = () => {
|
|
1145
|
+
const formValue = getValue3();
|
|
1146
|
+
if (typeof formValue === "string") {
|
|
1147
|
+
return formValue;
|
|
1148
|
+
}
|
|
1149
|
+
if (import_echo_schema7.Ref.isRef(formValue)) {
|
|
1150
|
+
return formValue.dxn.toString();
|
|
1151
|
+
}
|
|
1152
|
+
return void 0;
|
|
1153
|
+
};
|
|
1154
|
+
return /* @__PURE__ */ import_react15.default.createElement(TextInput, {
|
|
1155
|
+
type,
|
|
1156
|
+
label,
|
|
1157
|
+
disabled: readonly,
|
|
1158
|
+
placeholder,
|
|
1159
|
+
inputOnly: inline,
|
|
1160
|
+
getValue: handleGetValue2,
|
|
1161
|
+
onValueChange: handleOnValueChange,
|
|
1162
|
+
...restInputProps
|
|
1163
|
+
});
|
|
1164
|
+
}
|
|
1165
|
+
const handleGetValue = () => {
|
|
1166
|
+
const formValue = getValue3();
|
|
1167
|
+
if (import_echo_schema7.Ref.isRef(formValue)) {
|
|
1168
|
+
return formValue.dxn.toString();
|
|
1169
|
+
}
|
|
1170
|
+
return void 0;
|
|
1171
|
+
};
|
|
1172
|
+
const handleValueChanged = (_type, dxnString) => {
|
|
1173
|
+
const dxn = import_keys2.DXN.parse(dxnString);
|
|
1174
|
+
const ref = (0, import_live_object.refFromDXN)(dxn);
|
|
1175
|
+
onValueChange("object", ref);
|
|
1176
|
+
};
|
|
1177
|
+
return /* @__PURE__ */ import_react15.default.createElement(SelectInput, {
|
|
1178
|
+
type,
|
|
1179
|
+
label,
|
|
1180
|
+
disabled: readonly || loading,
|
|
1181
|
+
placeholder: loading ? "Loading options..." : placeholder,
|
|
1182
|
+
inputOnly: inline,
|
|
1183
|
+
getValue: handleGetValue,
|
|
1184
|
+
onValueChange: handleValueChanged,
|
|
1185
|
+
options: refOptions,
|
|
1186
|
+
...restInputProps
|
|
1187
|
+
});
|
|
1188
|
+
};
|
|
1089
1189
|
var getInputComponent = (type, format) => {
|
|
1090
1190
|
switch (format) {
|
|
1091
|
-
case
|
|
1191
|
+
case import_echo_schema8.FormatEnum.GeoPoint:
|
|
1092
1192
|
return GeoPointInput;
|
|
1093
|
-
case
|
|
1193
|
+
case import_echo_schema8.FormatEnum.Markdown:
|
|
1094
1194
|
return MarkdownInput;
|
|
1095
1195
|
}
|
|
1096
1196
|
switch (type) {
|
|
@@ -1102,7 +1202,7 @@ var getInputComponent = (type, format) => {
|
|
|
1102
1202
|
return BooleanInput;
|
|
1103
1203
|
}
|
|
1104
1204
|
};
|
|
1105
|
-
var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
|
|
1205
|
+
var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
|
|
1106
1206
|
const inputProps = useInputProps(path);
|
|
1107
1207
|
const { ast, name, type, format, title, description, options, examples, array } = property;
|
|
1108
1208
|
const label = (0, import_react13.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
|
|
@@ -1183,23 +1283,39 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
|
|
|
1183
1283
|
...inputProps
|
|
1184
1284
|
}));
|
|
1185
1285
|
}
|
|
1286
|
+
if (format === "ref") {
|
|
1287
|
+
return /* @__PURE__ */ import_react13.default.createElement(RefField, {
|
|
1288
|
+
ast,
|
|
1289
|
+
type,
|
|
1290
|
+
label,
|
|
1291
|
+
readonly,
|
|
1292
|
+
placeholder,
|
|
1293
|
+
inline,
|
|
1294
|
+
onQueryRefOptions,
|
|
1295
|
+
inputProps
|
|
1296
|
+
});
|
|
1297
|
+
}
|
|
1186
1298
|
if (type === "object") {
|
|
1187
1299
|
const baseNode = (0, import_effect5.findNode)(ast, import_effect5.isDiscriminatedUnion);
|
|
1188
1300
|
const typeLiteral = baseNode ? (0, import_effect5.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect5.findNode)(ast, import_echo_schema5.AST.isTypeLiteral);
|
|
1189
1301
|
if (typeLiteral) {
|
|
1190
1302
|
return /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
1191
1303
|
role: "none"
|
|
1192
|
-
}, !inline && /* @__PURE__ */ import_react13.default.createElement("
|
|
1304
|
+
}, !inline && /* @__PURE__ */ import_react13.default.createElement("h3", {
|
|
1305
|
+
className: "text-lg mbs-2 mbe-1"
|
|
1306
|
+
}, label), /* @__PURE__ */ import_react13.default.createElement(FormFields, {
|
|
1193
1307
|
schema: import_echo_schema5.S.make(typeLiteral),
|
|
1194
1308
|
path,
|
|
1195
1309
|
readonly,
|
|
1196
|
-
|
|
1310
|
+
onQueryRefOptions,
|
|
1311
|
+
Custom,
|
|
1312
|
+
lookupComponent
|
|
1197
1313
|
}));
|
|
1198
1314
|
}
|
|
1199
1315
|
}
|
|
1200
1316
|
return null;
|
|
1201
1317
|
};
|
|
1202
|
-
var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
|
|
1318
|
+
var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, lookupComponent, Custom }) => {
|
|
1203
1319
|
const values = useFormValues(path);
|
|
1204
1320
|
const properties = (0, import_react13.useMemo)(() => {
|
|
1205
1321
|
const props = (0, import_schema3.getSchemaProperties)(schema.ast, values);
|
|
@@ -1223,12 +1339,13 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
|
|
|
1223
1339
|
property.name
|
|
1224
1340
|
],
|
|
1225
1341
|
readonly,
|
|
1342
|
+
onQueryRefOptions,
|
|
1226
1343
|
lookupComponent,
|
|
1227
1344
|
Custom
|
|
1228
1345
|
});
|
|
1229
1346
|
}).filter(import_util3.isNotFalsy));
|
|
1230
1347
|
};
|
|
1231
|
-
var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
|
|
1348
|
+
var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
|
|
1232
1349
|
const formRef = (0, import_react9.useRef)(null);
|
|
1233
1350
|
const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
|
|
1234
1351
|
autoSave,
|
|
@@ -1264,6 +1381,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
|
|
|
1264
1381
|
readonly,
|
|
1265
1382
|
filter,
|
|
1266
1383
|
sort,
|
|
1384
|
+
onQueryRefOptions,
|
|
1267
1385
|
lookupComponent,
|
|
1268
1386
|
Custom
|
|
1269
1387
|
}), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
|
|
@@ -1271,7 +1389,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
|
|
|
1271
1389
|
readonly
|
|
1272
1390
|
})));
|
|
1273
1391
|
};
|
|
1274
|
-
var
|
|
1392
|
+
var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
|
|
1275
1393
|
var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
|
|
1276
1394
|
const { t } = (0, import_react_ui3.useTranslation)(translationKey);
|
|
1277
1395
|
const [props, setProps] = (0, import_react3.useState)(projection.getFieldProjection(field.id).props);
|
|
@@ -1404,7 +1522,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
|
|
|
1404
1522
|
import_log.log.warn("invalid format", {
|
|
1405
1523
|
props
|
|
1406
1524
|
}, {
|
|
1407
|
-
F:
|
|
1525
|
+
F: __dxlog_file4,
|
|
1408
1526
|
L: 174,
|
|
1409
1527
|
S: void 0,
|
|
1410
1528
|
C: (f, a) => f(...a)
|
|
@@ -1428,24 +1546,24 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
|
|
|
1428
1546
|
Custom
|
|
1429
1547
|
});
|
|
1430
1548
|
};
|
|
1431
|
-
var
|
|
1549
|
+
var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
|
|
1432
1550
|
var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
|
|
1433
|
-
var ViewMetaSchema =
|
|
1434
|
-
name:
|
|
1435
|
-
[
|
|
1551
|
+
var ViewMetaSchema = import_echo_schema9.S.Struct({
|
|
1552
|
+
name: import_echo_schema9.S.String.annotations({
|
|
1553
|
+
[import_echo_schema9.AST.TitleAnnotationId]: "View"
|
|
1436
1554
|
}),
|
|
1437
|
-
typename:
|
|
1438
|
-
[
|
|
1555
|
+
typename: import_echo_schema9.Format.URL.annotations({
|
|
1556
|
+
[import_echo_schema9.AST.TitleAnnotationId]: "Typename"
|
|
1439
1557
|
})
|
|
1440
|
-
}).pipe(
|
|
1558
|
+
}).pipe(import_echo_schema9.S.mutable);
|
|
1441
1559
|
var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
|
|
1442
1560
|
const { t } = (0, import_react_ui11.useTranslation)(translationKey);
|
|
1443
|
-
const projection = (0,
|
|
1561
|
+
const projection = (0, import_react16.useMemo)(() => new import_schema5.ViewProjection(schema.jsonSchema, view), [
|
|
1444
1562
|
schema,
|
|
1445
1563
|
view
|
|
1446
1564
|
]);
|
|
1447
|
-
const [field, setField] = (0,
|
|
1448
|
-
const viewValues = (0,
|
|
1565
|
+
const [field, setField] = (0, import_react16.useState)();
|
|
1566
|
+
const viewValues = (0, import_react16.useMemo)(() => {
|
|
1449
1567
|
return {
|
|
1450
1568
|
name: view.name,
|
|
1451
1569
|
// TODO(burdon): Need to warn user of possible consequences of editing.
|
|
@@ -1455,12 +1573,12 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
|
|
|
1455
1573
|
}, [
|
|
1456
1574
|
view
|
|
1457
1575
|
]);
|
|
1458
|
-
const handleSelect = (0,
|
|
1576
|
+
const handleSelect = (0, import_react16.useCallback)((field2) => {
|
|
1459
1577
|
setField((f) => f === field2 ? void 0 : field2);
|
|
1460
1578
|
}, []);
|
|
1461
|
-
const handleAdd = (0,
|
|
1579
|
+
const handleAdd = (0, import_react16.useCallback)(() => {
|
|
1462
1580
|
(0, import_invariant3.invariant)(!schema.readonly, void 0, {
|
|
1463
|
-
F:
|
|
1581
|
+
F: __dxlog_file5,
|
|
1464
1582
|
L: 76,
|
|
1465
1583
|
S: void 0,
|
|
1466
1584
|
A: [
|
|
@@ -1474,9 +1592,9 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
|
|
|
1474
1592
|
schema,
|
|
1475
1593
|
view
|
|
1476
1594
|
]);
|
|
1477
|
-
const handleUpdate = (0,
|
|
1595
|
+
const handleUpdate = (0, import_react16.useCallback)(({ name, typename }) => {
|
|
1478
1596
|
(0, import_invariant3.invariant)(!schema.readonly, void 0, {
|
|
1479
|
-
F:
|
|
1597
|
+
F: __dxlog_file5,
|
|
1480
1598
|
L: 83,
|
|
1481
1599
|
S: void 0,
|
|
1482
1600
|
A: [
|
|
@@ -1497,9 +1615,9 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
|
|
|
1497
1615
|
view,
|
|
1498
1616
|
onTypenameChanged
|
|
1499
1617
|
]);
|
|
1500
|
-
const handleDelete = (0,
|
|
1618
|
+
const handleDelete = (0, import_react16.useCallback)((fieldId) => {
|
|
1501
1619
|
(0, import_invariant3.invariant)(!schema.readonly, void 0, {
|
|
1502
|
-
F:
|
|
1620
|
+
F: __dxlog_file5,
|
|
1503
1621
|
L: 99,
|
|
1504
1622
|
S: void 0,
|
|
1505
1623
|
A: [
|
|
@@ -1516,9 +1634,9 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
|
|
|
1516
1634
|
field,
|
|
1517
1635
|
onDelete
|
|
1518
1636
|
]);
|
|
1519
|
-
const handleMove = (0,
|
|
1637
|
+
const handleMove = (0, import_react16.useCallback)((fromIndex, toIndex) => {
|
|
1520
1638
|
(0, import_invariant3.invariant)(!schema.readonly, void 0, {
|
|
1521
|
-
F:
|
|
1639
|
+
F: __dxlog_file5,
|
|
1522
1640
|
L: 111,
|
|
1523
1641
|
S: void 0,
|
|
1524
1642
|
A: [
|
|
@@ -1536,91 +1654,95 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
|
|
|
1536
1654
|
schema,
|
|
1537
1655
|
view.fields
|
|
1538
1656
|
]);
|
|
1539
|
-
const handleClose = (0,
|
|
1657
|
+
const handleClose = (0, import_react16.useCallback)(() => setField(void 0), []);
|
|
1540
1658
|
const hiddenProperties = projection.getHiddenProperties();
|
|
1541
|
-
const handleHide = (0,
|
|
1659
|
+
const handleHide = (0, import_react16.useCallback)((fieldId) => {
|
|
1542
1660
|
setField(void 0);
|
|
1543
1661
|
projection.hideFieldProjection(fieldId);
|
|
1544
1662
|
}, [
|
|
1545
1663
|
projection
|
|
1546
1664
|
]);
|
|
1547
|
-
const handleShow = (0,
|
|
1665
|
+
const handleShow = (0, import_react16.useCallback)((property) => {
|
|
1548
1666
|
setField(void 0);
|
|
1549
1667
|
projection.showFieldProjection(property);
|
|
1550
1668
|
}, [
|
|
1551
1669
|
projection
|
|
1552
1670
|
]);
|
|
1553
|
-
return /* @__PURE__ */
|
|
1671
|
+
return /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1554
1672
|
role: "none",
|
|
1555
|
-
className: (0, import_react_ui_theme10.mx)("
|
|
1556
|
-
}, /* @__PURE__ */
|
|
1673
|
+
className: (0, import_react_ui_theme10.mx)("grid grid-rows-[1fr_1fr] min-bs-0", classNames)
|
|
1674
|
+
}, /* @__PURE__ */ import_react16.default.createElement(Form, {
|
|
1557
1675
|
autoSave: true,
|
|
1558
1676
|
schema: ViewMetaSchema,
|
|
1559
1677
|
values: viewValues,
|
|
1560
|
-
onSave: schema.readonly ? void 0 : handleUpdate
|
|
1561
|
-
|
|
1678
|
+
onSave: schema.readonly ? void 0 : handleUpdate,
|
|
1679
|
+
classNames: "min-bs-0 overflow-y-auto"
|
|
1680
|
+
}), /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1681
|
+
role: "none",
|
|
1682
|
+
className: "border-bs border-separator min-bs-0 overflow-y-auto"
|
|
1683
|
+
}, /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1562
1684
|
role: "none",
|
|
1563
1685
|
className: "p-2"
|
|
1564
|
-
}, /* @__PURE__ */
|
|
1686
|
+
}, /* @__PURE__ */ import_react16.default.createElement("label", {
|
|
1565
1687
|
className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
|
|
1566
|
-
}, t("fields label"))), /* @__PURE__ */
|
|
1688
|
+
}, t("fields label"))), /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.Root, {
|
|
1567
1689
|
items: view.fields,
|
|
1568
|
-
isItem:
|
|
1690
|
+
isItem: import_echo_schema9.S.is(import_schema5.FieldSchema),
|
|
1569
1691
|
getId: (field2) => field2.id,
|
|
1570
1692
|
onMove: schema.readonly ? void 0 : handleMove
|
|
1571
|
-
}, ({ items: fields }) => /* @__PURE__ */
|
|
1693
|
+
}, ({ items: fields }) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, showHeading && /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1572
1694
|
role: "heading",
|
|
1573
1695
|
className: grid
|
|
1574
|
-
}, /* @__PURE__ */
|
|
1696
|
+
}, /* @__PURE__ */ import_react16.default.createElement("div", null), /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1575
1697
|
className: "flex items-center text-sm"
|
|
1576
|
-
}, t("field path label"))), /* @__PURE__ */
|
|
1698
|
+
}, t("field path label"))), /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1577
1699
|
role: "list",
|
|
1578
1700
|
className: "flex flex-col w-full"
|
|
1579
|
-
}, fields?.map((field2) => /* @__PURE__ */
|
|
1701
|
+
}, fields?.map((field2) => /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.Item, {
|
|
1580
1702
|
key: field2.id,
|
|
1581
1703
|
item: field2,
|
|
1582
1704
|
classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
|
|
1583
|
-
}, /* @__PURE__ */
|
|
1705
|
+
}, /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemTitle, {
|
|
1584
1706
|
onClick: () => handleSelect(field2)
|
|
1585
|
-
}, field2.path), /* @__PURE__ */
|
|
1707
|
+
}, field2.path), /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1586
1708
|
className: "flex items-center gap-2 -ml-4"
|
|
1587
|
-
}, /* @__PURE__ */
|
|
1709
|
+
}, /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemButton, {
|
|
1588
1710
|
icon: "ph--eye-slash--regular",
|
|
1589
1711
|
disabled: view.fields.length <= 1,
|
|
1590
1712
|
onClick: () => handleHide(field2.id)
|
|
1591
|
-
}), !schema.readonly && /* @__PURE__ */
|
|
1713
|
+
}), !schema.readonly && /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
|
|
1592
1714
|
icon: "ph--trash--regular",
|
|
1593
1715
|
disabled: view.fields.length <= 1,
|
|
1594
1716
|
onClick: () => handleDelete(field2.id)
|
|
1595
|
-
}))))))), hiddenProperties.length > 0 && /* @__PURE__ */
|
|
1717
|
+
}))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1596
1718
|
role: "none",
|
|
1597
1719
|
className: "p-2"
|
|
1598
|
-
}, /* @__PURE__ */
|
|
1720
|
+
}, /* @__PURE__ */ import_react16.default.createElement("label", {
|
|
1599
1721
|
className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
|
|
1600
|
-
}, t("hidden fields label"))), /* @__PURE__ */
|
|
1722
|
+
}, t("hidden fields label"))), /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.Root, {
|
|
1601
1723
|
items: hiddenProperties,
|
|
1602
1724
|
isItem: (item) => typeof item === "string",
|
|
1603
1725
|
getId: (property) => property
|
|
1604
|
-
}, ({ items: properties }) => /* @__PURE__ */
|
|
1726
|
+
}, ({ items: properties }) => /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1605
1727
|
role: "list",
|
|
1606
1728
|
className: "flex flex-col w-full"
|
|
1607
|
-
}, properties?.map((property) => /* @__PURE__ */
|
|
1729
|
+
}, properties?.map((property) => /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.Item, {
|
|
1608
1730
|
key: property,
|
|
1609
1731
|
item: property,
|
|
1610
1732
|
classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
|
|
1611
|
-
}, /* @__PURE__ */
|
|
1733
|
+
}, /* @__PURE__ */ import_react16.default.createElement("div", null), /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react16.default.createElement(import_react_ui_list2.List.ItemButton, {
|
|
1612
1734
|
icon: "ph--eye--regular",
|
|
1613
1735
|
onClick: () => handleShow(property)
|
|
1614
|
-
}))))))), field && /* @__PURE__ */
|
|
1736
|
+
}))))))), field && /* @__PURE__ */ import_react16.default.createElement(FieldEditor, {
|
|
1615
1737
|
key: field.id,
|
|
1616
1738
|
view,
|
|
1617
1739
|
projection,
|
|
1618
1740
|
field,
|
|
1619
1741
|
registry,
|
|
1620
1742
|
onSave: handleClose
|
|
1621
|
-
}), !readonly && !field && /* @__PURE__ */
|
|
1743
|
+
}), !readonly && !field && /* @__PURE__ */ import_react16.default.createElement("div", {
|
|
1622
1744
|
className: "flex p-2 justify-center"
|
|
1623
|
-
}, /* @__PURE__ */
|
|
1745
|
+
}, /* @__PURE__ */ import_react16.default.createElement(import_react_ui11.IconButton, {
|
|
1624
1746
|
icon: "ph--plus--regular",
|
|
1625
1747
|
label: t("button add property"),
|
|
1626
1748
|
onClick: schema.readonly ? void 0 : handleAdd,
|
|
@@ -1634,7 +1756,7 @@ var parseValue = ({ type, format, value }) => {
|
|
|
1634
1756
|
}
|
|
1635
1757
|
const parseScalar = (type2) => {
|
|
1636
1758
|
switch (type2) {
|
|
1637
|
-
case
|
|
1759
|
+
case import_echo_schema10.TypeEnum.Boolean: {
|
|
1638
1760
|
if (typeof value === "string") {
|
|
1639
1761
|
const lowercaseValue = value.toLowerCase();
|
|
1640
1762
|
if (lowercaseValue === "0" || lowercaseValue === "false") {
|
|
@@ -1645,13 +1767,13 @@ var parseValue = ({ type, format, value }) => {
|
|
|
1645
1767
|
}
|
|
1646
1768
|
return Boolean(value);
|
|
1647
1769
|
}
|
|
1648
|
-
case
|
|
1770
|
+
case import_echo_schema10.TypeEnum.Number: {
|
|
1649
1771
|
const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
|
|
1650
1772
|
const num = Number(cleaned);
|
|
1651
1773
|
return Number.isNaN(num) ? null : num;
|
|
1652
1774
|
}
|
|
1653
|
-
case
|
|
1654
|
-
case
|
|
1775
|
+
case import_echo_schema10.TypeEnum.String:
|
|
1776
|
+
case import_echo_schema10.TypeEnum.Ref:
|
|
1655
1777
|
return String(value);
|
|
1656
1778
|
default: {
|
|
1657
1779
|
return value;
|
|
@@ -1662,26 +1784,26 @@ var parseValue = ({ type, format, value }) => {
|
|
|
1662
1784
|
return parseScalar(type);
|
|
1663
1785
|
}
|
|
1664
1786
|
switch (format) {
|
|
1665
|
-
case
|
|
1666
|
-
return parseScalar(
|
|
1667
|
-
case
|
|
1668
|
-
case
|
|
1669
|
-
case
|
|
1670
|
-
return parseScalar(
|
|
1671
|
-
case
|
|
1672
|
-
case
|
|
1673
|
-
return parseScalar(
|
|
1787
|
+
case import_echo_schema10.FormatEnum.Boolean:
|
|
1788
|
+
return parseScalar(import_echo_schema10.TypeEnum.Boolean);
|
|
1789
|
+
case import_echo_schema10.FormatEnum.Number:
|
|
1790
|
+
case import_echo_schema10.FormatEnum.Percent:
|
|
1791
|
+
case import_echo_schema10.FormatEnum.Currency:
|
|
1792
|
+
return parseScalar(import_echo_schema10.TypeEnum.Number);
|
|
1793
|
+
case import_echo_schema10.FormatEnum.String:
|
|
1794
|
+
case import_echo_schema10.FormatEnum.Markdown: {
|
|
1795
|
+
return parseScalar(import_echo_schema10.TypeEnum.String);
|
|
1674
1796
|
}
|
|
1675
|
-
case
|
|
1676
|
-
throw new Error(`unexpected format: ${
|
|
1677
|
-
case
|
|
1678
|
-
case
|
|
1679
|
-
case
|
|
1680
|
-
case
|
|
1797
|
+
case import_echo_schema10.FormatEnum.Ref:
|
|
1798
|
+
throw new Error(`unexpected format: ${import_echo_schema10.FormatEnum.Ref}`);
|
|
1799
|
+
case import_echo_schema10.FormatEnum.DateTime:
|
|
1800
|
+
case import_echo_schema10.FormatEnum.Date:
|
|
1801
|
+
case import_echo_schema10.FormatEnum.Time:
|
|
1802
|
+
case import_echo_schema10.FormatEnum.Timestamp: {
|
|
1681
1803
|
const date = new Date(value);
|
|
1682
1804
|
return isNaN(date.getTime()) ? null : date;
|
|
1683
1805
|
}
|
|
1684
|
-
case
|
|
1806
|
+
case import_echo_schema10.FormatEnum.GeoPoint: {
|
|
1685
1807
|
if (typeof value === "string") {
|
|
1686
1808
|
const cleaned = value.replace(/[^0-9.,-]+/g, "");
|
|
1687
1809
|
const parts = cleaned.split(",");
|
|
@@ -1689,7 +1811,7 @@ var parseValue = ({ type, format, value }) => {
|
|
|
1689
1811
|
const lat = parseFloat(parts[0]);
|
|
1690
1812
|
const long = parseFloat(parts[1]);
|
|
1691
1813
|
if (!isNaN(lat) && !isNaN(long)) {
|
|
1692
|
-
return
|
|
1814
|
+
return import_echo_schema10.GeoLocation.toGeoPoint({
|
|
1693
1815
|
latitude: lat,
|
|
1694
1816
|
longitude: long
|
|
1695
1817
|
});
|
|
@@ -1709,19 +1831,19 @@ var parseValue = ({ type, format, value }) => {
|
|
|
1709
1831
|
var cellClassesForFieldType = ({ type, format }) => {
|
|
1710
1832
|
if (!format) {
|
|
1711
1833
|
switch (type) {
|
|
1712
|
-
case
|
|
1834
|
+
case import_echo_schema10.TypeEnum.Number:
|
|
1713
1835
|
return [
|
|
1714
1836
|
"text-right",
|
|
1715
1837
|
"font-mono"
|
|
1716
1838
|
];
|
|
1717
|
-
case
|
|
1839
|
+
case import_echo_schema10.TypeEnum.Boolean:
|
|
1718
1840
|
return [
|
|
1719
1841
|
"text-right",
|
|
1720
1842
|
"font-mono"
|
|
1721
1843
|
];
|
|
1722
|
-
case
|
|
1844
|
+
case import_echo_schema10.TypeEnum.String:
|
|
1723
1845
|
return void 0;
|
|
1724
|
-
case
|
|
1846
|
+
case import_echo_schema10.TypeEnum.Ref:
|
|
1725
1847
|
return void 0;
|
|
1726
1848
|
default: {
|
|
1727
1849
|
return void 0;
|
|
@@ -1729,23 +1851,23 @@ var cellClassesForFieldType = ({ type, format }) => {
|
|
|
1729
1851
|
}
|
|
1730
1852
|
}
|
|
1731
1853
|
switch (format) {
|
|
1732
|
-
case
|
|
1854
|
+
case import_echo_schema10.FormatEnum.Markdown:
|
|
1733
1855
|
return void 0;
|
|
1734
|
-
case
|
|
1735
|
-
case
|
|
1736
|
-
case
|
|
1737
|
-
case
|
|
1738
|
-
case
|
|
1856
|
+
case import_echo_schema10.FormatEnum.Time:
|
|
1857
|
+
case import_echo_schema10.FormatEnum.Timestamp:
|
|
1858
|
+
case import_echo_schema10.FormatEnum.DateTime:
|
|
1859
|
+
case import_echo_schema10.FormatEnum.Date:
|
|
1860
|
+
case import_echo_schema10.FormatEnum.Duration:
|
|
1739
1861
|
return [
|
|
1740
1862
|
"font-mono",
|
|
1741
1863
|
"text-right"
|
|
1742
1864
|
];
|
|
1743
|
-
case
|
|
1865
|
+
case import_echo_schema10.FormatEnum.Currency:
|
|
1744
1866
|
return [
|
|
1745
1867
|
"text-right"
|
|
1746
1868
|
];
|
|
1747
|
-
case
|
|
1748
|
-
case
|
|
1869
|
+
case import_echo_schema10.FormatEnum.JSON:
|
|
1870
|
+
case import_echo_schema10.FormatEnum.DID:
|
|
1749
1871
|
return [
|
|
1750
1872
|
"font-mono"
|
|
1751
1873
|
];
|
|
@@ -1760,12 +1882,12 @@ var pathNotUniqueError = (path) => ({
|
|
|
1760
1882
|
var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
|
|
1761
1883
|
const formatScalar = (type2) => {
|
|
1762
1884
|
switch (type2) {
|
|
1763
|
-
case
|
|
1885
|
+
case import_echo_schema11.TypeEnum.Boolean:
|
|
1764
1886
|
return value.toLocaleString().toUpperCase();
|
|
1765
|
-
case
|
|
1887
|
+
case import_echo_schema11.TypeEnum.Number:
|
|
1766
1888
|
return value.toLocaleString(locale);
|
|
1767
|
-
case
|
|
1768
|
-
case
|
|
1889
|
+
case import_echo_schema11.TypeEnum.String:
|
|
1890
|
+
case import_echo_schema11.TypeEnum.Ref:
|
|
1769
1891
|
return String(value);
|
|
1770
1892
|
default: {
|
|
1771
1893
|
return String(value);
|
|
@@ -1776,20 +1898,20 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
|
|
|
1776
1898
|
return formatScalar(type);
|
|
1777
1899
|
}
|
|
1778
1900
|
switch (format) {
|
|
1779
|
-
case
|
|
1780
|
-
return formatScalar(
|
|
1901
|
+
case import_echo_schema11.FormatEnum.Boolean: {
|
|
1902
|
+
return formatScalar(import_echo_schema11.TypeEnum.Boolean);
|
|
1781
1903
|
}
|
|
1782
|
-
case
|
|
1783
|
-
return formatScalar(
|
|
1904
|
+
case import_echo_schema11.FormatEnum.Number: {
|
|
1905
|
+
return formatScalar(import_echo_schema11.TypeEnum.Number);
|
|
1784
1906
|
}
|
|
1785
|
-
case
|
|
1786
|
-
case
|
|
1787
|
-
return formatScalar(
|
|
1907
|
+
case import_echo_schema11.FormatEnum.String:
|
|
1908
|
+
case import_echo_schema11.FormatEnum.Ref: {
|
|
1909
|
+
return formatScalar(import_echo_schema11.TypeEnum.String);
|
|
1788
1910
|
}
|
|
1789
|
-
case
|
|
1911
|
+
case import_echo_schema11.FormatEnum.Percent: {
|
|
1790
1912
|
return `${value * 100}%`;
|
|
1791
1913
|
}
|
|
1792
|
-
case
|
|
1914
|
+
case import_echo_schema11.FormatEnum.Currency: {
|
|
1793
1915
|
return value.toLocaleString(locale, {
|
|
1794
1916
|
style: "currency",
|
|
1795
1917
|
currency: "USD",
|
|
@@ -1797,33 +1919,33 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
|
|
|
1797
1919
|
maximumFractionDigits: 2
|
|
1798
1920
|
});
|
|
1799
1921
|
}
|
|
1800
|
-
case
|
|
1922
|
+
case import_echo_schema11.FormatEnum.Date: {
|
|
1801
1923
|
try {
|
|
1802
1924
|
return (0, import_format.format)(new Date(value), "yyyy-MM-dd");
|
|
1803
1925
|
} catch (error) {
|
|
1804
1926
|
return "Invalid Date";
|
|
1805
1927
|
}
|
|
1806
1928
|
}
|
|
1807
|
-
case
|
|
1929
|
+
case import_echo_schema11.FormatEnum.Time: {
|
|
1808
1930
|
try {
|
|
1809
1931
|
return (0, import_format.format)(new Date(value), "HH:mm:ss");
|
|
1810
1932
|
} catch (error) {
|
|
1811
1933
|
return "Invalid Time";
|
|
1812
1934
|
}
|
|
1813
1935
|
}
|
|
1814
|
-
case
|
|
1936
|
+
case import_echo_schema11.FormatEnum.DateTime: {
|
|
1815
1937
|
try {
|
|
1816
1938
|
return (0, import_format.format)(new Date(value), "yyyy-MM-dd HH:mm:ss");
|
|
1817
1939
|
} catch (error) {
|
|
1818
1940
|
return "Invalid DateTime";
|
|
1819
1941
|
}
|
|
1820
1942
|
}
|
|
1821
|
-
case
|
|
1943
|
+
case import_echo_schema11.FormatEnum.GeoPoint: {
|
|
1822
1944
|
if (value === null || value === void 0) {
|
|
1823
1945
|
return "";
|
|
1824
1946
|
}
|
|
1825
1947
|
if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
|
|
1826
|
-
const { latitude, longitude } =
|
|
1948
|
+
const { latitude, longitude } = import_echo_schema11.GeoLocation.fromGeoPoint(value);
|
|
1827
1949
|
return `${latitude},${longitude}`;
|
|
1828
1950
|
}
|
|
1829
1951
|
return String(value);
|
|
@@ -1839,10 +1961,10 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
|
|
|
1839
1961
|
var formatForEditing = ({ type, format, value, locale = void 0 }) => {
|
|
1840
1962
|
const formatScalar = (type2) => {
|
|
1841
1963
|
switch (type2) {
|
|
1842
|
-
case
|
|
1843
|
-
case
|
|
1844
|
-
case
|
|
1845
|
-
case
|
|
1964
|
+
case import_echo_schema11.TypeEnum.Boolean:
|
|
1965
|
+
case import_echo_schema11.TypeEnum.Number:
|
|
1966
|
+
case import_echo_schema11.TypeEnum.String:
|
|
1967
|
+
case import_echo_schema11.TypeEnum.Ref:
|
|
1846
1968
|
return String(value);
|
|
1847
1969
|
default:
|
|
1848
1970
|
return String(value);
|
|
@@ -1852,36 +1974,36 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
|
|
|
1852
1974
|
return formatScalar(type);
|
|
1853
1975
|
}
|
|
1854
1976
|
switch (format) {
|
|
1855
|
-
case
|
|
1856
|
-
case
|
|
1857
|
-
case
|
|
1858
|
-
case
|
|
1977
|
+
case import_echo_schema11.FormatEnum.Boolean:
|
|
1978
|
+
case import_echo_schema11.FormatEnum.Number:
|
|
1979
|
+
case import_echo_schema11.FormatEnum.String:
|
|
1980
|
+
case import_echo_schema11.FormatEnum.Ref: {
|
|
1859
1981
|
return formatScalar(type);
|
|
1860
1982
|
}
|
|
1861
|
-
case
|
|
1983
|
+
case import_echo_schema11.FormatEnum.Percent: {
|
|
1862
1984
|
return String(value * 100);
|
|
1863
1985
|
}
|
|
1864
|
-
case
|
|
1986
|
+
case import_echo_schema11.FormatEnum.Currency: {
|
|
1865
1987
|
return String(value);
|
|
1866
1988
|
}
|
|
1867
|
-
case
|
|
1989
|
+
case import_echo_schema11.FormatEnum.DateTime: {
|
|
1868
1990
|
const date = new Date(value);
|
|
1869
1991
|
return date.toISOString();
|
|
1870
1992
|
}
|
|
1871
|
-
case
|
|
1993
|
+
case import_echo_schema11.FormatEnum.Date: {
|
|
1872
1994
|
const date = new Date(value);
|
|
1873
1995
|
return date.toISOString().split("T")[0];
|
|
1874
1996
|
}
|
|
1875
|
-
case
|
|
1997
|
+
case import_echo_schema11.FormatEnum.Time: {
|
|
1876
1998
|
const date = new Date(value);
|
|
1877
1999
|
return date.toISOString().split("T")[1].split(".")[0];
|
|
1878
2000
|
}
|
|
1879
|
-
case
|
|
2001
|
+
case import_echo_schema11.FormatEnum.GeoPoint: {
|
|
1880
2002
|
if (value === null || value === void 0) {
|
|
1881
2003
|
return "";
|
|
1882
2004
|
}
|
|
1883
2005
|
if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
|
|
1884
|
-
const { latitude, longitude } =
|
|
2006
|
+
const { latitude, longitude } = import_echo_schema11.GeoLocation.fromGeoPoint(value);
|
|
1885
2007
|
return `${latitude},${longitude}`;
|
|
1886
2008
|
}
|
|
1887
2009
|
return String(value);
|