Skip to content

Commit

Permalink
formik v2 tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
Jiri Tomasek committed Nov 27, 2019
1 parent b714d72 commit e386694
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@ import * as React from 'react';
import { useField } from 'formik';
import { FormGroup, Checkbox } from '@patternfly/react-core';
import { CheckboxFieldProps } from './field-types';
import { getFieldId } from './field-utils';
import { getCheckboxFieldId } from './field-utils';

const CheckboxField: React.FC<CheckboxFieldProps> = ({
label,
formLabel,
helpText,
required,
value,
name,
...props
}) => {
const [field, { touched, error }] = useField(props.name);
const fieldId = getFieldId(props.name, 'checkbox');
const [field, { touched, error }] = useField({ value, name, type: 'checkbox' });
const fieldId = getCheckboxFieldId(name, value);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
const { checked, ...restField } = field;
return (
<FormGroup
fieldId={fieldId}
Expand All @@ -26,14 +29,17 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
isRequired={required}
>
<Checkbox
{...field}
{...restField}
{...props}
// TODO(jtomasek): value shoule be used from restField once the type is fixed on Formik side
// https://github.com/jaredpalmer/formik/issues/1961#issuecomment-555186737
value={(restField.value as unknown) as string}
id={fieldId}
label={label}
isChecked={field.value}
isChecked={checked}
isValid={isValid}
aria-describedby={`${fieldId}-helper`}
onChange={(value, event) => field.onChange(event)}
onChange={(val, event) => field.onChange(event)}
/>
</FormGroup>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface TextAreaProps extends FieldProps {

export interface CheckboxFieldProps extends FieldProps {
formLabel?: string;
value?: string;
}

export interface SearchInputFieldProps extends InputFieldProps {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
export const getFieldId = (fieldName: string, fieldType: string) => {
return `form-${fieldType}-${fieldName.replace(/\./g, '-')}-field`;
};

export const getCheckboxFieldId = (fieldName: string, fieldValue?: string) => {
const name = fieldValue ? `${fieldName}-${fieldValue}` : fieldName;
return getFieldId(name, 'checkbox');
};
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,10 @@ const ApplicationSelector: React.FC<ApplicationSelectorProps> = ({
/>
</FormGroup>
)}
{(!applicationsAvailable || selectedKey.value === CREATE_APPLICATION_KEY) && (
{(!applicationsAvailable || (selectedKey.value as string) === CREATE_APPLICATION_KEY) && (
<InputField
type={TextInputTypes.text}
required={selectedKey.value === CREATE_APPLICATION_KEY}
required={(selectedKey.value as string) === CREATE_APPLICATION_KEY}
name="application.name"
label="Application Name"
data-test-id="application-form-app-input"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import * as Renderer from 'react-test-renderer';
import { Formik } from 'formik';
import PipelineResourceSection, {
ResourceSectionProps,
} from '../pipeline-form/PipelineResourceSection';
Expand Down Expand Up @@ -34,7 +35,11 @@ describe('PipelineResourceSection component', () => {
});

it('It should match the previous pipeline snapshot', () => {
const tree = Renderer.create(<PipelineResourceSection resources={resources} />).toJSON();
const tree = Renderer.create(
<Formik onSubmit={() => {}} initialValues={{}}>
{() => <PipelineResourceSection resources={resources} />}
</Formik>,
).toJSON();
expect(tree).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@
import * as React from 'react';
import { useField } from 'formik';
import { FormGroup, Switch } from '@patternfly/react-core';
import { getFieldId } from '@console/dev-console/src/components/formik-fields/field-utils';
import { getCheckboxFieldId } from '@console/dev-console/src/components/formik-fields/field-utils';
import { CheckboxFieldProps } from '@console/dev-console/src/components/formik-fields/field-types';

const SwitchField: React.FC<CheckboxFieldProps> = ({
label,
formLabel,
helpText,
required,
value,
name,
...props
}) => {
const [field, { touched, error }] = useField(props.name);
const fieldId = getFieldId(props.name, 'checkbox');
const [field, { touched, error }] = useField({ value, name, type: 'checkbox' });
const fieldId = getCheckboxFieldId(name, value);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
const { checked, ...restField } = field;
return (
<FormGroup
fieldId={fieldId}
Expand All @@ -26,13 +29,16 @@ const SwitchField: React.FC<CheckboxFieldProps> = ({
isRequired={required}
>
<Switch
{...field}
{...restField}
{...props}
// TODO(jtomasek): value shoule be used from restField once the type is fixed on Formik side
// https://github.com/jaredpalmer/formik/issues/1961#issuecomment-555186737
value={(restField.value as unknown) as string}
id={fieldId}
label={label}
isChecked={field.value}
isChecked={checked}
aria-describedby={`${fieldId}-helper`}
onChange={(value, event) => field.onChange(event)}
onChange={(val, event) => field.onChange(event)}
/>
</FormGroup>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/public/components/factory/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export type ModalSubmitFooterProps = {
message?: string;
errorMessage?: string;
inProgress: boolean;
cancel: (e: Event) => void;
cancel: (e?: React.SyntheticEvent<any, Event>) => void;
cancelText?: React.ReactNode;
submitText: React.ReactNode;
submitDisabled?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const configureMachineAutoscalerModal = createModalLauncher(ConfigureMach

export type ConfigureMachineAutoscalerModalProps = {
machineSet: K8sResourceKind;
cancel: (e: Event) => void;
cancel: (e?: React.SyntheticEvent<any, Event>) => void;
close: () => void;
};

Expand Down

0 comments on commit e386694

Please sign in to comment.