Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

Replace all 'render' props to 'children' props in Formik elements #238

Merged
merged 2 commits into from
Feb 5, 2021
Merged

Replace all 'render' props to 'children' props in Formik elements #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5059fcf
pass render function as a child instead of using props for <Formik> <…
Jan 14, 2021
0f27ff7
update jest snapshot files
Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import PropTypes from 'prop-types';
import { Field } from 'formik';

const FormikInputWrapper = ({ name, fieldProps, render }) => (
<Field name={name} {...fieldProps} render={({ field, form }) => render({ field, form })} />
<Field name={name} {...fieldProps}>
{({ field, form }) => render({ field, form })}
</Field>
);

FormikInputWrapper.propTypes = {
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,9 @@ import MonitorExpressions from './MonitorExpressions';
describe('MonitorExpressions', () => {
test('renders', () => {
const component = (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
/>
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
</Formik>
);

expect(render(component)).toMatchSnapshot();
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
describe('ForExpression', () => {
test('renders', () => {
const component = (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={props => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{(props) => (
<ForExpression
formik={props}
openedStates={DEFAULT_CLOSED_STATES}
openExpression={() => {}}
closeExpression={() => {}}
/>
)}
/>
</Formik>
);

expect(render(component)).toMatchSnapshot();
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
describe('OfExpression', () => {
test('renders', () => {
const component = (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={props => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{(props) => (
<OfExpression
formik={props}
openedStates={DEFAULT_CLOSED_STATES}
Expand All @@ -35,7 +34,7 @@ describe('OfExpression', () => {
dataTypes={[]}
/>
)}
/>
</Formik>
);

expect(render(component)).toMatchSnapshot();
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
describe('OverExpression', () => {
test('renders', () => {
const component = (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={props => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{(props) => (
<OverExpression
formik={props}
openedStates={DEFAULT_CLOSED_STATES}
openExpression={() => {}}
closeExpression={() => {}}
/>
)}
/>
</Formik>
);

expect(render(component)).toMatchSnapshot();
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
describe('WhenExpression', () => {
test('renders', () => {
const component = (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={props => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{(props) => (
<WhenExpression
formik={props}
openedStates={DEFAULT_CLOSED_STATES}
openExpression={() => {}}
closeExpression={() => {}}
/>
)}
/>
</Formik>
);

expect(render(component)).toMatchSnapshot();
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,8 @@ const dataTypes = {
const openExpression = jest.fn();
const closeExpression = jest.fn();
const getMountWrapper = (state = false) => (
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={(props) => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{(props) => (
<WhereExpression
formik={props}
dataTypes={dataTypes}
Expand All @@ -43,7 +42,7 @@ const getMountWrapper = (state = false) => (
onMadeChanges={jest.fn()}
/>
)}
/>
</Formik>
);

describe('WhereExpression', () => {
Expand Down
13 changes: 5 additions & 8 deletions public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,17 @@ import TimezoneComboBox from './TimezoneComboBox';
const Daily = () => (
<EuiFlexGroup direction="column" style={{ paddingLeft: '10px', marginTop: '5px' }}>
<EuiFlexItem style={{ marginTop: '0px' }}>
<Field
name="daily"
render={({
<Field name="daily">
{({
field: { value, onChange, onBlur, ...rest },
form: { touched, errors, setFieldValue },
}) => (
<EuiFormRow label="Around" style={{ marginTop: '0px' }}>
<EuiDatePicker
showTimeSelect
showTimeSelectOnly
selected={moment()
.hours(value)
.minutes(0)}
onChange={date => {
selected={moment().hours(value).minutes(0)}
onChange={(date) => {
setFieldValue('daily', date.hours());
}}
dateFormat="hh:mm A"
Expand All @@ -44,7 +41,7 @@ const Daily = () => (
/>
</EuiFormRow>
)}
/>
</Field>
</EuiFlexItem>
<EuiFlexItem style={{ marginTop: '0px' }}>
<TimezoneComboBox />
Expand Down
16 changes: 7 additions & 9 deletions public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
id={day}
label={_.startCase(day)}
checked={checked}
onChange={e => {
onChange={(e) => {
setFieldValue(`weekly.${day}`, e.target.checked);
}}
onBlur={() => setFieldTouched('weekly')}
Expand All @@ -37,29 +37,27 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
</EuiFlexItem>
);

const validate = value => {
const validate = (value) => {
const booleans = Object.values(value);
if (!booleans.some(bool => bool)) return 'Must select at least one weekday';
if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
};

const Weekly = () => (
<Fragment>
<Field
name="weekly"
validate={validate}
render={({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
<Field name="weekly" validate={validate}>
{({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
<EuiFormRow
label="Every"
isInvalid={touched.weekly && !!errors.weekly}
error={errors.weekly}
style={{ paddingLeft: '10px', marginTop: '5px' }}
>
<EuiFlexGroup alignItems="center">
{days.map(day => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
{days.map((day) => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
</EuiFlexGroup>
</EuiFormRow>
)}
/>
</Field>
<Daily />
</Fragment>
);
Expand Down
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,11 @@ const renderEmptyMessage = jest.fn();
function getMountWrapper() {
return mount(
<CoreContext.Provider value={{ http: httpClientMock }}>
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={({ values }) => (
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{({ values }) => (
<AnomalyDetectors values={values} renderEmptyMessage={renderEmptyMessage} />
)}
/>
</Formik>
</CoreContext.Provider>
);
}
Expand Down
2 changes: 0 additions & 2 deletions ...eMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ exports[`AnomalyDetectors renders 1`] = `
},
}
}
render={[Function]}
>
<AnomalyDetectors
renderEmptyMessage={[MockFunction]}
Expand Down Expand Up @@ -156,7 +155,6 @@ exports[`AnomalyDetectors renders 1`] = `
>
<Field
name="detectorId"
render={[Function]}
validate={[Function]}
>
<FormikFormRow
Expand Down
9 changes: 3 additions & 6 deletions public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,8 @@ export default class CreateMonitor extends Component {
const { edit, httpClient, monitorToEdit, notifications, isDarkMode } = this.props;
return (
<div style={{ padding: '25px 50px' }}>
<Formik
initialValues={initialValues}
onSubmit={this.onSubmit}
validateOnChange={false}
render={({ values, errors, handleSubmit, isSubmitting, isValid }) => (
<Formik initialValues={initialValues} onSubmit={this.onSubmit} validateOnChange={false}>
{({ values, errors, handleSubmit, isSubmitting, isValid }) => (
<Fragment>
<EuiTitle size="l">
<h1>{edit ? 'Edit' : 'Create'} monitor</h1>
Expand Down Expand Up @@ -182,7 +179,7 @@ export default class CreateMonitor extends Component {
/>
</Fragment>
)}
/>
</Formik>
</div>
);
}
Expand Down
5 changes: 3 additions & 2 deletions public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,9 @@ exports[`CreateMonitor renders 1`] = `
}
}
onSubmit={[Function]}
render={[Function]}
validateOnChange={false}
/>
>
<Component />
</Formik>
</div>
`;
7 changes: 3 additions & 4 deletions public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,9 @@ const runAllPromises = () => new Promise(setImmediate);

function getMountWrapper(customProps = {}) {
return mount(
<Formik
initialValues={FORMIK_INITIAL_VALUES}
render={() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
/>
<Formik initialValues={FORMIK_INITIAL_VALUES}>
{() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
</Formik>
);
}

Expand Down
2 changes: 0 additions & 2 deletions public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ exports[`MonitorIndex renders 1`] = `
},
}
}
render={[Function]}
>
<MonitorIndex
httpClient={[MockFunction]}
Expand Down Expand Up @@ -113,7 +112,6 @@ exports[`MonitorIndex renders 1`] = `
>
<Field
name="index"
render={[Function]}
validate={[Function]}
>
<FormikFormRow
Expand Down
6 changes: 3 additions & 3 deletions public/pages/CreateTrigger/components/Action/actions/Message.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'test

function getRenderWrapper(customProps = {}) {
return render(
<Formik
render={() => (
<Formik>
{() => (
<Message
action={{
message_template: {
Expand All @@ -39,7 +39,7 @@ function getRenderWrapper(customProps = {}) {
setFlyout={jest.fn()}
/>
)}
/>
</Formik>
);
}

Expand Down
14 changes: 6 additions & 8 deletions public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,23 +67,21 @@ class TriggerExpressions extends Component {
}}
>
<EuiFlexItem grow={false} style={{ width: 150 }}>
<Field
name={keyFieldName}
render={({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
<Field name={keyFieldName}>
{({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
<EuiFormRow
isInvalid={touched.thresholdEnum && !!errors.thresholdEnum}
error={errors.thresholdEnum}
>
<EuiSelect options={THRESHOLD_ENUM_OPTIONS} {...rest} />
</EuiFormRow>
)}
/>
</Field>
</EuiFlexItem>

<EuiFlexItem grow={false} style={{ width: 100 }}>
<Field
name={valueFieldName}
render={({ field, form: { touched, errors } }) => (
<Field name={valueFieldName}>
{({ field, form: { touched, errors } }) => (
<EuiFormRow
style={{ paddingLeft: '10px' }}
isInvalid={touched.thresholdValue && !!errors.thresholdValue}
Expand All @@ -92,7 +90,7 @@ class TriggerExpressions extends Component {
<EuiFieldNumber {...field} />
</EuiFormRow>
)}
/>
</Field>
</EuiFlexItem>
</EuiFlexGroup>
</div>
Expand Down
4 changes: 2 additions & 2 deletions public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('TriggerExpressions', () => {
});

test('calls openExpression when clicking expression', () => {
const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
const openExpression = jest.spyOn(
wrapper.find(TriggerExpressions).instance(),
'openExpression'
Expand All @@ -48,7 +48,7 @@ describe('TriggerExpressions', () => {
});

test('calls closeExpression when closing popover', async () => {
const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
const openExpression = jest.spyOn(
wrapper.find(TriggerExpressions).instance(),
'openExpression'
Expand Down
Loading