import * as React from 'react' ; import { ReactElement } from 'react' ; import PropTypes from 'prop-types' ; import { Toolbar , ToolbarProps } from '@material-ui/core' ; import { makeStyles } from '@material-ui/core/styles' ; import { Exporter } from 'ra-core' ; import { ClassesOverride } from '../types' ; import { FilterForm } from './filter' ; import { FilterContext } from './FilterContext' ; const useStyles = makeStyles ( theme => ( { toolbar : { justifyContent : 'space-between' , alignItems : 'flex-start' , paddingRight : 0 , [ theme . breakpoints . up ( 'xs' ) ] : { paddingLeft : 0 , } , [ theme . breakpoints . down ( 'xs' ) ] : { paddingLeft : theme . spacing ( 2 ) , backgroundColor : theme . palette . background . paper , } , } , actions : { paddingTop : theme . spacing ( 3 ) , minHeight : theme . spacing ( 5 ) , [ theme . breakpoints . down ( 'xs' ) ] : { padding : theme . spacing ( 1 ) , backgroundColor : theme . palette . background . paper , } , } , } ) , { name : 'RaListToolbar' } ) ; const ListToolbar = ( props ) => { const { classes : classesOverride , filters , actions , ... rest } = props ; const classes = useStyles ( props ) ; return Array . isArray ( filters ) ? ( < FilterContext . Provider value = { filters } > < Toolbar className = { classes . toolbar } > < FilterForm /> < span / > { actions && React . cloneElement ( actions , { ... rest , className : classes . actions , ... actions . props , } ) } < /Toolbar> < /FilterContext.Provider>) : (<Toolbar className={classes.toolbar}> { filters && React . cloneElement ( filters , { ... rest , context : 'form' , } ) } < span /> { actions && React . cloneElement ( actions , { ... rest , className : classes . actions , filters , ... actions . props , } ) } < /Toolbar>); } ; ListToolbar . propTypes = { classes : PropTypes . object , filters : PropTypes . oneOfType ( [ PropTypes . element , PropTypes . arrayOf ( PropTypes . element ) , ] ) , actions : PropTypes . oneOfType ( [ PropTypes . bool , PropTypes . element ] ) , exporter : PropTypes . oneOfType ( [ PropTypes . func , PropTypes . bool ] ) , } ; export interface ListToolbarProps extends Omit < ToolbarProps , 'classes' | 'onSelect' > { actions ? : ReactElement | false ; classes ? : ClassesOverride < typeof useStyles > ; filters ? : ReactElement | ReactElement [ ] ; exporter ? : Exporter | false ; } export default React . memo ( ListToolbar ) ;