@contember/react-form 2.1.0-alpha.36 → 2.1.0-alpha.39
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/development/index.cjs +30 -0
- package/dist/development/index.cjs.map +1 -0
- package/dist/development/index.js +30 -0
- package/dist/development/index.js.map +1 -0
- package/dist/development/src/components/FormCheckbox.cjs +83 -0
- package/dist/development/src/components/FormCheckbox.cjs.map +1 -0
- package/dist/development/src/components/FormCheckbox.js +67 -0
- package/dist/development/src/components/FormCheckbox.js.map +1 -0
- package/dist/development/src/components/FormError.cjs +22 -0
- package/dist/development/src/components/FormError.cjs.map +1 -0
- package/dist/development/src/components/FormError.js +22 -0
- package/dist/development/src/components/FormError.js.map +1 -0
- package/dist/development/src/components/FormFieldScope.cjs +33 -0
- package/dist/development/src/components/FormFieldScope.cjs.map +1 -0
- package/dist/development/src/components/FormFieldScope.js +33 -0
- package/dist/development/src/components/FormFieldScope.js.map +1 -0
- package/dist/development/src/components/FormFieldStateProvider.cjs +56 -0
- package/dist/development/src/components/FormFieldStateProvider.cjs.map +1 -0
- package/dist/development/src/components/FormFieldStateProvider.js +56 -0
- package/dist/development/src/components/FormFieldStateProvider.js.map +1 -0
- package/dist/development/src/components/FormHasManyRelationScope.cjs +33 -0
- package/dist/development/src/components/FormHasManyRelationScope.cjs.map +1 -0
- package/dist/development/src/components/FormHasManyRelationScope.js +33 -0
- package/dist/development/src/components/FormHasManyRelationScope.js.map +1 -0
- package/dist/development/src/components/FormHasOneRelationScope.cjs +33 -0
- package/dist/development/src/components/FormHasOneRelationScope.cjs.map +1 -0
- package/dist/development/src/components/FormHasOneRelationScope.js +33 -0
- package/dist/development/src/components/FormHasOneRelationScope.js.map +1 -0
- package/dist/development/src/components/FormInput.cjs +62 -0
- package/dist/development/src/components/FormInput.cjs.map +1 -0
- package/dist/development/src/components/FormInput.js +62 -0
- package/dist/development/src/components/FormInput.js.map +1 -0
- package/dist/development/src/components/FormLabel.cjs +34 -0
- package/dist/development/src/components/FormLabel.cjs.map +1 -0
- package/dist/development/src/components/FormLabel.js +34 -0
- package/dist/development/src/components/FormLabel.js.map +1 -0
- package/dist/development/src/components/FormRadioInput.cjs +55 -0
- package/dist/development/src/components/FormRadioInput.cjs.map +1 -0
- package/dist/development/src/components/FormRadioInput.js +55 -0
- package/dist/development/src/components/FormRadioInput.js.map +1 -0
- package/dist/development/src/contexts.cjs +13 -0
- package/dist/development/src/contexts.cjs.map +1 -0
- package/dist/development/src/contexts.js +13 -0
- package/dist/development/src/contexts.js.map +1 -0
- package/dist/development/src/hooks/useFormInputValidationHandler.cjs +80 -0
- package/dist/development/src/hooks/useFormInputValidationHandler.cjs.map +1 -0
- package/dist/development/src/hooks/useFormInputValidationHandler.js +64 -0
- package/dist/development/src/hooks/useFormInputValidationHandler.js.map +1 -0
- package/dist/development/src/internal/useFormInputHandler.cjs +122 -0
- package/dist/development/src/internal/useFormInputHandler.cjs.map +1 -0
- package/dist/development/src/internal/useFormInputHandler.js +122 -0
- package/dist/development/src/internal/useFormInputHandler.js.map +1 -0
- package/dist/production/index.cjs +30 -0
- package/dist/production/index.cjs.map +1 -0
- package/dist/production/index.js +30 -0
- package/dist/production/index.js.map +1 -0
- package/dist/production/src/components/FormCheckbox.cjs +71 -0
- package/dist/production/src/components/FormCheckbox.cjs.map +1 -0
- package/dist/production/src/components/FormCheckbox.js +55 -0
- package/dist/production/src/components/FormCheckbox.js.map +1 -0
- package/dist/production/src/components/FormError.cjs +22 -0
- package/dist/production/src/components/FormError.cjs.map +1 -0
- package/dist/production/src/components/FormError.js +22 -0
- package/dist/production/src/components/FormError.js.map +1 -0
- package/dist/production/src/components/FormFieldScope.cjs +25 -0
- package/dist/production/src/components/FormFieldScope.cjs.map +1 -0
- package/dist/production/src/components/FormFieldScope.js +25 -0
- package/dist/production/src/components/FormFieldScope.js.map +1 -0
- package/dist/production/src/components/FormFieldStateProvider.cjs +34 -0
- package/dist/production/src/components/FormFieldStateProvider.cjs.map +1 -0
- package/dist/production/src/components/FormFieldStateProvider.js +34 -0
- package/dist/production/src/components/FormFieldStateProvider.js.map +1 -0
- package/dist/production/src/components/FormHasManyRelationScope.cjs +25 -0
- package/dist/production/src/components/FormHasManyRelationScope.cjs.map +1 -0
- package/dist/production/src/components/FormHasManyRelationScope.js +25 -0
- package/dist/production/src/components/FormHasManyRelationScope.js.map +1 -0
- package/dist/production/src/components/FormHasOneRelationScope.cjs +25 -0
- package/dist/production/src/components/FormHasOneRelationScope.cjs.map +1 -0
- package/dist/production/src/components/FormHasOneRelationScope.js +25 -0
- package/dist/production/src/components/FormHasOneRelationScope.js.map +1 -0
- package/dist/production/src/components/FormInput.cjs +50 -0
- package/dist/production/src/components/FormInput.cjs.map +1 -0
- package/dist/production/src/components/FormInput.js +50 -0
- package/dist/production/src/components/FormInput.js.map +1 -0
- package/dist/production/src/components/FormLabel.cjs +26 -0
- package/dist/production/src/components/FormLabel.cjs.map +1 -0
- package/dist/production/src/components/FormLabel.js +26 -0
- package/dist/production/src/components/FormLabel.js.map +1 -0
- package/dist/production/src/components/FormRadioInput.cjs +43 -0
- package/dist/production/src/components/FormRadioInput.cjs.map +1 -0
- package/dist/production/src/components/FormRadioInput.js +43 -0
- package/dist/production/src/components/FormRadioInput.js.map +1 -0
- package/dist/production/src/contexts.cjs +13 -0
- package/dist/production/src/contexts.cjs.map +1 -0
- package/dist/production/src/contexts.js +13 -0
- package/dist/production/src/contexts.js.map +1 -0
- package/dist/production/src/hooks/useFormInputValidationHandler.cjs +80 -0
- package/dist/production/src/hooks/useFormInputValidationHandler.cjs.map +1 -0
- package/dist/production/src/hooks/useFormInputValidationHandler.js +64 -0
- package/dist/production/src/hooks/useFormInputValidationHandler.js.map +1 -0
- package/dist/production/src/internal/useFormInputHandler.cjs +122 -0
- package/dist/production/src/internal/useFormInputHandler.cjs.map +1 -0
- package/dist/production/src/internal/useFormInputHandler.js +122 -0
- package/dist/production/src/internal/useFormInputHandler.js.map +1 -0
- package/dist/types/components/FormCheckbox.d.ts +11 -0
- package/dist/types/components/FormCheckbox.d.ts.map +1 -0
- package/dist/types/components/FormError.d.ts +7 -0
- package/dist/types/components/FormError.d.ts.map +1 -0
- package/dist/types/components/FormFieldScope.d.ts +9 -0
- package/dist/types/components/FormFieldScope.d.ts.map +1 -0
- package/dist/types/components/FormFieldStateProvider.d.ts +36 -0
- package/dist/types/components/FormFieldStateProvider.d.ts.map +1 -0
- package/dist/types/components/FormHasManyRelationScope.d.ts +12 -0
- package/dist/types/components/FormHasManyRelationScope.d.ts.map +1 -0
- package/dist/types/components/FormHasOneRelationScope.d.ts +9 -0
- package/dist/types/components/FormHasOneRelationScope.d.ts.map +1 -0
- package/dist/types/components/FormInput.d.ts +13 -0
- package/dist/types/components/FormInput.d.ts.map +1 -0
- package/dist/types/components/FormLabel.d.ts +5 -0
- package/dist/types/components/FormLabel.d.ts.map +1 -0
- package/dist/types/components/FormRadioInput.d.ts +11 -0
- package/dist/types/components/FormRadioInput.d.ts.map +1 -0
- package/dist/types/components/index.d.ts +10 -0
- package/dist/types/components/index.d.ts.map +1 -0
- package/dist/types/contexts.d.ts +12 -0
- package/dist/types/contexts.d.ts.map +1 -0
- package/dist/types/hooks/index.d.ts +2 -0
- package/dist/types/hooks/index.d.ts.map +1 -0
- package/dist/types/hooks/useFormInputValidationHandler.d.ts +8 -0
- package/dist/types/hooks/useFormInputValidationHandler.d.ts.map +1 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/internal/useFormInputHandler.d.ts +4 -0
- package/dist/types/internal/useFormInputHandler.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/dist/types/types/index.d.ts +23 -0
- package/dist/types/types/index.d.ts.map +1 -0
- package/package.json +9 -9
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const useFormInputHandler = (field, { formatValue, parseValue }) => {
|
|
5
|
+
return React.useMemo(() => {
|
|
6
|
+
const schema = field.schema;
|
|
7
|
+
const columnType = schema.type;
|
|
8
|
+
const handlerFactory = ColumnTypeHandlerFactories[columnType] ?? defaultHandlerFactory;
|
|
9
|
+
const handler = handlerFactory(schema, field.getAccessor);
|
|
10
|
+
return {
|
|
11
|
+
defaultInputProps: handler.defaultInputProps,
|
|
12
|
+
formatValue: formatValue ?? handler.formatValue,
|
|
13
|
+
parseValue: parseValue ?? handler.parseValue
|
|
14
|
+
};
|
|
15
|
+
}, [field.getAccessor, field.schema, formatValue, parseValue]);
|
|
16
|
+
};
|
|
17
|
+
const defaultHandlerFactory = (schema, field) => ({
|
|
18
|
+
parseValue: (value) => {
|
|
19
|
+
if (value === "" && schema.nullable && field().valueOnServer === null) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
return value;
|
|
23
|
+
},
|
|
24
|
+
formatValue: (value) => value ?? ""
|
|
25
|
+
});
|
|
26
|
+
const ColumnTypeHandlerFactories = {
|
|
27
|
+
String: defaultHandlerFactory,
|
|
28
|
+
Integer: () => ({
|
|
29
|
+
parseValue: (value) => {
|
|
30
|
+
if (value === "") {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
const parsed = parseInt(value, 10);
|
|
34
|
+
return isNaN(parsed) ? null : parsed;
|
|
35
|
+
},
|
|
36
|
+
formatValue: (value) => {
|
|
37
|
+
return value === null ? "" : value.toString(10);
|
|
38
|
+
},
|
|
39
|
+
defaultInputProps: {
|
|
40
|
+
type: "number"
|
|
41
|
+
}
|
|
42
|
+
}),
|
|
43
|
+
Double: () => ({
|
|
44
|
+
parseValue: (value, ctx) => {
|
|
45
|
+
if (value === "") {
|
|
46
|
+
ctx.setState({ rawValue: "", parsedValue: null });
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
const parsed = parseFloat(value);
|
|
50
|
+
const parsedValue = isNaN(parsed) ? null : parsed;
|
|
51
|
+
ctx.setState({ rawValue: value, parsedValue });
|
|
52
|
+
return parsedValue;
|
|
53
|
+
},
|
|
54
|
+
formatValue: (value, ctx) => {
|
|
55
|
+
if (value === ctx.state?.parsedValue) {
|
|
56
|
+
return ctx.state.rawValue;
|
|
57
|
+
}
|
|
58
|
+
return value === null ? "" : value.toString(10);
|
|
59
|
+
},
|
|
60
|
+
defaultInputProps: {
|
|
61
|
+
type: "number"
|
|
62
|
+
}
|
|
63
|
+
}),
|
|
64
|
+
Date: () => ({
|
|
65
|
+
parseValue: (value) => {
|
|
66
|
+
if (value === "") {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
const parsed = Date.parse(value);
|
|
70
|
+
return isNaN(parsed) ? null : new Date(parsed).toISOString().split("T")[0];
|
|
71
|
+
},
|
|
72
|
+
formatValue: (value) => {
|
|
73
|
+
const parsed = value ? Date.parse(value) : null;
|
|
74
|
+
return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().split("T")[0];
|
|
75
|
+
},
|
|
76
|
+
defaultInputProps: {
|
|
77
|
+
type: "date"
|
|
78
|
+
}
|
|
79
|
+
}),
|
|
80
|
+
DateTime: () => ({
|
|
81
|
+
parseValue: (value) => {
|
|
82
|
+
if (value === "") {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
const parsed = Date.parse(value);
|
|
86
|
+
return isNaN(parsed) ? null : new Date(parsed).toISOString();
|
|
87
|
+
},
|
|
88
|
+
formatValue: (value) => {
|
|
89
|
+
const parsed = value ? Date.parse(value) : null;
|
|
90
|
+
return !parsed || isNaN(parsed) ? "" : toLocalDate(new Date(parsed));
|
|
91
|
+
},
|
|
92
|
+
defaultInputProps: {
|
|
93
|
+
type: "datetime-local"
|
|
94
|
+
}
|
|
95
|
+
}),
|
|
96
|
+
Time: () => ({
|
|
97
|
+
parseValue: (value) => {
|
|
98
|
+
if (value === "") {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
return value;
|
|
102
|
+
},
|
|
103
|
+
formatValue: (value) => {
|
|
104
|
+
return value ?? "";
|
|
105
|
+
},
|
|
106
|
+
defaultInputProps: {
|
|
107
|
+
type: "time"
|
|
108
|
+
}
|
|
109
|
+
}),
|
|
110
|
+
Bool: void 0,
|
|
111
|
+
Enum: void 0,
|
|
112
|
+
Uuid: void 0
|
|
113
|
+
};
|
|
114
|
+
const toLocalDate = (date) => {
|
|
115
|
+
const pad = (num, length = 2) => {
|
|
116
|
+
const str = num.toString();
|
|
117
|
+
return "0".repeat(Math.max(0, length - str.length)) + str;
|
|
118
|
+
};
|
|
119
|
+
return pad(date.getFullYear(), 4) + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + "T" + pad(date.getHours()) + ":" + pad(date.getMinutes()) + ":" + pad(date.getSeconds());
|
|
120
|
+
};
|
|
121
|
+
exports.useFormInputHandler = useFormInputHandler;
|
|
122
|
+
//# sourceMappingURL=useFormInputHandler.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormInputHandler.cjs","sources":["../../../../../packages/react-form/src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport { useMemo } from 'react'\nimport { FormInputHandler } from '../types'\n\nexport const useFormInputHandler = (field: FieldAccessor, { formatValue, parseValue }: Partial<FormInputHandler>): FormInputHandler => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType] ?? defaultHandlerFactory\n\t\tconst handler = handlerFactory(schema, field.getAccessor)\n\t\treturn {\n\t\t\tdefaultInputProps: handler.defaultInputProps,\n\t\t\tformatValue: formatValue ?? handler.formatValue,\n\t\t\tparseValue: parseValue ?? handler.parseValue,\n\t\t}\n\t}, [field.getAccessor, field.schema, formatValue, parseValue])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => FormInputHandler<any>\n\nconst defaultHandlerFactory: ColumnTypeHandlerFactory = (schema, field) => ({\n\tparseValue: (value: string) => {\n\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\treturn null\n\t\t}\n\t\treturn value\n\t},\n\tformatValue: (value: string | null) => value ?? '',\n})\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory | undefined> = {\n\tString: defaultHandlerFactory,\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: (): FormInputHandler<{ rawValue: string; parsedValue: number | null }> => ({\n\t\tparseValue: (value: string, ctx) => {\n\t\t\tif (value === '') {\n\t\t\t\tctx.setState({ rawValue: '', parsedValue: null })\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\tconst parsedValue = isNaN(parsed) ? null : parsed\n\t\t\tctx.setState({ rawValue: value, parsedValue })\n\t\t\treturn parsedValue\n\t\t},\n\t\tformatValue: (value: number | null, ctx) => {\n\t\t\tif (value === ctx.state?.parsedValue) {\n\t\t\t\treturn ctx.state.rawValue\n\t\t\t}\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\treturn value ?? ''\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'time',\n\t\t},\n\t}),\n\tBool: undefined,\n\tEnum: undefined,\n\tUuid: undefined,\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4)\n\t\t+ '-' + pad(date.getMonth() + 1)\n\t\t+ '-' + pad(date.getDate())\n\t\t+ 'T' + pad(date.getHours())\n\t\t+ ':' + pad(date.getMinutes())\n\t\t+ ':' + pad(date.getSeconds())\n}\n"],"names":["useMemo"],"mappings":"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"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
const useFormInputHandler = (field, { formatValue, parseValue }) => {
|
|
3
|
+
return useMemo(() => {
|
|
4
|
+
const schema = field.schema;
|
|
5
|
+
const columnType = schema.type;
|
|
6
|
+
const handlerFactory = ColumnTypeHandlerFactories[columnType] ?? defaultHandlerFactory;
|
|
7
|
+
const handler = handlerFactory(schema, field.getAccessor);
|
|
8
|
+
return {
|
|
9
|
+
defaultInputProps: handler.defaultInputProps,
|
|
10
|
+
formatValue: formatValue ?? handler.formatValue,
|
|
11
|
+
parseValue: parseValue ?? handler.parseValue
|
|
12
|
+
};
|
|
13
|
+
}, [field.getAccessor, field.schema, formatValue, parseValue]);
|
|
14
|
+
};
|
|
15
|
+
const defaultHandlerFactory = (schema, field) => ({
|
|
16
|
+
parseValue: (value) => {
|
|
17
|
+
if (value === "" && schema.nullable && field().valueOnServer === null) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return value;
|
|
21
|
+
},
|
|
22
|
+
formatValue: (value) => value ?? ""
|
|
23
|
+
});
|
|
24
|
+
const ColumnTypeHandlerFactories = {
|
|
25
|
+
String: defaultHandlerFactory,
|
|
26
|
+
Integer: () => ({
|
|
27
|
+
parseValue: (value) => {
|
|
28
|
+
if (value === "") {
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
31
|
+
const parsed = parseInt(value, 10);
|
|
32
|
+
return isNaN(parsed) ? null : parsed;
|
|
33
|
+
},
|
|
34
|
+
formatValue: (value) => {
|
|
35
|
+
return value === null ? "" : value.toString(10);
|
|
36
|
+
},
|
|
37
|
+
defaultInputProps: {
|
|
38
|
+
type: "number"
|
|
39
|
+
}
|
|
40
|
+
}),
|
|
41
|
+
Double: () => ({
|
|
42
|
+
parseValue: (value, ctx) => {
|
|
43
|
+
if (value === "") {
|
|
44
|
+
ctx.setState({ rawValue: "", parsedValue: null });
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
const parsed = parseFloat(value);
|
|
48
|
+
const parsedValue = isNaN(parsed) ? null : parsed;
|
|
49
|
+
ctx.setState({ rawValue: value, parsedValue });
|
|
50
|
+
return parsedValue;
|
|
51
|
+
},
|
|
52
|
+
formatValue: (value, ctx) => {
|
|
53
|
+
if (value === ctx.state?.parsedValue) {
|
|
54
|
+
return ctx.state.rawValue;
|
|
55
|
+
}
|
|
56
|
+
return value === null ? "" : value.toString(10);
|
|
57
|
+
},
|
|
58
|
+
defaultInputProps: {
|
|
59
|
+
type: "number"
|
|
60
|
+
}
|
|
61
|
+
}),
|
|
62
|
+
Date: () => ({
|
|
63
|
+
parseValue: (value) => {
|
|
64
|
+
if (value === "") {
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
const parsed = Date.parse(value);
|
|
68
|
+
return isNaN(parsed) ? null : new Date(parsed).toISOString().split("T")[0];
|
|
69
|
+
},
|
|
70
|
+
formatValue: (value) => {
|
|
71
|
+
const parsed = value ? Date.parse(value) : null;
|
|
72
|
+
return !parsed || isNaN(parsed) ? "" : new Date(parsed).toISOString().split("T")[0];
|
|
73
|
+
},
|
|
74
|
+
defaultInputProps: {
|
|
75
|
+
type: "date"
|
|
76
|
+
}
|
|
77
|
+
}),
|
|
78
|
+
DateTime: () => ({
|
|
79
|
+
parseValue: (value) => {
|
|
80
|
+
if (value === "") {
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
const parsed = Date.parse(value);
|
|
84
|
+
return isNaN(parsed) ? null : new Date(parsed).toISOString();
|
|
85
|
+
},
|
|
86
|
+
formatValue: (value) => {
|
|
87
|
+
const parsed = value ? Date.parse(value) : null;
|
|
88
|
+
return !parsed || isNaN(parsed) ? "" : toLocalDate(new Date(parsed));
|
|
89
|
+
},
|
|
90
|
+
defaultInputProps: {
|
|
91
|
+
type: "datetime-local"
|
|
92
|
+
}
|
|
93
|
+
}),
|
|
94
|
+
Time: () => ({
|
|
95
|
+
parseValue: (value) => {
|
|
96
|
+
if (value === "") {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
return value;
|
|
100
|
+
},
|
|
101
|
+
formatValue: (value) => {
|
|
102
|
+
return value ?? "";
|
|
103
|
+
},
|
|
104
|
+
defaultInputProps: {
|
|
105
|
+
type: "time"
|
|
106
|
+
}
|
|
107
|
+
}),
|
|
108
|
+
Bool: void 0,
|
|
109
|
+
Enum: void 0,
|
|
110
|
+
Uuid: void 0
|
|
111
|
+
};
|
|
112
|
+
const toLocalDate = (date) => {
|
|
113
|
+
const pad = (num, length = 2) => {
|
|
114
|
+
const str = num.toString();
|
|
115
|
+
return "0".repeat(Math.max(0, length - str.length)) + str;
|
|
116
|
+
};
|
|
117
|
+
return pad(date.getFullYear(), 4) + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + "T" + pad(date.getHours()) + ":" + pad(date.getMinutes()) + ":" + pad(date.getSeconds());
|
|
118
|
+
};
|
|
119
|
+
export {
|
|
120
|
+
useFormInputHandler
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=useFormInputHandler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormInputHandler.js","sources":["../../../../../packages/react-form/src/internal/useFormInputHandler.ts"],"sourcesContent":["import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'\nimport { useMemo } from 'react'\nimport { FormInputHandler } from '../types'\n\nexport const useFormInputHandler = (field: FieldAccessor, { formatValue, parseValue }: Partial<FormInputHandler>): FormInputHandler => {\n\treturn useMemo(() => {\n\t\tconst schema = field.schema\n\t\tconst columnType = schema.type\n\t\tconst handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType] ?? defaultHandlerFactory\n\t\tconst handler = handlerFactory(schema, field.getAccessor)\n\t\treturn {\n\t\t\tdefaultInputProps: handler.defaultInputProps,\n\t\t\tformatValue: formatValue ?? handler.formatValue,\n\t\t\tparseValue: parseValue ?? handler.parseValue,\n\t\t}\n\t}, [field.getAccessor, field.schema, formatValue, parseValue])\n}\n\ntype ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => FormInputHandler<any>\n\nconst defaultHandlerFactory: ColumnTypeHandlerFactory = (schema, field) => ({\n\tparseValue: (value: string) => {\n\t\tif (value === '' && schema.nullable && field().valueOnServer === null) {\n\t\t\treturn null\n\t\t}\n\t\treturn value\n\t},\n\tformatValue: (value: string | null) => value ?? '',\n})\n\nconst ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory | undefined> = {\n\tString: defaultHandlerFactory,\n\tInteger: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseInt(value, 10)\n\t\t\treturn isNaN(parsed) ? null : parsed\n\t\t},\n\t\tformatValue: (value: number | null) => {\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\tDouble: (): FormInputHandler<{ rawValue: string; parsedValue: number | null }> => ({\n\t\tparseValue: (value: string, ctx) => {\n\t\t\tif (value === '') {\n\t\t\t\tctx.setState({ rawValue: '', parsedValue: null })\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = parseFloat(value)\n\t\t\tconst parsedValue = isNaN(parsed) ? null : parsed\n\t\t\tctx.setState({ rawValue: value, parsedValue })\n\t\t\treturn parsedValue\n\t\t},\n\t\tformatValue: (value: number | null, ctx) => {\n\t\t\tif (value === ctx.state?.parsedValue) {\n\t\t\t\treturn ctx.state.rawValue\n\t\t\t}\n\t\t\treturn value === null ? '' : value.toString(10)\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'number',\n\t\t},\n\t}),\n\n\tDate: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString().split('T')[0]\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'date',\n\t\t},\n\t}),\n\tDateTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst parsed = Date.parse(value)\n\t\t\treturn isNaN(parsed) ? null : (new Date(parsed)).toISOString()\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\tconst parsed = value ? Date.parse(value) : null\n\t\t\treturn !parsed || isNaN(parsed) ? '' : toLocalDate(new Date(parsed))\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'datetime-local',\n\t\t},\n\t}),\n\tTime: () => ({\n\t\tparseValue: (value: string) => {\n\t\t\tif (value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\t\tformatValue: (value: string | null) => {\n\t\t\treturn value ?? ''\n\t\t},\n\t\tdefaultInputProps: {\n\t\t\ttype: 'time',\n\t\t},\n\t}),\n\tBool: undefined,\n\tEnum: undefined,\n\tUuid: undefined,\n}\n\nconst toLocalDate = (date: Date) => {\n\tconst pad = (num: number, length: number = 2) => {\n\t\tconst str = num.toString()\n\t\treturn '0'.repeat(Math.max(0, length - str.length)) + str\n\t}\n\n\treturn pad(date.getFullYear(), 4)\n\t\t+ '-' + pad(date.getMonth() + 1)\n\t\t+ '-' + pad(date.getDate())\n\t\t+ 'T' + pad(date.getHours())\n\t\t+ ':' + pad(date.getMinutes())\n\t\t+ ':' + pad(date.getSeconds())\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const contexts = require("./src/contexts.cjs");
|
|
4
|
+
const FormCheckbox = require("./src/components/FormCheckbox.cjs");
|
|
5
|
+
const FormError = require("./src/components/FormError.cjs");
|
|
6
|
+
const FormFieldStateProvider = require("./src/components/FormFieldStateProvider.cjs");
|
|
7
|
+
const FormFieldScope = require("./src/components/FormFieldScope.cjs");
|
|
8
|
+
const FormHasManyRelationScope = require("./src/components/FormHasManyRelationScope.cjs");
|
|
9
|
+
const FormHasOneRelationScope = require("./src/components/FormHasOneRelationScope.cjs");
|
|
10
|
+
const FormInput = require("./src/components/FormInput.cjs");
|
|
11
|
+
const FormLabel = require("./src/components/FormLabel.cjs");
|
|
12
|
+
const FormRadioInput = require("./src/components/FormRadioInput.cjs");
|
|
13
|
+
const useFormInputValidationHandler = require("./src/hooks/useFormInputValidationHandler.cjs");
|
|
14
|
+
exports.FormFieldStateContext = contexts.FormFieldStateContext;
|
|
15
|
+
exports.useFormError = contexts.useFormError;
|
|
16
|
+
exports.useFormFieldId = contexts.useFormFieldId;
|
|
17
|
+
exports.useFormFieldState = contexts.useFormFieldState;
|
|
18
|
+
exports.FormCheckbox = FormCheckbox.FormCheckbox;
|
|
19
|
+
exports.FormError = FormError.FormError;
|
|
20
|
+
exports.FormErrorContext = FormFieldStateProvider.FormErrorContext;
|
|
21
|
+
exports.FormFieldIdContext = FormFieldStateProvider.FormFieldIdContext;
|
|
22
|
+
exports.FormFieldStateProvider = FormFieldStateProvider.FormFieldStateProvider;
|
|
23
|
+
exports.FormFieldScope = FormFieldScope.FormFieldScope;
|
|
24
|
+
exports.FormHasManyRelationScope = FormHasManyRelationScope.FormHasManyRelationScope;
|
|
25
|
+
exports.FormHasOneRelationScope = FormHasOneRelationScope.FormHasOneRelationScope;
|
|
26
|
+
exports.FormInput = FormInput.FormInput;
|
|
27
|
+
exports.FormLabel = FormLabel.FormLabel;
|
|
28
|
+
exports.FormRadioInput = FormRadioInput.FormRadioInput;
|
|
29
|
+
exports.useFormInputValidationHandler = useFormInputValidationHandler.useFormInputValidationHandler;
|
|
30
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { FormFieldStateContext, useFormError, useFormFieldId, useFormFieldState } from "./src/contexts.js";
|
|
2
|
+
import { FormCheckbox } from "./src/components/FormCheckbox.js";
|
|
3
|
+
import { FormError } from "./src/components/FormError.js";
|
|
4
|
+
import { FormErrorContext, FormFieldIdContext, FormFieldStateProvider } from "./src/components/FormFieldStateProvider.js";
|
|
5
|
+
import { FormFieldScope } from "./src/components/FormFieldScope.js";
|
|
6
|
+
import { FormHasManyRelationScope } from "./src/components/FormHasManyRelationScope.js";
|
|
7
|
+
import { FormHasOneRelationScope } from "./src/components/FormHasOneRelationScope.js";
|
|
8
|
+
import { FormInput } from "./src/components/FormInput.js";
|
|
9
|
+
import { FormLabel } from "./src/components/FormLabel.js";
|
|
10
|
+
import { FormRadioInput } from "./src/components/FormRadioInput.js";
|
|
11
|
+
import { useFormInputValidationHandler } from "./src/hooks/useFormInputValidationHandler.js";
|
|
12
|
+
export {
|
|
13
|
+
FormCheckbox,
|
|
14
|
+
FormError,
|
|
15
|
+
FormErrorContext,
|
|
16
|
+
FormFieldIdContext,
|
|
17
|
+
FormFieldScope,
|
|
18
|
+
FormFieldStateContext,
|
|
19
|
+
FormFieldStateProvider,
|
|
20
|
+
FormHasManyRelationScope,
|
|
21
|
+
FormHasOneRelationScope,
|
|
22
|
+
FormInput,
|
|
23
|
+
FormLabel,
|
|
24
|
+
FormRadioInput,
|
|
25
|
+
useFormError,
|
|
26
|
+
useFormFieldId,
|
|
27
|
+
useFormFieldState,
|
|
28
|
+
useFormInputValidationHandler
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const reactBinding = require("@contember/react-binding");
|
|
6
|
+
const contexts = require("../contexts.cjs");
|
|
7
|
+
const utilities = require("@contember/utilities");
|
|
8
|
+
const reactSlot = require("@radix-ui/react-slot");
|
|
9
|
+
const useFormInputValidationHandler = require("../hooks/useFormInputValidationHandler.cjs");
|
|
10
|
+
function _interopNamespaceDefault(e) {
|
|
11
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
12
|
+
if (e) {
|
|
13
|
+
for (const k in e) {
|
|
14
|
+
if (k !== "default") {
|
|
15
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: () => e[k]
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
n.default = e;
|
|
24
|
+
return Object.freeze(n);
|
|
25
|
+
}
|
|
26
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
27
|
+
const SlotInput = reactSlot.Slot;
|
|
28
|
+
const FormCheckbox = reactBinding.Component(({ field, isNonbearing, defaultValue, ...props }) => {
|
|
29
|
+
const accessor = reactBinding.useField(field);
|
|
30
|
+
const formState = contexts.useFormFieldState();
|
|
31
|
+
const id = formState?.htmlId;
|
|
32
|
+
const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
|
|
33
|
+
const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
|
|
34
|
+
const value = accessor.value;
|
|
35
|
+
const accessorGetter = accessor.getAccessor;
|
|
36
|
+
const { ref, onFocus, onBlur } = useFormInputValidationHandler.useFormInputValidationHandler(accessor);
|
|
37
|
+
const [checkboxRef, setCheckboxRef] = React__namespace.useState(null);
|
|
38
|
+
React.useEffect(() => {
|
|
39
|
+
if (!checkboxRef) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
checkboxRef.indeterminate = value === null;
|
|
43
|
+
}, [checkboxRef, ref, value]);
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
SlotInput,
|
|
46
|
+
{
|
|
47
|
+
ref: (it) => {
|
|
48
|
+
ref.current = checkboxRef;
|
|
49
|
+
setCheckboxRef(it);
|
|
50
|
+
},
|
|
51
|
+
type: "checkbox",
|
|
52
|
+
checked: accessor.value === true,
|
|
53
|
+
"data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
|
|
54
|
+
"data-invalid": utilities.dataAttribute(hasErrors),
|
|
55
|
+
"data-dirty": utilities.dataAttribute(dirty),
|
|
56
|
+
id: id ? `${id}-input` : void 0,
|
|
57
|
+
onFocus,
|
|
58
|
+
onBlur,
|
|
59
|
+
onChange: React.useCallback((e) => {
|
|
60
|
+
accessorGetter().updateValue(e.target.checked);
|
|
61
|
+
}, [accessorGetter]),
|
|
62
|
+
...props
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}, ({ field, isNonbearing, defaultValue }, env) => {
|
|
66
|
+
const node = reactBinding.TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode();
|
|
67
|
+
const resolvedDefaultValue = defaultValue !== void 0 ? defaultValue : node.field.defaultValue ?? (node.field.nullable ? null : false);
|
|
68
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactBinding.Field, { field, isNonbearing, defaultValue: resolvedDefaultValue });
|
|
69
|
+
});
|
|
70
|
+
exports.FormCheckbox = FormCheckbox;
|
|
71
|
+
//# sourceMappingURL=FormCheckbox.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormCheckbox.cjs","sources":["../../../../../packages/react-form/src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport {\n\tComponent,\n\tField,\n\tOptionallyVariableFieldValue,\n\tSugaredRelativeSingleField,\n\tTreeNodeEnvironmentFactory,\n\tuseField,\n} from '@contember/react-binding'\nimport { useFormFieldState } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst accessor = useField<boolean>(field)\n\n\tconst formState = useFormFieldState()\n\tconst id = formState?.htmlId\n\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\tconst value = accessor.value\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={it => {\n\t\t\t\t;(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useField","useFormFieldState","useFormInputValidationHandler","React","useEffect","jsx","dataAttribute","useCallback","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAYA,UAAAA;AASX,MAAM,eAAeC,aAAAA,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,WAAWC,aAAAA,SAAkB,KAAK;AAExC,QAAM,YAAYC,SAAAA,kBAAA;AAClB,QAAM,KAAK,WAAW;AACtB,QAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,QAAM,QAAQ,WAAW,SAAS,SAAS;AAC3C,QAAM,QAAQ,SAAS;AACvB,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAA,IAAWC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAGlFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACvC,GAAG,CAAC,aAAa,KAAK,KAAK,CAAC;AAE5B,SACCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAA,OAAM;AACR,YAAY,UAAU;AACxB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAAA,cAAc,SAAS;AAAA,MACrC,cAAYA,UAAAA,cAAc,KAAK;AAAA,MAC/B,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAA,MAAK;AAChE,uBAAA,EAAiB,YAAY,EAAE,OAAO,OAAO;AAAA,MAC9C,GAAG,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAClD,QAAM,OAAOC,aAAAA,2BAA2B,0BAA0B,KAAK,EAAE,MAAA,CAAO,EAAE,eAAA;AAClF,QAAM,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAOH,2BAAAA,IAACI,aAAAA,OAAA,EAAM,OAAc,cAA4B,cAAc,sBAAsB;AAC7F,CAAC;;"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useEffect, useCallback } from "react";
|
|
4
|
+
import { Component, useField, TreeNodeEnvironmentFactory, Field } from "@contember/react-binding";
|
|
5
|
+
import { useFormFieldState } from "../contexts.js";
|
|
6
|
+
import { dataAttribute } from "@contember/utilities";
|
|
7
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
8
|
+
import { useFormInputValidationHandler } from "../hooks/useFormInputValidationHandler.js";
|
|
9
|
+
const SlotInput = Slot;
|
|
10
|
+
const FormCheckbox = Component(({ field, isNonbearing, defaultValue, ...props }) => {
|
|
11
|
+
const accessor = useField(field);
|
|
12
|
+
const formState = useFormFieldState();
|
|
13
|
+
const id = formState?.htmlId;
|
|
14
|
+
const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0;
|
|
15
|
+
const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges;
|
|
16
|
+
const value = accessor.value;
|
|
17
|
+
const accessorGetter = accessor.getAccessor;
|
|
18
|
+
const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor);
|
|
19
|
+
const [checkboxRef, setCheckboxRef] = React.useState(null);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!checkboxRef) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
checkboxRef.indeterminate = value === null;
|
|
25
|
+
}, [checkboxRef, ref, value]);
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
SlotInput,
|
|
28
|
+
{
|
|
29
|
+
ref: (it) => {
|
|
30
|
+
ref.current = checkboxRef;
|
|
31
|
+
setCheckboxRef(it);
|
|
32
|
+
},
|
|
33
|
+
type: "checkbox",
|
|
34
|
+
checked: accessor.value === true,
|
|
35
|
+
"data-state": value === null ? "indeterminate" : value ? "checked" : "unchecked",
|
|
36
|
+
"data-invalid": dataAttribute(hasErrors),
|
|
37
|
+
"data-dirty": dataAttribute(dirty),
|
|
38
|
+
id: id ? `${id}-input` : void 0,
|
|
39
|
+
onFocus,
|
|
40
|
+
onBlur,
|
|
41
|
+
onChange: useCallback((e) => {
|
|
42
|
+
accessorGetter().updateValue(e.target.checked);
|
|
43
|
+
}, [accessorGetter]),
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}, ({ field, isNonbearing, defaultValue }, env) => {
|
|
48
|
+
const node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode();
|
|
49
|
+
const resolvedDefaultValue = defaultValue !== void 0 ? defaultValue : node.field.defaultValue ?? (node.field.nullable ? null : false);
|
|
50
|
+
return /* @__PURE__ */ jsx(Field, { field, isNonbearing, defaultValue: resolvedDefaultValue });
|
|
51
|
+
});
|
|
52
|
+
export {
|
|
53
|
+
FormCheckbox
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=FormCheckbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormCheckbox.js","sources":["../../../../../packages/react-form/src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport {\n\tComponent,\n\tField,\n\tOptionallyVariableFieldValue,\n\tSugaredRelativeSingleField,\n\tTreeNodeEnvironmentFactory,\n\tuseField,\n} from '@contember/react-binding'\nimport { useFormFieldState } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst accessor = useField<boolean>(field)\n\n\tconst formState = useFormFieldState()\n\tconst id = formState?.htmlId\n\tconst hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0\n\tconst dirty = formState?.dirty ?? accessor.hasUnpersistedChanges\n\tconst value = accessor.value\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t<SlotInput\n\t\t\tref={it => {\n\t\t\t\t;(ref as any).current = checkboxRef\n\t\t\t\tsetCheckboxRef(it)\n\t\t\t}}\n\t\t\ttype=\"checkbox\"\n\t\t\tchecked={accessor.value === true}\n\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\tdata-invalid={dataAttribute(hasErrors)}\n\t\t\tdata-dirty={dataAttribute(dirty)}\n\t\t\tid={id ? `${id}-input` : undefined}\n\t\t\tonFocus={onFocus}\n\t\t\tonBlur={onBlur}\n\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t}, [accessorGetter])}\n\t\t\t{...props}\n\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":[],"mappings":";;;;;;;;AAeA,MAAM,YAAY;AASX,MAAM,eAAe,UAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,WAAW,SAAkB,KAAK;AAExC,QAAM,YAAY,kBAAA;AAClB,QAAM,KAAK,WAAW;AACtB,QAAM,aAAa,WAAW,OAAO,UAAU,SAAS,QAAQ,QAAQ,UAAU,KAAK;AACvF,QAAM,QAAQ,WAAW,SAAS,SAAS;AAC3C,QAAM,QAAQ,SAAS;AACvB,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAA,IAAW,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkC,IAAI;AAGlF,YAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACvC,GAAG,CAAC,aAAa,KAAK,KAAK,CAAC;AAE5B,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAA,OAAM;AACR,YAAY,UAAU;AACxB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAc,cAAc,SAAS;AAAA,MACrC,cAAY,cAAc,KAAK;AAAA,MAC/B,IAAI,KAAK,GAAG,EAAE,WAAW;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UAAU,YAAkD,CAAA,MAAK;AAChE,uBAAA,EAAiB,YAAY,EAAE,OAAO,OAAO;AAAA,MAC9C,GAAG,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAClD,QAAM,OAAO,2BAA2B,0BAA0B,KAAK,EAAE,MAAA,CAAO,EAAE,eAAA;AAClF,QAAM,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAO,oBAAC,OAAA,EAAM,OAAc,cAA4B,cAAc,sBAAsB;AAC7F,CAAC;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const contexts = require("../contexts.cjs");
|
|
5
|
+
const reactBinding = require("@contember/react-binding");
|
|
6
|
+
const FormError = ({ children, formatter }) => {
|
|
7
|
+
const formState = contexts.useFormFieldState();
|
|
8
|
+
if (!formState) {
|
|
9
|
+
throw new reactBinding.BindingError("FormError must be used inside a FormField");
|
|
10
|
+
}
|
|
11
|
+
const { errors, htmlId } = formState;
|
|
12
|
+
const formatted = React.useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter]);
|
|
13
|
+
return formatted.map((it, index) => {
|
|
14
|
+
return React.cloneElement(children, {
|
|
15
|
+
key: index,
|
|
16
|
+
...htmlId ? { id: `${htmlId}-error-${index}` } : {},
|
|
17
|
+
children: it
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
exports.FormError = FormError;
|
|
22
|
+
//# sourceMappingURL=FormError.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormError.cjs","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement<any>\n}) => {\n\tconst formState = useFormFieldState()\n\tif (!formState) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\tconst { errors, htmlId } = formState\n\tconst formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter])\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...(htmlId ? { id: `${htmlId}-error-${index}` } : {}),\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":["useFormFieldState","BindingError","useMemo","cloneElement"],"mappings":";;;;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,YAAYA,SAAAA,kBAAA;AAClB,MAAI,CAAC,WAAW;AACf,UAAM,IAAIC,aAAAA,aAAa,2CAA2C;AAAA,EACnE;AACA,QAAM,EAAE,QAAQ,OAAA,IAAW;AAC3B,QAAM,YAAYC,MAAAA,QAAQ,MAAM,UAAU,UAAU,EAAE,EAAE,OAAO,CAAC,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,KAAK,GAAG,CAAC,QAAQ,SAAS,CAAC;AAClI,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAOC,MAAAA,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAI,SAAS,EAAE,IAAI,GAAG,MAAM,UAAU,KAAK,GAAA,IAAO,CAAA;AAAA,MAClD,UAAU;AAAA,IAAA,CACV;AAAA,EACF,CAAC;AACF;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useMemo, cloneElement } from "react";
|
|
2
|
+
import { useFormFieldState } from "../contexts.js";
|
|
3
|
+
import { BindingError } from "@contember/react-binding";
|
|
4
|
+
const FormError = ({ children, formatter }) => {
|
|
5
|
+
const formState = useFormFieldState();
|
|
6
|
+
if (!formState) {
|
|
7
|
+
throw new BindingError("FormError must be used inside a FormField");
|
|
8
|
+
}
|
|
9
|
+
const { errors, htmlId } = formState;
|
|
10
|
+
const formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter]);
|
|
11
|
+
return formatted.map((it, index) => {
|
|
12
|
+
return cloneElement(children, {
|
|
13
|
+
key: index,
|
|
14
|
+
...htmlId ? { id: `${htmlId}-error-${index}` } : {},
|
|
15
|
+
children: it
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
FormError
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=FormError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormError.js","sources":["../../../../../packages/react-form/src/components/FormError.tsx"],"sourcesContent":["import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'\nimport { useFormFieldState } from '../contexts'\nimport { BindingError, ErrorAccessor } from '@contember/react-binding'\n\nexport const FormError = ({ children, formatter }: {\n\tformatter: (errors: ErrorAccessor.Error[]) => ReactNode[]\n\tchildren: ReactElement<any>\n}) => {\n\tconst formState = useFormFieldState()\n\tif (!formState) {\n\t\tthrow new BindingError('FormError must be used inside a FormField')\n\t}\n\tconst { errors, htmlId } = formState\n\tconst formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter])\n\treturn formatted.map((it, index) => {\n\t\treturn cloneElement(children, {\n\t\t\tkey: index,\n\t\t\t...(htmlId ? { id: `${htmlId}-error-${index}` } : {}),\n\t\t\tchildren: it,\n\t\t})\n\t})\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,CAAC,EAAE,UAAU,gBAGhC;AACL,QAAM,YAAY,kBAAA;AAClB,MAAI,CAAC,WAAW;AACf,UAAM,IAAI,aAAa,2CAA2C;AAAA,EACnE;AACA,QAAM,EAAE,QAAQ,OAAA,IAAW;AAC3B,QAAM,YAAY,QAAQ,MAAM,UAAU,UAAU,EAAE,EAAE,OAAO,CAAC,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,KAAK,GAAG,CAAC,QAAQ,SAAS,CAAC;AAClI,SAAO,UAAU,IAAI,CAAC,IAAI,UAAU;AACnC,WAAO,aAAa,UAAU;AAAA,MAC7B,KAAK;AAAA,MACL,GAAI,SAAS,EAAE,IAAI,GAAG,MAAM,UAAU,KAAK,GAAA,IAAO,CAAA;AAAA,MAClD,UAAU;AAAA,IAAA,CACV;AAAA,EACF,CAAC;AACF;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const reactBinding = require("@contember/react-binding");
|
|
6
|
+
const FormFieldStateProvider = require("./FormFieldStateProvider.cjs");
|
|
7
|
+
const FormFieldScope = ({ field, children, required }) => {
|
|
8
|
+
const fieldAccessor = reactBinding.useField({ field });
|
|
9
|
+
const entityName = fieldAccessor.getParent().name;
|
|
10
|
+
const fieldName = fieldAccessor.fieldName;
|
|
11
|
+
const enumName = fieldAccessor.schema.enumName ?? void 0;
|
|
12
|
+
const fieldInfo = React.useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName]);
|
|
13
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14
|
+
FormFieldStateProvider.FormFieldStateProvider,
|
|
15
|
+
{
|
|
16
|
+
errors: fieldAccessor.errors?.errors,
|
|
17
|
+
required: required ?? !fieldAccessor.schema.nullable,
|
|
18
|
+
dirty: fieldAccessor.hasUnpersistedChanges,
|
|
19
|
+
field: fieldInfo,
|
|
20
|
+
children
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
exports.FormFieldScope = FormFieldScope;
|
|
25
|
+
//# sourceMappingURL=FormFieldScope.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldScope.cjs","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMemo } from 'react'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormFieldScope = ({ field, children, required }: FormFieldScopeProps) => {\n\tconst fieldAccessor = useField({ field })\n\tconst entityName = fieldAccessor.getParent().name\n\tconst fieldName = fieldAccessor.fieldName\n\tconst enumName = fieldAccessor.schema.enumName ?? undefined\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={fieldAccessor.errors?.errors}\n\t\t\trequired={required ?? !fieldAccessor.schema.nullable}\n\t\t\tdirty={fieldAccessor.hasUnpersistedChanges}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":["useField","useMemo","jsx","FormFieldStateProvider"],"mappings":";;;;;;AAWO,MAAM,iBAAiB,CAAC,EAAE,OAAO,UAAU,eAAoC;AACrF,QAAM,gBAAgBA,aAAAA,SAAS,EAAE,OAAO;AACxC,QAAM,aAAa,cAAc,UAAA,EAAY;AAC7C,QAAM,YAAY,cAAc;AAChC,QAAM,WAAW,cAAc,OAAO,YAAY;AAClD,QAAM,YAAYC,MAAAA,QAAQ,OAAO,EAAE,YAAY,WAAW,SAAA,IAAa,CAAC,YAAY,WAAW,QAAQ,CAAC;AAExG,SACCC,2BAAAA;AAAAA,IAACC,uBAAAA;AAAAA,IAAA;AAAA,MACA,QAAQ,cAAc,QAAQ;AAAA,MAC9B,UAAU,YAAY,CAAC,cAAc,OAAO;AAAA,MAC5C,OAAO,cAAc;AAAA,MACrB,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EAAA;AAGJ;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { useField } from "@contember/react-binding";
|
|
4
|
+
import { FormFieldStateProvider } from "./FormFieldStateProvider.js";
|
|
5
|
+
const FormFieldScope = ({ field, children, required }) => {
|
|
6
|
+
const fieldAccessor = useField({ field });
|
|
7
|
+
const entityName = fieldAccessor.getParent().name;
|
|
8
|
+
const fieldName = fieldAccessor.fieldName;
|
|
9
|
+
const enumName = fieldAccessor.schema.enumName ?? void 0;
|
|
10
|
+
const fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName]);
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
FormFieldStateProvider,
|
|
13
|
+
{
|
|
14
|
+
errors: fieldAccessor.errors?.errors,
|
|
15
|
+
required: required ?? !fieldAccessor.schema.nullable,
|
|
16
|
+
dirty: fieldAccessor.hasUnpersistedChanges,
|
|
17
|
+
field: fieldInfo,
|
|
18
|
+
children
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
export {
|
|
23
|
+
FormFieldScope
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=FormFieldScope.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldScope.js","sources":["../../../../../packages/react-form/src/components/FormFieldScope.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMemo } from 'react'\nimport { SugaredRelativeSingleField, useField } from '@contember/react-binding'\nimport { FormFieldStateProvider } from './FormFieldStateProvider'\n\nexport type FormFieldScopeProps = {\n\tfield: SugaredRelativeSingleField['field']\n\tchildren: React.ReactNode\n\trequired?: boolean\n}\n\nexport const FormFieldScope = ({ field, children, required }: FormFieldScopeProps) => {\n\tconst fieldAccessor = useField({ field })\n\tconst entityName = fieldAccessor.getParent().name\n\tconst fieldName = fieldAccessor.fieldName\n\tconst enumName = fieldAccessor.schema.enumName ?? undefined\n\tconst fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName])\n\n\treturn (\n\t\t<FormFieldStateProvider\n\t\t\terrors={fieldAccessor.errors?.errors}\n\t\t\trequired={required ?? !fieldAccessor.schema.nullable}\n\t\t\tdirty={fieldAccessor.hasUnpersistedChanges}\n\t\t\tfield={fieldInfo}\n\t\t>\n\t\t\t{children}\n\t\t</FormFieldStateProvider>\n\t)\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC,EAAE,OAAO,UAAU,eAAoC;AACrF,QAAM,gBAAgB,SAAS,EAAE,OAAO;AACxC,QAAM,aAAa,cAAc,UAAA,EAAY;AAC7C,QAAM,YAAY,cAAc;AAChC,QAAM,WAAW,cAAc,OAAO,YAAY;AAClD,QAAM,YAAY,QAAQ,OAAO,EAAE,YAAY,WAAW,SAAA,IAAa,CAAC,YAAY,WAAW,QAAQ,CAAC;AAExG,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,QAAQ,cAAc,QAAQ;AAAA,MAC9B,UAAU,YAAY,CAAC,cAAc,OAAO;AAAA,MAC5C,OAAO,cAAc;AAAA,MACrB,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EAAA;AAGJ;"}
|