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.

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 hide filter button isn't aligned with field #3449

Merged
merged 2 commits into from
Jul 24, 2019
Merged
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions examples/demo/src/products/ProductList.js
Original file line number Diff line number Diff line change
@@ -12,11 +12,11 @@ import Chip from '@material-ui/core/Chip';
import { makeStyles } from '@material-ui/core/styles';
import GridList from './GridList';

const useQuickFilterStyles = makeStyles({
const useQuickFilterStyles = makeStyles(theme => ({
root: {
marginBottom: '0.7em',
marginBottom: theme.spacing(3),
},
});
}));

const QuickFilter = ({ label }) => {
const translate = useTranslate();
8 changes: 7 additions & 1 deletion examples/simple/src/posts/PostList.js
Original file line number Diff line number Diff line change
@@ -29,9 +29,15 @@ import {
import ResetViewsButton from './ResetViewsButton';
export const PostIcon = BookIcon;

const useQuickFilterStyles = makeStyles(theme => ({
chip: {
marginBottom: theme.spacing(3),
},
}));
const QuickFilter = ({ label }) => {
const translate = useTranslate();
return <Chip style={{ marginBottom: 8 }} label={translate(label)} />;
const classes = useQuickFilterStyles();
return <Chip className={classes.chip} label={translate(label)} />;
};

const PostFilter = props => (
7 changes: 0 additions & 7 deletions packages/ra-ui-materialui/src/list/FilterForm.js
Original file line number Diff line number Diff line change
@@ -19,12 +19,6 @@ const styles = theme =>
alignItems: 'flex-end',
flexWrap: 'wrap',
},
body: { display: 'flex', alignItems: 'flex-end' },
spacer: { width: '1em' },
icon: {
color: theme.palette.primary1Color || '#00bcd4',
paddingBottom: 0,
},
clearFix: { clear: 'right' },
});

@@ -110,7 +104,6 @@ export class FilterForm extends Component {
key={filterElement.props.source}
filterElement={filterElement}
handleHide={this.handleHide}
classes={classes}
resource={resource}
/>
))}
19 changes: 17 additions & 2 deletions packages/ra-ui-materialui/src/list/FilterFormInput.js
Original file line number Diff line number Diff line change
@@ -3,23 +3,38 @@ import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import IconButton from '@material-ui/core/IconButton';
import ActionHide from '@material-ui/icons/HighlightOff';
import { makeStyles } from '@material-ui/core/styles';
import classnames from 'classnames';
import { useTranslate } from 'ra-core';

const emptyRecord = {};

const sanitizeRestProps = ({ alwaysOn, ...props }) => props;

const FilterFormInput = ({ filterElement, handleHide, classes, resource }) => {
const useStyles = makeStyles(theme => ({
body: { display: 'flex', alignItems: 'flex-end' },
spacer: { width: theme.spacing(2) },
hideButton: {
marginBottom: theme.spacing(2),
},
}));

const FilterFormInput = ({
filterElement,
handleHide,
classes: classesOverride,
resource,
}) => {
const translate = useTranslate();
const classes = useStyles({ classes: classesOverride });
return (
<div
data-source={filterElement.props.source}
className={classnames('filter-field', classes.body)}
>
{!filterElement.props.alwaysOn && (
<IconButton
className="hide-filter"
className={classnames('hide-filter', classes.hideButton)}
onClick={handleHide}
data-key={filterElement.props.source}
title={translate('ra.action.remove_filter')}