playbook_ui 13.16.0.pre.alpha.PLAY11642006 → 13.16.0.pre.alpha.PLAY12002127

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +127 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +246 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +52 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +18 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +59 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +18 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +60 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +3 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +52 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +5 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +63 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +3 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +57 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +3 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +61 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +3 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +55 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +1 -0
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +9 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +72 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  46. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  47. data/app/pb_kits/playbook/pb_icon/_icon.tsx +17 -29
  48. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +11 -5
  49. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +18 -44
  50. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +12 -7
  51. data/app/pb_kits/playbook/pb_icon/icon.html.erb +4 -6
  52. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  53. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  55. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  56. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  57. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  58. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  60. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  61. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  62. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  63. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  64. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  65. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  66. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  67. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  68. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  69. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  70. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  71. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  72. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  73. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  74. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  75. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
  76. data/app/pb_kits/playbook/pb_popover/_popover.tsx +12 -14
  77. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
  78. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
  79. data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
  80. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  81. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  82. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  83. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  84. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  85. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  86. data/dist/menu.yml +4 -1
  87. data/dist/playbook-rails.js +14 -6
  88. data/lib/playbook/version.rb +1 -1
  89. metadata +46 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: becba3d632ca153d413d36656e837e7bd1fcba2f357027f264888a4a4dea26ef
4
- data.tar.gz: 1bd3f93f4bde74704c72fb10e81db5cd9a1495754decd07a8059a76f8f6f3a5f
3
+ metadata.gz: 10f6ad667414f5191e6eaabc5603c5d5087c13c16ec0a91da03ee49c5ebebe1d
4
+ data.tar.gz: b1a702d5294e18fa20c424c7aa4490c8d022e39c1f8ec70e7d91ce9b38887a96
5
5
  SHA512:
6
- metadata.gz: 9162fdd9881beb55aa2d67617008f990398cdb47619ba0b0493495993142ebf401e707105c7dc041cd1cdeff088a7a7c0c69a9d122cbf6fa2535c9a3577b60aa
7
- data.tar.gz: cb78ba7dae05f19fa60d591ef1141edda4b20eee5b78f48d771c74be287d42d8f8668578dbabccae0c9654069f109467d7f31abcace58653ee84e6b2b5adcf9b
6
+ metadata.gz: 9deeaea331197080119774f32c135bdd8513ffac1cfd8f92606f515ebc9bfbf69c766a2883f5e9a3cb152df1c973029b7c56ba3c7fa43ebcc4ddd815dca550a3
7
+ data.tar.gz: b4cd197eb4b86f1b0a60e07f702e4761c08caf130b7112531944875e40d5c7166b09bba63ef43bbf53e1445c308fd5717953abf270f2b1bac88f3ebe5fc2e766
@@ -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,5 @@
1
+ import React from "react"
2
+
3
+ export const LoadingCell = () => {
4
+ return <div className="loading-cell" />
5
+ }
@@ -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,127 @@
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
+ >
76
+ {header.index === 0 &&
77
+ !loading &&
78
+ (enableToggleExpansion === "all" || "header") && (
79
+ <ToggleIconButton onClick={handleExpandOrCollapse} />
80
+ )}
81
+
82
+ {header.index === 0 &&
83
+ loading &&
84
+ (enableToggleExpansion === "all" || "header") && (
85
+ <div className="loading-toggle-icon header-toggle-icon" />
86
+ )}
87
+
88
+ <Flex
89
+ className={`${header.index === 0 &&
90
+ enableSorting &&
91
+ "header-sort-button pb_th_link"}`}
92
+ cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
93
+ {...(header.index === 0 &&
94
+ enableSorting && {
95
+ htmlOptions: {
96
+ onClick: (event: React.MouseEvent) => toggleSortButton(event),
97
+ onKeyDown: (event: React.KeyboardEvent) => {
98
+ if (event.key === "Enter") {
99
+ toggleSortButton(event)
100
+ }
101
+ },
102
+ tabIndex: 0,
103
+ },
104
+ })}
105
+ justify={header.index === 0 && enableSorting ? "between" : "none"}
106
+ paddingLeft={enableSorting ? "xxs" : "xs"}
107
+ >
108
+ <div>
109
+ {flexRender(header.column.columnDef.header, header.getContext())}
110
+ </div>
111
+
112
+ {header.index === 0 &&
113
+ header.column.getCanSort() &&
114
+ enableSorting &&
115
+ (loading ? (
116
+ <div className="loading-toggle-icon" />
117
+ ) : (
118
+ <SortIconButton header={header}
119
+ sortIcon={sortIcon}
120
+ />
121
+ ))}
122
+ </Flex>
123
+ </Flex>
124
+ )}
125
+ </th>
126
+ )
127
+ }
@@ -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
+ }
@@ -0,0 +1,5 @@
1
+ import { createContext } from "react"
2
+
3
+ const AdvancedTableContext = createContext<any>({})
4
+
5
+ export default AdvancedTableContext