;
diff --git a/packages/playground/src/samples/additionalProperties.ts b/packages/playground/src/samples/additionalProperties.ts
index 6da539f47c..fd173b48c3 100644
--- a/packages/playground/src/samples/additionalProperties.ts
+++ b/packages/playground/src/samples/additionalProperties.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const additionalProperties: Sample = {
schema: {
title: 'A customizable registration form',
description: 'A simple form with additional properties example.',
@@ -30,3 +32,5 @@ export default {
assKickCount: 'infinity',
},
};
+
+export default additionalProperties;
diff --git a/packages/playground/src/samples/allOf.ts b/packages/playground/src/samples/allOf.ts
index e8a8ffaf19..23c11e1b4b 100644
--- a/packages/playground/src/samples/allOf.ts
+++ b/packages/playground/src/samples/allOf.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const allOf: Sample = {
schema: {
type: 'object',
allOf: [
@@ -24,3 +26,5 @@ export default {
},
formData: {},
};
+
+export default allOf;
diff --git a/packages/playground/src/samples/alternatives.ts b/packages/playground/src/samples/alternatives.ts
index d10e6bf373..36d42f5e9c 100644
--- a/packages/playground/src/samples/alternatives.ts
+++ b/packages/playground/src/samples/alternatives.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const alternatives: Sample = {
schema: {
definitions: {
Color: {
@@ -90,3 +92,5 @@ export default {
blendMode: 'screen',
},
};
+
+export default alternatives;
diff --git a/packages/playground/src/samples/anyOf.ts b/packages/playground/src/samples/anyOf.ts
index b3d6786199..40c41b9da4 100644
--- a/packages/playground/src/samples/anyOf.ts
+++ b/packages/playground/src/samples/anyOf.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const anyOf: Sample = {
schema: {
type: 'object',
properties: {
@@ -57,3 +59,5 @@ export default {
},
formData: {},
};
+
+export default anyOf;
diff --git a/packages/playground/src/samples/arrays.ts b/packages/playground/src/samples/arrays.ts
index 32e65da863..2f06d98007 100644
--- a/packages/playground/src/samples/arrays.ts
+++ b/packages/playground/src/samples/arrays.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const arrays: Sample = {
schema: {
definitions: {
Thing: {
@@ -189,3 +191,5 @@ export default {
fixedNoToolbar: [42, true, 'additional item one', 'additional item two'],
},
};
+
+export default arrays;
diff --git a/packages/playground/src/samples/custom.ts b/packages/playground/src/samples/custom.ts
index 939fa4ab77..48320a60d6 100644
--- a/packages/playground/src/samples/custom.ts
+++ b/packages/playground/src/samples/custom.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const custom: Sample = {
schema: {
title: 'A localisation form',
type: 'object',
@@ -20,3 +22,5 @@ export default {
lon: 0,
},
};
+
+export default custom;
diff --git a/packages/playground/src/samples/customArray.tsx b/packages/playground/src/samples/customArray.tsx
index 26dad35646..ca4297c630 100644
--- a/packages/playground/src/samples/customArray.tsx
+++ b/packages/playground/src/samples/customArray.tsx
@@ -1,9 +1,8 @@
-const ArrayFieldTemplate: React.FC<{ className: string; items?: any[]; canAdd?: boolean; onAddClick: () => void }> = ({
- className,
- items,
- canAdd,
- onAddClick,
-}) => {
+import { Sample } from './Sample';
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
+
+function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+ const { className, items, canAdd, onAddClick } = props;
return (
{items &&
@@ -32,9 +31,9 @@ const ArrayFieldTemplate: React.FC<{ className: string; items?: any[]; canAdd?:
)}
);
-};
+}
-export default {
+export const customArray: Sample = {
schema: {
title: 'Custom array of strings',
type: 'array',
@@ -45,3 +44,5 @@ export default {
formData: ['react', 'jsonschema', 'form'],
templates: { ArrayFieldTemplate },
};
+
+export default customArray;
diff --git a/packages/playground/src/samples/customField.ts b/packages/playground/src/samples/customField.ts
index 40c07fb9b2..e2eea973f1 100644
--- a/packages/playground/src/samples/customField.ts
+++ b/packages/playground/src/samples/customField.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const customField: Sample = {
schema: {
title: 'A registration form',
description: 'A custom-field form example.',
@@ -26,3 +28,5 @@ export default {
mySpecialStringField: 'special-text',
},
};
+
+export default customField;
diff --git a/packages/playground/src/samples/customFieldAnyOf.tsx b/packages/playground/src/samples/customFieldAnyOf.tsx
index 2211246fbe..42f4e07a3c 100644
--- a/packages/playground/src/samples/customFieldAnyOf.tsx
+++ b/packages/playground/src/samples/customFieldAnyOf.tsx
@@ -1,10 +1,12 @@
-const UiField: React.FC<{
- schema?: any;
- idSchema: { $id: string };
- formData?: any;
- onChange: (...args: any[]) => void;
- [key: string]: any;
-}> = ({ idSchema: { $id }, formData, onChange }) => {
+import { Sample } from './Sample';
+import { FieldProps } from '@rjsf/utils';
+
+function UiField(props: FieldProps) {
+ const {
+ idSchema: { $id },
+ formData,
+ onChange,
+ } = props;
const changeHandlerFactory = (fieldName: string) => (event: any) => {
onChange(formData ? { ...formData, [fieldName]: event.target.value } : { [fieldName]: event.target.value });
};
@@ -71,9 +73,9 @@ const UiField: React.FC<{
);
-};
+}
-export default {
+const customFieldAnyOf: Sample = {
schema: {
title: 'Location',
type: 'object',
@@ -106,3 +108,5 @@ export default {
},
formData: {},
};
+
+export default customFieldAnyOf;
diff --git a/packages/playground/src/samples/customObject.tsx b/packages/playground/src/samples/customObject.tsx
index fcd420d4f0..3dd95121c0 100644
--- a/packages/playground/src/samples/customObject.tsx
+++ b/packages/playground/src/samples/customObject.tsx
@@ -6,7 +6,9 @@ import {
RJSFSchema,
FormContextType,
ObjectFieldTemplateProps,
+ ObjectFieldTemplatePropertyType,
} from '@rjsf/utils';
+import { Sample } from './Sample';
function ObjectFieldTemplate(
props: ObjectFieldTemplateProps
@@ -28,7 +30,7 @@ function ObjectFieldTemplate
- {properties.map((prop) => (
+ {properties.map((prop: ObjectFieldTemplatePropertyType) => (
{prop.content}
@@ -38,7 +40,7 @@ function ObjectFieldTemplate = {
Blank: { schema: {}, uiSchema: {}, formData: {} },
Simple: simple,
'UI Options': options,
@@ -67,6 +69,6 @@ export const samples = Object.freeze({
ErrorSchema: errorSchema,
Defaults: defaults,
'Custom Field': customField,
-} as const);
+};
-export type Sample = keyof typeof samples;
+export const samples = deepFreeze(_samples);
diff --git a/packages/playground/src/samples/large.ts b/packages/playground/src/samples/large.ts
index 87b984d0f6..ebceccae6c 100644
--- a/packages/playground/src/samples/large.ts
+++ b/packages/playground/src/samples/large.ts
@@ -1,3 +1,5 @@
+import { Sample } from './Sample';
+
function largeEnum(n: number) {
const list = [];
for (let i = 0; i < n; i++) {
@@ -6,7 +8,7 @@ function largeEnum(n: number) {
return list;
}
-export default {
+const large: Sample = {
schema: {
definitions: {
largeEnum: { type: 'string', enum: largeEnum(100) },
@@ -37,3 +39,5 @@ export default {
},
formData: {},
};
+
+export default large;
diff --git a/packages/playground/src/samples/nested.ts b/packages/playground/src/samples/nested.ts
index 1c72d254f1..cc534942ec 100644
--- a/packages/playground/src/samples/nested.ts
+++ b/packages/playground/src/samples/nested.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const nested: Sample = {
schema: {
title: 'A list of tasks',
type: 'object',
@@ -62,3 +64,5 @@ export default {
],
},
};
+
+export default nested;
diff --git a/packages/playground/src/samples/null.ts b/packages/playground/src/samples/null.ts
index 7f0d891214..61ca768a65 100644
--- a/packages/playground/src/samples/null.ts
+++ b/packages/playground/src/samples/null.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const nullField: Sample = {
schema: {
title: 'Null field example',
description: 'A short form with a null field',
@@ -25,3 +27,5 @@ export default {
},
formData: {},
};
+
+export default nullField;
diff --git a/packages/playground/src/samples/nullable.ts b/packages/playground/src/samples/nullable.ts
index 66663fee91..d11409ee32 100644
--- a/packages/playground/src/samples/nullable.ts
+++ b/packages/playground/src/samples/nullable.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const nullable: Sample = {
schema: {
title: 'A registration form (nullable)',
description: 'A simple form example using nullable types',
@@ -70,3 +72,5 @@ export default {
password: 'noneed',
},
};
+
+export default nullable;
diff --git a/packages/playground/src/samples/numbers.ts b/packages/playground/src/samples/numbers.ts
index 449c513b2e..f7dc479779 100644
--- a/packages/playground/src/samples/numbers.ts
+++ b/packages/playground/src/samples/numbers.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const numbers: Sample = {
schema: {
type: 'object',
title: 'Number fields & widgets',
@@ -61,3 +63,5 @@ export default {
integerRangeSteps: 80,
},
};
+
+export default numbers;
diff --git a/packages/playground/src/samples/oneOf.ts b/packages/playground/src/samples/oneOf.ts
index e3cffc32b2..fc1091a241 100644
--- a/packages/playground/src/samples/oneOf.ts
+++ b/packages/playground/src/samples/oneOf.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const oneOf: Sample = {
schema: {
type: 'object',
oneOf: [
@@ -22,3 +24,5 @@ export default {
},
formData: {},
};
+
+export default oneOf;
diff --git a/packages/playground/src/samples/options.ts b/packages/playground/src/samples/options.ts
index 452610db8c..566636c00a 100644
--- a/packages/playground/src/samples/options.ts
+++ b/packages/playground/src/samples/options.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const optionsSample: Sample = {
schema: {
title: 'A registration form',
description: 'A simple form example. Demonstrating ui options',
@@ -68,3 +70,5 @@ export default {
password: 'noneed',
},
};
+
+export default optionsSample;
diff --git a/packages/playground/src/samples/ordering.ts b/packages/playground/src/samples/ordering.ts
index 096b4def1f..655e162217 100644
--- a/packages/playground/src/samples/ordering.ts
+++ b/packages/playground/src/samples/ordering.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const ordering: Sample = {
schema: {
title: 'A registration form',
type: 'object',
@@ -46,3 +48,5 @@ export default {
password: 'noneed',
},
};
+
+export default ordering;
diff --git a/packages/playground/src/samples/propertyDependencies.ts b/packages/playground/src/samples/propertyDependencies.ts
index b1136b07ca..de175b2566 100644
--- a/packages/playground/src/samples/propertyDependencies.ts
+++ b/packages/playground/src/samples/propertyDependencies.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const propertyDependencies: Sample = {
schema: {
title: 'Property dependencies',
description: 'These samples are best viewed without live validation.',
@@ -6,7 +8,6 @@ export default {
properties: {
unidirectional: {
title: 'Unidirectional',
- src: 'https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies',
type: 'object',
properties: {
name: {
@@ -26,7 +27,6 @@ export default {
},
bidirectional: {
title: 'Bidirectional',
- src: 'https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies',
description:
'Dependencies are not bidirectional, you can, of course, define the bidirectional dependencies explicitly.',
type: 'object',
@@ -55,7 +55,7 @@ export default {
'ui:help': 'If you enter anything here then billing_address will become required.',
},
billing_address: {
- 'ui:help': 'It’s okay to have a billing address without a credit card number.',
+ 'ui:help': "It's okay to have a billing address without a credit card number.",
},
},
bidirectional: {
@@ -76,3 +76,5 @@ export default {
},
},
};
+
+export default propertyDependencies;
diff --git a/packages/playground/src/samples/references.ts b/packages/playground/src/samples/references.ts
index 429407e7ec..c05ceac622 100644
--- a/packages/playground/src/samples/references.ts
+++ b/packages/playground/src/samples/references.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const references: Sample = {
schema: {
definitions: {
address: {
@@ -59,3 +61,5 @@ export default {
},
},
};
+
+export default references;
diff --git a/packages/playground/src/samples/schemaDependencies.ts b/packages/playground/src/samples/schemaDependencies.ts
index 3af80c6980..b9ddea7005 100644
--- a/packages/playground/src/samples/schemaDependencies.ts
+++ b/packages/playground/src/samples/schemaDependencies.ts
@@ -1,11 +1,12 @@
-export default {
+import { Sample } from './Sample';
+
+const schemaDependencies: Sample = {
schema: {
title: 'Schema dependencies',
description: 'These samples are best viewed without live validation.',
type: 'object',
properties: {
simple: {
- src: 'https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies',
title: 'Simple',
type: 'object',
properties: {
@@ -167,3 +168,5 @@ export default {
],
},
};
+
+export default schemaDependencies;
diff --git a/packages/playground/src/samples/simple.ts b/packages/playground/src/samples/simple.ts
index 4efa351a68..dace4ac6ee 100644
--- a/packages/playground/src/samples/simple.ts
+++ b/packages/playground/src/samples/simple.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const simple: Sample = {
schema: {
title: 'A registration form',
description: 'A simple form example.',
@@ -76,3 +78,5 @@ export default {
telephone: '1-800-KICKASS',
},
};
+
+export default simple;
diff --git a/packages/playground/src/samples/single.ts b/packages/playground/src/samples/single.ts
index 3f3b020746..0a28405cab 100644
--- a/packages/playground/src/samples/single.ts
+++ b/packages/playground/src/samples/single.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const single: Sample = {
schema: {
title: 'A single-field form',
type: 'string',
@@ -6,3 +8,5 @@ export default {
formData: 'initial value',
uiSchema: {},
};
+
+export default single;
diff --git a/packages/playground/src/samples/validation.ts b/packages/playground/src/samples/validation.ts
index 2c897f56a8..adfd06b020 100644
--- a/packages/playground/src/samples/validation.ts
+++ b/packages/playground/src/samples/validation.ts
@@ -1,25 +1,29 @@
-function validate({ pass1, pass2 }: { pass1: string; pass2: string }, errors: any) {
+import { Sample } from './Sample';
+import { ErrorTransformer } from '@rjsf/utils';
+
+function customValidate({ pass1, pass2 }: { pass1: string; pass2: string }, errors: any) {
if (pass1 !== pass2) {
errors.pass2.addError("Passwords don't match.");
}
return errors;
}
-function transformErrors(errors: { name: string; property: string }[]) {
+const transformErrors: ErrorTransformer = (errors) => {
return errors.map((error) => {
- if (error.name === 'minimum' && error.property === 'instance.age') {
+ if (error.name === 'minimum' && error.schemaPath === '#/properties/age/minimum') {
return Object.assign({}, error, {
message: 'You need to be 18 because of some legal thing',
});
}
return error;
});
-}
+};
-export default {
+const validation: Sample = {
schema: {
title: 'Custom validation',
- description: 'This form defines custom validation rules checking that the two passwords match.',
+ description:
+ 'This form defines custom validation rules checking that the two passwords match. There is also a custom validation message when submitting an age < 18, which can only be seen if HTML5 validation is turned off.',
type: 'object',
properties: {
pass1: {
@@ -44,6 +48,8 @@ export default {
pass2: { 'ui:widget': 'password' },
},
formData: {},
- validate,
+ customValidate,
transformErrors,
};
+
+export default validation;
diff --git a/packages/playground/src/samples/widgets.tsx b/packages/playground/src/samples/widgets.tsx
index 663a9ecffd..a93b2362a5 100644
--- a/packages/playground/src/samples/widgets.tsx
+++ b/packages/playground/src/samples/widgets.tsx
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const widgets: Sample = {
schema: {
title: 'Widgets',
type: 'object',
@@ -212,3 +214,5 @@ export default {
secret: "I'm a hidden string.",
},
};
+
+export default widgets;
diff --git a/packages/utils/src/schema/getDefaultFormState.ts b/packages/utils/src/schema/getDefaultFormState.ts
index de7402dd8e..d7a45239ca 100644
--- a/packages/utils/src/schema/getDefaultFormState.ts
+++ b/packages/utils/src/schema/getDefaultFormState.ts
@@ -307,7 +307,7 @@ export function computeDefaults(
objectDefaults as GenericObjectType,
key,