From 5124525cf2c47d884ba9739c809affa760381310 Mon Sep 17 00:00:00 2001 From: Luiz Motta Date: Fri, 20 Dec 2024 10:51:49 -0300 Subject: [PATCH] Change BoolField, CheckBoxGroup and RadioField --- .../src/uniforms/BoolField.tsx | 8 ++++--- .../src/uniforms/CheckBoxGroupField.tsx | 22 ++++++++++++------- .../src/uniforms/ListField.tsx | 1 + .../src/uniforms/NumField.tsx | 6 ++--- .../src/uniforms/RadioField.tsx | 8 ++++--- .../src/uniforms/TextField.tsx | 12 +++++----- .../src/uniforms/rendering/ListItemField.tsx | 21 ++++++++++++++---- .../tests/CheckBoxGroupField.test.tsx | 8 +++++-- .../tests/ListField.test.tsx | 1 - .../CheckBoxGroupField.test.tsx.snap | 2 +- 10 files changed, 58 insertions(+), 31 deletions(-) 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 89418cba5b1..1e41c1081be 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/BoolField.tsx @@ -24,6 +24,7 @@ import { FormInput, InputReference } from "../api"; import { getInputReference, getStateCodeFromRef, renderField } from "./utils/Utils"; import { BOOLEAN } from "./utils/dataTypes"; +import { getListItemName, getListItemOnChange, getListItemValue, ListItemProps } from "./rendering/ListItemField"; export type BoolFieldProps = HTMLFieldProps< boolean, @@ -31,6 +32,7 @@ export type BoolFieldProps = HTMLFieldProps< { name: string; label: string; + itemProps?: ListItemProps; } >; @@ -41,12 +43,12 @@ const Bool: React.FC = (props: BoolFieldProps) => { const jsxCode = ` `; diff --git a/packages/form-code-generator-patternfly-theme/src/uniforms/CheckBoxGroupField.tsx b/packages/form-code-generator-patternfly-theme/src/uniforms/CheckBoxGroupField.tsx index 8068d37260a..330dc771efa 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/CheckBoxGroupField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/CheckBoxGroupField.tsx @@ -24,6 +24,7 @@ import { FormInput, InputReference } from "../api"; import { useAddFormElementToContext } from "./CodeGenContext"; import { CHECKBOX_GROUP_FUNCTIONS } from "./staticCode/staticCodeBlocks"; import { ARRAY } from "./utils/dataTypes"; +import { getListItemName, getListItemOnChange, getListItemValue, ListItemProps } from "./rendering/ListItemField"; export type CheckBoxGroupProps = HTMLFieldProps< string[], @@ -34,6 +35,7 @@ export type CheckBoxGroupProps = HTMLFieldProps< allowedValues?: string[]; required: boolean; transform?(value: string): string; + itemProps: ListItemProps; } >; @@ -42,14 +44,18 @@ const CheckBoxGroup: React.FC = (props: CheckBoxGroupProps) const jsxCode = props.allowedValues ?.map((value) => { - return ` handleCheckboxGroupChange('${value}', ${ref.stateName}, ${ref.stateSetter})} - value={'${value}'}/>`; + return ` handleCheckboxGroupChange('${value}', ${ref.stateName}, ${ref.stateSetter})} + value={${props.itemProps?.isListItem ? getListItemValue({ itemProps: props.itemProps, name: props.name }) : `'${value}'`}} + onChange={${props.itemProps?.isListItem ? getListItemOnChange({ itemProps: props.itemProps, name: props.name, callback: (internalValue: string) => `handleCheckboxGroupChange('${internalValue}', ${ref.stateName}, ${ref.stateSetter})`, overrideNewValue: `'${value}'` }) : `handleCheckboxGroupChange('${value}', ${ref.stateName}, ${ref.stateSetter})`}} +/>`; }) .join("\n"); 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 c6b136583ab..66527f630c5 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx @@ -115,6 +115,7 @@ const List: React.FC = (props: ListFieldProps) => { pfImports: [...new Set(["Split", "SplitItem", "Button", ...(listItem?.pfImports ?? [])])], reactImports: [...new Set([...(listItem?.reactImports ?? [])])], requiredCode: [...new Set([...(listItem?.requiredCode ?? [])])], + // requiredIcons: ["PlusCircleIcon", "MinusCircleIcon"], jsxCode, stateCode: getStateCode(ref.stateName, ref.stateSetter, "any[]", "[]"), isReadonly: props.disabled, 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 a9884f49431..abfbee312dc 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/NumField.tsx @@ -47,13 +47,13 @@ const Num: React.FC = (props: NumFieldProps) => { const inputJsxCode = ` `Number(${value})`) : `(newValue) => ${ref.stateSetter}(Number(newValue))`}} + 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))`}} />`; const element: FormInput = buildDefaultInputElement({ diff --git a/packages/form-code-generator-patternfly-theme/src/uniforms/RadioField.tsx b/packages/form-code-generator-patternfly-theme/src/uniforms/RadioField.tsx index c5363bf4d77..cdaaba713fa 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/RadioField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/RadioField.tsx @@ -23,6 +23,7 @@ import { useAddFormElementToContext } from "./CodeGenContext"; import { FormInput, InputReference } from "../api"; import { buildDefaultInputElement, getInputReference, renderField } from "./utils/Utils"; import { STRING } from "./utils/dataTypes"; +import { getListItemName, getListItemOnChange, getListItemValue, ListItemProps } from "./rendering/ListItemField"; export type RadioFieldProps = HTMLFieldProps< string, @@ -34,6 +35,7 @@ export type RadioFieldProps = HTMLFieldProps< allowedValues: string[]; required: boolean; disabled: boolean; + itemProps?: ListItemProps; } >; @@ -46,12 +48,12 @@ const Radio = (props: RadioFieldProps) => { const radio = ` ${ref.stateSetter}('${item}')} + onChange={${props.itemProps?.isListItem ? getListItemOnChange({ itemProps: props.itemProps, name: props.name, overrideNewValue: item }) : `() => ${ref.stateSetter}('${item}')`}} />`; radios.push(radio); }); 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 3614714661e..92303b9cd01 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/TextField.tsx @@ -46,9 +46,9 @@ const Text: React.FC = (props: TextFieldProps) => { const inputJsxCode = ` `onDateChange(${value}, ${ref.stateSetter}, ${ref.stateName})`) : `newDate => onDateChange(newDate, ${ref.stateSetter}, ${ref.stateName})`}} - value={${props.itemProps?.isListItem ? `parseDate(${getListItemValue(props.itemProps, props.name)})` : `parseDate(${ref.stateName})`}} + 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})`}} />`; return buildDefaultInputElement({ pfImports: ["DatePicker"], @@ -66,13 +66,13 @@ const Text: React.FC = (props: TextFieldProps) => { const getTextInputElement = (): FormInput => { const inputJsxCode = ``; 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 ad8c2c76dae..8cb8fd0af6f 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 @@ -45,7 +45,7 @@ function getItemNameAndWithIsNested(name: string) { * `listName.$` * `listName.${index}.itemName` */ -export const getListItemName = (itemProps: ListItemProps, name: string) => { +export const getListItemName = ({ itemProps, name }: { itemProps: ListItemProps; name: string }) => { const { itemName, isNested } = getItemNameAndWithIsNested(name); return `\`${itemProps?.listName}${isNested ? `.$\{${itemProps?.indexVariableName}}.${itemName}` : `.$\{${itemProps?.indexVariableName}}`}\``; }; @@ -55,7 +55,7 @@ export const getListItemName = (itemProps: ListItemProps, name: string) => { * `listStateName[index]` * `listStateName[index].itemName.` */ -export const getListItemValue = (itemProps: ListItemProps, name: string) => { +export const getListItemValue = ({ itemProps, name }: { itemProps: ListItemProps; name: string }) => { const { itemName, isNested } = getItemNameAndWithIsNested(name); return `${itemProps?.listStateName}[${itemProps?.indexVariableName}]${isNested ? `.${itemName}` : ""}`; }; @@ -73,9 +73,22 @@ export const getListItemValue = (itemProps: ListItemProps, name: string) => { * return newState; * );` */ -export const getListItemOnChange = (itemProps: ListItemProps, name: string, callback?: (value: string) => string) => { +export const getListItemOnChange = ({ + itemProps, + name, + callback, + overrideNewValue, +}: { + itemProps: ListItemProps; + name: string; + callback?: (value: string) => string; + overrideNewValue?: string; +}) => { const { itemName, isNested } = getItemNameAndWithIsNested(name); - return `newValue => ${itemProps?.listStateSetter}(s => { const newState = [...s]; newState[${itemProps?.indexVariableName}]${isNested ? `.${itemName}` : ""} = newValue; return ${callback ? callback("newState") : "newState"}; })`; + return ` + newValue => ${itemProps?.listStateSetter}(s => { const newState = [...s]; + newState[${itemProps?.indexVariableName}]${isNested ? `.${itemName}` : ""} = ${callback ? callback(overrideNewValue ? overrideNewValue : "newValue") : overrideNewValue ? overrideNewValue : "newValue"}; + return newState; })`; }; export interface Props { diff --git a/packages/form-code-generator-patternfly-theme/tests/CheckBoxGroupField.test.tsx b/packages/form-code-generator-patternfly-theme/tests/CheckBoxGroupField.test.tsx index 8eef0b7317e..57825df0f97 100644 --- a/packages/form-code-generator-patternfly-theme/tests/CheckBoxGroupField.test.tsx +++ b/packages/form-code-generator-patternfly-theme/tests/CheckBoxGroupField.test.tsx @@ -66,14 +66,18 @@ describe(" tests", () => { expect(formElement.jsxCode).toContain("isDisabled={false}"); props.allowedValues.forEach((value) => { - const checkbox = ` handleCheckboxGroupChange('${value}', ${formElement.ref.stateName}, ${formElement.ref.stateSetter})}` ); - expect(formElement.jsxCode).toContain(`value={'${value}'}/>`); + expect(formElement.jsxCode).toContain(`value={'${value}'}`); }); expect(formElement.stateCode).not.toBeNull(); }); 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 fcc352cbc7a..6d8a17a3448 100644 --- a/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx +++ b/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx @@ -37,7 +37,6 @@ describe(" tests", () => { const props: AutoFormProps = { id: "id", - sanitizedId: "id", schema: createSchema(schema), disabled: false, placeholder: true, diff --git a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/CheckBoxGroupField.test.tsx.snap b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/CheckBoxGroupField.test.tsx.snap index 31a949fe3cd..0977df1232c 100644 --- a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/CheckBoxGroupField.test.tsx.snap +++ b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/CheckBoxGroupField.test.tsx.snap @@ -2,6 +2,6 @@ exports[` tests - rendering 1`] = `
- {"ref":{"binding":"roles","stateName":"roles","stateSetter":"set__roles","dataType":{"name":"string[]","defaultValue":"[]"}},"pfImports":["Checkbox","FormGroup"],"reactImports":["useState"],"requiredCode":["checkbox_group_functions"],"jsxCode":"<FormGroup\\n fieldId={'id'}\\n label={'Roles'}\\n isRequired={true}\\n >\\n <Checkbox key={'id-Developer'} id={'id-Developer'} name={'roles'} aria-label={'roles'}\\n label={'Developer'} \\n isDisabled={false} \\n isChecked={roles.indexOf('Developer') != -1}\\n onChange={() => handleCheckboxGroupChange('Developer', roles, set__roles)}\\n value={'Developer'}/>\\n<Checkbox key={'id-HR'} id={'id-HR'} name={'roles'} aria-label={'roles'}\\n label={'HR'} \\n isDisabled={false} \\n isChecked={roles.indexOf('HR') != -1}\\n onChange={() => handleCheckboxGroupChange('HR', roles, set__roles)}\\n value={'HR'}/>\\n<Checkbox key={'id-UX'} id={'id-UX'} name={'roles'} aria-label={'roles'}\\n label={'UX'} \\n isDisabled={false} \\n isChecked={roles.indexOf('UX') != -1}\\n onChange={() => handleCheckboxGroupChange('UX', roles, set__roles)}\\n value={'UX'}/>\\n </FormGroup>","stateCode":"const [ roles, set__roles ] = useState<string[]>([]);","isReadonly":false} + {"ref":{"binding":"roles","stateName":"roles","stateSetter":"set__roles","dataType":{"name":"string[]","defaultValue":"[]"}},"pfImports":["Checkbox","FormGroup"],"reactImports":["useState"],"requiredCode":["checkbox_group_functions"],"jsxCode":"<FormGroup\\n fieldId={'id'}\\n label={'Roles'}\\n isRequired={true}\\n >\\n <Checkbox\\n key={'id-Developer'}\\n id={'id-Developer'}\\n name={'roles'}\\n aria-label={'roles'}\\n label={'Developer'} \\n isDisabled={false} \\n isChecked={roles.indexOf('Developer') != -1}\\n onChange={() => handleCheckboxGroupChange('Developer', roles, set__roles)}\\n value={'Developer'}\\n onChange={handleCheckboxGroupChange('Developer', roles, set__roles)}\\n/>\\n<Checkbox\\n key={'id-HR'}\\n id={'id-HR'}\\n name={'roles'}\\n aria-label={'roles'}\\n label={'HR'} \\n isDisabled={false} \\n isChecked={roles.indexOf('HR') != -1}\\n onChange={() => handleCheckboxGroupChange('HR', roles, set__roles)}\\n value={'HR'}\\n onChange={handleCheckboxGroupChange('HR', roles, set__roles)}\\n/>\\n<Checkbox\\n key={'id-UX'}\\n id={'id-UX'}\\n name={'roles'}\\n aria-label={'roles'}\\n label={'UX'} \\n isDisabled={false} \\n isChecked={roles.indexOf('UX') != -1}\\n onChange={() => handleCheckboxGroupChange('UX', roles, set__roles)}\\n value={'UX'}\\n onChange={handleCheckboxGroupChange('UX', roles, set__roles)}\\n/>\\n </FormGroup>","stateCode":"const [ roles, set__roles ] = useState<string[]>([]);","isReadonly":false}
`;