import React , { useState } from "react" ; import { useTheme } from ".." ; import { BaseList , BaseListBody , BaseListBodyProps , BaseListFooter , BaseListFooterProps , BaseListHeader , BaseListHeaderProps , BaseListItem , BaseListItemCell , BaseListItemCellProps , BaseListItemProps , BaseListProps , } from "../BaseList" ; import { ListActionContext , useListAction } from "./context" ; import { useStyles } from "./styles" ; export const List = BaseList ; export const ListHeader = BaseListHeader ; export const ListFooter = BaseListFooter ; export const ListBody = BaseListBody ; export const ListItem = ( { hover : initialHover = true , ... rest } ) => { const classes = useStyles ( ) ; const [ hover , setHover ] = useState ( true ) ; return ( < ListActionContext . Provider value = { setHover } > < BaseListItem classes = { classes } hover = { initialHover && hover } { ... rest } /> < /ListActionContext.Provider>); } ; export const ListItemCell = ( props ) => { const classes = useStyles ( ) ; return < BaseListItemCell classes = { classes } { ... props } />; } ; export const ListItemCellAction = ( props ) => { const setHover = useListAction ( ) ; return ( < div onMouseEnter = { ( ) => setHover ( false ) } onMouseLeave = { ( ) => setHover ( true ) } { ... props } />); } ; export const useListWidths = ( ) => { const theme = useTheme ( ) ; return { actions : ( n = 1 ) => `calc( ${ theme . spacing ( n + 1 ) } + ${ 48 * n }px)` , checkbox : "64px" } ; } ;