@dxos/react-ui-form 0.8.3-staging.0fa589b → 0.8.4-main.3a94e84
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 +69 -75
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +69 -75
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts +1 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +3 -4
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts +3 -3
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts +1 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +2 -2
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts +4 -4
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/deprecated/Form.d.ts +3 -3
- package/dist/types/src/components/deprecated/Form.d.ts.map +1 -1
- package/dist/types/src/components/deprecated/Form.stories.d.ts +1 -1
- package/dist/types/src/components/deprecated/Form.stories.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +56 -57
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +30 -32
- package/src/components/ControlSection/ControlSection.stories.tsx +2 -2
- package/src/components/FieldEditor/FieldEditor.stories.tsx +14 -12
- package/src/components/FieldEditor/FieldEditor.test.tsx +11 -11
- package/src/components/FieldEditor/FieldEditor.tsx +5 -15
- package/src/components/Form/ArrayField.tsx +1 -1
- package/src/components/Form/Form.stories.tsx +2 -2
- package/src/components/Form/RefField.tsx +1 -1
- package/src/components/Form/custom/SelectOptionsInput.stories.tsx +2 -2
- package/src/components/Form/custom/SelectOptionsInput.tsx +1 -1
- package/src/components/ViewEditor/ViewEditor.stories.tsx +16 -10
- package/src/components/ViewEditor/ViewEditor.test.tsx +37 -35
- package/src/components/ViewEditor/ViewEditor.tsx +17 -32
- package/src/components/deprecated/Form.stories.tsx +5 -5
- package/src/components/deprecated/Form.tsx +4 -4
- package/src/components/testing.tsx +1 -1
- package/src/index.ts +1 -1
- package/src/translations.ts +4 -2
- package/dist/lib/node/index.cjs +0 -2416
- package/dist/lib/node/index.cjs.map +0 -7
- package/dist/lib/node/meta.json +0 -1
- package/dist/types/src/components/ViewEditor/Test.stories.d.ts +0 -10
- package/dist/types/src/components/ViewEditor/Test.stories.d.ts.map +0 -1
- package/src/components/ViewEditor/Test.stories.tsx +0 -45
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
1
|
+
// src/translations.ts
|
|
2
2
|
var translationKey = "react-ui-form";
|
|
3
|
-
var
|
|
3
|
+
var translations = [
|
|
4
4
|
{
|
|
5
5
|
"en-US": {
|
|
6
6
|
[translationKey]: {
|
|
@@ -67,7 +67,7 @@ var translations_default = [
|
|
|
67
67
|
}
|
|
68
68
|
];
|
|
69
69
|
|
|
70
|
-
//
|
|
70
|
+
// src/components/deprecated/FormInput.tsx
|
|
71
71
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
72
72
|
import React from "react";
|
|
73
73
|
import { Input } from "@dxos/react-ui";
|
|
@@ -119,7 +119,7 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
|
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
//
|
|
122
|
+
// src/components/ControlSection/ControlSection.tsx
|
|
123
123
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
124
124
|
import React2 from "react";
|
|
125
125
|
import { Button, Input as Input2, toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
@@ -250,7 +250,7 @@ var ControlFrameItem = ({ title, description, children }) => {
|
|
|
250
250
|
}
|
|
251
251
|
};
|
|
252
252
|
|
|
253
|
-
//
|
|
253
|
+
// src/components/FieldEditor/FieldEditor.tsx
|
|
254
254
|
import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
|
|
255
255
|
import React14, { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo7, useState as useState5 } from "react";
|
|
256
256
|
import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo-schema";
|
|
@@ -258,14 +258,14 @@ import { log as log3 } from "@dxos/log";
|
|
|
258
258
|
import { useTranslation as useTranslation8 } from "@dxos/react-ui";
|
|
259
259
|
import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
|
|
260
260
|
|
|
261
|
-
//
|
|
261
|
+
// src/components/Form/custom/GeoPointInput.tsx
|
|
262
262
|
import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
|
|
263
263
|
import React4, { useCallback, useState, useEffect, useMemo } from "react";
|
|
264
264
|
import { GeoLocation } from "@dxos/echo-schema";
|
|
265
265
|
import { Input as Input4, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
266
266
|
import { safeParseFloat } from "@dxos/util";
|
|
267
267
|
|
|
268
|
-
//
|
|
268
|
+
// src/components/Form/Input.tsx
|
|
269
269
|
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
270
270
|
import React3 from "react";
|
|
271
271
|
import { Icon, Input as Input3, Tooltip } from "@dxos/react-ui";
|
|
@@ -295,7 +295,7 @@ var InputHeader = ({ error, label, readonly }) => {
|
|
|
295
295
|
}
|
|
296
296
|
};
|
|
297
297
|
|
|
298
|
-
//
|
|
298
|
+
// src/components/Form/custom/GeoPointInput.tsx
|
|
299
299
|
var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
|
|
300
300
|
var _effect = _useSignals4();
|
|
301
301
|
try {
|
|
@@ -372,7 +372,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
|
|
|
372
372
|
}
|
|
373
373
|
};
|
|
374
374
|
|
|
375
|
-
//
|
|
375
|
+
// src/components/Form/custom/SelectOptionsInput.tsx
|
|
376
376
|
import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
|
|
377
377
|
import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
|
|
378
378
|
import { PublicKey } from "@dxos/keys";
|
|
@@ -508,7 +508,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
|
|
|
508
508
|
}, /* @__PURE__ */ React5.createElement(List.Item, {
|
|
509
509
|
role: "button",
|
|
510
510
|
item,
|
|
511
|
-
classNames:
|
|
511
|
+
classNames: [
|
|
512
|
+
"p-1 plb-2",
|
|
513
|
+
"flex flex-col",
|
|
514
|
+
"cursor-pointer",
|
|
515
|
+
"hover:bg-hoverOverlay"
|
|
516
|
+
],
|
|
512
517
|
"aria-expanded": selected === item.id
|
|
513
518
|
}, /* @__PURE__ */ React5.createElement("div", {
|
|
514
519
|
className: "flex items-center"
|
|
@@ -563,7 +568,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
|
|
|
563
568
|
}
|
|
564
569
|
};
|
|
565
570
|
|
|
566
|
-
//
|
|
571
|
+
// src/components/Form/custom/TupleInput.tsx
|
|
567
572
|
import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
|
|
568
573
|
import React6 from "react";
|
|
569
574
|
import { Input as Input6 } from "@dxos/react-ui";
|
|
@@ -603,7 +608,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
|
|
|
603
608
|
}
|
|
604
609
|
};
|
|
605
610
|
|
|
606
|
-
//
|
|
611
|
+
// src/components/Form/Defaults.tsx
|
|
607
612
|
import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
|
|
608
613
|
import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
609
614
|
import { Input as Input7, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
@@ -745,26 +750,26 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
|
|
|
745
750
|
}
|
|
746
751
|
};
|
|
747
752
|
|
|
748
|
-
//
|
|
753
|
+
// src/components/Form/Form.tsx
|
|
749
754
|
import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
|
|
750
755
|
import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
|
|
751
756
|
import { cardDialogOverflow, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
|
|
752
757
|
|
|
753
|
-
//
|
|
758
|
+
// src/components/Form/FormActions.tsx
|
|
754
759
|
import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
|
|
755
760
|
import React9 from "react";
|
|
756
761
|
import { IconButton as IconButton2, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
757
762
|
import { cardSpacing } from "@dxos/react-ui-stack";
|
|
758
763
|
import { mx as mx6 } from "@dxos/react-ui-theme";
|
|
759
764
|
|
|
760
|
-
//
|
|
765
|
+
// src/components/Form/FormContext.tsx
|
|
761
766
|
import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
|
|
762
767
|
import React8, { createContext, useContext, useEffect as useEffect6, useMemo as useMemo3, useCallback as useCallback6 } from "react";
|
|
763
768
|
import { raise } from "@dxos/debug";
|
|
764
769
|
import { getValue as getValue2 } from "@dxos/echo-schema";
|
|
765
770
|
import { createJsonPath as createJsonPath2 } from "@dxos/effect";
|
|
766
771
|
|
|
767
|
-
//
|
|
772
|
+
// src/hooks/useForm.ts
|
|
768
773
|
import { SchemaAST } from "effect";
|
|
769
774
|
import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
|
|
770
775
|
import { getValue, setValue } from "@dxos/echo-schema";
|
|
@@ -772,7 +777,7 @@ import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
|
|
|
772
777
|
import { invariant } from "@dxos/invariant";
|
|
773
778
|
import { log } from "@dxos/log";
|
|
774
779
|
import { validateSchema } from "@dxos/schema";
|
|
775
|
-
var __dxlog_file = "/
|
|
780
|
+
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
|
|
776
781
|
var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
|
|
777
782
|
invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
|
|
778
783
|
F: __dxlog_file,
|
|
@@ -973,7 +978,7 @@ var flatMap = (errors) => {
|
|
|
973
978
|
}, {});
|
|
974
979
|
};
|
|
975
980
|
|
|
976
|
-
//
|
|
981
|
+
// src/hooks/useRefQueryLookupHandler.ts
|
|
977
982
|
import { useCallback as useCallback5 } from "react";
|
|
978
983
|
import { getObjectDXN } from "@dxos/echo-schema";
|
|
979
984
|
import { Filter } from "@dxos/react-client/echo";
|
|
@@ -1001,10 +1006,10 @@ var useRefQueryLookupHandler = ({ space }) => {
|
|
|
1001
1006
|
]);
|
|
1002
1007
|
};
|
|
1003
1008
|
|
|
1004
|
-
//
|
|
1009
|
+
// src/hooks/useQueryRefOptions.ts
|
|
1005
1010
|
import { useEffect as useEffect5, useState as useState4 } from "react";
|
|
1006
1011
|
import { log as log2 } from "@dxos/log";
|
|
1007
|
-
var __dxlog_file2 = "/
|
|
1012
|
+
var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
|
|
1008
1013
|
var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
|
|
1009
1014
|
const [options, setOptions] = useState4([]);
|
|
1010
1015
|
const [loading, setLoading] = useState4(false);
|
|
@@ -1047,7 +1052,7 @@ var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
|
|
|
1047
1052
|
};
|
|
1048
1053
|
};
|
|
1049
1054
|
|
|
1050
|
-
//
|
|
1055
|
+
// src/components/Form/FormContext.tsx
|
|
1051
1056
|
var FormContext = /* @__PURE__ */ createContext(void 0);
|
|
1052
1057
|
var useFormContext = () => {
|
|
1053
1058
|
return useContext(FormContext) ?? raise(new Error("Missing FormContext"));
|
|
@@ -1120,7 +1125,7 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
|
|
|
1120
1125
|
}
|
|
1121
1126
|
};
|
|
1122
1127
|
|
|
1123
|
-
//
|
|
1128
|
+
// src/components/Form/FormActions.tsx
|
|
1124
1129
|
var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
|
|
1125
1130
|
var _effect = _useSignals9();
|
|
1126
1131
|
try {
|
|
@@ -1147,7 +1152,7 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
|
|
|
1147
1152
|
}
|
|
1148
1153
|
};
|
|
1149
1154
|
|
|
1150
|
-
//
|
|
1155
|
+
// src/components/Form/FormContent.tsx
|
|
1151
1156
|
import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
|
|
1152
1157
|
import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
|
|
1153
1158
|
import { capitalize as capitalize2 } from "effect/String";
|
|
@@ -1157,7 +1162,7 @@ import { mx as mx8 } from "@dxos/react-ui-theme";
|
|
|
1157
1162
|
import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
|
|
1158
1163
|
import { isNotFalsy } from "@dxos/util";
|
|
1159
1164
|
|
|
1160
|
-
//
|
|
1165
|
+
// src/components/Form/ArrayField.tsx
|
|
1161
1166
|
import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
|
|
1162
1167
|
import { SchemaAST as SchemaAST3, pipe } from "effect";
|
|
1163
1168
|
import { capitalize } from "effect/String";
|
|
@@ -1167,7 +1172,7 @@ import { invariant as invariant2 } from "@dxos/invariant";
|
|
|
1167
1172
|
import { IconButton as IconButton3, useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
1168
1173
|
import { getSchemaProperties } from "@dxos/schema";
|
|
1169
1174
|
|
|
1170
|
-
//
|
|
1175
|
+
// src/util/field.ts
|
|
1171
1176
|
import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
|
|
1172
1177
|
var parseValue = ({ type, format, value }) => {
|
|
1173
1178
|
if (value === void 0 || value === null || value === "") {
|
|
@@ -1299,7 +1304,7 @@ var pathNotUniqueError = (path) => ({
|
|
|
1299
1304
|
message: `'${path}' is already present`
|
|
1300
1305
|
});
|
|
1301
1306
|
|
|
1302
|
-
//
|
|
1307
|
+
// src/util/formatting.ts
|
|
1303
1308
|
import { format as formatDate } from "date-fns/format";
|
|
1304
1309
|
import { FormatEnum as FormatEnum2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
|
|
1305
1310
|
var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
|
|
@@ -1437,11 +1442,11 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
|
|
|
1437
1442
|
}
|
|
1438
1443
|
};
|
|
1439
1444
|
|
|
1440
|
-
//
|
|
1445
|
+
// src/util/refs.ts
|
|
1441
1446
|
import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo-schema";
|
|
1442
1447
|
import { findAnnotation } from "@dxos/effect";
|
|
1443
1448
|
|
|
1444
|
-
//
|
|
1449
|
+
// src/util/schema.ts
|
|
1445
1450
|
import { SchemaAST as SchemaAST2 } from "effect";
|
|
1446
1451
|
import { findNode } from "@dxos/effect";
|
|
1447
1452
|
var findArrayElementType = (ast) => {
|
|
@@ -1450,7 +1455,7 @@ var findArrayElementType = (ast) => {
|
|
|
1450
1455
|
return elementType;
|
|
1451
1456
|
};
|
|
1452
1457
|
|
|
1453
|
-
//
|
|
1458
|
+
// src/util/refs.ts
|
|
1454
1459
|
var getRefProps = (property) => {
|
|
1455
1460
|
const { ast, format, array } = property;
|
|
1456
1461
|
if (format === FormatEnum3.Ref) {
|
|
@@ -1474,8 +1479,8 @@ var getRefProps = (property) => {
|
|
|
1474
1479
|
return void 0;
|
|
1475
1480
|
};
|
|
1476
1481
|
|
|
1477
|
-
//
|
|
1478
|
-
var __dxlog_file3 = "/
|
|
1482
|
+
// src/components/Form/ArrayField.tsx
|
|
1483
|
+
var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
|
|
1479
1484
|
var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
|
|
1480
1485
|
var _effect = _useSignals10();
|
|
1481
1486
|
try {
|
|
@@ -1561,7 +1566,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
|
|
|
1561
1566
|
classNames: "self-center"
|
|
1562
1567
|
}));
|
|
1563
1568
|
})), !readonly && /* @__PURE__ */ React10.createElement(IconButton3, {
|
|
1564
|
-
classNames: "is-full mlb-
|
|
1569
|
+
classNames: "is-full mlb-cardSpacingBlock flex",
|
|
1565
1570
|
icon: "ph--plus--regular",
|
|
1566
1571
|
label: t("add field"),
|
|
1567
1572
|
onClick: handleAdd
|
|
@@ -1571,7 +1576,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
|
|
|
1571
1576
|
}
|
|
1572
1577
|
};
|
|
1573
1578
|
|
|
1574
|
-
//
|
|
1579
|
+
// src/components/Form/RefField.tsx
|
|
1575
1580
|
import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
|
|
1576
1581
|
import React11, { useCallback as useCallback8, useMemo as useMemo4 } from "react";
|
|
1577
1582
|
import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo-schema";
|
|
@@ -1694,7 +1699,7 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
|
|
|
1694
1699
|
onBlur: (event) => onBlur(event),
|
|
1695
1700
|
onUpdate: handleUpdate,
|
|
1696
1701
|
onSearch: handleSearch,
|
|
1697
|
-
classNames: "
|
|
1702
|
+
classNames: "bg-inputSurface p-1.5 rounded-sm"
|
|
1698
1703
|
})), inputOnly && /* @__PURE__ */ React11.createElement(Input8.DescriptionAndValidation, null, error));
|
|
1699
1704
|
} finally {
|
|
1700
1705
|
_effect.f();
|
|
@@ -1738,7 +1743,7 @@ var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValu
|
|
|
1738
1743
|
}
|
|
1739
1744
|
};
|
|
1740
1745
|
|
|
1741
|
-
//
|
|
1746
|
+
// src/components/Form/factory.tsx
|
|
1742
1747
|
import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
|
|
1743
1748
|
var getInputComponent = (type, format) => {
|
|
1744
1749
|
switch (format) {
|
|
@@ -1757,7 +1762,7 @@ var getInputComponent = (type, format) => {
|
|
|
1757
1762
|
}
|
|
1758
1763
|
};
|
|
1759
1764
|
|
|
1760
|
-
//
|
|
1765
|
+
// src/components/Form/FormContent.tsx
|
|
1761
1766
|
var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
|
|
1762
1767
|
var _effect = _useSignals12();
|
|
1763
1768
|
try {
|
|
@@ -1908,7 +1913,7 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path,
|
|
|
1908
1913
|
}
|
|
1909
1914
|
});
|
|
1910
1915
|
|
|
1911
|
-
//
|
|
1916
|
+
// src/components/Form/Form.tsx
|
|
1912
1917
|
var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }) => {
|
|
1913
1918
|
var _effect = _useSignals13();
|
|
1914
1919
|
try {
|
|
@@ -1960,9 +1965,9 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
|
|
|
1960
1965
|
}
|
|
1961
1966
|
};
|
|
1962
1967
|
|
|
1963
|
-
//
|
|
1964
|
-
var __dxlog_file4 = "/
|
|
1965
|
-
var FieldEditor = ({
|
|
1968
|
+
// src/components/FieldEditor/FieldEditor.tsx
|
|
1969
|
+
var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
|
|
1970
|
+
var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }) => {
|
|
1966
1971
|
var _effect = _useSignals14();
|
|
1967
1972
|
try {
|
|
1968
1973
|
const { t } = useTranslation8(translationKey);
|
|
@@ -2036,7 +2041,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
|
|
|
2036
2041
|
props.referenceSchema
|
|
2037
2042
|
]);
|
|
2038
2043
|
const handleValidate = useCallback9(({ property }) => {
|
|
2039
|
-
if (property &&
|
|
2044
|
+
if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
|
|
2040
2045
|
return [
|
|
2041
2046
|
{
|
|
2042
2047
|
path: "property",
|
|
@@ -2045,7 +2050,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
|
|
|
2045
2050
|
];
|
|
2046
2051
|
}
|
|
2047
2052
|
}, [
|
|
2048
|
-
|
|
2053
|
+
projection.fields,
|
|
2049
2054
|
field
|
|
2050
2055
|
]);
|
|
2051
2056
|
const handleSave = useCallback9((props2) => {
|
|
@@ -2097,7 +2102,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
|
|
|
2097
2102
|
props
|
|
2098
2103
|
}, {
|
|
2099
2104
|
F: __dxlog_file4,
|
|
2100
|
-
L:
|
|
2105
|
+
L: 173,
|
|
2101
2106
|
S: void 0,
|
|
2102
2107
|
C: (f, a) => f(...a)
|
|
2103
2108
|
});
|
|
@@ -2125,7 +2130,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerS
|
|
|
2125
2130
|
}
|
|
2126
2131
|
};
|
|
2127
2132
|
|
|
2128
|
-
//
|
|
2133
|
+
// src/components/ViewEditor/ViewEditor.tsx
|
|
2129
2134
|
import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
|
|
2130
2135
|
import { Schema as Schema2 } from "effect";
|
|
2131
2136
|
import React15, { useCallback as useCallback10, useMemo as useMemo8, useState as useState6 } from "react";
|
|
@@ -2135,13 +2140,10 @@ import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 }
|
|
|
2135
2140
|
import { List as List2 } from "@dxos/react-ui-list";
|
|
2136
2141
|
import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
|
|
2137
2142
|
import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
|
|
2138
|
-
import { FieldSchema,
|
|
2139
|
-
var __dxlog_file5 = "/
|
|
2143
|
+
import { FieldSchema, VIEW_FIELD_LIMIT, ProjectionModel } from "@dxos/schema";
|
|
2144
|
+
var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
|
|
2140
2145
|
var grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
|
|
2141
2146
|
var ViewMetaSchema = Schema2.Struct({
|
|
2142
|
-
name: Schema2.String.annotations({
|
|
2143
|
-
title: "View"
|
|
2144
|
-
}),
|
|
2145
2147
|
typename: Format.URL.annotations({
|
|
2146
2148
|
title: "Typename"
|
|
2147
2149
|
})
|
|
@@ -2152,22 +2154,21 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2152
2154
|
const { t } = useTranslation9(translationKey);
|
|
2153
2155
|
const projection = useMemo8(() => {
|
|
2154
2156
|
const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
|
|
2155
|
-
return new
|
|
2157
|
+
return new ProjectionModel(jsonSchema, view.projection);
|
|
2156
2158
|
}, [
|
|
2157
2159
|
schema,
|
|
2158
|
-
view
|
|
2160
|
+
view.projection
|
|
2159
2161
|
]);
|
|
2160
2162
|
const [field, setField] = useState6();
|
|
2161
2163
|
const readonly = _readonly || !isMutable(schema);
|
|
2162
2164
|
const viewValues = useMemo8(() => {
|
|
2163
2165
|
return {
|
|
2164
|
-
name: view.name,
|
|
2165
2166
|
// TODO(burdon): Need to warn user of possible consequences of editing.
|
|
2166
2167
|
// TODO(burdon): Settings should have domain name owned by user.
|
|
2167
2168
|
typename: view.query.typename
|
|
2168
2169
|
};
|
|
2169
2170
|
}, [
|
|
2170
|
-
view
|
|
2171
|
+
view.query.typename
|
|
2171
2172
|
]);
|
|
2172
2173
|
const handleSelect = useCallback10((field2) => {
|
|
2173
2174
|
if (readonly) {
|
|
@@ -2180,7 +2181,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2180
2181
|
const handleAdd = useCallback10(() => {
|
|
2181
2182
|
invariant3(!readonly, void 0, {
|
|
2182
2183
|
F: __dxlog_file5,
|
|
2183
|
-
L:
|
|
2184
|
+
L: 88,
|
|
2184
2185
|
S: void 0,
|
|
2185
2186
|
A: [
|
|
2186
2187
|
"!readonly",
|
|
@@ -2191,13 +2192,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2191
2192
|
setField(field2);
|
|
2192
2193
|
}, [
|
|
2193
2194
|
schema,
|
|
2194
|
-
|
|
2195
|
+
projection,
|
|
2195
2196
|
readonly
|
|
2196
2197
|
]);
|
|
2197
|
-
const handleUpdate = useCallback10(({
|
|
2198
|
+
const handleUpdate = useCallback10(({ typename }) => {
|
|
2198
2199
|
invariant3(!readonly, void 0, {
|
|
2199
2200
|
F: __dxlog_file5,
|
|
2200
|
-
L:
|
|
2201
|
+
L: 95,
|
|
2201
2202
|
S: void 0,
|
|
2202
2203
|
A: [
|
|
2203
2204
|
"!readonly",
|
|
@@ -2205,23 +2206,19 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2205
2206
|
]
|
|
2206
2207
|
});
|
|
2207
2208
|
requestAnimationFrame(() => {
|
|
2208
|
-
if (view.name !== name) {
|
|
2209
|
-
view.name = name;
|
|
2210
|
-
}
|
|
2211
2209
|
if (view.query.typename !== typename && !readonly) {
|
|
2212
2210
|
onTypenameChanged?.(typename);
|
|
2213
2211
|
}
|
|
2214
2212
|
});
|
|
2215
2213
|
}, [
|
|
2216
|
-
|
|
2217
|
-
view,
|
|
2214
|
+
view.query.typename,
|
|
2218
2215
|
onTypenameChanged,
|
|
2219
2216
|
readonly
|
|
2220
2217
|
]);
|
|
2221
2218
|
const handleDelete = useCallback10((fieldId) => {
|
|
2222
2219
|
invariant3(!readonly, void 0, {
|
|
2223
2220
|
F: __dxlog_file5,
|
|
2224
|
-
L:
|
|
2221
|
+
L: 107,
|
|
2225
2222
|
S: void 0,
|
|
2226
2223
|
A: [
|
|
2227
2224
|
"!readonly",
|
|
@@ -2233,7 +2230,6 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2233
2230
|
}
|
|
2234
2231
|
onDelete?.(fieldId);
|
|
2235
2232
|
}, [
|
|
2236
|
-
schema,
|
|
2237
2233
|
field,
|
|
2238
2234
|
onDelete,
|
|
2239
2235
|
readonly
|
|
@@ -2241,7 +2237,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2241
2237
|
const handleMove = useCallback10((fromIndex, toIndex) => {
|
|
2242
2238
|
invariant3(!readonly, void 0, {
|
|
2243
2239
|
F: __dxlog_file5,
|
|
2244
|
-
L:
|
|
2240
|
+
L: 119,
|
|
2245
2241
|
S: void 0,
|
|
2246
2242
|
A: [
|
|
2247
2243
|
"!readonly",
|
|
@@ -2249,14 +2245,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2249
2245
|
]
|
|
2250
2246
|
});
|
|
2251
2247
|
const fields = [
|
|
2252
|
-
...view.fields
|
|
2248
|
+
...view.projection.fields
|
|
2253
2249
|
];
|
|
2254
2250
|
const [moved] = fields.splice(fromIndex, 1);
|
|
2255
2251
|
fields.splice(toIndex, 0, moved);
|
|
2256
|
-
view.fields = fields;
|
|
2252
|
+
view.projection.fields = fields;
|
|
2257
2253
|
}, [
|
|
2258
|
-
|
|
2259
|
-
view.fields,
|
|
2254
|
+
view.projection.fields,
|
|
2260
2255
|
readonly
|
|
2261
2256
|
]);
|
|
2262
2257
|
const handleClose = useCallback10(() => setField(void 0), []);
|
|
@@ -2294,7 +2289,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2294
2289
|
}, /* @__PURE__ */ React15.createElement("label", {
|
|
2295
2290
|
className: mx9(inputTextLabel)
|
|
2296
2291
|
}, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
|
|
2297
|
-
items: view.fields,
|
|
2292
|
+
items: view.projection.fields,
|
|
2298
2293
|
isItem: Schema2.is(FieldSchema),
|
|
2299
2294
|
getId: (field2) => field2.id,
|
|
2300
2295
|
readonly,
|
|
@@ -2317,10 +2312,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2317
2312
|
"data-testid": "hide-field-button",
|
|
2318
2313
|
icon: "ph--eye-slash--regular",
|
|
2319
2314
|
// TDOO(burdon): Is this the correct test?
|
|
2320
|
-
disabled: view.fields.length <= 1,
|
|
2315
|
+
disabled: view.projection.fields.length <= 1,
|
|
2321
2316
|
onClick: () => handleHide(field2.id)
|
|
2322
2317
|
}), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
|
|
2323
|
-
disabled: view.fields.length <= 1,
|
|
2318
|
+
disabled: view.projection.fields.length <= 1,
|
|
2324
2319
|
onClick: () => handleDelete(field2.id)
|
|
2325
2320
|
})))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
|
|
2326
2321
|
className: mx9(inputTextLabel)
|
|
@@ -2343,7 +2338,6 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2343
2338
|
"data-testid": "show-field-button"
|
|
2344
2339
|
}))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
|
|
2345
2340
|
key: field.id,
|
|
2346
|
-
view,
|
|
2347
2341
|
projection,
|
|
2348
2342
|
field,
|
|
2349
2343
|
registry,
|
|
@@ -2356,7 +2350,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
|
|
|
2356
2350
|
label: t("button add property"),
|
|
2357
2351
|
onClick: readonly ? void 0 : handleAdd,
|
|
2358
2352
|
// TODO(burdon): Show field limit in ux (not tooltip).
|
|
2359
|
-
disabled: view.fields.length >= VIEW_FIELD_LIMIT,
|
|
2353
|
+
disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
|
|
2360
2354
|
classNames: "flex is-full"
|
|
2361
2355
|
})));
|
|
2362
2356
|
} finally {
|
|
@@ -2396,7 +2390,7 @@ export {
|
|
|
2396
2390
|
getRefProps,
|
|
2397
2391
|
parseValue,
|
|
2398
2392
|
pathNotUniqueError,
|
|
2399
|
-
|
|
2393
|
+
translations,
|
|
2400
2394
|
useForm,
|
|
2401
2395
|
useFormContext,
|
|
2402
2396
|
useFormValues,
|