import React from "react" ; import { useTheme } from ".." ; import { BaseList , BaseListBody , BaseListBodyProps , BaseListFooter , BaseListFooterProps , BaseListHeader , BaseListHeaderProps , BaseListItem , BaseListItemCell , BaseListItemCellProps , BaseListItemProps , BaseListProps , } from "../BaseList" ; import { useStyles } from "./styles" ; export const OffsettedList = BaseList ; export const OffsettedListHeader = BaseListHeader ; export const OffsettedListFooter = BaseListFooter ; export const OffsettedListBody = ( props ) => { const classes = useStyles ( ) ; return < BaseListBody className = { classes . body } { ... props } />; } ; export const OffsettedListItem = ( props ) => { const classes = useStyles ( ) ; return < BaseListItem classes = { classes } { ... props } />; } ; export const OffsettedListItemCell = ( props ) => { const classes = useStyles ( ) ; return < BaseListItemCell classes = { classes } { ... props } />; } ; export const useOffsettedListWidths = ( ) => { const theme = useTheme ( ) ; return { actions : ( n = 1 ) => `calc( ${ theme . spacing ( n - 1 + 2.5 ) } + ${ 40 * n }px)` , checkbox : "64px" } ; } ;