This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 098a382cb05 kie-issues#1947: Fix
`form-code-generator-patternfly-theme` with new PatternFly v5 event handlers
for components (#3108)
098a382cb05 is described below
commit 098a382cb0535cdeb8708edd0a97f89a4b7ba11e
Author: Luiz João Motta <[email protected]>
AuthorDate: Mon May 5 14:53:49 2025 -0300
kie-issues#1947: Fix `form-code-generator-patternfly-theme` with new
PatternFly v5 event handlers for components (#3108)
---
.../src/api/types.ts | 2 +
.../src/uniforms/AutoForm.tsx | 3 ++
.../src/uniforms/BoolField.tsx | 2 +-
.../src/uniforms/DateField.tsx | 8 ++--
.../src/uniforms/ListField.tsx | 1 +
.../src/uniforms/NestField.tsx | 3 ++
.../src/uniforms/NumField.tsx | 2 +-
.../src/uniforms/SelectField.tsx | 6 +--
.../src/uniforms/TextField.tsx | 4 +-
.../src/uniforms/rendering/ListItemField.tsx | 2 +-
.../tests/AutoField.test.tsx | 17 ++++++---
.../tests/ListField.test.tsx | 10 +++--
.../tests/NestField.test.tsx | 8 ++--
.../tests/SelectField.test.tsx | 17 ++++++---
.../tests/TextField.test.tsx | 2 +-
.../tests/__snapshots__/AutoForm.test.tsx.snap | 44 ++++++++++++----------
.../tests/__snapshots__/BoolField.test.tsx.snap | 4 +-
.../tests/__snapshots__/DateField.test.tsx.snap | 8 ++--
.../tests/__snapshots__/ListField.test.tsx.snap | 12 +++---
.../tests/__snapshots__/NestField.test.tsx.snap | 6 +--
.../tests/__snapshots__/NumField.test.tsx.snap | 6 +--
.../tests/__snapshots__/TextField.test.tsx.snap | 8 ++--
.../ReactFormRenderer/ReactFormRenderer.tsx | 14 ++++++-
.../src/formDisplayer/utils/utils.tsx | 9 +++++
24 files changed, 124 insertions(+), 74 deletions(-)
diff --git a/packages/form-code-generator-patternfly-theme/src/api/types.ts
b/packages/form-code-generator-patternfly-theme/src/api/types.ts
index c0f673c9f85..20c5c31aad2 100644
--- a/packages/form-code-generator-patternfly-theme/src/api/types.ts
+++ b/packages/form-code-generator-patternfly-theme/src/api/types.ts
@@ -21,6 +21,7 @@ export interface FormElement {
reactImports: string[];
pfImports: string[];
pfIconImports?: string[];
+ pfDeprecatedImports?: string[];
requiredCode: string[] | undefined;
ref: InputReference;
stateCode: string;
@@ -32,6 +33,7 @@ abstract class AbstractFormElement implements FormElement {
jsxCode: string;
pfImports: string[];
pfIconImports?: string[];
+ pfDeprecatedImports?: string[];
reactImports: string[];
requiredCode: string[] | undefined;
ref: InputReference;
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
index 4ed4e2b0fd2..21055fc6b4e 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
@@ -46,12 +46,14 @@ const AutoForm: React.FC<AutoFormProps> = (props) => {
let pfImports: string[] = [];
let pfIconImports: string[] = [];
+ let pfDeprecatedImports: string[] = [];
let reactImports: string[] = ["useCallback", "useEffect"];
let staticCodeArray: string[] = [];
inputs.forEach((input) => {
pfImports = union(pfImports, input.pfImports);
pfIconImports = union(pfIconImports, input.pfIconImports);
+ pfDeprecatedImports = union(pfDeprecatedImports,
input.pfDeprecatedImports);
reactImports = union(reactImports, input.reactImports);
staticCodeArray = union(staticCodeArray, input.requiredCode);
});
@@ -65,6 +67,7 @@ const AutoForm: React.FC<AutoFormProps> = (props) => {
import React, { ${reactImports.join(", ")} } from "react";
import { ${pfImports.join(", ")} } from "@patternfly/react-core";
${pfIconImports.length > 0 ? `import { ${pfIconImports.join(", ")} } from
"@patternfly/react-icons";` : ""}
+${pfDeprecatedImports.length > 0 ? `import { ${pfDeprecatedImports.join(", ")}
} from "@patternfly/react-core/deprecated";` : ""}
const ${formName}: React.FC<any> = ( props:any ) => {
const [formApi, setFormApi] = useState<any>();
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx
index 7885b2353f3..64962550186 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx
@@ -46,7 +46,7 @@ const Bool: React.FC<BoolFieldProps> = (props:
BoolFieldProps) => {
id={'${props.id}'}
name={${props.itemProps?.isListItem ? getListItemName({ itemProps:
props.itemProps, name: props.name }) : `'${props.name}'`}}
label={'${props.label}'}
- onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name }) : ref.stateSetter}}
+ onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name }) : `(e, newValue) =>
${ref.stateSetter}(newValue)`}}
/>
</FormGroup>`;
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/DateField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/DateField.tsx
index 5e0283294bc..ce3ca019ffc 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/DateField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/DateField.tsx
@@ -55,7 +55,7 @@ const Date: React.FC<DateFieldProps> = (props:
DateFieldProps) => {
const { itemName, isNested } = getItemNameAndWithIsNested(props.name);
const propertyPath =
props.itemProps?.listStateName.split(".").splice(1).join(".");
const path =
`${propertyPath}[${props.itemProps?.indexVariableName}]${isNested ?
`.${itemName}` : ""}`;
- return `newDate => {
+ return `(e, newDate) => {
${props.itemProps?.listStateSetter}(prev => {
if (newDate) {
const newState = [...prev];
@@ -73,7 +73,7 @@ const Date: React.FC<DateFieldProps> = (props:
DateFieldProps) => {
})
}`;
}
- return `newDate => {
+ return `(e, newDate) => {
${ref.stateSetter}(prev => {
if (newDate) {
const newDate = new Date(newDate);
@@ -95,7 +95,7 @@ const Date: React.FC<DateFieldProps> = (props:
DateFieldProps) => {
const { itemName, isNested } = getItemNameAndWithIsNested(props.name);
const propertyPath =
props.itemProps?.listStateName.split(".").splice(1).join(".");
const path =
`${propertyPath}[${props.itemProps?.indexVariableName}]${isNested ?
`.${itemName}` : ""}`;
- return `(time, hours?, minutes?) =>
${props.itemProps?.listStateSetter}(prev => {
+ return `(e, time, hours?, minutes?) =>
${props.itemProps?.listStateSetter}(prev => {
const newState = [...prev];
const currentDate = newState${path}
if (currentDate) {
@@ -117,7 +117,7 @@ const Date: React.FC<DateFieldProps> = (props:
DateFieldProps) => {
return prev;
})`;
}
- return `(time, hours?, minutes?) => {
+ return `(e, time, hours?, minutes?) => {
${ref.stateSetter}(prev => {
if (prev) {
const newDate = new Date(Date.parse(prev));
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx
index 9b457afc198..9cbcc725a4c 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx
@@ -200,6 +200,7 @@ const List: React.FC<ListFieldProps> = (props:
ListFieldProps) => {
ref,
pfImports: [...new Set(["Split", "SplitItem", "Button",
...(listItem?.pfImports ?? [])])],
pfIconImports: [...new Set(["PlusCircleIcon", "MinusCircleIcon",
...(listItem?.pfIconImports ?? [])])],
+ pfDeprecatedImports: [...new Set([...(listItem?.pfDeprecatedImports ??
[])])],
reactImports: [...new Set([...(listItem?.reactImports ?? [])])],
requiredCode: [...new Set([...(listItem?.requiredCode ?? [])])],
jsxCode,
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
index a26c3907e19..ea349b736e7 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
@@ -51,6 +51,7 @@ const Nest: React.FunctionComponent<NestFieldProps> = ({
let pfImports: string[] = ["Card", "CardBody"];
let pfIconImports: string[] = [];
+ let pfDeprecatedImports: string[] = [];
let reactImports: string[] = [];
let requiredCode: string[] = [];
@@ -68,6 +69,7 @@ const Nest: React.FunctionComponent<NestFieldProps> = ({
}
pfImports = union(pfImports, renderedInput.pfImports);
pfIconImports = union(pfIconImports, renderedInput.pfIconImports);
+ pfDeprecatedImports = union(pfDeprecatedImports,
renderedInput.pfDeprecatedImports);
reactImports = union(reactImports, renderedInput.reactImports);
if (renderedInput.requiredCode) {
requiredCode = union(requiredCode, renderedInput.requiredCode);
@@ -90,6 +92,7 @@ const Nest: React.FunctionComponent<NestFieldProps> = ({
const rendered: InputsContainer = {
pfImports,
pfIconImports,
+ pfDeprecatedImports,
reactImports,
requiredCode,
stateCode,
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx
index 6f82c4e7267..936ae9b3f8f 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx
@@ -53,7 +53,7 @@ const Num: React.FC<NumFieldProps> = (props: NumFieldProps)
=> {
placeholder={'${props.placeholder}'}
step={${props.decimal ? 0.01 : 1}} ${max} ${min}
value={${props.itemProps?.isListItem ? getListItemValue({ itemProps:
props.itemProps, name: props.name }) : ref.stateName}}
- onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name, callback: (value: string) =>
`Number(${value})` }) : `(newValue) => ${ref.stateSetter}(Number(newValue))`}}
+ onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name, callback: (value: string) =>
`Number(${value})` }) : `(e, newValue) =>
${ref.stateSetter}(Number(newValue))`}}
/>`;
const element: FormInput = buildDefaultInputElement({
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/SelectField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/SelectField.tsx
index 84e48cf4587..8ea860445db 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/SelectField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/SelectField.tsx
@@ -29,7 +29,6 @@ import {
getListItemValue,
ListItemProps,
} from "./rendering/ListItemField";
-import { REFUSED } from "dns";
export type SelectInputProps = HTMLFieldProps<
string | string[],
@@ -41,8 +40,6 @@ export type SelectInputProps = HTMLFieldProps<
}
>;
-export const SELECT_IMPORTS: string[] = ["SelectOption", "SelectOptionObject",
"Select", "SelectVariant", "FormGroup"];
-
const Select: React.FC<SelectInputProps> = (props: SelectInputProps) => {
const isArray: boolean = props.fieldType === Array;
@@ -225,7 +222,8 @@ const Select: React.FC<SelectInputProps> = (props:
SelectInputProps) => {
const element: FormInput = {
ref,
- pfImports: SELECT_IMPORTS,
+ pfImports: ["FormGroup"],
+ pfDeprecatedImports: ["SelectOption", "SelectOptionObject", "Select",
"SelectVariant"],
reactImports: ["useState"],
jsxCode,
requiredCode: undefined,
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx
index eee5e60dc34..7f93b065801 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx
@@ -47,8 +47,8 @@ const Text: React.FC<TextFieldProps> = (props:
TextFieldProps) => {
id={'date-picker-${props.id}'}
isDisabled={${props.disabled || false}}
name={${props.itemProps?.isListItem ? getListItemName({ itemProps:
props.itemProps, name: props.name }) : `'${props.name}'`}}
- onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name, callback: (value: string) =>
`onDateChange(${value}, ${ref.stateSetter}, ${ref.stateName})` }) : `newDate
=> onDateChange(newDate, ${ref.stateSetter}, ${ref.stateName})`}}
value={${props.itemProps?.isListItem ?
`parseDate(${getListItemValue({ itemProps: props.itemProps, name: props.name
})})` : `parseDate(${ref.stateName})`}}
+ onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name, callback: (value: string) =>
`onDateChange(${value}, ${ref.stateSetter}, ${ref.stateName})` }) : `(e,
newDate) => onDateChange(newDate, ${ref.stateSetter}, ${ref.stateName})`}}
/>`;
return buildDefaultInputElement({
pfImports: ["DatePicker"],
@@ -73,7 +73,7 @@ const Text: React.FC<TextFieldProps> = (props:
TextFieldProps) => {
placeholder={'${props.placeholder}'}
type={'${props.type || "text"}'}
value={${props.itemProps?.isListItem ? getListItemValue({ itemProps:
props.itemProps, name: props.name }) : ref.stateName}}
- onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name }) : ref.stateSetter}}
+ onChange={${props.itemProps?.isListItem ? getListItemOnChange({
itemProps: props.itemProps, name: props.name }) : `(e, newValue) =>
${ref.stateSetter}(newValue)`}}
/>`;
return buildDefaultInputElement({
diff --git
a/packages/form-code-generator-patternfly-theme/src/uniforms/rendering/ListItemField.tsx
b/packages/form-code-generator-patternfly-theme/src/uniforms/rendering/ListItemField.tsx
index c8c3ba7fec6..c26e515cfa5 100644
---
a/packages/form-code-generator-patternfly-theme/src/uniforms/rendering/ListItemField.tsx
+++
b/packages/form-code-generator-patternfly-theme/src/uniforms/rendering/ListItemField.tsx
@@ -103,7 +103,7 @@ export const getListItemOnChange = ({
}) => {
const { itemName, isNested } = getItemNameAndWithIsNested(name);
const propertyPath = itemProps?.listStateName.split(".").splice(1).join(".");
- return `${overrideParam ? overrideParam : "newValue"} => {
+ return `(e, ${overrideParam ? overrideParam : "newValue"}) => {
${itemProps?.listStateSetter}(s => {
const newState = [...s];
newState${propertyPath}[${itemProps?.indexVariableName}]${isNested ?
`.${itemName}` : ""} = ${callback ? callback(overrideNewValue ?
overrideNewValue : "newValue") : overrideNewValue ? overrideNewValue :
"newValue"};
diff --git
a/packages/form-code-generator-patternfly-theme/tests/AutoField.test.tsx
b/packages/form-code-generator-patternfly-theme/tests/AutoField.test.tsx
index 9acec4d43a5..88d8d7478c2 100644
--- a/packages/form-code-generator-patternfly-theme/tests/AutoField.test.tsx
+++ b/packages/form-code-generator-patternfly-theme/tests/AutoField.test.tsx
@@ -22,7 +22,6 @@ import SimpleSchema from "simpl-schema";
import { renderField } from "./_render";
import { AutoField } from "../src/uniforms";
import { DATE_FUNCTIONS } from "../src/uniforms/staticCode/staticCodeBlocks";
-import { SELECT_IMPORTS } from "../src/uniforms/SelectField";
const schema = {
name: { type: String },
@@ -144,16 +143,24 @@ describe("<AutoField> tests", () => {
it("<SelectField> - single value rendering", () => {
const { formElement } = doRenderField("selectRole");
- expect(formElement.pfImports).toHaveLength(SELECT_IMPORTS.length);
- SELECT_IMPORTS.forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ expect(formElement.pfImports).toHaveLength(1);
+ expect(formElement.pfDeprecatedImports).toHaveLength(4);
+ ["FormGroup"].forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ ["SelectOption", "SelectOptionObject", "Select",
"SelectVariant"].forEach((pfImport) =>
+ expect(formElement.pfDeprecatedImports).toContain(pfImport)
+ );
});
it("<SelectField> - multiple value rendering", () => {
const { formElement } = doRenderField("otherPositions");
expect(formElement.reactImports).toContain("useState");
- expect(formElement.pfImports).toHaveLength(SELECT_IMPORTS.length);
- SELECT_IMPORTS.forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ expect(formElement.pfImports).toHaveLength(1);
+ expect(formElement.pfDeprecatedImports).toHaveLength(4);
+ ["FormGroup"].forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ ["SelectOption", "SelectOptionObject", "Select",
"SelectVariant"].forEach((pfImport) =>
+ expect(formElement.pfDeprecatedImports).toContain(pfImport)
+ );
});
it("<TextField> - TextInput rendering", () => {
diff --git
a/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx
b/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx
index 4ea21c23f37..bb080dea69e 100644
--- a/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx
+++ b/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx
@@ -78,10 +78,6 @@ describe("<ListField> tests", () => {
"CardBody",
"TextInput",
"FormGroup",
- "SelectOption",
- "SelectOptionObject",
- "Select",
- "SelectVariant",
"Checkbox",
"DatePicker",
"Flex",
@@ -89,6 +85,12 @@ describe("<ListField> tests", () => {
"InputGroup",
"TimePicker",
]);
+ expect(inputContainer.pfDeprecatedImports).toStrictEqual([
+ "SelectOption",
+ "SelectOptionObject",
+ "Select",
+ "SelectVariant",
+ ]);
expect(inputContainer.pfIconImports).toStrictEqual(["PlusCircleIcon",
"MinusCircleIcon"]);
expect(inputContainer.requiredCode).not.toBeUndefined();
diff --git
a/packages/form-code-generator-patternfly-theme/tests/NestField.test.tsx
b/packages/form-code-generator-patternfly-theme/tests/NestField.test.tsx
index 6032482f174..0c6308691e9 100644
--- a/packages/form-code-generator-patternfly-theme/tests/NestField.test.tsx
+++ b/packages/form-code-generator-patternfly-theme/tests/NestField.test.tsx
@@ -58,13 +58,15 @@ describe("<NestField> tests", () => {
"CardBody",
"TextInput",
"FormGroup",
+ "Split",
+ "SplitItem",
+ "Button",
+ ]);
+ expect(inputContainer.pfDeprecatedImports).toStrictEqual([
"SelectOption",
"SelectOptionObject",
"Select",
"SelectVariant",
- "Split",
- "SplitItem",
- "Button",
]);
expect(inputContainer.pfIconImports).toStrictEqual(["PlusCircleIcon",
"MinusCircleIcon"]);
expect(inputContainer.childRefs).toHaveLength(4);
diff --git
a/packages/form-code-generator-patternfly-theme/tests/SelectField.test.tsx
b/packages/form-code-generator-patternfly-theme/tests/SelectField.test.tsx
index e7ea63407ec..db02320e677 100644
--- a/packages/form-code-generator-patternfly-theme/tests/SelectField.test.tsx
+++ b/packages/form-code-generator-patternfly-theme/tests/SelectField.test.tsx
@@ -21,7 +21,6 @@ import * as React from "react";
import { renderField } from "./_render";
import { SelectField } from "../src/uniforms";
import { NS_SEPARATOR } from "../src/uniforms/utils/Utils";
-import { SELECT_IMPORTS } from "../src/uniforms/SelectField";
describe("<SelectField> tests", () => {
it("<SelectField> - single value rendering", () => {
@@ -44,8 +43,12 @@ describe("<SelectField> tests", () => {
expect(formElement.jsxCode).toMatchSnapshot();
expect(formElement.reactImports).toContain("useState");
- expect(formElement.pfImports).toHaveLength(SELECT_IMPORTS.length);
- SELECT_IMPORTS.forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ expect(formElement.pfImports).toHaveLength(1);
+ expect(formElement.pfDeprecatedImports).toHaveLength(4);
+ ["FormGroup"].forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ ["SelectOption", "SelectOptionObject", "Select",
"SelectVariant"].forEach((pfImport) =>
+ expect(formElement.pfDeprecatedImports).toContain(pfImport)
+ );
expect(formElement.ref.binding).toBe(props.name);
expect(formElement.ref.stateName).toBe(props.name);
@@ -93,8 +96,12 @@ describe("<SelectField> tests", () => {
expect(formElement.jsxCode).toMatchSnapshot();
expect(formElement.reactImports).toContain("useState");
- expect(formElement.pfImports).toHaveLength(SELECT_IMPORTS.length);
- SELECT_IMPORTS.forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ expect(formElement.pfImports).toHaveLength(1);
+ expect(formElement.pfDeprecatedImports).toHaveLength(4);
+ ["FormGroup"].forEach((pfImport) =>
expect(formElement.pfImports).toContain(pfImport));
+ ["SelectOption", "SelectOptionObject", "Select",
"SelectVariant"].forEach((pfImport) =>
+ expect(formElement.pfDeprecatedImports).toContain(pfImport)
+ );
expect(formElement.ref.binding).toBe(props.name);
expect(formElement.ref.stateName).toBe(props.name);
diff --git
a/packages/form-code-generator-patternfly-theme/tests/TextField.test.tsx
b/packages/form-code-generator-patternfly-theme/tests/TextField.test.tsx
index 48b8e4b137c..11e3f370fb2 100644
--- a/packages/form-code-generator-patternfly-theme/tests/TextField.test.tsx
+++ b/packages/form-code-generator-patternfly-theme/tests/TextField.test.tsx
@@ -103,7 +103,7 @@ describe("<TextField> tests", () => {
expect(formElement.jsxCode).toContain(`name={'${props.name}'}`);
expect(formElement.jsxCode).toContain("isDisabled={false}");
expect(formElement.jsxCode).toContain(
- `onChange={newDate => onDateChange(newDate,
${formElement.ref.stateSetter}, ${formElement.ref.stateName})}`
+ `onChange={(e, newDate) => onDateChange(newDate,
${formElement.ref.stateSetter}, ${formElement.ref.stateName})}`
);
expect(formElement.jsxCode).toContain(`value={parseDate(${formElement.ref.stateName})}`);
expect(formElement.stateCode).not.toBeNull();
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
index 4e206c92073..aea1c4bf4ba 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
@@ -8,10 +8,6 @@ import {
CardBody,
TextInput,
FormGroup,
- SelectOption,
- SelectOptionObject,
- Select,
- SelectVariant,
Checkbox,
Radio,
DatePicker,
@@ -24,6 +20,12 @@ import {
Button,
} from '@patternfly/react-core';
import { PlusCircleIcon, MinusCircleIcon } from
'@patternfly/react-icons';
+import {
+ SelectOption,
+ SelectOptionObject,
+ Select,
+ SelectVariant,
+} from '@patternfly/react-core/deprecated';
const Form__HRInterview: React.FC<any> = (props: any) => {
const [formApi, setFormApi] = useState<any>();
const [personalData__name, set__personalData__name] =
useState<string>('');
@@ -195,7 +197,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={personalData__name}
-
onChange={set__personalData__name}
+ onChange={(e, newValue)
=> set__personalData__name(newValue)}
/>
</FormGroup>
<FormGroup
@@ -209,7 +211,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={personalData__email}
-
onChange={set__personalData__email}
+ onChange={(e, newValue)
=> set__personalData__email(newValue)}
/>
</FormGroup>
<Card>
@@ -228,7 +230,9 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={personalData__child__name}
-
onChange={set__personalData__child__name}
+
onChange={(e, newValue) =>
+
set__personalData__child__name(newValue)
+ }
/>
</FormGroup>
</CardBody>
@@ -251,7 +255,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={address__street}
-
onChange={set__address__street}
+ onChange={(e, newValue)
=> set__address__street(newValue)}
/>
</FormGroup>
<FormGroup
@@ -266,7 +270,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
step={1}
value={address__num}
- onChange={(newValue)
=> set__address__num(Number(newValue))}
+ onChange={(e, newValue)
=> set__address__num(Number(newValue))}
/>
</FormGroup>
<FormGroup
@@ -280,7 +284,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={address__cp}
-
onChange={set__address__cp}
+ onChange={(e, newValue)
=> set__address__cp(newValue)}
/>
</FormGroup>
<FormGroup
@@ -294,7 +298,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={address__city}
-
onChange={set__address__city}
+ onChange={(e, newValue)
=> set__address__city(newValue)}
/>
</FormGroup>
</CardBody>
@@ -478,7 +482,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
max={99}
min={18}
value={interview__age}
- onChange={(newValue)
=> set__interview__age(Number(newValue))}
+ onChange={(e, newValue)
=> set__interview__age(Number(newValue))}
/>
</FormGroup>
<FormGroup
@@ -494,7 +498,9 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
step={0.01}
max={1000.5}
value={interview__salary}
- onChange={(newValue)
=> set__interview__salary(Number(newValue))}
+ onChange={(e, newValue)
=>
+
set__interview__salary(Number(newValue))
+ }
/>
</FormGroup>
<FormGroup
@@ -561,7 +567,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
id={'uniforms-0000-000t'}
name={'interview.hire'}
label={'Hire'}
-
onChange={set__interview__hire}
+ onChange={(e, newValue)
=> set__interview__hire(newValue)}
/>
</FormGroup>
<FormGroup
@@ -575,7 +581,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
id={'date-picker-uniforms-0000-000v'}
isDisabled={false}
name={'interview.hiringDate'}
-
onChange={(newDate) => {
+
onChange={(e, newDate) => {
set__interview__hiringDate((prev) => {
if (newDate) {
const newDate = new Date(newDate);
@@ -599,7 +605,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
id={'time-picker-uniforms-0000-000v'}
isDisabled={false}
name={'interview.hiringDate'}
-
onChange={(time, hours?, minutes?) => {
+
onChange={(e, time, hours?, minutes?) => {
set__interview__hiringDate((prev) => {
if (prev) {
const newDate = new Date(Date.parse(prev));
@@ -678,7 +684,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
type={'text'}
value={friends?.[itemIndex].name}
-
onChange={(newValue) => {
+
onChange={(e, newValue) => {
set__friends((s) => {
const newState = [...s];
newState[itemIndex].name = newValue;
@@ -699,7 +705,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
placeholder={''}
step={0.01}
value={friends?.[itemIndex].age}
-
onChange={(newValue) => {
+
onChange={(e, newValue) => {
set__friends((s) => {
const newState = [...s];
newState[itemIndex].age = Number(newValue);
@@ -768,7 +774,7 @@ const Form__HRInterview: React.FC<any> = (props: any)
=> {
nested__itemIndex
]
}
-
onChange={(newValue) => {
+
onChange={(e,
newValue) => {
set__friends((s) => {
const newState = [...s];
newState[itemIndex].know[
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/BoolField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/BoolField.test.tsx.snap
index 267220257c3..c65e29beb61 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/BoolField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/BoolField.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<BoolField> tests <BoolField> - rendering - disabled
1`] = `
id={'id'}
name={'hire'}
label={'Hire?'}
- onChange={set__hire}
+ onChange={(e, newValue) => set__hire(newValue)}
/>
</FormGroup>"
`;
@@ -21,7 +21,7 @@ exports[`<BoolField> tests <BoolField> - rendering 1`] = `
id={'id'}
name={'hire'}
label={'Hire?'}
- onChange={set__hire}
+ onChange={(e, newValue) => set__hire(newValue)}
/>
</FormGroup>"
`;
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/DateField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/DateField.test.tsx.snap
index 786d51c98df..93cec0cd858 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/DateField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/DateField.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<DateField> tests <DateField> - rendering - disabled
1`] = `
id={'date-picker-id'}
isDisabled={true}
name={'birthday'}
- onChange={newDate => {
+ onChange={(e, newDate) => {
set__birthday(prev => {
if (newDate) {
const newDate = new Date(newDate);
@@ -37,7 +37,7 @@ exports[`<DateField> tests <DateField> - rendering - disabled
1`] = `
id={'time-picker-id'}
isDisabled={true}
name={'birthday'}
- onChange={(time, hours?, minutes?) => {
+ onChange={(e, time, hours?, minutes?) => {
set__birthday(prev => {
if (prev) {
const newDate = new Date(Date.parse(prev));
@@ -83,7 +83,7 @@ exports[`<DateField> tests <DateField> - rendering 1`] = `
id={'date-picker-id'}
isDisabled={false}
name={'birthday'}
- onChange={newDate => {
+ onChange={(e, newDate) => {
set__birthday(prev => {
if (newDate) {
const newDate = new Date(newDate);
@@ -104,7 +104,7 @@ exports[`<DateField> tests <DateField> - rendering 1`] = `
id={'time-picker-id'}
isDisabled={false}
name={'birthday'}
- onChange={(time, hours?, minutes?) => {
+ onChange={(e, time, hours?, minutes?) => {
set__birthday(prev => {
if (prev) {
const newDate = new Date(Date.parse(prev));
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
index ed9bd6f8b83..d896e82c1d6 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`<ListField> tests <ListField> 1`] = `
placeholder={''}
type={'text'}
value={friends?.[itemIndex].name}
- onChange={newValue => {
+ onChange={(e, newValue) => {
set__friends(s => {
const newState = [...s];
newState[itemIndex].name = newValue;
@@ -75,7 +75,7 @@ exports[`<ListField> tests <ListField> 1`] = `
placeholder={''}
step={0.01}
value={friends?.[itemIndex].age}
- onChange={newValue => {
+ onChange={(e, newValue) => {
set__friends(s => {
const newState = [...s];
newState[itemIndex].age = Number(newValue);
@@ -151,7 +151,7 @@ exports[`<ListField> tests <ListField> 1`] = `
id={'uniforms-0000-0009'}
name={\`friends.\${itemIndex}.married\`}
label={'Married'}
- onChange={newValue => {
+ onChange={(e, newValue) => {
set__friends(s => {
const newState = [...s];
newState[itemIndex].married = newValue;
@@ -213,7 +213,7 @@ exports[`<ListField> tests <ListField> 1`] = `
placeholder={''}
type={'text'}
value={friends?.[itemIndex].know?.[nested__itemIndex]}
- onChange={newValue => {
+ onChange={(e, newValue) => {
set__friends(s => {
const newState = [...s];
newState[itemIndex].know[nested__itemIndex] = newValue;
@@ -307,7 +307,7 @@ exports[`<ListField> tests <ListField> 1`] = `
id={'date-picker-uniforms-0000-000g'}
isDisabled={false}
name={\`friends.\${itemIndex}.birthday\`}
- onChange={newDate => {
+ onChange={(e, newDate) => {
set__friends(prev => {
if (newDate) {
const newState = [...prev];
@@ -330,7 +330,7 @@ exports[`<ListField> tests <ListField> 1`] = `
id={'time-picker-uniforms-0000-000g'}
isDisabled={false}
name={\`friends.\${itemIndex}.birthday\`}
- onChange={(time, hours?, minutes?) => set__friends(prev => {
+ onChange={(e, time, hours?, minutes?) => set__friends(prev => {
const newState = [...prev];
const currentDate = newState[itemIndex].birthday
if (currentDate) {
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
index 6500f7fffdb..027568e8487 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<NestField> tests <NestField> - rendering 1`] = `
placeholder={''}
type={'text'}
value={candidate__name}
- onChange={set__candidate__name}
+ onChange={(e, newValue) => set__candidate__name(newValue)}
/>
</FormGroup>
<FormGroup
@@ -32,7 +32,7 @@ exports[`<NestField> tests <NestField> - rendering 1`] = `
placeholder={''}
step={1}
value={candidate__age}
- onChange={(newValue) => set__candidate__age(Number(newValue))}
+ onChange={(e, newValue) => set__candidate__age(Number(newValue))}
/>
</FormGroup>
<FormGroup
@@ -116,7 +116,7 @@ exports[`<NestField> tests <NestField> - rendering 1`] = `
placeholder={''}
type={'text'}
value={candidate__skills?.[itemIndex].name}
- onChange={newValue => {
+ onChange={(e, newValue) => {
set__candidate__skills(s => {
const newState = [...s];
newState[itemIndex].name = newValue;
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NumField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NumField.test.tsx.snap
index c01c9799ca9..19d8f9debab 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NumField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NumField.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<NumField> tests <NumField> - decimal rendering 1`]
= `
placeholder={''}
step={0.01} max={900.5} min={400.5}
value={salary}
- onChange={(newValue) => set__salary(Number(newValue))}
+ onChange={(e, newValue) => set__salary(Number(newValue))}
/>
</FormGroup>"
`;
@@ -33,7 +33,7 @@ exports[`<NumField> tests <NumField> - integer rendering -
disabled 1`] = `
placeholder={''}
step={1} max={15} min={10}
value={age}
- onChange={(newValue) => set__age(Number(newValue))}
+ onChange={(e, newValue) => set__age(Number(newValue))}
/>
</FormGroup>"
`;
@@ -52,7 +52,7 @@ exports[`<NumField> tests <NumField> - integer rendering 1`]
= `
placeholder={''}
step={1} max={15} min={10}
value={age}
- onChange={(newValue) => set__age(Number(newValue))}
+ onChange={(e, newValue) => set__age(Number(newValue))}
/>
</FormGroup>"
`;
diff --git
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/TextField.test.tsx.snap
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/TextField.test.tsx.snap
index 6acb3ce9752..52abd54ea1b 100644
---
a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/TextField.test.tsx.snap
+++
b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/TextField.test.tsx.snap
@@ -10,8 +10,8 @@ exports[`<TextField> tests <TextField> - DatePicker rendering
- disabled 1`] = `
id={'date-picker-id'}
isDisabled={true}
name={'name'}
- onChange={newDate => onDateChange(newDate, set__name, name)}
value={parseDate(name)}
+ onChange={(e, newDate) => onDateChange(newDate, set__name, name)}
/>
</FormGroup>"
`;
@@ -26,8 +26,8 @@ exports[`<TextField> tests <TextField> - DatePicker rendering
1`] = `
id={'date-picker-id'}
isDisabled={false}
name={'name'}
- onChange={newDate => onDateChange(newDate, set__name, name)}
value={parseDate(name)}
+ onChange={(e, newDate) => onDateChange(newDate, set__name, name)}
/>
</FormGroup>"
`;
@@ -45,7 +45,7 @@ exports[`<TextField> tests <TextField> - TextInput rendering
- disabled 1`] = `
placeholder={''}
type={'text'}
value={name}
- onChange={set__name}
+ onChange={(e, newValue) => set__name(newValue)}
/>
</FormGroup>"
`;
@@ -63,7 +63,7 @@ exports[`<TextField> tests <TextField> - TextInput rendering
1`] = `
placeholder={''}
type={'text'}
value={name}
- onChange={set__name}
+ onChange={(e, newValue) => set__name(newValue)}
/>
</FormGroup>"
`;
diff --git
a/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/envelope/components/ReactFormRenderer/ReactFormRenderer.tsx
b/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/envelope/components/ReactFormRenderer/ReactFormRenderer.tsx
index 61363f8e2d8..e6ce0d75014 100644
---
a/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/envelope/components/ReactFormRenderer/ReactFormRenderer.tsx
+++
b/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/envelope/components/ReactFormRenderer/ReactFormRenderer.tsx
@@ -23,6 +23,7 @@ import { transform } from "@babel/standalone";
import ReactDOM from "react-dom";
import * as PatternflyReact from "@patternfly/react-core/dist/js";
import * as PatternflyReactIcons from "@patternfly/react-icons/dist/js";
+import * as PatternflyReactDeprecated from
"@patternfly/react-core/dist/js/deprecated";
import { FormResources } from
"@kie-tools/runtime-tools-shared-gateway-api/src/types";
import { sourceHandler } from "../../../utils";
import ResourcesContainer from "../ResourcesContainer/ResourcesContainer";
@@ -39,6 +40,7 @@ declare global {
interface Window {
PatternFlyReact: any;
PatternflyReactIcons: any;
+ PatternflyReactDeprecated: any;
PatternFly: any;
}
}
@@ -61,6 +63,7 @@ const ReactFormRenderer: React.FC<ReactFormRendererProps> =
({ source, resources
window.PatternFlyReact = PatternflyReact;
window.PatternflyReactIcons = PatternflyReactIcons;
+ window.PatternflyReactDeprecated = PatternflyReactDeprecated;
const container = document.getElementById("formContainer");
if (!container) {
@@ -73,13 +76,20 @@ const ReactFormRenderer: React.FC<ReactFormRendererProps> =
({ source, resources
container.appendChild(formContainer);
- const { reactElements, patternflyElements, patternflyIconElements,
formName, trimmedSource } =
- sourceHandler(source)!;
+ const {
+ reactElements,
+ patternflyElements,
+ patternflyIconElements,
+ patternflyDeprecatedElements,
+ formName,
+ trimmedSource,
+ } = sourceHandler(source)!;
const content = `
const {${reactElements}} = React;
const {${patternflyElements}} = PatternFlyReact;
${patternflyIconElements !== undefined ? `const
{${patternflyIconElements}} = PatternflyReactIcons;` : ""}
+ ${patternflyDeprecatedElements !== undefined ? `const
{${patternflyDeprecatedElements}} = PatternflyReactDeprecated;` : ""}
${trimmedSource}
const target = document.getElementById("${containerId}");
const element = window.React.createElement(${formName}, {});
diff --git
a/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/utils/utils.tsx
b/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/utils/utils.tsx
index 664a5614199..f306ff33cfe 100644
---
a/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/utils/utils.tsx
+++
b/packages/runtime-tools-shared-enveloped-components/src/formDisplayer/utils/utils.tsx
@@ -24,6 +24,7 @@ export const sourceHandler = (
reactElements: string;
patternflyElements: string;
patternflyIconElements: string | undefined;
+ patternflyDeprecatedElements: string | undefined;
formName: string;
trimmedSource: string;
}
@@ -48,6 +49,10 @@ export const sourceHandler = (
const patternflyIconImports = new
RegExp(patternflyIconImportsRegExp).exec(source);
const patternflyIconElements = importsReg.exec(patternflyIconImports?.[0] ??
"")?.[1];
+ const patternflyDeprecatedImportsRegExp = /import
{[^}]*}.*(?=['"]@patternfly\/react-core\/deprecated['"]).*/gim;
+ const patternflyDeprecatedImports = new
RegExp(patternflyDeprecatedImportsRegExp).exec(source);
+ const patternflyDeprecatedElements =
importsReg.exec(patternflyDeprecatedImports?.[0] ?? "")?.[1];
+
const trimmedSource = source
.split(reactImportsRegExp)
.join("")
@@ -57,6 +62,9 @@ export const sourceHandler = (
.trim()
.split(patternflyIconImportsRegExp)
.join("")
+ .trim()
+ .split(patternflyDeprecatedImportsRegExp)
+ .join("")
.trim();
const formName = trimmedSource.split(": React.FC")[0].split("const ")[1];
@@ -64,6 +72,7 @@ export const sourceHandler = (
reactElements: reactElements!,
patternflyElements: patternflyElements!,
patternflyIconElements: patternflyIconElements,
+ patternflyDeprecatedElements: patternflyDeprecatedElements,
formName,
trimmedSource,
};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
