Skip to content

WIP feat(form): update to rjsf-6 beta (wip) #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP feat(form): update to rjsf-6 beta (wip) #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion formule-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"antd": "^5.26.0",
"antd": "^5.27.3",
"cypress": "^13.13.0",
"cypress-vite": "^1.5.0",
"eslint": "^8.45.0",
Expand Down
1,194 changes: 587 additions & 607 deletions formule-demo/yarn.lock
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,20 @@
"prepare": "husky"
},
"dependencies": {
"@ant-design/icons": "^5.6.1",
"@ant-design/icons": "^6.1.0",
"@ant-design/pro-layout": "^7.16.4",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/language": "^6.8.0",
"@codemirror/legacy-modes": "^6.3.3",
"@codemirror/lint": "^6.5.0",
"@codemirror/merge": "^6.1.1",
"@reduxjs/toolkit": "^1.9.5",
"@rjsf/antd": "^5.21.0",
"@rjsf/core": "^5.21.0",
"@rjsf/utils": "^5.21.0",
"@rjsf/validator-ajv8": "^5.21.0",
"@rjsf/antd": "6.0.0-beta.21",
"@rjsf/core": "6.0.0-beta.21",
"@rjsf/utils": "6.0.0-beta.21",
"@rjsf/validator-ajv8": "6.0.0-beta.21",
"ajv": "^8.17.1",
"antd": "^5.26.0",
"antd": "^5.27.3",
"axios": "^1.4.0",
"codemirror": "^6.0.1",
"codemirror-json-schema": "0.7.1",
Expand Down
25 changes: 14 additions & 11 deletions src/admin/formComponents/ArrayFieldTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,28 @@ import { _validate } from "../utils";
import DropArea from "./DropArea";

const ArrayFieldTemplate = (props) => {
const { rawErrors, registry, schema, uiSchema } = props;
const { formContext } = registry;

const [display, setDisplay] = useState(false);

let schemaPath = [];
let uiSchemaPath = [];
if (props.rawErrors) {
let _rawErrors = props.rawErrors.filter((i) => (i.schema ? i : false));
if (rawErrors) {
let _rawErrors = rawErrors.filter((i) => (i.schema ? i : false));
let { schema, uiSchema } = _rawErrors[0];
schemaPath = schema;
uiSchemaPath = uiSchema;
}

let _path = {
schema: [...props.formContext.schema, ...schemaPath, "items"],
uiSchema: [...props.formContext.uiSchema, ...uiSchemaPath, "items"],
schema: [formContext.schema, ...schemaPath, "items"],
uiSchema: [formContext.uiSchema, ...uiSchemaPath, "items"],
};

let __path = {
schema: [...props.formContext.schema, ...schemaPath],
uiSchema: [...props.formContext.uiSchema, ...uiSchemaPath],
schema: [formContext.schema, ...schemaPath],
uiSchema: [formContext.uiSchema, ...uiSchemaPath],
};

return (
Expand All @@ -41,13 +44,13 @@ const ArrayFieldTemplate = (props) => {

{display && (
<div style={{ marginLeft: "10px" }}>
{Object.keys(props.schema.items).length == 0 ? (
{Object.keys(schema.items).length == 0 ? (
<DropArea />
) : (
<>
<Form
schema={props.schema.items}
uiSchema={props.uiSchema.items}
schema={schema.items}
uiSchema={uiSchema.items}
formData={{}}
tagName="div"
showErrorList={false}
Expand All @@ -62,7 +65,7 @@ const ArrayFieldTemplate = (props) => {
>
<span />
</Form>
{!props.schema.items.properties && <DropArea />}
{!schema.items.properties && <DropArea />}
</>
)}
</div>
Expand All @@ -73,7 +76,7 @@ const ArrayFieldTemplate = (props) => {

ArrayFieldTemplate.propTypes = {
rawErrors: PropTypes.array,
formContext: PropTypes.object,
registry: PropTypes.object,
addProperty: PropTypes.func,
schema: PropTypes.object,
uiSchema: PropTypes.object,
Expand Down
10 changes: 6 additions & 4 deletions src/admin/formComponents/FieldTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,24 @@ const FieldTemplate = (props) => {
uiSchema = {},
rawErrors = [],
children,
formContext,
registry,
id,
} = props;

const { formContext } = registry;

const dispatch = useDispatch();

const [display, setDisplay] = useState(false);

let path = {
schema: [
...formContext.schema,
...(rawErrors.find((e) => typeof e === "object").schema || []),
...(rawErrors.find((e) => typeof e === "object")?.schema || []),
],
uiSchema: [
...formContext.uiSchema,
...(rawErrors.find((e) => typeof e === "object").uiSchema || []),
...(rawErrors.find((e) => typeof e === "object")?.uiSchema || []),
],
};

Expand Down Expand Up @@ -127,7 +129,7 @@ const FieldTemplate = (props) => {
FieldTemplate.propTypes = {
id: PropTypes.string,
children: PropTypes.element,
formContext: PropTypes.object,
registry: PropTypes.object,
rawErrors: PropTypes.array,
uiSchema: PropTypes.object,
schema: PropTypes.object,
Expand Down
12 changes: 7 additions & 5 deletions src/admin/formComponents/ObjectFieldTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import { theme } from "antd";
const ObjectFieldTemplate = ({
properties,
uiSchema,
formContext,
idSchema,
registry,
fieldPathId,
}) => {
const { formContext } = registry;

const [visualItems, setVisualItems] = useState(null);
const [isDragging, setIsDragging] = useState(false);

Expand Down Expand Up @@ -53,7 +55,7 @@ const ObjectFieldTemplate = ({
setVisualItems(null);
}, [dispatch, displayedItems, formContext.uiSchema, uiSchema]);

if (idSchema.$id === "root") {
if (fieldPathId.$id === "root") {
return (
<div
style={{
Expand Down Expand Up @@ -85,9 +87,9 @@ const ObjectFieldTemplate = ({
};

ObjectFieldTemplate.propTypes = {
idSchema: PropTypes.object,
fieldPathId: PropTypes.object,
properties: PropTypes.array,
formContext: PropTypes.object,
registry: PropTypes.object,
onUiSchemaChange: PropTypes.func,
uiSchema: PropTypes.object,
};
Expand Down
2 changes: 1 addition & 1 deletion src/forms/Form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const RJSFForm = ({
formData,
extraErrors,
onChange,
formContext,
formContext, // TODO: Change to registry and pass formContext inside?
readonly,
className,
ObjectFieldTemplate: Objects,
Expand Down
5 changes: 3 additions & 2 deletions src/forms/fields/base/FileField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {

const FileField = ({
disabled,
formContext,
registry,
id,
onBlur,
onChange,
Expand All @@ -20,6 +20,7 @@ const FileField = ({
formData,
schema,
}) => {
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const isDisabled = disabled || (readonlyAsDisabled && readonly);
const [previewOpen, setPreviewOpen] = useState(false);
Expand Down Expand Up @@ -201,8 +202,8 @@ const FileField = ({
{files.length === 0 && isDisabled && (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
imageStyle={{ height: 30 }}
style={{ margin: 5 }}
styles={{ image: { height: 30 } }}
description="No files uploaded"
/>
)}
Expand Down
8 changes: 0 additions & 8 deletions src/forms/fields/internal/TitleField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
import Markdown from "../../../partials/Markdown/Markdown";

const TitleField = ({
formContext = {},
id,
fieldId,
prefixCls,
Expand All @@ -26,16 +25,10 @@ const TitleField = ({
isObject,
hideAnchors,
}) => {
const { colon = true } = formContext;

let labelChildren = title;
if (colon && typeof title === "string" && title.trim() !== "") {
labelChildren = title.replace(/[：:]\s*$/, "");
}

const labelClassName = classNames({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-no-colon`]: !colon,
formItemTitle: true,
});

Expand Down Expand Up @@ -117,7 +110,6 @@ const TitleField = ({
};

TitleField.propTypes = {
formContext: PropTypes.object,
id: PropTypes.string,
prefixCls: PropTypes.string,
required: PropTypes.bool,
Expand Down
11 changes: 2 additions & 9 deletions src/forms/templates/ArrayFieldTemplates/AccordionArrayFieldTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Collapse } from "antd";
import ArrayFieldTemplateItem from "./ArrayFieldTemplateItem";
import { isFieldContainsError } from "../utils";

const AccordionArrayFieldTemplate = ({ items = [], formContext, id }) => {
const AccordionArrayFieldTemplate = ({ items = [], id }) => {
if (items.length < 1) return null;

return (
Expand All @@ -12,13 +12,7 @@ const AccordionArrayFieldTemplate = ({ items = [], formContext, id }) => {
items={items.map((item, index) => ({
key: index,
label: `Item #${index + 1}`,
children: (
<ArrayFieldTemplateItem
key={id + index}
{...item}
formContext={formContext}
/>
),
children: <ArrayFieldTemplateItem key={id + index} {...item} />,
className: isFieldContainsError(item) && "collapseItemError",
}))}
/>
Expand All @@ -27,7 +21,6 @@ const AccordionArrayFieldTemplate = ({ items = [], formContext, id }) => {

AccordionArrayFieldTemplate.propTypes = {
items: PropTypes.array,
formContext: PropTypes.object,
id: PropTypes.string,
};

Expand Down
31 changes: 16 additions & 15 deletions src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ const ArrayFieldTemplate = ({
canAdd,
className,
disabled,
formContext,
idSchema,
registry,
fieldPathId,
items,
options,
onAddClick,
Expand All @@ -37,6 +37,7 @@ const ArrayFieldTemplate = ({
formData,
}) => {
const { useToken } = theme;
const { formContext } = registry;
const { rowGutter = 24, hideAnchors } = formContext;

const [latexData, setLatexData] = useState(null);
Expand Down Expand Up @@ -71,21 +72,21 @@ const ArrayFieldTemplate = ({
<LayerArrayFieldTemplate
items={items}
uiSchema={uiSchema}
id={idSchema.$id}
id={fieldPathId.$id}
/>
),
accordion: (
<AccordionArrayFieldTemplate
items={items}
formContext={formContext}
id={idSchema.$id}
registry={registry}
id={fieldPathId.$id}
/>
),
default: items.map((itemProps, index) => (
<ArrayFieldTemplateItem
key={idSchema.$id + index}
key={fieldPathId.$id + index}
{...itemProps}
formContext={formContext}
registry={registry}
/>
)),
};
Expand Down Expand Up @@ -140,7 +141,7 @@ const ArrayFieldTemplate = ({
}, [emailModal]);

return (
<fieldset className={className} id={idSchema.$id}>
<fieldset className={className} id={fieldPathId.$id}>
{uiLatex && (
<Modal
destroyOnClose
Expand Down Expand Up @@ -247,9 +248,9 @@ const ArrayFieldTemplate = ({
<FieldHeader
titleField={
<TitleField
id={`${idSchema.$id}-title`}
fieldId={idSchema.$id}
key={`array-field-title-${idSchema.$id}`}
id={`${fieldPathId.$id}-title`}
fieldId={fieldPathId.$id}
key={`array-field-title-${fieldPathId.$id}`}
required={required}
title={uiSchema["ui:title"] || title}
uiImport={uiImport}
Expand All @@ -264,8 +265,8 @@ const ArrayFieldTemplate = ({
}
description={uiSchema["ui:description"] || schema.description}
uiSchema={uiSchema}
key={`array-field-header-${idSchema.$id}`}
idSchema={idSchema}
key={`array-field-header-${fieldPathId.$id}`}
fieldPathId={fieldPathId}
/>
</div>
)}
Expand Down Expand Up @@ -330,8 +331,8 @@ ArrayFieldTemplate.propTypes = {
canAdd: PropTypes.bool,
className: PropTypes.string,
disabled: PropTypes.bool,
formContext: PropTypes.object,
idSchema: PropTypes.object,
registry: PropTypes.object,
fieldPathId: PropTypes.object,
items: PropTypes.array,
onAddClick: PropTypes.func,
prefixCls: PropTypes.string,
Expand Down
4 changes: 1 addition & 3 deletions src/forms/templates/ArrayFieldTemplates/EmptyArrayField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ const EmptyArrayField = ({
return (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
imageStyle={{
height: 30,
}}
style={{ margin: "15px" }}
styles={{ image: { height: 30 } }}
description={"No Items added"}
>
{canAdd && !readonly && (
Expand Down
Loading
Loading