playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2100
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +14 -12
- data/app/pb_kits/playbook/index.js +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +128 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +245 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +13 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +71 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.scss +6 -48
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +32 -91
- data/app/pb_kits/playbook/pb_icon/icon.rb +11 -20
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/menu.yml +4 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +29 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 406baf5e13cf91d0790a8d667fa7ff40347bdc8075ec388fb518eb0e21f1608b
|
4
|
+
data.tar.gz: 5ea634b8a6c31212491e5ddf01841193fb5b5ca2abadd45100cfa2c7ddc89202
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: df2ffbacc5eed998a241115546e2356ff7a28b4b92ace25f54576c30edeb0e71484872323bfbd7f7f59460e12b60960661fbcff545d16697457bdc03df41a254
|
7
|
+
data.tar.gz: 38b9fc21b95219edfb0b4ab51bd7aa565465b829915fa736edbdec568910eb87953a4b45964bd21d784a45eea0e5df2466c8c8004288584079cf7fa1c02bcb52
|
@@ -1,16 +1,17 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
@import 'pb_advanced_table/advanced_table';
|
4
|
+
@import 'pb_avatar/avatar';
|
5
|
+
@import 'pb_avatar_action_button/avatar_action_button';
|
1
6
|
@import 'pb_background/background';
|
7
|
+
@import 'pb_badge/badge';
|
8
|
+
@import 'pb_bar_graph/bar_graph';
|
2
9
|
@import 'pb_body/body';
|
3
10
|
@import 'pb_bread_crumbs/bread_crumbs';
|
4
11
|
@import 'pb_button/button';
|
5
12
|
@import 'pb_button_toolbar/button_toolbar';
|
6
13
|
@import 'pb_caption/caption';
|
7
14
|
@import 'pb_card/card';
|
8
|
-
@import 'pb_detail/detail';
|
9
|
-
@import 'pb_title/title';
|
10
|
-
@import 'pb_avatar/avatar';
|
11
|
-
@import 'pb_avatar_action_button/avatar_action_button';
|
12
|
-
@import 'pb_badge/badge';
|
13
|
-
@import 'pb_bar_graph/bar_graph';
|
14
15
|
@import 'pb_checkbox/checkbox';
|
15
16
|
@import 'pb_circle_chart/circle_chart';
|
16
17
|
@import 'pb_circle_icon_button/circle_icon_button';
|
@@ -20,21 +21,22 @@
|
|
20
21
|
@import 'pb_dashboard_value/dashboard_value';
|
21
22
|
@import 'pb_date/date';
|
22
23
|
@import 'pb_date_picker/date_picker';
|
23
|
-
@import 'pb_date_time/date_time';
|
24
24
|
@import 'pb_date_range_inline/date_range_inline';
|
25
25
|
@import 'pb_date_range_stacked/date_range_stacked';
|
26
26
|
@import 'pb_date_stacked/date_stacked';
|
27
|
+
@import 'pb_date_time/date_time';
|
27
28
|
@import 'pb_date_time_stacked/date_time_stacked';
|
28
29
|
@import 'pb_date_year_stacked/date_year_stacked';
|
30
|
+
@import 'pb_detail/detail';
|
29
31
|
@import 'pb_dialog/dialog';
|
30
32
|
@import 'pb_distribution_bar/distribution_bar';
|
31
33
|
@import 'pb_file_upload/file_upload';
|
32
34
|
@import 'pb_filter/filter';
|
33
35
|
@import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
|
36
|
+
@import 'pb_flex/flex';
|
34
37
|
@import 'pb_form/form';
|
35
38
|
@import 'pb_form_group/form_group';
|
36
39
|
@import 'pb_form_pill/form_pill';
|
37
|
-
@import 'pb_flex/flex';
|
38
40
|
@import 'pb_gauge/gauge';
|
39
41
|
@import 'pb_hashtag/hashtag';
|
40
42
|
@import 'pb_highlight/highlight';
|
@@ -55,6 +57,7 @@
|
|
55
57
|
@import 'pb_map/map';
|
56
58
|
@import 'pb_map/pb_map_button_mixin';
|
57
59
|
@import 'pb_message/message';
|
60
|
+
@import 'pb_multi_level_select/multi_level_select';
|
58
61
|
@import 'pb_multiple_users/multiple_users';
|
59
62
|
@import 'pb_multiple_users_stacked/multiple_users_stacked';
|
60
63
|
@import 'pb_nav/nav';
|
@@ -85,9 +88,11 @@
|
|
85
88
|
@import 'pb_text_input/text_input';
|
86
89
|
@import 'pb_textarea/textarea';
|
87
90
|
@import 'pb_time/time';
|
88
|
-
@import 'pb_timeline/timeline';
|
89
91
|
@import 'pb_time_range_inline/time_range_inline';
|
92
|
+
@import 'pb_time_stacked/time_stacked';
|
93
|
+
@import 'pb_timeline/timeline';
|
90
94
|
@import 'pb_timestamp/timestamp';
|
95
|
+
@import 'pb_title/title';
|
91
96
|
@import 'pb_title_count/title_count';
|
92
97
|
@import 'pb_title_detail/title_detail';
|
93
98
|
@import 'pb_toggle/toggle';
|
@@ -96,7 +101,6 @@
|
|
96
101
|
@import 'pb_typeahead/typeahead';
|
97
102
|
@import 'pb_user/user';
|
98
103
|
@import 'pb_user_badge/user_badge';
|
99
|
-
@import 'pb_time_stacked/time_stacked';
|
100
104
|
@import 'pb_walkthrough/walkthrough';
|
101
105
|
@import 'pb_weekday_stacked/weekday_stacked';
|
102
106
|
@import './utilities/mixins';
|
@@ -115,5 +119,3 @@
|
|
115
119
|
@import './utilities/text_align';
|
116
120
|
@import './utilities/overflow';
|
117
121
|
@import './utilities/truncate';
|
118
|
-
|
119
|
-
@import 'pb_multi_level_select/multi_level_select';
|
@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
|
|
4
4
|
import 'lazysizes'
|
5
5
|
|
6
6
|
// vvv React Component JSX Imports from the React Kits vvv
|
7
|
+
export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
|
7
8
|
export { default as Avatar } from './pb_avatar/_avatar'
|
8
9
|
export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
|
9
10
|
export { default as Background } from './pb_background/_background'
|
@@ -59,8 +60,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
|
|
59
60
|
export { default as List } from './pb_list/_list'
|
60
61
|
export { default as ListItem } from './pb_list/_list_item'
|
61
62
|
export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
|
62
|
-
export { default as Map} from './pb_map/_map'
|
63
63
|
export { default as MapCustomButton } from './pb_map/_map_custom_button'
|
64
|
+
export { default as Map} from './pb_map/_map'
|
64
65
|
export { default as Message } from './pb_message/_message'
|
65
66
|
export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
|
66
67
|
export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from "react"
|
2
|
+
|
3
|
+
//CollapsibleTrail component
|
4
|
+
const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
|
5
|
+
const style: { [key: string]: string | number } = {
|
6
|
+
position: "absolute",
|
7
|
+
left: `${leftOffset}em`,
|
8
|
+
top: 0,
|
9
|
+
bottom: 0,
|
10
|
+
width: "2px",
|
11
|
+
backgroundColor: "#E4E8F0",
|
12
|
+
}
|
13
|
+
|
14
|
+
return <div style={style} />
|
15
|
+
}
|
16
|
+
|
17
|
+
// Updated function to render multiple trails depending on depth
|
18
|
+
export const renderCollapsibleTrail = (currentDepth: number) => {
|
19
|
+
const lines = []
|
20
|
+
for (let i = 1; i <= currentDepth; i++) {
|
21
|
+
// Calculate leftOffset with additional 0.4rem for each depth level above 1
|
22
|
+
const additionalOffset = i > 1 ? (i - 1) * 0.25 : 0
|
23
|
+
const leftOffset = i * 1.0 + additionalOffset
|
24
|
+
lines.push(<CollapsibleTrail key={i}
|
25
|
+
leftOffset={leftOffset}
|
26
|
+
/>
|
27
|
+
)
|
28
|
+
}
|
29
|
+
return lines
|
30
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React, { useContext } from "react";
|
2
|
+
|
3
|
+
import Flex from "../../pb_flex/_flex";
|
4
|
+
import FlexItem from "../../pb_flex/_flex_item";
|
5
|
+
import Icon from "../../pb_icon/_icon";
|
6
|
+
import { GlobalProps } from "../../utilities/globalProps";
|
7
|
+
|
8
|
+
import { Getter, Row } from "@tanstack/react-table";
|
9
|
+
import { DataType } from "../Utilities/types";
|
10
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext";
|
11
|
+
|
12
|
+
interface CustomCellProps {
|
13
|
+
getValue?: Getter<string>;
|
14
|
+
onRowToggleClick?: (arg: Row<DataType>) => void;
|
15
|
+
row: Row<DataType>;
|
16
|
+
value?: string;
|
17
|
+
}
|
18
|
+
|
19
|
+
export const CustomCell = ({
|
20
|
+
getValue,
|
21
|
+
onRowToggleClick,
|
22
|
+
row,
|
23
|
+
value,
|
24
|
+
}: CustomCellProps & GlobalProps) => {
|
25
|
+
const { setExpanded, expanded } = useContext(AdvancedTableContext);
|
26
|
+
const RowWithoutChildren = row.originalSubRows === undefined;
|
27
|
+
|
28
|
+
const handleOnExpand = (row: Row<DataType>) => {
|
29
|
+
onRowToggleClick && onRowToggleClick(row);
|
30
|
+
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
|
31
|
+
};
|
32
|
+
|
33
|
+
return (
|
34
|
+
<div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
|
35
|
+
<Flex alignItems="center"
|
36
|
+
columnGap="xs"
|
37
|
+
orientation="row"
|
38
|
+
>
|
39
|
+
{!RowWithoutChildren ? (
|
40
|
+
<button
|
41
|
+
className="gray-icon expand-toggle-icon"
|
42
|
+
onClick={() => handleOnExpand(row)}
|
43
|
+
>
|
44
|
+
{row.getIsExpanded() ? (
|
45
|
+
<Icon cursor="pointer"
|
46
|
+
icon="circle-play"
|
47
|
+
rotation={90}
|
48
|
+
/>
|
49
|
+
) : (
|
50
|
+
<Icon cursor="pointer"
|
51
|
+
icon="circle-play"
|
52
|
+
/>
|
53
|
+
)}
|
54
|
+
</button>
|
55
|
+
) : null}
|
56
|
+
<FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
|
57
|
+
{row.depth === 0 ? getValue() : value}
|
58
|
+
</FlexItem>
|
59
|
+
</Flex>
|
60
|
+
</div>
|
61
|
+
);
|
62
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import Icon from "../../pb_icon/_icon"
|
3
|
+
import { Header } from "@tanstack/react-table"
|
4
|
+
import { DataType } from "../Utilities/types"
|
5
|
+
import { displayIcon } from "../Utilities/IconHelpers"
|
6
|
+
|
7
|
+
type SortIconButtonProps = {
|
8
|
+
header: Header<DataType, unknown>
|
9
|
+
sortIcon?: string | string[]
|
10
|
+
}
|
11
|
+
export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
|
12
|
+
|
13
|
+
return (
|
14
|
+
<>
|
15
|
+
{header.column.getIsSorted() === "desc" ? (
|
16
|
+
<div className="sort-button-icon"
|
17
|
+
key={displayIcon(sortIcon)[0]}
|
18
|
+
>
|
19
|
+
<Icon icon={displayIcon(sortIcon)[0]} />
|
20
|
+
</div>
|
21
|
+
) : (
|
22
|
+
<div className="sort-button-icon"
|
23
|
+
key={displayIcon(sortIcon)[1]}
|
24
|
+
>
|
25
|
+
<Icon icon={displayIcon(sortIcon)[1]} />
|
26
|
+
</div>
|
27
|
+
)}
|
28
|
+
</>
|
29
|
+
)
|
30
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import Flex from "../../pb_flex/_flex"
|
3
|
+
import Caption from "../../pb_caption/_caption"
|
4
|
+
import { Row, Table } from "@tanstack/react-table"
|
5
|
+
|
6
|
+
import { ToggleIconButton } from "./ToggleIconButton"
|
7
|
+
import { renderCollapsibleTrail } from "./CollapsibleTrail"
|
8
|
+
|
9
|
+
import { isChrome } from "../Utilities/BrowserCheck"
|
10
|
+
import { DataType } from "../Utilities/types"
|
11
|
+
import { GlobalProps } from "../../utilities/globalProps"
|
12
|
+
|
13
|
+
interface SubRowHeaderRowProps {
|
14
|
+
collapsibleTrail?: boolean
|
15
|
+
enableToggleExpansion?: "all" | "header"
|
16
|
+
onClick: (row: Row<DataType>) => void
|
17
|
+
row: Row<DataType>
|
18
|
+
subRowHeaders?: string[]
|
19
|
+
table: Table<DataType>
|
20
|
+
}
|
21
|
+
|
22
|
+
export const SubRowHeaderRow = ({
|
23
|
+
collapsibleTrail,
|
24
|
+
enableToggleExpansion,
|
25
|
+
onClick,
|
26
|
+
row,
|
27
|
+
subRowHeaders,
|
28
|
+
table,
|
29
|
+
}: SubRowHeaderRowProps & GlobalProps) => {
|
30
|
+
const numberOfColumns = table.getAllFlatColumns().length
|
31
|
+
|
32
|
+
return (
|
33
|
+
<tr className="custom-row bg-silver">
|
34
|
+
<td
|
35
|
+
className={`custom-row-first-column ${
|
36
|
+
isChrome() ? "chrome-styles" : ""
|
37
|
+
}`}
|
38
|
+
colSpan={1}
|
39
|
+
>
|
40
|
+
{collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
|
41
|
+
<div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
|
42
|
+
<Flex align="center"
|
43
|
+
columnGap="xs"
|
44
|
+
>
|
45
|
+
{enableToggleExpansion === "all" && row.getCanExpand() ? (
|
46
|
+
<ToggleIconButton onClick={onClick}
|
47
|
+
row={row}
|
48
|
+
/>
|
49
|
+
) : null}
|
50
|
+
<Caption
|
51
|
+
marginLeft={row.getCanExpand() ? "none" : "xs"}
|
52
|
+
text={subRowHeaders[row.depth - 1]}
|
53
|
+
/>
|
54
|
+
</Flex>
|
55
|
+
</div>
|
56
|
+
</td>
|
57
|
+
|
58
|
+
<td colSpan={numberOfColumns - 1} />
|
59
|
+
</tr>
|
60
|
+
)
|
61
|
+
}
|
@@ -0,0 +1,128 @@
|
|
1
|
+
import React, { useContext } from "react"
|
2
|
+
import classnames from "classnames";
|
3
|
+
import Flex from "../../pb_flex/_flex"
|
4
|
+
import { flexRender, Header } from "@tanstack/react-table"
|
5
|
+
|
6
|
+
import { SortIconButton } from "./SortIconButton"
|
7
|
+
import { ToggleIconButton } from "./ToggleIconButton"
|
8
|
+
import { isChrome } from "../Utilities/BrowserCheck"
|
9
|
+
import { DataType } from "../Utilities/types"
|
10
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
11
|
+
import { GlobalProps } from "../../utilities/globalProps"
|
12
|
+
|
13
|
+
type TableHeaderCellProps = {
|
14
|
+
enableSorting?: boolean
|
15
|
+
enableToggleExpansion?: "all" | "header"
|
16
|
+
handleExpandOrCollapse?: () => void
|
17
|
+
header?: Header<DataType, unknown>
|
18
|
+
headerChildren?: React.ReactNode | React.ReactNode[]
|
19
|
+
headerId?: string
|
20
|
+
loading?: boolean
|
21
|
+
sortIcon?: string | string[]
|
22
|
+
} & GlobalProps
|
23
|
+
|
24
|
+
export const TableHeaderCell = ({
|
25
|
+
enableSorting,
|
26
|
+
enableToggleExpansion,
|
27
|
+
handleExpandOrCollapse,
|
28
|
+
header,
|
29
|
+
headerChildren,
|
30
|
+
headerId,
|
31
|
+
loading,
|
32
|
+
sortIcon,
|
33
|
+
}: TableHeaderCellProps) => {
|
34
|
+
const { sortControl } = useContext(AdvancedTableContext)
|
35
|
+
|
36
|
+
const toggleSortButton = (event: React.SyntheticEvent) => {
|
37
|
+
if (sortControl) {
|
38
|
+
const sortIsDesc = header.column.getIsSorted() === "desc"
|
39
|
+
sortIsDesc
|
40
|
+
? sortControl.onChange({ desc: true })
|
41
|
+
: sortControl.onChange({ desc: false })
|
42
|
+
} else {
|
43
|
+
header.column.getToggleSortingHandler()(event)
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
const cellClassName = classnames("table-header-cells",
|
48
|
+
`${isChrome() ? "chrome-styles" : ""}`,
|
49
|
+
`${enableSorting ? "table-header-cells-active" : ""}`
|
50
|
+
);
|
51
|
+
|
52
|
+
const cellId = `${loading ?
|
53
|
+
`loading-${header.id}${headerId ? `-${headerId}` : ""}`
|
54
|
+
: `${header.id}${headerId ? `-${headerId}` : ""}`
|
55
|
+
}`;
|
56
|
+
|
57
|
+
return (
|
58
|
+
<th
|
59
|
+
align="right"
|
60
|
+
className={cellClassName}
|
61
|
+
id={cellId}
|
62
|
+
key={`${header.id}-header`}
|
63
|
+
>
|
64
|
+
{header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
|
65
|
+
<Flex alignItems="center">
|
66
|
+
{headerChildren}
|
67
|
+
<div>
|
68
|
+
{flexRender(header.column.columnDef.header, header.getContext())}
|
69
|
+
</div>
|
70
|
+
</Flex>
|
71
|
+
) : (
|
72
|
+
<Flex
|
73
|
+
alignItems="center"
|
74
|
+
justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
|
75
|
+
paddingLeft={loading ? "sm" : "none"}
|
76
|
+
>
|
77
|
+
{header.index === 0 &&
|
78
|
+
!loading &&
|
79
|
+
(enableToggleExpansion === "all" || "header") && (
|
80
|
+
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
81
|
+
)}
|
82
|
+
|
83
|
+
{header.index === 0 &&
|
84
|
+
loading &&
|
85
|
+
(enableToggleExpansion === "all" || "header") && (
|
86
|
+
<div className="loading-toggle-icon header-toggle-icon" />
|
87
|
+
)}
|
88
|
+
|
89
|
+
<Flex
|
90
|
+
className={`${header.index === 0 &&
|
91
|
+
enableSorting &&
|
92
|
+
"header-sort-button pb_th_link"}`}
|
93
|
+
cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
|
94
|
+
{...(header.index === 0 &&
|
95
|
+
enableSorting && {
|
96
|
+
htmlOptions: {
|
97
|
+
onClick: (event: React.MouseEvent) => toggleSortButton(event),
|
98
|
+
onKeyDown: (event: React.KeyboardEvent) => {
|
99
|
+
if (event.key === "Enter") {
|
100
|
+
toggleSortButton(event)
|
101
|
+
}
|
102
|
+
},
|
103
|
+
tabIndex: 0,
|
104
|
+
},
|
105
|
+
})}
|
106
|
+
justify={header.index === 0 && enableSorting ? "between" : "none"}
|
107
|
+
paddingLeft={enableSorting ? "xxs" : "xs"}
|
108
|
+
>
|
109
|
+
<div>
|
110
|
+
{flexRender(header.column.columnDef.header, header.getContext())}
|
111
|
+
</div>
|
112
|
+
|
113
|
+
{header.index === 0 &&
|
114
|
+
header.column.getCanSort() &&
|
115
|
+
enableSorting &&
|
116
|
+
(loading ? (
|
117
|
+
<div className="loading-toggle-icon header-sort-icon" />
|
118
|
+
) : (
|
119
|
+
<SortIconButton header={header}
|
120
|
+
sortIcon={sortIcon}
|
121
|
+
/>
|
122
|
+
))}
|
123
|
+
</Flex>
|
124
|
+
</Flex>
|
125
|
+
)}
|
126
|
+
</th>
|
127
|
+
)
|
128
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import React, { useContext } from "react"
|
2
|
+
import Icon from "../../pb_icon/_icon"
|
3
|
+
import { Row } from "@tanstack/react-table"
|
4
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
5
|
+
import { DataType } from "../Utilities/types"
|
6
|
+
import { displayIcon } from "../Utilities/IconHelpers"
|
7
|
+
|
8
|
+
interface ToggleIconButtonProps {
|
9
|
+
onClick: (row: Row<DataType>) => void
|
10
|
+
row?: Row<DataType>
|
11
|
+
}
|
12
|
+
|
13
|
+
export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
|
14
|
+
const { toggleExpansionIcon } = useContext(AdvancedTableContext)
|
15
|
+
return (
|
16
|
+
<button
|
17
|
+
className="gray-icon toggle-all-icon"
|
18
|
+
key={displayIcon(toggleExpansionIcon)[0]}
|
19
|
+
onClick={() => onClick(row)}
|
20
|
+
>
|
21
|
+
<Icon
|
22
|
+
cursor="pointer"
|
23
|
+
fixedWidth
|
24
|
+
icon={displayIcon(toggleExpansionIcon)[0]}
|
25
|
+
/>
|
26
|
+
</button>
|
27
|
+
)
|
28
|
+
}
|