@dxos/react-ui-form 0.7.4 → 0.7.5-main.937ce75
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 +246 -209
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +340 -302
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +246 -209
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +2 -2
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.d.ts +1 -1
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +5 -0
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/Input.d.ts +3 -3
- package/dist/types/src/components/Form/Input.d.ts.map +1 -1
- package/dist/types/src/components/Form/{Custom.d.ts → custom/GeoPointInput.d.ts} +3 -3
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +1 -0
- package/dist/types/src/components/Form/custom/TupleInput.d.ts +7 -0
- package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +1 -0
- package/dist/types/src/components/Form/custom/index.d.ts +3 -0
- package/dist/types/src/components/Form/custom/index.d.ts.map +1 -0
- package/dist/types/src/components/Form/factory.d.ts.map +1 -1
- package/dist/types/src/components/Form/index.d.ts +2 -2
- package/dist/types/src/components/Form/index.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +4 -4
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/useForm.d.ts +9 -10
- package/dist/types/src/hooks/useForm.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/package.json +24 -24
- package/src/components/FieldEditor/FieldEditor.stories.tsx +2 -2
- package/src/components/FieldEditor/FieldEditor.tsx +75 -50
- package/src/components/Form/Form.stories.tsx +33 -1
- package/src/components/Form/Form.tsx +3 -4
- package/src/components/Form/Input.tsx +3 -3
- package/src/components/Form/{Custom.tsx → custom/GeoPointInput.tsx} +4 -16
- package/src/components/Form/custom/TupleInput.tsx +53 -0
- package/src/components/Form/custom/index.ts +6 -0
- package/src/components/Form/factory.tsx +2 -2
- package/src/components/Form/index.ts +3 -2
- package/src/components/ViewEditor/ViewEditor.stories.tsx +6 -5
- package/src/components/ViewEditor/ViewEditor.tsx +4 -4
- package/src/hooks/useForm.ts +32 -52
- package/dist/types/src/components/Form/Custom.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldEditor/FieldEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldEditor/FieldEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,4DAA6D,gBAAgB,6BA2JpG,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { type InputComponent } from './Input';
|
|
|
6
6
|
import { type FormOptions } from '../../hooks';
|
|
7
7
|
export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
|
|
8
8
|
export type FormProps<T extends BaseObject> = ThemedClassName<{
|
|
9
|
-
values: T
|
|
9
|
+
values: Partial<T>;
|
|
10
10
|
/** Path to the current object from the root. Used with nested forms. */
|
|
11
11
|
path?: string[];
|
|
12
12
|
autoFocus?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IACE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,yJAetC,SAAS,CAAC,CAAC,CAAC,sBAwId,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}
|
|
@@ -47,4 +47,9 @@ declare const ArraysSchema: S.mutable<S.Struct<{
|
|
|
47
47
|
}>>;
|
|
48
48
|
type ArraysType = S.Schema.Type<typeof ArraysSchema>;
|
|
49
49
|
export declare const Arrays: StoryObj<FormProps<ArraysType>>;
|
|
50
|
+
declare const ColorSchema: S.mutable<S.Struct<{
|
|
51
|
+
color: S.Union<[S.Literal<["red"]>, S.Literal<["green"]>, S.Literal<["blue"]>]>;
|
|
52
|
+
}>>;
|
|
53
|
+
type ColorType = S.Schema.Type<typeof ColorSchema>;
|
|
54
|
+
export declare const Enum: StoryObj<FormProps<ColorType>>;
|
|
50
55
|
//# sourceMappingURL=Form.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC"}
|
|
1
|
+
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC;AAEF,QAAA,MAAM,WAAW;;GAIC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAiBnD,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAO/C,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { type FC, type PropsWithChildren } from 'react';
|
|
2
|
-
import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
|
|
2
|
+
import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
|
|
3
3
|
import { type SimpleType } from '@dxos/effect';
|
|
4
|
-
import { type
|
|
4
|
+
import { type FormHandler } from '../../hooks';
|
|
5
5
|
/**
|
|
6
6
|
* Props passed to input components.
|
|
7
7
|
*/
|
|
8
8
|
export type InputProps<T extends BaseObject> = {
|
|
9
|
-
property:
|
|
9
|
+
property: PropertyKey<T>;
|
|
10
10
|
type: SimpleType;
|
|
11
11
|
format?: FormatEnum;
|
|
12
12
|
label?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BaseObject } from '@dxos/echo-schema';
|
|
3
|
-
import { type InputProps } from '
|
|
4
|
-
export declare const
|
|
5
|
-
//# sourceMappingURL=
|
|
3
|
+
import { type InputProps } from '../Input';
|
|
4
|
+
export declare const GeoPointInput: <T extends BaseObject>({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T>) => React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=GeoPointInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GeoPointInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/GeoPointInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAKnE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,oFAS/C,UAAU,CAAC,CAAC,CAAC,sBA8Bf,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type BaseObject } from '@dxos/echo-schema';
|
|
3
|
+
import { type InputProps } from '../Input';
|
|
4
|
+
export declare const TupleInput: <T extends BaseObject>({ binding, property, type, label, disabled, getStatus, getValue, onValueChange, onBlur, }: InputProps<T> & {
|
|
5
|
+
binding: string[];
|
|
6
|
+
}) => React.JSX.Element;
|
|
7
|
+
//# sourceMappingURL=TupleInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TupleInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/TupleInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAIxD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,UAAU,6FAU5C,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sBA2BvC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,UAAU,QAC9C,UAAU,WACP,UAAU,KAClB,cAAc,CAAC,CAAC,CAAC,GAAG,SActB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/index.ts"],"names":[],"mappings":"AAIA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AAEzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type
|
|
3
|
-
import { type
|
|
2
|
+
import { type SchemaRegistry } from '@dxos/echo-db';
|
|
3
|
+
import { type EchoSchema } from '@dxos/echo-schema';
|
|
4
4
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
5
5
|
import { type ViewType } from '@dxos/schema';
|
|
6
6
|
export type ViewEditorProps = ThemedClassName<{
|
|
7
|
-
schema:
|
|
7
|
+
schema: EchoSchema;
|
|
8
8
|
view: ViewType;
|
|
9
|
-
registry?:
|
|
9
|
+
registry?: SchemaRegistry;
|
|
10
10
|
readonly?: boolean;
|
|
11
11
|
showHeading?: boolean;
|
|
12
12
|
onDelete: (fieldId: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,
|
|
1
|
+
{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,UAAU,EAAK,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAQpB,eAAe,sBA2GjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAU5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA0C1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAQjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -3,23 +3,22 @@ import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
|
|
|
3
3
|
import { type SimpleType, type S } from '@dxos/effect';
|
|
4
4
|
import { type ValidationError } from '@dxos/schema';
|
|
5
5
|
import { type MaybePromise } from '@dxos/util';
|
|
6
|
-
export type FormPath<T extends object = {}> = PropertyKey<T> | `${PropertyKey<T>}.${number}`;
|
|
7
6
|
/**
|
|
8
7
|
* Return type from `useForm` hook.
|
|
9
8
|
*/
|
|
10
9
|
export type FormHandler<T extends BaseObject> = {
|
|
11
|
-
values: T
|
|
12
|
-
errors: Record<
|
|
13
|
-
touched: Record<
|
|
14
|
-
changed: Record<
|
|
10
|
+
values: Partial<T>;
|
|
11
|
+
errors: Record<PropertyKey<T>, string>;
|
|
12
|
+
touched: Record<PropertyKey<T>, boolean>;
|
|
13
|
+
changed: Record<PropertyKey<T>, boolean>;
|
|
15
14
|
canSave: boolean;
|
|
16
15
|
handleSave: () => void;
|
|
17
|
-
getStatus: (property:
|
|
16
|
+
getStatus: (property: PropertyKey<T>) => {
|
|
18
17
|
status?: 'error';
|
|
19
18
|
error?: string;
|
|
20
19
|
};
|
|
21
|
-
getValue: <V>(property:
|
|
22
|
-
onValueChange: <V>(property:
|
|
20
|
+
getValue: <V>(property: PropertyKey<T>) => V | undefined;
|
|
21
|
+
onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
|
|
23
22
|
onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
24
23
|
};
|
|
25
24
|
/**
|
|
@@ -33,13 +32,13 @@ export interface FormOptions<T extends BaseObject> {
|
|
|
33
32
|
/**
|
|
34
33
|
* Initial values (which may not pass validation).
|
|
35
34
|
*/
|
|
36
|
-
initialValues: T
|
|
35
|
+
initialValues: Partial<T>;
|
|
37
36
|
/**
|
|
38
37
|
* Callback for value changes. Note: This is called even when values are invalid.
|
|
39
38
|
* Sometimes the parent component may want to know about changes even if the form is
|
|
40
39
|
* in an invalid state.
|
|
41
40
|
*/
|
|
42
|
-
onValuesChanged?: (values: T) => void;
|
|
41
|
+
onValuesChanged?: (values: Partial<T>) => void;
|
|
43
42
|
/**
|
|
44
43
|
* Custom validation function that runs only after schema validation passes.
|
|
45
44
|
* Use this for complex validation logic that can't be expressed in the schema.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAiB,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzD,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAuIhC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":"5.7.2"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-form",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.5-main.937ce75",
|
|
4
4
|
"description": "Data components.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
"@effect/schema": "^0.75.5",
|
|
28
28
|
"@radix-ui/react-context": "^1.0.0",
|
|
29
29
|
"date-fns": "^3.3.1",
|
|
30
|
-
"effect": "^3.
|
|
30
|
+
"effect": "^3.12.1",
|
|
31
31
|
"jsonpath": "^1.1.1",
|
|
32
|
-
"@dxos/async": "0.7.
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/echo-schema": "0.7.
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/effect": "0.7.
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/log": "0.7.
|
|
41
|
-
"@dxos/react-
|
|
42
|
-
"@dxos/
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
32
|
+
"@dxos/async": "0.7.5-main.937ce75",
|
|
33
|
+
"@dxos/debug": "0.7.5-main.937ce75",
|
|
34
|
+
"@dxos/echo-db": "0.7.5-main.937ce75",
|
|
35
|
+
"@dxos/echo-schema": "0.7.5-main.937ce75",
|
|
36
|
+
"@dxos/keys": "0.7.5-main.937ce75",
|
|
37
|
+
"@dxos/effect": "0.7.5-main.937ce75",
|
|
38
|
+
"@dxos/invariant": "0.7.5-main.937ce75",
|
|
39
|
+
"@dxos/live-object": "0.7.5-main.937ce75",
|
|
40
|
+
"@dxos/log": "0.7.5-main.937ce75",
|
|
41
|
+
"@dxos/react-ui-types": "0.7.5-main.937ce75",
|
|
42
|
+
"@dxos/schema": "0.7.5-main.937ce75",
|
|
43
|
+
"@dxos/react-ui-list": "0.7.5-main.937ce75",
|
|
44
|
+
"@dxos/util": "0.7.5-main.937ce75",
|
|
45
|
+
"@dxos/react-client": "0.7.5-main.937ce75"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
"react": "~18.2.0",
|
|
54
54
|
"react-dom": "~18.2.0",
|
|
55
55
|
"vite": "5.4.7",
|
|
56
|
-
"@dxos/echo-signals": "0.7.
|
|
57
|
-
"@dxos/
|
|
58
|
-
"@dxos/react-ui-syntax-highlighter": "0.7.
|
|
59
|
-
"@dxos/
|
|
60
|
-
"@dxos/react-ui
|
|
61
|
-
"@dxos/storybook-utils": "0.7.
|
|
56
|
+
"@dxos/echo-signals": "0.7.5-main.937ce75",
|
|
57
|
+
"@dxos/random": "0.7.5-main.937ce75",
|
|
58
|
+
"@dxos/react-ui-syntax-highlighter": "0.7.5-main.937ce75",
|
|
59
|
+
"@dxos/react-ui-theme": "0.7.5-main.937ce75",
|
|
60
|
+
"@dxos/react-ui": "0.7.5-main.937ce75",
|
|
61
|
+
"@dxos/storybook-utils": "0.7.5-main.937ce75"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@effect/schema": "^0.75.5",
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
"effect": "^3.9.2",
|
|
67
67
|
"react": "~18.2.0",
|
|
68
68
|
"react-dom": "~18.2.0",
|
|
69
|
-
"@dxos/react-ui": "0.7.
|
|
70
|
-
"@dxos/react-ui
|
|
69
|
+
"@dxos/react-ui-theme": "0.7.5-main.937ce75",
|
|
70
|
+
"@dxos/react-ui": "0.7.5-main.937ce75"
|
|
71
71
|
},
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
@@ -7,7 +7,7 @@ import '@dxos-theme';
|
|
|
7
7
|
import { type Meta, type StoryObj } from '@storybook/react';
|
|
8
8
|
import React from 'react';
|
|
9
9
|
|
|
10
|
-
import {
|
|
10
|
+
import { createEchoSchema } from '@dxos/live-object/testing';
|
|
11
11
|
import { log } from '@dxos/log';
|
|
12
12
|
import { ViewProjection } from '@dxos/schema';
|
|
13
13
|
import { TestSchema, testView } from '@dxos/schema/testing';
|
|
@@ -49,7 +49,7 @@ type Story = StoryObj<StoryProps>;
|
|
|
49
49
|
|
|
50
50
|
export const Default: Story = {
|
|
51
51
|
args: {
|
|
52
|
-
projection: new ViewProjection(
|
|
52
|
+
projection: new ViewProjection(createEchoSchema(TestSchema), testView),
|
|
53
53
|
view: testView,
|
|
54
54
|
field: testView.fields[0],
|
|
55
55
|
},
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { useCallback, useEffect, useState } from 'react';
|
|
5
|
+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
6
6
|
|
|
7
|
-
import { type
|
|
8
|
-
import { FormatEnum, FormatEnums, formatToType, type
|
|
7
|
+
import { type SchemaRegistry } from '@dxos/echo-db';
|
|
8
|
+
import { FormatEnum, FormatEnums, formatToType, type EchoSchema } from '@dxos/echo-schema';
|
|
9
9
|
import { log } from '@dxos/log';
|
|
10
10
|
import { useTranslation } from '@dxos/react-ui';
|
|
11
11
|
import {
|
|
@@ -16,16 +16,17 @@ import {
|
|
|
16
16
|
type PropertyType,
|
|
17
17
|
type ViewType,
|
|
18
18
|
type ViewProjection,
|
|
19
|
+
type SchemaProperty,
|
|
19
20
|
} from '@dxos/schema';
|
|
20
21
|
|
|
21
22
|
import { translationKey } from '../../translations';
|
|
22
|
-
import { Form, type FormProps, SelectInput } from '../Form';
|
|
23
|
+
import { Form, type FormProps, type InputComponent, SelectInput } from '../Form';
|
|
23
24
|
|
|
24
25
|
export type FieldEditorProps = {
|
|
25
26
|
view: ViewType;
|
|
26
27
|
projection: ViewProjection;
|
|
27
28
|
field: FieldType;
|
|
28
|
-
registry?:
|
|
29
|
+
registry?: SchemaRegistry;
|
|
29
30
|
onSave: () => void;
|
|
30
31
|
onCancel?: () => void;
|
|
31
32
|
};
|
|
@@ -38,15 +39,17 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
|
|
|
38
39
|
const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
|
|
39
40
|
useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
|
|
40
41
|
|
|
41
|
-
const [schemas, setSchemas] = useState<
|
|
42
|
+
const [schemas, setSchemas] = useState<EchoSchema[]>([]);
|
|
42
43
|
useEffect(() => {
|
|
43
44
|
if (!registry) {
|
|
44
45
|
return;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
const subscription = registry.subscribe(setSchemas);
|
|
48
|
+
const subscription = registry.query().subscribe((query) => setSchemas(query.results), { fire: true });
|
|
49
|
+
|
|
50
|
+
// TODO(dmaretskyi): This shouldn't be needed.
|
|
48
51
|
const t = setTimeout(async () => {
|
|
49
|
-
const schemas = await registry.query();
|
|
52
|
+
const schemas = await registry.query().run();
|
|
50
53
|
setSchemas(schemas);
|
|
51
54
|
});
|
|
52
55
|
return () => {
|
|
@@ -55,24 +58,36 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
|
|
|
55
58
|
};
|
|
56
59
|
}, [registry]);
|
|
57
60
|
|
|
58
|
-
const [
|
|
61
|
+
const [referenceSchema, setReferenceSchema] = useState<EchoSchema>();
|
|
59
62
|
useEffect(() => {
|
|
60
|
-
|
|
63
|
+
setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
|
|
61
64
|
}, [schemas, props?.referenceSchema]);
|
|
62
65
|
|
|
63
66
|
// TODO(burdon): Need to wrap otherwise throws error:
|
|
64
67
|
// Class constructor SchemaClass cannot be invoked without 'new'.
|
|
65
68
|
const [{ fieldSchema }, setFieldSchema] = useState({ fieldSchema: getFormatSchema(props?.format) });
|
|
69
|
+
|
|
66
70
|
const handleValuesChanged = useCallback<NonNullable<FormProps<PropertyType>['onValuesChanged']>>(
|
|
67
71
|
(_props) => {
|
|
68
|
-
// Update schema if format changed.
|
|
69
72
|
// TODO(burdon): Callback should pass `changed` to indicate which fields have changed.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
// TODO(Zaymon): Workout why old and new format values are the same sometimes even when
|
|
74
|
+
// selecting novel format values.
|
|
75
|
+
setFieldSchema((prev) => {
|
|
76
|
+
const fieldSchema = getFormatSchema(_props.format);
|
|
77
|
+
if (prev.fieldSchema === fieldSchema) {
|
|
78
|
+
return prev;
|
|
79
|
+
}
|
|
80
|
+
return { fieldSchema };
|
|
81
|
+
});
|
|
82
|
+
setReferenceSchema((prev) => {
|
|
83
|
+
if (_props.referenceSchema !== prev?.typename) {
|
|
84
|
+
const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
|
|
85
|
+
if (newSchema) {
|
|
86
|
+
return newSchema;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return prev;
|
|
90
|
+
});
|
|
76
91
|
|
|
77
92
|
setProps((props) => {
|
|
78
93
|
const type = formatToType[_props.format as keyof typeof formatToType];
|
|
@@ -83,7 +98,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
|
|
|
83
98
|
return props;
|
|
84
99
|
});
|
|
85
100
|
},
|
|
86
|
-
[schemas, props],
|
|
101
|
+
[schemas, props.format, props.referenceSchema],
|
|
87
102
|
);
|
|
88
103
|
|
|
89
104
|
const handleValidate = useCallback<NonNullable<FormProps<PropertyType>['onValidate']>>(
|
|
@@ -114,6 +129,46 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
|
|
|
114
129
|
onSave();
|
|
115
130
|
}, [onSave]);
|
|
116
131
|
|
|
132
|
+
const Custom: Partial<Record<string, InputComponent<PropertyType>>> = useMemo(
|
|
133
|
+
() => ({
|
|
134
|
+
['format' satisfies keyof PropertyType]: (props) => (
|
|
135
|
+
<SelectInput<PropertyType>
|
|
136
|
+
{...props}
|
|
137
|
+
options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
|
|
138
|
+
value,
|
|
139
|
+
label: t(`format ${value}`),
|
|
140
|
+
}))}
|
|
141
|
+
/>
|
|
142
|
+
),
|
|
143
|
+
['referenceSchema' satisfies keyof PropertyType]: (props) => (
|
|
144
|
+
<SelectInput<PropertyType>
|
|
145
|
+
{...props}
|
|
146
|
+
options={schemas.map((schema) => ({
|
|
147
|
+
value: schema.typename,
|
|
148
|
+
}))}
|
|
149
|
+
/>
|
|
150
|
+
),
|
|
151
|
+
['referencePath' satisfies keyof PropertyType]: (props) => (
|
|
152
|
+
<SelectInput<PropertyType>
|
|
153
|
+
{...props}
|
|
154
|
+
options={
|
|
155
|
+
referenceSchema
|
|
156
|
+
? getSchemaProperties(referenceSchema.ast)
|
|
157
|
+
.sort(sortProperties)
|
|
158
|
+
.map((p) => ({ value: p.name }))
|
|
159
|
+
: []
|
|
160
|
+
}
|
|
161
|
+
/>
|
|
162
|
+
),
|
|
163
|
+
}),
|
|
164
|
+
[t, schemas, referenceSchema],
|
|
165
|
+
);
|
|
166
|
+
|
|
167
|
+
const propIsNotType = useCallback(
|
|
168
|
+
(props: SchemaProperty<PropertyType>[]) => props.filter((p) => p.name !== 'type'),
|
|
169
|
+
[],
|
|
170
|
+
);
|
|
171
|
+
|
|
117
172
|
if (!fieldSchema) {
|
|
118
173
|
log.warn('invalid format', { props });
|
|
119
174
|
return null;
|
|
@@ -125,43 +180,13 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
|
|
|
125
180
|
autoFocus
|
|
126
181
|
values={props}
|
|
127
182
|
schema={fieldSchema}
|
|
128
|
-
filter={
|
|
183
|
+
filter={propIsNotType}
|
|
129
184
|
sort={['property', 'format']}
|
|
130
185
|
onValuesChanged={handleValuesChanged}
|
|
131
186
|
onValidate={handleValidate}
|
|
132
187
|
onSave={handleSave}
|
|
133
188
|
onCancel={handleCancel}
|
|
134
|
-
Custom={
|
|
135
|
-
['format' satisfies keyof PropertyType]: (props) => (
|
|
136
|
-
<SelectInput<PropertyType>
|
|
137
|
-
{...props}
|
|
138
|
-
options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
|
|
139
|
-
value,
|
|
140
|
-
label: t(`format ${value}`),
|
|
141
|
-
}))}
|
|
142
|
-
/>
|
|
143
|
-
),
|
|
144
|
-
['referenceSchema' satisfies keyof PropertyType]: (props) => (
|
|
145
|
-
<SelectInput<PropertyType>
|
|
146
|
-
{...props}
|
|
147
|
-
options={schemas.map((schema) => ({
|
|
148
|
-
value: schema.typename,
|
|
149
|
-
}))}
|
|
150
|
-
/>
|
|
151
|
-
),
|
|
152
|
-
['referencePath' satisfies keyof PropertyType]: (props) => (
|
|
153
|
-
<SelectInput<PropertyType>
|
|
154
|
-
{...props}
|
|
155
|
-
options={
|
|
156
|
-
schema
|
|
157
|
-
? getSchemaProperties(schema.schema.ast)
|
|
158
|
-
.sort(sortProperties)
|
|
159
|
-
.map((p) => ({ value: p.name }))
|
|
160
|
-
: []
|
|
161
|
-
}
|
|
162
|
-
/>
|
|
163
|
-
),
|
|
164
|
-
}}
|
|
189
|
+
Custom={Custom}
|
|
165
190
|
/>
|
|
166
191
|
);
|
|
167
192
|
};
|
|
@@ -83,7 +83,7 @@ export const Org: Story<Testing.OrgSchemaType> = {
|
|
|
83
83
|
args: {
|
|
84
84
|
schema: Testing.OrgSchema,
|
|
85
85
|
values: {
|
|
86
|
-
|
|
86
|
+
name: 'DXOS',
|
|
87
87
|
// website: 'https://dxos.org',
|
|
88
88
|
},
|
|
89
89
|
},
|
|
@@ -197,3 +197,35 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
|
|
|
197
197
|
},
|
|
198
198
|
},
|
|
199
199
|
};
|
|
200
|
+
|
|
201
|
+
const ColorSchema = S.Struct({
|
|
202
|
+
color: S.Union(S.Literal('red'), S.Literal('green'), S.Literal('blue')).annotations({
|
|
203
|
+
[AST.TitleAnnotationId]: 'Color',
|
|
204
|
+
}),
|
|
205
|
+
}).pipe(S.mutable);
|
|
206
|
+
|
|
207
|
+
type ColorType = S.Schema.Type<typeof ColorSchema>;
|
|
208
|
+
|
|
209
|
+
const EnumStory = ({ values: initialValues }: FormProps<ColorType>) => {
|
|
210
|
+
const [values, setValues] = useState(initialValues);
|
|
211
|
+
const handleSave = useCallback<NonNullable<FormProps<ColorType>['onSave']>>((values) => {
|
|
212
|
+
setValues(values);
|
|
213
|
+
}, []);
|
|
214
|
+
|
|
215
|
+
return (
|
|
216
|
+
<TestLayout json={{ values, schema: ColorSchema.ast.toJSON() }}>
|
|
217
|
+
<TestPanel>
|
|
218
|
+
<Form<ColorType> schema={ColorSchema} values={values} onSave={handleSave} />
|
|
219
|
+
</TestPanel>
|
|
220
|
+
</TestLayout>
|
|
221
|
+
);
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
export const Enum: StoryObj<FormProps<ColorType>> = {
|
|
225
|
+
render: EnumStory,
|
|
226
|
+
args: {
|
|
227
|
+
values: {
|
|
228
|
+
color: 'red',
|
|
229
|
+
},
|
|
230
|
+
},
|
|
231
|
+
};
|
|
@@ -28,8 +28,7 @@ export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) =>
|
|
|
28
28
|
|
|
29
29
|
export type FormProps<T extends BaseObject> = ThemedClassName<
|
|
30
30
|
{
|
|
31
|
-
|
|
32
|
-
values: T;
|
|
31
|
+
values: Partial<T>;
|
|
33
32
|
|
|
34
33
|
/** Path to the current object from the root. Used with nested forms. */
|
|
35
34
|
path?: string[];
|
|
@@ -261,7 +260,7 @@ const ArrayField = <T extends BaseObject>({
|
|
|
261
260
|
<div role='none' className='flex-1'>
|
|
262
261
|
<Form<any>
|
|
263
262
|
schema={schema}
|
|
264
|
-
path={[...key, index
|
|
263
|
+
path={[...key, `[${index}]`]}
|
|
265
264
|
values={value}
|
|
266
265
|
onValuesChanged={(childValues) => {
|
|
267
266
|
const newValues = [...arrayValues];
|
|
@@ -322,7 +321,7 @@ const ArrayField = <T extends BaseObject>({
|
|
|
322
321
|
format={format}
|
|
323
322
|
label={label}
|
|
324
323
|
inputOnly
|
|
325
|
-
property={`${name}
|
|
324
|
+
property={`${name}[${index}]` as PropertyKey<T>}
|
|
326
325
|
disabled={readonly}
|
|
327
326
|
placeholder={placeholder}
|
|
328
327
|
{...inputProps}
|
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { type FC, type PropsWithChildren } from 'react';
|
|
6
6
|
|
|
7
|
-
import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
|
|
7
|
+
import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
|
|
8
8
|
import { type SimpleType } from '@dxos/effect';
|
|
9
9
|
import { Icon, Tooltip } from '@dxos/react-ui';
|
|
10
10
|
import { errorText } from '@dxos/react-ui-theme';
|
|
11
11
|
|
|
12
|
-
import { type
|
|
12
|
+
import { type FormHandler } from '../../hooks';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Props passed to input components.
|
|
16
16
|
*/
|
|
17
17
|
export type InputProps<T extends BaseObject> = {
|
|
18
|
-
property:
|
|
18
|
+
property: PropertyKey<T>;
|
|
19
19
|
type: SimpleType;
|
|
20
20
|
format?: FormatEnum;
|
|
21
21
|
label?: string;
|