From 4692228d2da219a5039e38d04b7e4e47003cc2a4 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 22 Jan 2024 16:55:15 +0100 Subject: [PATCH] Add sorting function for transaction history table --- .../TransactionHistory/Table/Header.tsx | 26 ++++++++++++-- .../Table/utils/sorting.tsx | 34 +++++++++++++++++++ dapp/src/hooks/useTransactionHistoryTable.ts | 6 ++++ dapp/src/static/icons/SortASC.tsx | 8 +++++ dapp/src/static/icons/SortDESC.tsx | 8 +++++ dapp/src/static/icons/index.ts | 2 ++ dapp/src/theme/Table.ts | 30 ++++++++++++++-- 7 files changed, 110 insertions(+), 4 deletions(-) create mode 100644 dapp/src/components/TransactionHistory/Table/utils/sorting.tsx create mode 100644 dapp/src/static/icons/SortASC.tsx create mode 100644 dapp/src/static/icons/SortDESC.tsx diff --git a/dapp/src/components/TransactionHistory/Table/Header.tsx b/dapp/src/components/TransactionHistory/Table/Header.tsx index 34dcf855d..ded1fbcb8 100644 --- a/dapp/src/components/TransactionHistory/Table/Header.tsx +++ b/dapp/src/components/TransactionHistory/Table/Header.tsx @@ -1,9 +1,12 @@ import React from "react" -import { Thead, Tr, Th } from "@chakra-ui/react" +import { Thead, Tr, Th, Icon, useMultiStyleConfig, Box } from "@chakra-ui/react" import { flexRender } from "@tanstack/react-table" import { UseTransactionHistoryTableResult } from "#/types" +import { SORT_ICONS } from "./utils/sorting" function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) { + const styles = useMultiStyleConfig("Table") + return ( {table.getHeaderGroups().map(({ id, headers }) => ( @@ -14,7 +17,26 @@ function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) { onClick={column.getToggleSortingHandler()} textAlign={column.columnDef.meta?.style.textAlign} > - {flexRender(column.columnDef.header, getContext())} + + {flexRender(column.columnDef.header, getContext())} + {column.getCanSort() && ( + + {SORT_ICONS.map(({ key, icon, getColor, boxSize }) => ( + + ))} + + )} + ))} diff --git a/dapp/src/components/TransactionHistory/Table/utils/sorting.tsx b/dapp/src/components/TransactionHistory/Table/utils/sorting.tsx new file mode 100644 index 000000000..bdce4dc30 --- /dev/null +++ b/dapp/src/components/TransactionHistory/Table/utils/sorting.tsx @@ -0,0 +1,34 @@ +import { SortASC, SortDESC } from "#/static/icons" +import { SortDirection } from "@tanstack/react-table" +import { Icon } from "@chakra-ui/react" + +const BOX_SIZE = 1.5 + +const getSortIconColor = ( + isSorted: false | SortDirection, + direction: SortDirection, +) => { + if (isSorted === direction) return "brand.400" + + return undefined +} + +export const SORT_ICONS: { + key: SortDirection + icon: typeof Icon + boxSize: number + getColor: (isSorted: false | SortDirection) => string | undefined +}[] = [ + { + key: "asc", + icon: SortASC, + boxSize: BOX_SIZE, + getColor: (isSorted) => getSortIconColor(isSorted, "asc"), + }, + { + key: "desc", + icon: SortDESC, + boxSize: BOX_SIZE, + getColor: (isSorted) => getSortIconColor(isSorted, "desc"), + }, +] diff --git a/dapp/src/hooks/useTransactionHistoryTable.ts b/dapp/src/hooks/useTransactionHistoryTable.ts index 5969f4c5c..483df6bbf 100644 --- a/dapp/src/hooks/useTransactionHistoryTable.ts +++ b/dapp/src/hooks/useTransactionHistoryTable.ts @@ -1,8 +1,10 @@ import { ColumnDef, PaginationState, + SortingState, getCoreRowModel, getPaginationRowModel, + getSortedRowModel, useReactTable, } from "@tanstack/react-table" import { StakeHistory, UseTransactionHistoryTableResult } from "#/types" @@ -20,16 +22,20 @@ export function useTransactionHistoryTable({ data: StakeHistory[] columns: ColumnDef[] }): UseTransactionHistoryTableResult { + const [sorting, setSorting] = useState([]) const [pagination, setPagination] = useState(PAGINATION_STATE) const table = useReactTable({ columns, data, + onSortingChange: setSorting, + getSortedRowModel: getSortedRowModel(), onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), state: { + sorting, pagination, }, }) diff --git a/dapp/src/static/icons/SortASC.tsx b/dapp/src/static/icons/SortASC.tsx new file mode 100644 index 000000000..edd3ac415 --- /dev/null +++ b/dapp/src/static/icons/SortASC.tsx @@ -0,0 +1,8 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const SortASC = createIcon({ + displayName: "SortASC", + viewBox: "0 0 7 7", + path: , +}) diff --git a/dapp/src/static/icons/SortDESC.tsx b/dapp/src/static/icons/SortDESC.tsx new file mode 100644 index 000000000..1f3da8269 --- /dev/null +++ b/dapp/src/static/icons/SortDESC.tsx @@ -0,0 +1,8 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const SortDESC = createIcon({ + displayName: "SortDESC", + viewBox: "0 0 7 7", + path: , +}) diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts index 178bf2501..39205bab6 100644 --- a/dapp/src/static/icons/index.ts +++ b/dapp/src/static/icons/index.ts @@ -14,3 +14,5 @@ export * from "./ShieldPlus" export * from "./Pending" export * from "./Syncing" export * from "./Complete" +export * from "./SortASC" +export * from "./SortDESC" diff --git a/dapp/src/theme/Table.ts b/dapp/src/theme/Table.ts index 077751f86..e20704a02 100644 --- a/dapp/src/theme/Table.ts +++ b/dapp/src/theme/Table.ts @@ -4,7 +4,14 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" const BORDER_RADIUS_SIZE = "md" const BORDER_STYLE = "1px solid white" -const KEYS = [...parts.keys, "cellContainer", "cell", "divider"] as const +const KEYS = [ + ...parts.keys, + "cellContainer", + "cell", + "divider", + "header", + "sortContainer", +] as const const multiStyleConfig = createMultiStyleConfigHelpers(KEYS) @@ -55,6 +62,17 @@ const variantDoubleRowDivider = defineStyle({ borderBottomWidth: "2px", }) +const baseStyleSortContainer = defineStyle({ + display: "flex", + flexDirection: "column", +}) + +const baseStyleHeader = defineStyle({ + display: "flex", + alignItems: "center", + gap: 2.5, +}) + const variantDoubleRow = multiStyleConfig.definePartsStyle({ table: variantDoubleRowTable, td: variantDoubleRowTd, @@ -68,4 +86,12 @@ const variants = { "double-row": variantDoubleRow, } -export const tableTheme = multiStyleConfig.defineMultiStyleConfig({ variants }) +const baseStyle = multiStyleConfig.definePartsStyle({ + header: baseStyleHeader, + sortContainer: baseStyleSortContainer, +}) + +export const tableTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, + variants, +})