Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] Fix FilterForm Submit #3732

Merged
merged 2 commits into from
Sep 26, 2019
Merged

[RFR] Fix FilterForm Submit #3732

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
eb7b3c7
Fix FilterForm Submit
djhi Sep 25, 2019
28146cd
Review
djhi Sep 25, 2019
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
106 changes: 60 additions & 46 deletions packages/ra-ui-materialui/src/list/FilterForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Form, FormSpy } from 'react-final-form';
import classnames from 'classnames';
Expand Down Expand Up @@ -37,7 +37,10 @@ const sanitizeRestProps = ({
dirtySinceLastSubmit,
dispatch,
displayedFilters,
errors,
filters,
filterValues,
form,
handleSubmit,
hasSubmitErrors,
hasValidationErrors,
Expand All @@ -46,6 +49,7 @@ const sanitizeRestProps = ({
initialized,
initialValues,
invalid,
modified,
pristine,
pure,
reset,
Expand All @@ -61,71 +65,79 @@ const sanitizeRestProps = ({
submitSucceeded,
submitting,
touch,
touched,
triggerSubmit,
untouch,
valid,
validate,
validating,
_reduxForm,
values,
visited,
__versions,
...props
}) => props;

export class FilterForm extends Component {
componentDidMount() {
this.props.filters.forEach(filter => {
export const FilterForm = ({
classes = {},
className,
resource,
margin,
variant,
filters,
displayedFilters,
hideFilter,
initialValues,
...rest
}) => {
useEffect(() => {
filters.forEach(filter => {
if (filter.props.alwaysOn && filter.props.defaultValue) {
throw new Error(
'Cannot use alwaysOn and defaultValue on a filter input. Please set the filterDefaultValues props on the <List> element instead.'
);
}
});
}
}, [filters]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

filters will change at each render, so this effect will run way too often. Maybe not significant though.


getShownFilters() {
const { filters, displayedFilters, initialValues } = this.props;

return filters.filter(
const getShownFilters = () =>
filters.filter(
filterElement =>
filterElement.props.alwaysOn ||
displayedFilters[filterElement.props.source] ||
typeof lodashGet(initialValues, filterElement.props.source) !==
'undefined'
);
}

handleHide = event =>
this.props.hideFilter(event.currentTarget.dataset.key);

render() {
const {
classes = {},
className,
resource,
margin,
variant,
...rest
} = this.props;

return (
<form
className={classnames(className, classes.form)}
{...sanitizeRestProps(rest)}
>
{this.getShownFilters().map(filterElement => (
<FilterFormInput
key={filterElement.props.source}
filterElement={filterElement}
handleHide={this.handleHide}
resource={resource}
margin={margin}
variant={variant}
/>
))}
<div className={classes.clearFix} />
</form>
);
}
}

const handleHide = useCallback(
event => hideFilter(event.currentTarget.dataset.key),
[hideFilter]
);

return (
<form
className={classnames(className, classes.form)}
{...sanitizeRestProps(rest)}
onSubmit={handleSubmit}
>
{getShownFilters().map(filterElement => (
<FilterFormInput
key={filterElement.props.source}
filterElement={filterElement}
handleHide={handleHide}
resource={resource}
margin={margin}
variant={variant}
/>
))}
<div className={classes.clearFix} />
</form>
);
};

const handleSubmit = event => {
event.preventDefault();
return false;
};

FilterForm.propTypes = {
resource: PropTypes.string.isRequired,
Expand Down Expand Up @@ -169,7 +181,7 @@ const EnhancedFilterForm = props => {

return (
<Form
onSubmit={() => {}}
onSubmit={handleFinalFormSubmit}
initialValues={mergedInitialValuesWithDefaultValues}
render={formProps => (
<>
Expand All @@ -189,6 +201,8 @@ const EnhancedFilterForm = props => {
);
};

const handleFinalFormSubmit = () => {};

// Options to instruct the FormSpy that it should only listen to the values and pristine changes
const FormSpySubscription = { values: true, pristine: true };

Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/list/FilterForm.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('<FilterForm />', () => {
const filters = [
<TextInput source="title" label="Title" />,
<TextInput source="customer.name" label="Name" />,
]; // eslint-disable-line react/jsx-key
];
const displayedFilters = {
title: true,
'customer.name': true,
Expand Down