wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-10 12:23:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split DataGridHeaderColumn component

Browse Source
This commit is contained in:
c-bata
2023-11-15 18:50:25 +09:00
parent 4e6d7485c5
commit 7632683da3
1 changed files with 87 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optuna_dashboard/ts/components/DataGrid.tsx
+87 -57
View File
@@ -119,7 +119,7 @@ function DataGrid<T>(props: {
})
// Sorting
const createSortHandler = (columnId: number) => () => {
const createSortHandler = (columnId: number) => {
const isAsc = orderBy === columnId && order === "asc"
setOrder(isAsc ? "desc" : "asc")
setOrderBy(columnId)
@@ -135,20 +135,6 @@ function DataGrid<T>(props: {
const RootDiv = styled("div")({
width: "100%",
})
const HiddenSpan = styled("span")({
border: 0,
clip: "rect(0 0 0 0)",
height: 1,
margin: -1,
overflow: "hidden",
padding: 0,
position: "absolute",
top: 20,
width: 1,
})
const TableHeaderCellSpan = styled("span")({
display: "inline-flex",
})
return (
<RootDiv>
<TableContainer>
@@ -161,48 +147,16 @@ function DataGrid<T>(props: {
<TableRow>
{collapseBody ? <TableCell /> : null}
{columns.map((column, columnIdx) => (
<TableCell
key={columnIdx}
padding={column.padding || "normal"}
sortDirection={orderBy === column.field ? order : false}
>
<TableHeaderCellSpan>
{column.sortable ? (
<TableSortLabel
active={orderBy === columnIdx}
direction={orderBy === columnIdx ? order : "asc"}
onClick={createSortHandler(columnIdx)}
>
{column.label}
{orderBy === column.field ? (
<HiddenSpan>
{order === "desc"
? "sorted descending"
: "sorted ascending"}
</HiddenSpan>
) : null}
</TableSortLabel>
) : (
column.label
)}
{column.filterable ? (
<IconButton
size={dense ? "small" : "medium"}
style={
fieldAlreadyFiltered(columnIdx)
? {}
: { visibility: "hidden" }
}
color="inherit"
onClick={() => {
clearFilter(columnIdx)
}}
>
<Clear />
</IconButton>
) : null}
</TableHeaderCellSpan>
</TableCell>
<DataGridHeaderColumn<T>
key={column.label}
createSortHandler={createSortHandler}
column={column}
columnIdx={columnIdx}
orderBy={orderBy}
order={order}
clearFilter={clearFilter}
filtered={fieldAlreadyFiltered(columnIdx)}
/>
))}
</TableRow>
</TableHead>
@@ -239,6 +193,82 @@ function DataGrid<T>(props: {
)
}
function DataGridHeaderColumn<T>(props: {
column: DataGridColumn<T>
columnIdx: number
orderBy: number
order: Order
dense?: boolean
createSortHandler: (columnIdx: number) => void
clearFilter: (columnIdx: number) => void
filtered: boolean
}) {
const {
column,
columnIdx,
dense,
orderBy,
order,
createSortHandler,
clearFilter,
filtered,
} = props
const HiddenSpan = styled("span")({
border: 0,
clip: "rect(0 0 0 0)",
height: 1,
margin: -1,
overflow: "hidden",
padding: 0,
position: "absolute",
top: 20,
width: 1,
})
const TableHeaderCellSpan = styled("span")({
display: "inline-flex",
})
return (
<TableCell
padding={column.padding || "normal"}
sortDirection={orderBy === column.field ? order : false}
>
<TableHeaderCellSpan>
{column.sortable ? (
<TableSortLabel
active={orderBy === columnIdx}
direction={orderBy === columnIdx ? order : "asc"}
onClick={() => {
createSortHandler(columnIdx)
}}
>
{column.label}
{orderBy === column.field ? (
<HiddenSpan>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</HiddenSpan>
) : null}
</TableSortLabel>
) : (
column.label
)}
{column.filterable ? (
<IconButton
size={dense ? "small" : "medium"}
style={filtered ? {} : { visibility: "hidden" }}
color="inherit"
onClick={() => {
clearFilter(columnIdx)
}}
>
<Clear />
</IconButton>
) : null}
</TableHeaderCellSpan>
</TableCell>
)
}
function DataGridRow<T>(props: {
columns: DataGridColumn<T>[]
rowIndex: number