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] use makeStyles in BulkActions #3495

Closed
wants to merge 3 commits into from
Closed

[RFR] use makeStyles in BulkActions #3495

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5287c9
use makeStyles in BulkActions
Kunnu01 Aug 7, 2019
72529b2
fix tests
Kunnu01 Aug 7, 2019
26c69c6
add dependency to useCallback
Kunnu01 Aug 8, 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
266 changes: 125 additions & 141 deletions packages/ra-ui-materialui/src/list/BulkActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
import React, {
cloneElement,
Children,
Component,
isValidElement,
useState,
useCallback,
useEffect,
} from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { withStyles, createStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import FilterNoneIcon from '@material-ui/icons/FilterNone';
import compose from 'recompose/compose';
import classnames from 'classnames';
import { translate } from 'ra-core';
import { useTranslate } from 'ra-core';

import Button from '../button/Button';
import BulkDeleteAction from './BulkDeleteAction';

const styles = theme =>
createStyles({
bulkActionsButton: {
const useStyles = makeStyles(theme => ({
bulkActionsButton: {
opacity: 1,
transition: theme.transitions.create('opacity', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
'&.fade-enter': {
opacity: 0,
},
'&.fade-enter-done': {
opacity: 1,
transition: theme.transitions.create('opacity', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
'&.fade-enter': {
opacity: 0,
},
'&.fade-enter-done': {
opacity: 1,
},
'&.fade-exit': {
opacity: 0,
},
'&.fade-exit-done': {
opacity: 0,
},
},
icon: {
marginRight: theme.spacing(1),
'&.fade-exit': {
opacity: 0,
},
});
'&.fade-exit-done': {
opacity: 0,
},
},
icon: {
marginRight: theme.spacing(1),
},
}));

const timeoutDurations = {
enter: 0,
Expand All @@ -50,7 +50,6 @@ const timeoutDurations = {

const sanitizeRestProps = ({
basePath,
classes,
filterValues,
resource,
onUnselectItems,
Expand All @@ -60,132 +59,122 @@ const sanitizeRestProps = ({
/**
* @deprecated pass a Fragment with button children as bulkActionButtons props instead
*/
class BulkActions extends Component {
state = {
isOpen: false,
activeAction: null,
};

componentDidMount() {
const BulkActions = ({
basePath,
children,
className,
filterValues,
label,
resource,
selectedIds,
...rest
}) => {
const [isOpen, setOpen] = useState(false);
const [activeAction, setActiveAction] = useState(null);
const [anchorElement, setAnchorElement] = useState(null);
const styles = useStyles({});
const translate = useTranslate();

useEffect(() => {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.warn(
'<BulkActions> is deprecated. Use the bulkActionButtons prop instead.'
);
}
}

storeButtonRef = node => {
this.anchorElement = node;
};

handleClick = () => {
this.setState({ isOpen: true });
};

handleClose = () => {
this.setState({ isOpen: false });
};

handleLaunchAction = action => {
this.setState({ activeAction: action, isOpen: false });
};

handleExitAction = () => {
this.setState({ activeAction: null });
};

render() {
const {
basePath,
classes,
children,
className,
filterValues,
label,
resource,
selectedIds,
translate,
...rest
} = this.props;
const { isOpen } = this.state;
});

return (
<CSSTransition
in={selectedIds.length > 0}
timeout={timeoutDurations}
mountOnEnter
unmountOnExit
classNames="fade"
>
<div className={classes.bulkActionsButton}>
<Button
buttonRef={this.storeButtonRef}
className={classnames('bulk-actions-button', className)}
alignIcon="left"
aria-owns={isOpen ? 'bulk-actions-menu' : null}
aria-haspopup="true"
onClick={this.handleClick}
{...sanitizeRestProps(rest)}
label={translate(label, {
_: label,
smart_count: selectedIds.length,
})}
>
<FilterNoneIcon className={classes.icon} />
</Button>
<Menu
id="bulk-actions-menu"
anchorEl={this.anchorElement}
onClose={this.handleClose}
open={isOpen}
>
{Children.map(children, (child, index) =>
isValidElement(child) ? (
<MenuItem
key={index}
className={classnames(
'bulk-actions-menu-item',
child.props.className
)}
onClick={() =>
this.handleLaunchAction(index)
}
{...sanitizeRestProps(rest)}
>
{translate(child.props.label)}
</MenuItem>
) : null
)}
</Menu>
const storeButtonRef = useCallback(node => {
setAnchorElement(node);
}, []);

const handleClick = useCallback(() => {
setOpen(true);
}, []);

const handleClose = useCallback(() => {
setOpen(false);
}, []);

const handleLaunchAction = useCallback(action => {
setActiveAction(action);
setOpen(false);
}, []);

const handleExitAction = useCallback(() => {
setActiveAction(null);
}, []);

return (
<CSSTransition
in={selectedIds.length > 0}
timeout={timeoutDurations}
mountOnEnter
unmountOnExit
classNames="fade"
>
<div className={styles.bulkActionsButton}>
<Button
buttonRef={storeButtonRef}
className={classnames('bulk-actions-button', className)}
alignIcon="left"
aria-owns={isOpen ? 'bulk-actions-menu' : null}
aria-haspopup="true"
onClick={handleClick}
{...sanitizeRestProps(rest)}
label={translate(label, {
_: label,
smart_count: selectedIds.length,
})}
>
<FilterNoneIcon className={styles.icon} />
</Button>
<Menu
id="bulk-actions-menu"
anchorEl={anchorElement}
onClose={handleClose}
open={isOpen}
>
{Children.map(children, (child, index) =>
isValidElement(child) &&
this.state.activeAction === index
? cloneElement(child, {
basePath,
filterValues,
onExit: this.handleExitAction,
resource,
selectedIds,
})
: null
isValidElement(child) ? (
<MenuItem
key={index}
className={classnames(
'bulk-actions-menu-item',
child.props.className
)}
onClick={() => handleLaunchAction(index)}
{...sanitizeRestProps(rest)}
>
{translate(child.props.label)}
</MenuItem>
) : null
)}
</div>
</CSSTransition>
);
}
}
</Menu>
{Children.map(children, (child, index) =>
isValidElement(child) && activeAction === index
? cloneElement(child, {
basePath,
filterValues,
onExit: handleExitAction,
resource,
selectedIds,
})
: null
)}
</div>
</CSSTransition>
);
};

BulkActions.propTypes = {
basePath: PropTypes.string,
classes: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node,
filterValues: PropTypes.object, // eslint-disable-line react/forbid-prop-types
label: PropTypes.string,
resource: PropTypes.string,
selectedIds: PropTypes.arrayOf(PropTypes.any),
translate: PropTypes.func.isRequired,
};

BulkActions.defaultProps = {
Expand All @@ -194,9 +183,4 @@ BulkActions.defaultProps = {
selectedIds: [],
};

const EnhancedButton = compose(
withStyles(styles),
translate
)(BulkActions);

export default EnhancedButton;
export default BulkActions;