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 c44b652ee7c..778464d8538 100644 --- a/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx +++ b/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx @@ -54,12 +54,34 @@ const List: React.FC = (props: ListFieldProps) => { }, props.disabled ); + + const getNewItemProps = () => { + const typeName = listItem?.ref.dataType.name; + if (typeName?.endsWith("[]")) { + return listItem?.ref.dataType.defaultValue ?? []; + } + switch (typeName) { + case "string": + return listItem?.ref.dataType.defaultValue ?? ""; + case "number": + return listItem?.ref.dataType.defaultValue ?? null; + case "boolean": + return listItem?.ref.dataType.defaultValue ?? false; + case "object": + return listItem?.ref.dataType.defaultValue ?? {}; + default: // any + return listItem?.ref.dataType.defaultValue; + } + }; + const jsxCode = `
{'${props.label}' && ( - @@ -71,7 +93,7 @@ const List: React.FC = (props: ListFieldProps) => { style={{ paddingLeft: '0', paddingRight: '0' }} disabled={${props.maxCount === undefined ? props.disabled : `${props.disabled} || !(${props.maxCount} <= (${ref.stateName}?.length ?? -1))`}} onClick={() => { - !${props.disabled} && ${props.maxCount === undefined ? `${ref.stateSetter}((${ref.stateName} ?? []).concat([]))` : `!(${props.maxCount} <= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}((${ref.stateName} ?? []).concat([]))`}; + !${props.disabled} && ${props.maxCount === undefined ? `${ref.stateSetter}((${ref.stateName} ?? []).concat([${getNewItemProps()}]))` : `!(${props.maxCount} <= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}((${ref.stateName} ?? []).concat([]))`}; }} > @@ -95,8 +117,8 @@ const List: React.FC = (props: ListFieldProps) => { variant='plain' style={{ paddingLeft: '0', paddingRight: '0' }} onClick={() => { - const value = ${ref.stateName}!.slice(); - value.splice(${+joinName(null, "")[joinName(null, "").length - 1]}, 1); + const value = [...${ref.stateName}] + value.splice(itemIndex, 1); !${props.disabled} && ${props.minCount === undefined ? `${ref.stateSetter}(value)` : `!(${props.minCount} >= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}(value)`}; }} > 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 af519669801..77c815488ef 100644 --- a/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx +++ b/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx @@ -21,40 +21,65 @@ import * as React from "react"; import { render } from "@testing-library/react"; import createSchema from "./_createSchema"; import AutoForm, { AutoFormProps } from "../src/uniforms/AutoForm"; +import { renderField } from "./_render"; +import { ListField } from "../src/uniforms"; +import { InputsContainer } from "../src/api"; describe(" tests", () => { it("", () => { - const schema = { - friends: { type: Array }, - "friends.$": Object, - "friends.$.name": { type: String }, - "friends.$.age": { type: Number }, - "friends.$.country": { type: String, allowedValues: ["US", "Brazil"] }, - "friends.$.married": { type: Boolean }, - "friends.$.know": { - type: Array, - allowedValues: ["Java", "Node", "Docker"], - uniforms: { - checkboxes: true, - }, - }, - "friends.$.know.$": String, - "friends.$.areas": { - type: String, - allowedValues: ["Developer", "HR", "UX"], + const { container, formElement } = renderField( + ListField, + { + id: "id", + label: "Friends", + name: "friends", + disabled: false, }, - "friends.$.birthday": { type: Date }, - }; - - const props: AutoFormProps = { - id: "hiring_ITInterview", - schema: createSchema(schema), - disabled: false, - placeholder: true, - }; - - const { container } = render(); + { + friends: { type: Array }, + "friends.$": Object, + "friends.$.name": { type: String }, + "friends.$.age": { type: Number }, + "friends.$.country": { type: String, allowedValues: ["US", "Brazil"] }, + "friends.$.married": { type: Boolean }, + "friends.$.know": { + type: Array, + allowedValues: ["Java", "Node", "Docker"], + uniforms: { + checkboxes: true, + }, + }, + "friends.$.know.$": String, + "friends.$.areas": { + type: String, + allowedValues: ["Developer", "HR", "UX"], + }, + "friends.$.birthday": { type: Date }, + } + ); expect(container).toMatchSnapshot(); + + const inputContainer = formElement as InputsContainer; + expect(inputContainer.pfImports).toStrictEqual([ + "Split", + "SplitItem", + "Button", + "Card", + "CardBody", + "TextInput", + "FormGroup", + "SelectOption", + "SelectOptionObject", + "Select", + "SelectVariant", + "Checkbox", + "DatePicker", + "Flex", + "FlexItem", + "InputGroup", + "TimePicker", + ]); + expect(inputContainer.pfIconImports).toStrictEqual(["PlusCircleIcon", "MinusCircleIcon"]); }); }); 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 0cdbd7c37bf..dd5f16892ed 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 @@ -576,7 +576,13 @@ const Form__HRInterview: React.FC<any> = (props: any) => { </Card> <div fieldId={'uniforms-0000-000x'}> <Split hasGutter> - <SplitItem>{'Friends' && <label>'Friends'</label>}</SplitItem> + <SplitItem> + {'Friends' && ( + <label className={'pf-c-form__label'}> + <span className={'pf-c-form__label-text'}>Friends</span> + </label> + )} + </SplitItem> <SplitItem isFilled /> <SplitItem> <Button @@ -585,7 +591,7 @@ const Form__HRInterview: React.FC<any> = (props: any) => { style={{ paddingLeft: '0', paddingRight: '0' }} disabled={false} onClick={() => { - !false && set__friends((friends ?? []).concat([])); + !false && set__friends((friends ?? []).concat([undefined])); }}> <PlusCircleIcon color='#0088ce' /> </Button> @@ -653,8 +659,8 @@ const Form__HRInterview: React.FC<any> = (props: any) => { variant='plain' style={{ paddingLeft: '0', paddingRight: '0' }} onClick={() => { - const value = friends!.slice(); - value.splice(NaN, 1); + const value = [...friends]; + value.splice(itemIndex, 1); !false && set__friends(value); }}> <MinusCircleIcon color='#cc0000' /> 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 4d41d8194f7..32ed4d93a46 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 @@ -2,390 +2,6 @@ exports[` tests 1`] = `
- import React, { useCallback, useEffect, useState } from 'react'; -import { - Split, - SplitItem, - Button, - Card, - CardBody, - TextInput, - FormGroup, - SelectOption, - SelectOptionObject, - Select, - SelectVariant, - Checkbox, - DatePicker, - Flex, - FlexItem, - InputGroup, - TimePicker, -} from '@patternfly/react-core'; -import { PlusCircleIcon, MinusCircleIcon } from '@patternfly/react-icons'; -const Form__hiring_ITInterview: React.FC<any> = (props: any) => { - const [formApi, setFormApi] = useState<any>(); - const [friends, set__friends] = useState<any[]>([]); - /* Utility function that fills the form with the data received from the kogito runtime */ - const setFormData = (data) => { - if (!data) { - return; - } - set__friends(data?.friends ?? []); - }; - /* Utility function to generate the expected form output as a json object */ - const getFormData = useCallback(() => { - const formData: any = {}; - formData.friends = friends; - return formData; - }, [friends]); - /* Utility function to validate the form on the 'beforeSubmit' Lifecycle Hook */ - const validateForm = useCallback(() => {}, []); - /* Utility function to perform actions on the on the 'afterSubmit' Lifecycle Hook */ - const afterSubmit = useCallback((result) => {}, []); - useEffect(() => { - if (formApi) { - /* - Form Lifecycle Hook that will be executed before the form is submitted. - Throwing an error will stop the form submit. Usually should be used to validate the form. - */ - formApi.beforeSubmit = () => validateForm(); - /* - Form Lifecycle Hook that will be executed after the form is submitted. - It will receive a response object containing the \`type\` flag indicating if the submit has been successful and \`info\` with extra information about the submit result. - */ - formApi.afterSubmit = (result) => afterSubmit(result); - /* Generates the expected form output object to be posted */ - formApi.getFormData = () => getFormData(); - } - }, [getFormData, validateForm, afterSubmit]); - useEffect(() => { - /* - Call to the Kogito console form engine. It will establish the connection with the console embeding the form - and return an instance of FormAPI that will allow hook custom code into the form lifecycle. - The \`window.Form.openForm\` call expects an object with the following entries: - - onOpen: Callback that will be called after the connection with the console is established. The callback - will receive the following arguments: - - data: the data to be bound into the form - - ctx: info about the context where the form is being displayed. This will contain information such as the form JSON Schema, process/task, user... - */ - const api = window.Form.openForm({ - onOpen: (data, context) => { - setFormData(data); - }, - }); - setFormApi(api); - }, []); - return ( - <div className={'pf-c-form'}> - <div fieldId={'uniforms-0000-0001'}> - <Split hasGutter> - <SplitItem>{'Friends' && <label>'Friends'</label>}</SplitItem> - <SplitItem isFilled /> - <SplitItem> - <Button - name='$' - variant='plain' - style={{ paddingLeft: '0', paddingRight: '0' }} - disabled={false} - onClick={() => { - !false && set__friends((friends ?? []).concat([])); - }}> - <PlusCircleIcon color='#0088ce' /> - </Button> - </SplitItem> - </Split> - <div> - {friends?.map((_, itemIndex) => ( - <div - key={itemIndex} - style={{ - marginBottom: '1rem', - display: 'flex', - justifyContent: 'space-between', - }}> - <div style={{ width: '100%', marginRight: '10px' }}> - <Card> - <CardBody className='pf-c-form'> - <FormGroup - fieldId={'uniforms-0000-0004'} - label={'Name'} - isRequired={true}> - <TextInput - name={\`friends.\${itemIndex}.name\`} - id={'uniforms-0000-0004'} - isDisabled={false} - placeholder={''} - type={'text'} - value={friends[itemIndex].name} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].name = newValue; - return newState; - }); - }} - /> - </FormGroup> - <FormGroup - fieldId={'uniforms-0000-0006'} - label={'Age'} - isRequired={true}> - <TextInput - type={'number'} - name={\`friends.\${itemIndex}.age\`} - isDisabled={false} - id={'uniforms-0000-0006'} - placeholder={''} - step={0.01} - value={friends[itemIndex].age} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].age = Number(newValue); - return newState; - }); - }} - /> - </FormGroup> - <FormGroup - fieldId={'uniforms-0000-0008'} - label={'Country'} - isRequired={true}> - <Select - id={'uniforms-0000-0008'} - name={\`friends.\${itemIndex}.country\`} - variant={SelectVariant.single} - isDisabled={false} - placeholderText={''} - isOpen={friends__$__country__expanded} - selections={friends__$__country} - onToggle={(isOpen) => - set__friends__$__country__expanded(isOpen) - } - onSelect={(event, value, isPlaceHolder) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].country = handleSelect( - value, - isPlaceHolder, - friends__$__country, - set__friends__$__country, - set__friends__$__country__expanded - ); - return newState; - }); - }} - value={friends[itemIndex].country}> - <SelectOption key={'US'} value={'US'}> - US - </SelectOption> - <SelectOption key={'Brazil'} value={'Brazil'}> - Brazil - </SelectOption> - </Select> - </FormGroup> - <FormGroup fieldId='uniforms-0000-000a'> - <Checkbox - isChecked={friends[itemIndex].married} - isDisabled={false} - id={'uniforms-0000-000a'} - name={\`friends.\${itemIndex}.married\`} - label={'Married'} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].married = newValue; - return newState; - }); - }} - /> - </FormGroup> - <FormGroup - fieldId={'uniforms-0000-000c'} - label={'Know'} - isRequired={true}> - <Checkbox - key={'uniforms-0000-000c-Java'} - id={'uniforms-0000-000c-Java'} - name={\`friends.\${itemIndex}.know\`} - aria-label={'friends.$.know'} - label={'Java'} - isDisabled={false} - isChecked={friends__$__know.indexOf('Java') !== -1} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].know = - handleCheckboxGroupChange( - 'Java', - friends__$__know, - set__friends__$__know - ); - return newState; - }); - }} - value={friends[itemIndex].know} - /> - <Checkbox - key={'uniforms-0000-000c-Node'} - id={'uniforms-0000-000c-Node'} - name={\`friends.\${itemIndex}.know\`} - aria-label={'friends.$.know'} - label={'Node'} - isDisabled={false} - isChecked={friends__$__know.indexOf('Node') !== -1} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].know = - handleCheckboxGroupChange( - 'Node', - friends__$__know, - set__friends__$__know - ); - return newState; - }); - }} - value={friends[itemIndex].know} - /> - <Checkbox - key={'uniforms-0000-000c-Docker'} - id={'uniforms-0000-000c-Docker'} - name={\`friends.\${itemIndex}.know\`} - aria-label={'friends.$.know'} - label={'Docker'} - isDisabled={false} - isChecked={friends__$__know.indexOf('Docker') !== -1} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].know = - handleCheckboxGroupChange( - 'Docker', - friends__$__know, - set__friends__$__know - ); - return newState; - }); - }} - value={friends[itemIndex].know} - /> - </FormGroup> - <FormGroup - fieldId={'uniforms-0000-000e'} - label={'Areas'} - isRequired={true}> - <Select - id={'uniforms-0000-000e'} - name={\`friends.\${itemIndex}.areas\`} - variant={SelectVariant.single} - isDisabled={false} - placeholderText={''} - isOpen={friends__$__areas__expanded} - selections={friends__$__areas} - onToggle={(isOpen) => - set__friends__$__areas__expanded(isOpen) - } - onSelect={(event, value, isPlaceHolder) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].areas = handleSelect( - value, - isPlaceHolder, - friends__$__areas, - set__friends__$__areas, - set__friends__$__areas__expanded - ); - return newState; - }); - }} - value={friends[itemIndex].areas}> - <SelectOption key={'Developer'} value={'Developer'}> - Developer - </SelectOption> - <SelectOption key={'HR'} value={'HR'}> - HR - </SelectOption> - <SelectOption key={'UX'} value={'UX'}> - UX - </SelectOption> - </Select> - </FormGroup> - <FormGroup - fieldId={'uniforms-0000-000g'} - label={'Birthday'} - isRequired={true}> - <Flex - direction={{ default: 'column' }} - id={'uniforms-0000-000g'}> - <FlexItem> - <InputGroup style={{ background: 'transparent' }}> - <DatePicker - id={'date-picker-uniforms-0000-000g'} - isDisabled={false} - name={\`friends.\${itemIndex}.birthday\`} - onChange={(newValue) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].birthday = onDateChange( - newValue, - set__friends__$__birthday, - friends__$__birthday - ); - return newState; - }); - }} - value={parseDate(friends[itemIndex].birthday)} - /> - <TimePicker - id={'time-picker-uniforms-0000-000g'} - isDisabled={false} - name={\`friends.\${itemIndex}.birthday\`} - onChange={(time, hours?, minutes?) => { - set__friends((s) => { - const newState = [...s]; - newState[itemIndex].birthday = onTimeChange( - time, - set__friends__$__birthday, - friends__$__birthday, - hours, - minutes - ); - return newState; - }); - }} - style={{ width: '120px' }} - time={parseTime(friends[itemIndex].birthday)} - /> - </InputGroup> - </FlexItem> - </Flex> - </FormGroup> - </CardBody> - </Card> - </div> - <div> - <Button - disabled={false} - variant='plain' - style={{ paddingLeft: '0', paddingRight: '0' }} - onClick={() => { - const value = friends!.slice(); - value.splice(NaN, 1); - !false && set__friends(value); - }}> - <MinusCircleIcon color='#cc0000' /> - </Button> - </div> - </div> - ))} - </div> - </div> - </div> - ); -}; -export default Form__hiring_ITInterview; - + {"ref":{"binding":"friends","stateName":"friends","stateSetter":"set__friends","dataType":{"name":"string[]","defaultValue":"[]"}},"pfImports":["Split","SplitItem","Button","Card","CardBody","TextInput","FormGroup","SelectOption","SelectOptionObject","Select","SelectVariant","Checkbox","DatePicker","Flex","FlexItem","InputGroup","TimePicker"],"pfIconImports":["PlusCircleIcon","MinusCircleIcon"],"reactImports":["useState"],"jsxCode":"<div fieldId={'id'}>\\n <Split hasGutter>\\n <SplitItem>\\n {'Friends' && (\\n <label className={\\"pf-c-form__label\\"}>\\n <span className={\\"pf-c-form__label-text\\"}>\\n Friends\\n </span>\\n </label>\\n )}\\n </SplitItem>\\n <SplitItem isFilled />\\n <SplitItem>\\n <Button\\n name='$'\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n disabled={false}\\n onClick={() => {\\n !false && set__friends((friends ?? []).concat([undefined]));\\n }}\\n >\\n <PlusCircleIcon color='#0088ce' />\\n </Button>\\n </SplitItem>\\n </Split>\\n <div>\\n {friends?.map((_, itemIndex) =>\\n (<div\\n key={itemIndex}\\n style={{\\n marginBottom: '1rem',\\n display: 'flex',\\n justifyContent: 'space-between',\\n }}\\n >\\n <div style={{ width: '100%', marginRight: '10px' }}><Card>\\n <CardBody className=\\"pf-c-form\\">\\n \\n <FormGroup\\n fieldId={'uniforms-0000-0003'}\\n label={'Name'}\\n isRequired={true}\\n >\\n <TextInput\\n name={\`friends.\${itemIndex}.name\`}\\n id={'uniforms-0000-0003'}\\n isDisabled={false}\\n placeholder={''}\\n type={'text'}\\n value={friends[itemIndex].name}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].name = newValue;\\n return newState;\\n })\\n }}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0005'}\\n label={'Age'}\\n isRequired={true}\\n >\\n <TextInput\\n type={'number'}\\n name={\`friends.\${itemIndex}.age\`}\\n isDisabled={false}\\n id={'uniforms-0000-0005'}\\n placeholder={''}\\n step={0.01} \\n value={friends[itemIndex].age}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].age = Number(newValue);\\n return newState;\\n })\\n }}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0007'}\\n label={'Country'}\\n isRequired={true}\\n ><Select\\n id={'uniforms-0000-0007'}\\n name={\`friends.\${itemIndex}.country\`}\\n variant={SelectVariant.single}\\n isDisabled={false}\\n placeholderText={''}\\n isOpen={friends__$__country__expanded}\\n selections={friends__$__country}\\n onToggle={(isOpen) => set__friends__$__country__expanded(isOpen)}\\n onSelect={\\n (event, value, isPlaceHolder) => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].country = handleSelect(value, isPlaceHolder, friends__$__country, set__friends__$__country, set__friends__$__country__expanded);\\n return newState;\\n })\\n }}\\n value={friends[itemIndex].country}\\n >\\n <SelectOption key={'US'} value={'US'}>US</SelectOption>\\n<SelectOption key={'Brazil'} value={'Brazil'}>Brazil</SelectOption>\\n </Select></FormGroup>\\n<FormGroup fieldId='uniforms-0000-0009'>\\n <Checkbox\\n isChecked={friends[itemIndex].married}\\n isDisabled={false}\\n id={'uniforms-0000-0009'}\\n name={\`friends.\${itemIndex}.married\`}\\n label={'Married'}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].married = newValue;\\n return newState;\\n })\\n }}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-000b'}\\n label={'Know'}\\n isRequired={true}\\n >\\n <Checkbox\\n key={'uniforms-0000-000b-Java'}\\n id={'uniforms-0000-000b-Java'}\\n name={\`friends.\${itemIndex}.know\`}\\n aria-label={'friends.$.know'}\\n label={'Java'} \\n isDisabled={false} \\n isChecked={friends__$__know.indexOf('Java') !== -1}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].know = handleCheckboxGroupChange('Java', friends__$__know, set__friends__$__know);\\n return newState;\\n })\\n }}\\n value={friends[itemIndex].know}\\n/>\\n<Checkbox\\n key={'uniforms-0000-000b-Node'}\\n id={'uniforms-0000-000b-Node'}\\n name={\`friends.\${itemIndex}.know\`}\\n aria-label={'friends.$.know'}\\n label={'Node'} \\n isDisabled={false} \\n isChecked={friends__$__know.indexOf('Node') !== -1}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].know = handleCheckboxGroupChange('Node', friends__$__know, set__friends__$__know);\\n return newState;\\n })\\n }}\\n value={friends[itemIndex].know}\\n/>\\n<Checkbox\\n key={'uniforms-0000-000b-Docker'}\\n id={'uniforms-0000-000b-Docker'}\\n name={\`friends.\${itemIndex}.know\`}\\n aria-label={'friends.$.know'}\\n label={'Docker'} \\n isDisabled={false} \\n isChecked={friends__$__know.indexOf('Docker') !== -1}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].know = handleCheckboxGroupChange('Docker', friends__$__know, set__friends__$__know);\\n return newState;\\n })\\n }}\\n value={friends[itemIndex].know}\\n/>\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-000d'}\\n label={'Areas'}\\n isRequired={true}\\n ><Select\\n id={'uniforms-0000-000d'}\\n name={\`friends.\${itemIndex}.areas\`}\\n variant={SelectVariant.single}\\n isDisabled={false}\\n placeholderText={''}\\n isOpen={friends__$__areas__expanded}\\n selections={friends__$__areas}\\n onToggle={(isOpen) => set__friends__$__areas__expanded(isOpen)}\\n onSelect={\\n (event, value, isPlaceHolder) => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].areas = handleSelect(value, isPlaceHolder, friends__$__areas, set__friends__$__areas, set__friends__$__areas__expanded);\\n return newState;\\n })\\n }}\\n value={friends[itemIndex].areas}\\n >\\n <SelectOption key={'Developer'} value={'Developer'}>Developer</SelectOption>\\n<SelectOption key={'HR'} value={'HR'}>HR</SelectOption>\\n<SelectOption key={'UX'} value={'UX'}>UX</SelectOption>\\n </Select></FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-000f'}\\n label={'Birthday'}\\n isRequired={true}\\n >\\n <Flex\\n direction={{ default: 'column' }}\\n id={'uniforms-0000-000f'}\\n >\\n <FlexItem>\\n <InputGroup style={{ background: 'transparent' }}>\\n <DatePicker\\n id={'date-picker-uniforms-0000-000f'}\\n isDisabled={false}\\n name={\`friends.\${itemIndex}.birthday\`}\\n onChange={\\n newValue => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].birthday = onDateChange(newValue, set__friends__$__birthday, friends__$__birthday);\\n return newState;\\n })\\n }}\\n value={parseDate(friends[itemIndex].birthday)}\\n />\\n <TimePicker\\n id={'time-picker-uniforms-0000-000f'}\\n isDisabled={false}\\n name={\`friends.\${itemIndex}.birthday\`}\\n onChange={\\n (time, hours?, minutes?) => {\\n set__friends(s => {\\n const newState = [...s];\\n newState[itemIndex].birthday = onTimeChange(time, set__friends__$__birthday, friends__$__birthday, hours, minutes);\\n return newState;\\n })\\n }}\\n style={{ width: '120px' }}\\n time={parseTime(friends[itemIndex].birthday)}\\n />\\n </InputGroup>\\n </FlexItem>\\n </Flex>\\n </FormGroup>\\n </CardBody></Card></div>\\n <div>\\n <Button\\n disabled={false}\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n onClick={() => {\\n const value = [...friends]\\n value.splice(itemIndex, 1);\\n !false && set__friends(value);\\n }}\\n >\\n <MinusCircleIcon color='#cc0000' />\\n </Button>\\n </div>\\n </div>)\\n )}\\n </div>\\n </div>","stateCode":"const [ friends, set__friends ] = useState<any[]>([]);","isReadonly":false}
`; 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 6f436a0bb54..584144adea1 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 @@ -2,6 +2,6 @@ exports[` tests - rendering 1`] = `
- {"pfImports":["Card","CardBody","TextInput","FormGroup","SelectOption","SelectOptionObject","Select","SelectVariant","Split","SplitItem","Button"],"pfIconImports":["PlusCircleIcon","MinusCircleIcon"],"reactImports":["useState"],"requiredCode":["select_functions"],"stateCode":"const [ candidate__name, set__candidate__name ] = useState<string>(\\"\\");\\nconst [ candidate__age, set__candidate__age ] = useState<number>();\\nconst [ candidate__role, set__candidate__role ] = useState<string>(\\"\\");\\nconst [ candidate__role__expanded, set__candidate__role__expanded ] = useState<boolean>(false);\\nconst [ candidate__skills, set__candidate__skills ] = useState<any[]>([]);","jsxCode":"<Card>\\n <CardBody className=\\"pf-c-form\\">\\n <label><b>Candidate</b></label>\\n <FormGroup\\n fieldId={'uniforms-0000-0001'}\\n label={'Name'}\\n isRequired={true}\\n >\\n <TextInput\\n name={'candidate.name'}\\n id={'uniforms-0000-0001'}\\n isDisabled={false}\\n placeholder={''}\\n type={'text'}\\n value={candidate__name}\\n onChange={set__candidate__name}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0003'}\\n label={'Age'}\\n isRequired={true}\\n >\\n <TextInput\\n type={'number'}\\n name={'candidate.age'}\\n isDisabled={false}\\n id={'uniforms-0000-0003'}\\n placeholder={''}\\n step={1} \\n value={candidate__age}\\n onChange={(newValue) => set__candidate__age(Number(newValue))}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0005'}\\n label={'Role'}\\n isRequired={true}\\n ><Select\\n id={'uniforms-0000-0005'}\\n name={'candidate.role'}\\n variant={SelectVariant.single}\\n isDisabled={false}\\n placeholderText={''}\\n isOpen={candidate__role__expanded}\\n selections={candidate__role}\\n onToggle={(isOpen) => set__candidate__role__expanded(isOpen)}\\n onSelect={(event, value, isPlaceHolder) => handleSelect(value, isPlaceHolder, candidate__role, set__candidate__role, set__candidate__role__expanded)}\\n value={candidate__role}\\n >\\n <SelectOption key={'Developer'} value={'Developer'}>Developer</SelectOption>\\n<SelectOption key={'HR'} value={'HR'}>HR</SelectOption>\\n<SelectOption key={'UX'} value={'UX'}>UX</SelectOption>\\n </Select></FormGroup>\\n<div fieldId={'uniforms-0000-0007'}>\\n <Split hasGutter>\\n <SplitItem>\\n {'Skills' && (\\n <label>\\n 'Skills'\\n </label>\\n )}\\n </SplitItem>\\n <SplitItem isFilled />\\n <SplitItem>\\n <Button\\n name='$'\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n disabled={false}\\n onClick={() => {\\n !false && set__candidate__skills((candidate__skills ?? []).concat([]));\\n }}\\n >\\n <PlusCircleIcon color='#0088ce' />\\n </Button>\\n </SplitItem>\\n </Split>\\n <div>\\n {candidate__skills?.map((_, itemIndex) =>\\n (<div\\n key={itemIndex}\\n style={{\\n marginBottom: '1rem',\\n display: 'flex',\\n justifyContent: 'space-between',\\n }}\\n >\\n <div style={{ width: '100%', marginRight: '10px' }}><Card>\\n <CardBody className=\\"pf-c-form\\">\\n \\n <FormGroup\\n fieldId={'uniforms-0000-000a'}\\n label={'Name'}\\n isRequired={true}\\n >\\n <TextInput\\n name={\`candidate.skills.\${itemIndex}.name\`}\\n id={'uniforms-0000-000a'}\\n isDisabled={false}\\n placeholder={''}\\n type={'text'}\\n value={candidate__skills[itemIndex].name}\\n onChange={\\n newValue => {\\n set__candidate__skills(s => {\\n const newState = [...s];\\n newState[itemIndex].name = newValue;\\n return newState;\\n })\\n }}\\n />\\n </FormGroup>\\n </CardBody></Card></div>\\n <div>\\n <Button\\n disabled={false}\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n onClick={() => {\\n const value = candidate__skills!.slice();\\n value.splice(NaN, 1);\\n !false && set__candidate__skills(value);\\n }}\\n >\\n <MinusCircleIcon color='#cc0000' />\\n </Button>\\n </div>\\n </div>)\\n )}\\n </div>\\n </div>\\n </CardBody></Card>","ref":{"binding":"candidate","stateName":"candidate","stateSetter":"set__candidate","dataType":{"name":"any"}},"childRefs":[{"binding":"candidate.name","stateName":"candidate__name","stateSetter":"set__candidate__name","dataType":{"name":"string","defaultValue":"\\"\\""}},{"binding":"candidate.age","stateName":"candidate__age","stateSetter":"set__candidate__age","dataType":{"name":"number"}},{"binding":"candidate.role","stateName":"candidate__role","stateSetter":"set__candidate__role","dataType":{"name":"string","defaultValue":"\\"\\""}},{"binding":"candidate.skills","stateName":"candidate__skills","stateSetter":"set__candidate__skills","dataType":{"name":"string[]","defaultValue":"[]"}}],"isReadonly":false} + {"pfImports":["Card","CardBody","TextInput","FormGroup","SelectOption","SelectOptionObject","Select","SelectVariant","Split","SplitItem","Button"],"pfIconImports":["PlusCircleIcon","MinusCircleIcon"],"reactImports":["useState"],"requiredCode":["select_functions"],"stateCode":"const [ candidate__name, set__candidate__name ] = useState<string>(\\"\\");\\nconst [ candidate__age, set__candidate__age ] = useState<number>();\\nconst [ candidate__role, set__candidate__role ] = useState<string>(\\"\\");\\nconst [ candidate__role__expanded, set__candidate__role__expanded ] = useState<boolean>(false);\\nconst [ candidate__skills, set__candidate__skills ] = useState<any[]>([]);","jsxCode":"<Card>\\n <CardBody className=\\"pf-c-form\\">\\n <label><b>Candidate</b></label>\\n <FormGroup\\n fieldId={'uniforms-0000-0001'}\\n label={'Name'}\\n isRequired={true}\\n >\\n <TextInput\\n name={'candidate.name'}\\n id={'uniforms-0000-0001'}\\n isDisabled={false}\\n placeholder={''}\\n type={'text'}\\n value={candidate__name}\\n onChange={set__candidate__name}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0003'}\\n label={'Age'}\\n isRequired={true}\\n >\\n <TextInput\\n type={'number'}\\n name={'candidate.age'}\\n isDisabled={false}\\n id={'uniforms-0000-0003'}\\n placeholder={''}\\n step={1} \\n value={candidate__age}\\n onChange={(newValue) => set__candidate__age(Number(newValue))}\\n />\\n </FormGroup>\\n<FormGroup\\n fieldId={'uniforms-0000-0005'}\\n label={'Role'}\\n isRequired={true}\\n ><Select\\n id={'uniforms-0000-0005'}\\n name={'candidate.role'}\\n variant={SelectVariant.single}\\n isDisabled={false}\\n placeholderText={''}\\n isOpen={candidate__role__expanded}\\n selections={candidate__role}\\n onToggle={(isOpen) => set__candidate__role__expanded(isOpen)}\\n onSelect={(event, value, isPlaceHolder) => handleSelect(value, isPlaceHolder, candidate__role, set__candidate__role, set__candidate__role__expanded)}\\n value={candidate__role}\\n >\\n <SelectOption key={'Developer'} value={'Developer'}>Developer</SelectOption>\\n<SelectOption key={'HR'} value={'HR'}>HR</SelectOption>\\n<SelectOption key={'UX'} value={'UX'}>UX</SelectOption>\\n </Select></FormGroup>\\n<div fieldId={'uniforms-0000-0007'}>\\n <Split hasGutter>\\n <SplitItem>\\n {'Skills' && (\\n <label className={\\"pf-c-form__label\\"}>\\n <span className={\\"pf-c-form__label-text\\"}>\\n Skills\\n </span>\\n </label>\\n )}\\n </SplitItem>\\n <SplitItem isFilled />\\n <SplitItem>\\n <Button\\n name='$'\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n disabled={false}\\n onClick={() => {\\n !false && set__candidate__skills((candidate__skills ?? []).concat([undefined]));\\n }}\\n >\\n <PlusCircleIcon color='#0088ce' />\\n </Button>\\n </SplitItem>\\n </Split>\\n <div>\\n {candidate__skills?.map((_, itemIndex) =>\\n (<div\\n key={itemIndex}\\n style={{\\n marginBottom: '1rem',\\n display: 'flex',\\n justifyContent: 'space-between',\\n }}\\n >\\n <div style={{ width: '100%', marginRight: '10px' }}><Card>\\n <CardBody className=\\"pf-c-form\\">\\n \\n <FormGroup\\n fieldId={'uniforms-0000-000a'}\\n label={'Name'}\\n isRequired={true}\\n >\\n <TextInput\\n name={\`candidate.skills.\${itemIndex}.name\`}\\n id={'uniforms-0000-000a'}\\n isDisabled={false}\\n placeholder={''}\\n type={'text'}\\n value={candidate__skills[itemIndex].name}\\n onChange={\\n newValue => {\\n set__candidate__skills(s => {\\n const newState = [...s];\\n newState[itemIndex].name = newValue;\\n return newState;\\n })\\n }}\\n />\\n </FormGroup>\\n </CardBody></Card></div>\\n <div>\\n <Button\\n disabled={false}\\n variant='plain'\\n style={{ paddingLeft: '0', paddingRight: '0' }}\\n onClick={() => {\\n const value = [...candidate__skills]\\n value.splice(itemIndex, 1);\\n !false && set__candidate__skills(value);\\n }}\\n >\\n <MinusCircleIcon color='#cc0000' />\\n </Button>\\n </div>\\n </div>)\\n )}\\n </div>\\n </div>\\n </CardBody></Card>","ref":{"binding":"candidate","stateName":"candidate","stateSetter":"set__candidate","dataType":{"name":"any"}},"childRefs":[{"binding":"candidate.name","stateName":"candidate__name","stateSetter":"set__candidate__name","dataType":{"name":"string","defaultValue":"\\"\\""}},{"binding":"candidate.age","stateName":"candidate__age","stateSetter":"set__candidate__age","dataType":{"name":"number"}},{"binding":"candidate.role","stateName":"candidate__role","stateSetter":"set__candidate__role","dataType":{"name":"string","defaultValue":"\\"\\""}},{"binding":"candidate.skills","stateName":"candidate__skills","stateSetter":"set__candidate__skills","dataType":{"name":"string[]","defaultValue":"[]"}}],"isReadonly":false}
`;