From 7a52a918f297295c1b626cb19091bc8eb9abdddc Mon Sep 17 00:00:00 2001 From: suvarnakale <suvarna.kale@tekditechnologies.com> Date: Tue, 9 Jul 2024 11:52:05 +0530 Subject: [PATCH] Issue #PS-1247 feat: Integrated RJSF library --- package.json | 8 ++++++- src/components/DynamicForm.tsx | 42 ++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 src/components/DynamicForm.tsx diff --git a/package.json b/package.json index 6aee4809..fdae2c72 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,13 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/icons-material": "^5.15.15", - "@mui/material": "^5.15.15", + "@mui/material": "^5.15.21", "@project-sunbird/client-services": "^7.0.6", "@project-sunbird/telemetry-sdk": "^1.3.0", + "@rjsf/core": "^5.18.5", + "@rjsf/material-ui": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@tanstack/react-query": "^5.45.1", "axios": "^1.6.8", "date-fns": "^3.6.0", @@ -42,7 +46,9 @@ "react-circular-progressbar": "^2.1.0", "react-dom": "^18", "react-ga4": "^2.1.0", + "react-i18next": "^14.1.2", "react-joyride": "^2.8.2", + "react-select": "^5.8.0", "react-toastify": "^10.0.5", "sharp": "^0.33.3", "zustand": "^4.5.4" diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx new file mode 100644 index 00000000..b29f010b --- /dev/null +++ b/src/components/DynamicForm.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import Form, { IChangeEvent } from '@rjsf/core'; +import ISubmitEvent from '@rjsf/core'; +import validator from '@rjsf/validator-ajv8'; +import { Theme as MaterialUITheme } from '@rjsf/material-ui'; +import { withTheme } from '@rjsf/core'; + +const FormWithMaterialUI = withTheme(MaterialUITheme); + +interface DynamicFormProps { + schema: any; + uiSchema: any; + formData?: any; + onSubmit: (data: ISubmitEvent<any>, event: React.FormEvent<any>) => void; + onChange: (event: IChangeEvent<any>) => void; + onError: (errors: any) => void; + showErrorList: boolean; +} +const DynamicForm: React.FC<DynamicFormProps> = ({ + schema, + uiSchema, + formData, + onSubmit, + onChange, + onError, +}) => { + return ( + <FormWithMaterialUI + schema={schema} + uiSchema={uiSchema} + formData={formData} + onChange={onChange} + onSubmit={onSubmit} + onError={onError} + validator={validator} + liveValidate + showErrorList={false} + /> + ); +}; + +export default DynamicForm;