diff --git a/formule-demo/src/main.tsx b/formule-demo/src/main.tsx index 15993d9..8cb2dda 100644 --- a/formule-demo/src/main.tsx +++ b/formule-demo/src/main.tsx @@ -3,11 +3,16 @@ import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import { ConfigProvider } from "antd"; import { theme } from "./theme.ts"; +import { Alert } from "antd"; + +const { ErrorBoundary } = Alert; ReactDOM.createRoot(document.getElementById("root")!).render( - + + + , ); diff --git a/formule-demo/yarn.lock b/formule-demo/yarn.lock index 9780df2..936e035 100644 --- a/formule-demo/yarn.lock +++ b/formule-demo/yarn.lock @@ -3497,7 +3497,7 @@ react-dom@^18.2.0: scheduler "^0.23.2" "react-formule@file:..": - version "1.1.1" + version "1.2.0" dependencies: "@ant-design/pro-layout" "^7.16.4" "@codemirror/lang-json" "^6.0.1" diff --git a/src/exposed.tsx b/src/exposed.tsx index 992fd3c..29ba473 100644 --- a/src/exposed.tsx +++ b/src/exposed.tsx @@ -21,6 +21,7 @@ type FormuleContextProps = { customPublishedWidgets?: object; theme?: ThemeConfig; separator?: string; + errorBoundary?: ReactNode; synchronizeState?: (state: SchemaWizardState) => void; transformSchema?: (schema: object) => object; }; @@ -34,6 +35,7 @@ export const FormuleContext = ({ customPublishedWidgets, theme, separator = "::", + errorBoundary, synchronizeState, transformSchema = (schema) => schema, }: FormuleContextProps) => { @@ -61,8 +63,9 @@ export const FormuleContext = ({ customWidgets, customPublishedFields, customPublishedWidgets, - transformSchema, separator, + errorBoundary, + transformSchema, }} > {content} diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx index 1f891fe..d423fb1 100644 --- a/src/forms/Form.jsx +++ b/src/forms/Form.jsx @@ -15,6 +15,7 @@ import { useContext } from "react"; import { Provider, useDispatch } from "react-redux"; import store from "../store/configureStore"; import { updateFormData } from "../store/schemaWizard"; +import FormErrorBoundary from "./FormErrorBoundary"; const RJSFForm = ({ formRef, @@ -54,50 +55,54 @@ const RJSFForm = ({ ObjectFieldTemplate: Objects || ObjectFieldTemplate, }; + const ErrorBoundary = customizationContext.errorBoundary || FormErrorBoundary; + return ( -
{}} - onBlur={() => {}} - customValidate={validate} - validator={validator} - extraErrors={extraErrors} - onChange={handleChange} - readonly={readonly || isPublished} - transformErrors={transformErrors} - formContext={{ - formRef, - ...formContext, - hideAnchors, - }} - idSeparator={customizationContext.separator} - > - - + +
{}} + onBlur={() => {}} + customValidate={validate} + validator={validator} + extraErrors={extraErrors} + onChange={handleChange} + readonly={readonly || isPublished} + transformErrors={transformErrors} + formContext={{ + formRef, + ...formContext, + hideAnchors, + }} + idSeparator={customizationContext.separator} + > + + +
); }; diff --git a/src/forms/FormErrorBoundary.jsx b/src/forms/FormErrorBoundary.jsx new file mode 100644 index 0000000..5f390ac --- /dev/null +++ b/src/forms/FormErrorBoundary.jsx @@ -0,0 +1,49 @@ +import { Alert, Typography } from "antd"; + +const { ErrorBoundary } = Alert; + +const FormErrorBoundary = ({ children }) => ( + + Why am I getting this error? + + Your schema might not be following the{" "} + + JSONSchema specification + + . This usually happens when you have manually modified the JSON schema + and introduced some errors. Please make sure the schema follows the + specification and try again. +
+ Notes: + +
+ + } + > + {children} +
+); + +export default FormErrorBoundary;