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