import * as React from 'react' ; import { Children , Fragment , cloneElement , memo } from 'react' ; import BookIcon from '@material-ui/icons/Book' ; import { Chip , useMediaQuery } from '@material-ui/core' ; import { makeStyles , Theme } from '@material-ui/core/styles' ; import lodashGet from 'lodash/get' ; import jsonExport from 'jsonexport/dist' ; import { BooleanField , BulkDeleteButton , BulkExportButton , ChipField , Datagrid , DateField , downloadCSV , EditButton , List , NumberField , ReferenceArrayField , SearchInput , ShowButton , SimpleList , SingleFieldList , TextField , TextInput , useTranslate , } from 'react-admin' ; import ResetViewsButton from './ResetViewsButton' ; export const PostIcon = BookIcon ; const useQuickFilterStyles = makeStyles ( theme => ( { chip : { marginBottom : theme . spacing ( 1 ) , } , } ) ) ; const QuickFilter = ( { label , source , defaultValue } ) => { const translate = useTranslate ( ) ; const classes = useQuickFilterStyles ( ) ; return < Chip className = { classes . chip } label = { translate ( label ) } / > ; } ; const postFilter = [ < SearchInput source = "q" alwaysOn / > , < TextInput source = "title" defaultValue = "Qui tempore rerum et voluptates" / > , < QuickFilter label = "resources.posts.fields.commentable" source = "commentable" defaultValue / > , ] ; const exporter = posts => { const data = posts . map ( post => ( { ... post , backlinks : lodashGet ( post , 'backlinks' , [ ] ) . map ( backlink => backlink . url ) , } ) ) ; jsonExport ( data , ( err , csv ) => downloadCSV ( csv , 'posts' ) ) ; } ; const useStyles = makeStyles ( theme => ( { title : { maxWidth : '20em' , overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' , } , hiddenOnSmallScreens : { [ theme . breakpoints . down ( 'md' ) ] : { display : 'none' , } , } , publishedAt : { fontStyle : 'italic' } , } ) ) ; const PostListBulkActions = memo ( ( { children , ... props } ) => ( < Fragment > < ResetViewsButton { ... props } / > < BulkDeleteButton { ... props } / > < BulkExportButton { ... props } / > < /Fragment>)); const usePostListActionToolbarStyles = makeStyles ( { toolbar : { alignItems : 'center' , display : 'flex' , marginTop : - 1 , marginBottom : - 1 , } , } ) ; const PostListActionToolbar = ( { children , ... props } ) => { const classes = usePostListActionToolbarStyles ( ) ; return ( < div className = { classes . toolbar } > { Children . map ( children , button => cloneElement ( button , props ) ) } < /div>); } ; const rowClick = ( id , basePath , record ) => { if ( record . commentable ) { return 'edit' ; } return 'show' ; } ; const PostPanel = ( { id , record , resource } ) => ( < div dangerouslySetInnerHTML = { { __html : record . body } } />); const PostList = props => { const classes = useStyles ( ) ; const isSmall = useMediaQuery < Theme > ( theme => theme . breakpoints . down ( 'sm' ) ) ; return ( < List { ... props } bulkActionButtons = { < PostListBulkActions / > } filters = { postFilter } sort = { { field : 'published_at' , order : 'DESC' } } exporter = { exporter } > { isSmall ? ( < SimpleList primaryText = { record => record . title } secondaryText = { record => `${ record . views } views` } tertiaryText = { record => new Date ( record . published_at ) . toLocaleDateString ( ) } / > ) : ( < Datagrid rowClick = { rowClick } expand = { PostPanel } optimized > < TextField source = "id" / > < TextField source = "title" cellClassName = { classes . title } / > < DateField source = "published_at" sortByOrder = "DESC" cellClassName = { classes . publishedAt } / > < BooleanField source = "commentable" label = "resources.posts.fields.commentable_short" sortable = { false } / > < NumberField source = "views" sortByOrder = "DESC" / > < ReferenceArrayField label = "Tags" reference = "tags" source = "tags" sortBy = "tags.name" sort = { tagSort } cellClassName = { classes . hiddenOnSmallScreens } headerClassName = { classes . hiddenOnSmallScreens } > < SingleFieldList > < ChipField source = "name.en" size = "small" / > < /SingleFieldList> < /ReferenceArrayField> < PostListActionToolbar > < EditButton /> < ShowButton / > < /PostListActionToolbar> < /Datagrid>)} < /List>); } ; const tagSort = { field : 'name.en' , order : 'ASC' } ; export default PostList ;