import * as React from 'react' ; import { Children , ReactNode , cloneElement , isValidElement } from 'react' ; import PropTypes from 'prop-types' ; import classnames from 'classnames' ; import Toolbar from '@material-ui/core/Toolbar' ; import Typography from '@material-ui/core/Typography' ; import { makeStyles } from '@material-ui/core/styles' ; import { lighten } from '@material-ui/core/styles/colorManipulator' ; import IconButton from '@material-ui/core/IconButton' ; import CloseIcon from '@material-ui/icons/Close' ; import { useTranslate , sanitizeListRestProps , useListContext } from 'ra-core' ; import { ClassesOverride } from '../types' ; import TopToolbar from '../layout/TopToolbar' ; const useStyles = makeStyles ( theme => ( { toolbar : { zIndex : 3 , color : theme . palette . type === 'light' ? theme . palette . primary . main : theme . palette . text . primary , justifyContent : 'space-between' , backgroundColor : theme . palette . type === 'light' ? lighten ( theme . palette . primary . light , 0.85 ) : theme . palette . primary . dark , minHeight : theme . spacing ( 8 ) , height : theme . spacing ( 8 ) , transition : `${ theme . transitions . create ( 'height' ) }, ${ theme . transitions . create ( 'min-height' ) }` , } , topToolbar : { paddingTop : theme . spacing ( 2 ) , } , buttons : { } , collapsed : { minHeight : 0 , height : 0 , overflowY : 'hidden' , } , title : { display : 'flex' , flex : '0 0 auto' , } , icon : { marginLeft : '-0.5em' , marginRight : '0.5em' , } , } ) , { name : 'RaBulkActionsToolbar' } ) ; const BulkActionsToolbar = ( props ) => { const { classes : classesOverride , label = 'ra.action.bulk_actions' , children , ... rest } = props ; const { basePath , filterValues , resource , selectedIds , onUnselectItems , } = useListContext ( props ) ; const classes = useStyles ( props ) ; const translate = useTranslate ( ) ; return ( < Toolbar data - test = "bulk-actions-toolbar" className = { classnames ( classes . toolbar , { [ classes . collapsed ] : selectedIds . length === 0 , } ) } { ... sanitizeListRestProps ( rest ) } > < div className = { classes . title } > < IconButton className = { classes . icon } aria - label = { translate ( 'ra.action.unselect' ) } title = { translate ( 'ra.action.unselect' ) } onClick = { onUnselectItems } size = "small" > < CloseIcon fontSize = "small" / > < /IconButton> < Typography color = "inherit" variant = "subtitle1" > { translate ( label , { _ : label , smart_count : selectedIds . length , } ) } < /Typography> < /div> < TopToolbar className = { classes . topToolbar } > { Children . map ( children , child => isValidElement ( child ) ? cloneElement ( child , { basePath , filterValues , resource , selectedIds , } ) : null ) } < /TopToolbar> < /Toolbar>); } ; BulkActionsToolbar . propTypes = { children : PropTypes . node , classes : PropTypes . object , label : PropTypes . string , } ; export interface BulkActionsToolbarProps { children ? : ReactNode ; classes ? : ClassesOverride < typeof useStyles > ; label ? : string ; } export default BulkActionsToolbar ;