playbook_ui 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +21 -19
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +14 -10
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
  9. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -9
  12. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +82 -78
  13. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  33. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  34. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  35. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  36. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  37. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  38. data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
  39. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  40. data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
  41. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  47. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  48. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  49. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  50. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  51. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  52. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  53. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  54. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  55. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  56. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  57. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  58. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  59. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  60. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
  61. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  62. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  63. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  64. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  65. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  66. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  67. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  68. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  69. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  70. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  71. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  72. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  73. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  74. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  75. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  76. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  77. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  79. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  80. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  81. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  82. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  83. data/dist/playbook-rails.js +2 -2
  84. data/lib/playbook/version.rb +2 -2
  85. metadata +21 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5e7f392fc3d4bc8c6c896b4b54fd0cf5fcb4953fc1de2ee8bd59f14e223462a5
4
- data.tar.gz: 71904fc8f23cb411b2022643cb08167a3c8a882a9f1bd135dbbeb980674c0bf4
3
+ metadata.gz: e15b75aa8e734fcf7c1d4a4d6125f4bdb85d88513c1f0f8815c35220855b044e
4
+ data.tar.gz: 9e7cee23ebd94a5a90bd9d35902b7bc671d9f284311048197e6e15c76ae65630
5
5
  SHA512:
6
- metadata.gz: 85f2629ac4ad220d2c39ca406eb422a9ae0d04052f6bb893b3feceb1b909b281d19faa7a47e2f09a2003fb5ac2f2aa42bddabcf337b54ee345841d96be308ec3
7
- data.tar.gz: cb38c42e015efbec6d56ed5d6cb4bdfe8c0cdeb91f4c8baeb02679348380c4dbca08f1a6d977bc3c23f0e761b43f1e9578ee1d4c1600cd94048fbe2970d6a27d
6
+ metadata.gz: c16e3c834fd8dc73924855756f1b4baaa88c96904968fbe1233f673621018aa3bbb5812ec1b03c6e903c5f99d01e3e41442e07ecfda409a4f95724e37279b053
7
+ data.tar.gz: 2bd9cfe1dc2a14974eb3f3c7cbffa5ff5493c26770ad8aaaa9fe5cb2bb5d0476b6e62abaa7e642967a45774b7af6fbd69fce21b3b32dfddafae68a1218beb8e9
@@ -1,19 +1,21 @@
1
- import React, { useContext } from "react";
1
+ import React, { useContext } from "react"
2
+ import { Getter, Row } from "@tanstack/react-table"
2
3
 
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";
4
+ import { GenericObject } from "../../types"
7
5
 
8
- import { Getter, Row } from "@tanstack/react-table";
9
- import { DataType } from "../Utilities/types";
10
- import AdvancedTableContext from "../Context/AdvancedTableContext";
6
+ import { GlobalProps } from "../../utilities/globalProps"
7
+
8
+ import Flex from "../../pb_flex/_flex"
9
+ import FlexItem from "../../pb_flex/_flex_item"
10
+ import Icon from "../../pb_icon/_icon"
11
+
12
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
11
13
 
12
14
  interface CustomCellProps {
13
- getValue?: Getter<string>;
14
- onRowToggleClick?: (arg: Row<DataType>) => void;
15
- row: Row<DataType>;
16
- value?: string;
15
+ getValue?: Getter<string>
16
+ onRowToggleClick?: (arg: Row<GenericObject>) => void
17
+ row: Row<GenericObject>
18
+ value?: string
17
19
  }
18
20
 
19
21
  export const CustomCell = ({
@@ -22,12 +24,12 @@ export const CustomCell = ({
22
24
  row,
23
25
  value,
24
26
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
27
+ const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
26
28
 
27
- const handleOnExpand = (row: Row<DataType>) => {
28
- onRowToggleClick && onRowToggleClick(row);
29
- setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
30
- };
29
+ const handleOnExpand = (row: Row<GenericObject>) => {
30
+ onRowToggleClick && onRowToggleClick(row)
31
+ setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
32
+ }
31
33
  const RowHasChildren = row.original.children ? true : false
32
34
  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
33
35
 
@@ -59,5 +61,5 @@ export const CustomCell = ({
59
61
  </FlexItem>
60
62
  </Flex>
61
63
  </div>
62
- );
63
- };
64
+ )
65
+ }
@@ -1,11 +1,14 @@
1
1
  import React from "react"
2
- import Icon from "../../pb_icon/_icon"
3
2
  import { Header } from "@tanstack/react-table"
4
- import { DataType } from "../Utilities/types"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import Icon from "../../pb_icon/_icon"
7
+
5
8
  import { displayIcon } from "../Utilities/IconHelpers"
6
9
 
7
10
  type SortIconButtonProps = {
8
- header: Header<DataType, unknown>
11
+ header: Header<GenericObject, unknown>
9
12
  sortIcon?: string | string[]
10
13
  }
11
14
  export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
@@ -1,23 +1,27 @@
1
1
  import React, { useContext } from "react"
2
+ import { Row, Table } from "@tanstack/react-table"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import { GlobalProps } from "../../utilities/globalProps"
7
+
2
8
  import Flex from "../../pb_flex/_flex"
3
9
  import Caption from "../../pb_caption/_caption"
4
- import { Row, Table } from "@tanstack/react-table"
5
10
 
6
- import AdvancedTableContext from "../Context/AdvancedTableContext";
7
11
  import { ToggleIconButton } from "./ToggleIconButton"
8
12
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
9
13
 
10
14
  import { isChrome } from "../Utilities/BrowserCheck"
11
- import { DataType } from "../Utilities/types"
12
- import { GlobalProps } from "../../utilities/globalProps"
15
+
16
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
13
17
 
14
18
  interface SubRowHeaderRowProps {
15
19
  collapsibleTrail?: boolean
16
20
  enableToggleExpansion?: "all" | "header" | "none"
17
- onClick: (row: Row<DataType>) => void
18
- row: Row<DataType>
21
+ onClick: (row: Row<GenericObject>) => void
22
+ row: Row<GenericObject>
19
23
  subRowHeaders?: string[]
20
- table: Table<DataType>
24
+ table: Table<GenericObject>
21
25
  }
22
26
 
23
27
  export const SubRowHeaderRow = ({
@@ -28,7 +32,7 @@ export const SubRowHeaderRow = ({
28
32
  subRowHeaders,
29
33
  table,
30
34
  }: SubRowHeaderRowProps & GlobalProps) => {
31
- const { inlineRowLoading } = useContext(AdvancedTableContext);
35
+ const { inlineRowLoading } = useContext(AdvancedTableContext)
32
36
 
33
37
  const numberOfColumns = table.getAllFlatColumns().length
34
38
  const rowHasChildren = row.original.children ? true : false
@@ -1,20 +1,25 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import Flex from "../../pb_flex/_flex"
2
+ import classnames from "classnames"
4
3
  import { flexRender, Header } from "@tanstack/react-table"
5
4
 
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { GlobalProps } from "../../utilities/globalProps"
8
+
9
+ import Flex from "../../pb_flex/_flex"
10
+
6
11
  import { SortIconButton } from "./SortIconButton"
7
12
  import { ToggleIconButton } from "./ToggleIconButton"
13
+
8
14
  import { isChrome } from "../Utilities/BrowserCheck"
9
- import { DataType } from "../Utilities/types"
15
+
10
16
  import AdvancedTableContext from "../Context/AdvancedTableContext"
11
- import { GlobalProps } from "../../utilities/globalProps"
12
17
 
13
18
  type TableHeaderCellProps = {
14
19
  enableSorting?: boolean
15
20
  enableToggleExpansion?: "all" | "header" | "none"
16
21
  handleExpandOrCollapse?: () => void
17
- header?: Header<DataType, unknown>
22
+ header?: Header<GenericObject, unknown>
18
23
  headerChildren?: React.ReactNode | React.ReactNode[]
19
24
  loading?: boolean
20
25
  sortIcon?: string | string[]
@@ -45,24 +50,24 @@ export const TableHeaderCell = ({
45
50
  const cellClassName = classnames("table-header-cells",
46
51
  `${isChrome() ? "chrome-styles" : ""}`,
47
52
  `${enableSorting ? "table-header-cells-active" : ""}`
48
- );
53
+ )
49
54
 
50
55
  const cellId = `${loading ?
51
56
  `loading-${header.id}`
52
57
  : `${header.id}`
53
- }`;
58
+ }`
54
59
 
55
60
  const isToggleExpansionEnabledLoading =
56
61
  header.index === 0 &&
57
62
  loading &&
58
63
  (enableToggleExpansion === "all" || "header") &&
59
- enableToggleExpansion !== "none";
64
+ enableToggleExpansion !== "none"
60
65
 
61
66
  const isToggleExpansionEnabled =
62
67
  header.index === 0 &&
63
68
  !loading &&
64
69
  (enableToggleExpansion === "all" || "header") &&
65
- enableToggleExpansion !== "none";
70
+ enableToggleExpansion !== "none"
66
71
 
67
72
  return (
68
73
  <th
@@ -1,13 +1,17 @@
1
1
  import React, { useContext } from "react"
2
- import Icon from "../../pb_icon/_icon"
3
2
  import { Row } from "@tanstack/react-table"
4
- import AdvancedTableContext from "../Context/AdvancedTableContext"
5
- import { DataType } from "../Utilities/types"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import Icon from "../../pb_icon/_icon"
7
+
6
8
  import { displayIcon } from "../Utilities/IconHelpers"
7
9
 
10
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
11
+
8
12
  interface ToggleIconButtonProps {
9
- onClick: (row: Row<DataType>) => void
10
- row?: Row<DataType>
13
+ onClick: (row: Row<GenericObject>) => void
14
+ row?: Row<GenericObject>
11
15
  }
12
16
 
13
17
  export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
@@ -1,21 +1,25 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
5
- import LoadingInline from "../../pb_loading_inline/_loading_inline"
2
+ import classnames from "classnames"
6
3
  import { flexRender, Row } from "@tanstack/react-table"
7
4
 
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { buildCss } from "../../utilities/props"
8
+ import { globalProps } from "../../utilities/globalProps"
9
+ import { isChrome } from "../Utilities/BrowserCheck"
10
+
11
+ import LoadingInline from "../../pb_loading_inline/_loading_inline"
12
+
8
13
  import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
9
14
  import { LoadingCell } from "../Components/LoadingCell"
10
15
  import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
16
+
11
17
  import AdvancedTableContext from "../Context/AdvancedTableContext"
12
- import { isChrome } from "../Utilities/BrowserCheck"
13
- import { DataType } from "../Utilities/types"
14
18
 
15
19
  type TableBodyProps = {
16
- className?: string;
20
+ className?: string
17
21
  collapsibleTrail?: boolean
18
- id?: string;
22
+ id?: string
19
23
  subRowHeaders?: string[]
20
24
  }
21
25
 
@@ -40,14 +44,14 @@ export const TableBody = ({
40
44
  buildCss("pb_advanced_table_body"),
41
45
  globalProps(props),
42
46
  className
43
- );
47
+ )
44
48
 
45
49
  return (
46
50
  <>
47
51
  <tbody className={classes}
48
52
  id={id}
49
53
  >
50
- {table.getRowModel().rows.map((row: Row<DataType>) => {
54
+ {table.getRowModel().rows.map((row: Row<GenericObject>) => {
51
55
  const isExpandable = row.getIsExpanded()
52
56
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
53
57
  const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
@@ -1,17 +1,21 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
2
+ import classnames from "classnames"
5
3
  import { HeaderGroup } from "@tanstack/react-table"
6
- import AdvancedTableContext from "../Context/AdvancedTableContext"
4
+
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { buildCss } from "../../utilities/props"
8
+ import { globalProps } from "../../utilities/globalProps"
9
+
7
10
  import { TableHeaderCell } from "../Components/TableHeaderCell"
8
- import { DataType } from "../Utilities/types"
11
+
12
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
9
13
 
10
14
  type TableHeaderProps = {
11
15
  children?: React.ReactNode | React.ReactNode[]
12
16
  className?: string
13
17
  enableSorting?: boolean
14
- id?: string;
18
+ id?: string
15
19
  sortIcon?: string | string[]
16
20
  }
17
21
 
@@ -34,7 +38,7 @@ export const TableHeader = ({
34
38
  buildCss("pb_advanced_table_header"),
35
39
  globalProps(props),
36
40
  className
37
- );
41
+ )
38
42
 
39
43
 
40
44
  return (
@@ -43,7 +47,7 @@ export const TableHeader = ({
43
47
  id={id}
44
48
  >
45
49
  {/* Get the header groups (only one in this example) */}
46
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
50
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
47
51
  <tr key={`${headerGroup.id}-headerGroup`}>
48
52
  {headerGroup.headers.map(header => (
49
53
  <TableHeaderCell
@@ -1,5 +1,6 @@
1
1
  import { RowModel } from "@tanstack/react-table"
2
- import { DataType, ExpandedStateObject } from "./types"
2
+ import { ExpandedStateObject } from "./types"
3
+ import { GenericObject } from "../../types"
3
4
 
4
5
  const filterExpandableRows = (expandedState: Record<string, boolean>) => {
5
6
  for (const expandedRow in expandedState) {
@@ -11,7 +12,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
11
12
  }
12
13
 
13
14
  export const updateExpandAndCollapseState = (
14
- tableRows: RowModel<DataType>,
15
+ tableRows: RowModel<GenericObject>,
15
16
  expanded: Record<string, boolean>,
16
17
  targetParent: string
17
18
  ) => {
@@ -4,5 +4,3 @@ export type ExpandedStateObject = Extract<
4
4
  ExpandedState,
5
5
  Record<string, boolean>
6
6
  >
7
-
8
- export type DataType = { [key: string]: any }
@@ -4,6 +4,7 @@
4
4
  @import "../tokens/spacing";
5
5
  @import "./scss_partials/loading";
6
6
  @import "./scss_partials/pseudo_states";
7
+ @import "./scss_partials/chrome_styles";
7
8
 
8
9
  .pb_advanced_table {
9
10
  $border-color: 1px solid $border_light !important;
@@ -86,13 +87,5 @@
86
87
  box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
87
88
  }
88
89
 
89
- .chrome-styles:first-child {
90
- border-right: $border-color;
91
- }
92
-
93
- .table-card {
94
- .chrome-styles:first-child {
95
- border-right: $transparent !important;
96
- }
97
- }
90
+ @include chrome_styles($border-color);
98
91
  }
@@ -1,8 +1,8 @@
1
- import React, { useState, useEffect, useCallback } from "react";
2
- import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
- import { globalProps, GlobalProps } from "../utilities/globalProps";
5
- import Table from "../pb_table/_table";
1
+ import React, { useState, useEffect, useCallback } from "react"
2
+ import classnames from "classnames"
3
+
4
+ import { GenericObject } from "../types"
5
+
6
6
  import {
7
7
  createColumnHelper,
8
8
  getCoreRowModel,
@@ -11,38 +11,42 @@ import {
11
11
  Row,
12
12
  useReactTable,
13
13
  Getter,
14
- } from "@tanstack/react-table";
14
+ } from "@tanstack/react-table"
15
+
16
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
17
+ import { globalProps, GlobalProps } from "../utilities/globalProps"
15
18
 
16
- import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
19
+ import Table from "../pb_table/_table"
17
20
 
18
- import { CustomCell } from "./Components/CustomCell";
19
- import AdvancedTableContext from "./Context/AdvancedTableContext";
20
- import { TableHeader } from "./SubKits/TableHeader";
21
- import { TableBody } from "./SubKits/TableBody";
21
+ import AdvancedTableContext from "./Context/AdvancedTableContext"
22
22
 
23
- import { DataType, ExpandedStateObject } from "./Utilities/types";
23
+ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
24
+
25
+ import { CustomCell } from "./Components/CustomCell"
26
+ import { TableHeader } from "./SubKits/TableHeader"
27
+ import { TableBody } from "./SubKits/TableBody"
24
28
 
25
29
  type AdvancedTableProps = {
26
- aria?: { [key: string]: string };
27
- children?: React.ReactNode | React.ReactNode[];
28
- className?: string;
29
- columnDefinitions: DataType[];
30
- data?: { [key: string]: string };
31
- enableToggleExpansion?: "all" | "header" | "none";
32
- expandedControl?: DataType;
30
+ aria?: { [key: string]: string }
31
+ children?: React.ReactNode | React.ReactNode[]
32
+ className?: string
33
+ columnDefinitions: GenericObject[]
34
+ data?: { [key: string]: string }
35
+ enableToggleExpansion?: "all" | "header" | "none"
36
+ expandedControl?: GenericObject
33
37
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
34
- id?: string;
35
- initialLoadingRowsCount?: number;
36
- inlineRowLoading?: boolean;
37
- loading?: boolean | string;
38
- onRowToggleClick?: (arg: Row<DataType>) => void;
39
- onToggleExpansionClick?: (arg: Row<DataType>) => void;
40
- sortControl?: DataType;
41
- tableData: DataType[];
42
- tableOptions?: DataType;
43
- tableProps?: DataType;
44
- toggleExpansionIcon?: string | string[];
45
- } & GlobalProps;
38
+ id?: string
39
+ initialLoadingRowsCount?: number
40
+ inlineRowLoading?: boolean
41
+ loading?: boolean | string
42
+ onRowToggleClick?: (arg: Row<GenericObject>) => void
43
+ onToggleExpansionClick?: (arg: Row<GenericObject>) => void
44
+ sortControl?: GenericObject
45
+ tableData: GenericObject[]
46
+ tableOptions?: GenericObject
47
+ tableProps?: GenericObject
48
+ toggleExpansionIcon?: string | string[]
49
+ } & GlobalProps
46
50
 
47
51
  const AdvancedTable = (props: AdvancedTableProps) => {
48
52
  const {
@@ -65,22 +69,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
65
69
  tableOptions,
66
70
  tableProps,
67
71
  toggleExpansionIcon = "arrows-from-line",
68
- } = props;
72
+ } = props
69
73
 
70
74
  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
71
75
  initialLoadingRowsCount
72
- );
76
+ )
73
77
 
74
78
  // Create a local state for expanded and setExpanded if expandedControl not used
75
- const [localExpanded, setLocalExpanded] = useState({});
79
+ const [localExpanded, setLocalExpanded] = useState({})
76
80
 
77
81
  // Determine whether to use the prop or the local state
78
- const expanded = expandedControl ? expandedControl.value : localExpanded;
82
+ const expanded = expandedControl ? expandedControl.value : localExpanded
79
83
  const setExpanded = expandedControl
80
84
  ? expandedControl.onChange
81
- : setLocalExpanded;
85
+ : setLocalExpanded
82
86
 
83
- const columnHelper = createColumnHelper<DataType>();
87
+ const columnHelper = createColumnHelper()
84
88
 
85
89
  //Create cells for first columns
86
90
  const createCellFunction = (cellAccessors: string[]) => {
@@ -88,10 +92,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
88
92
  row,
89
93
  getValue,
90
94
  }: {
91
- row: Row<DataType>;
92
- getValue: Getter<string>;
95
+ row: Row<GenericObject>
96
+ getValue: Getter<string>
93
97
  }) => {
94
- const rowData = row.original;
98
+ const rowData = row.original
95
99
 
96
100
  switch (row.depth) {
97
101
  case 0: {
@@ -101,12 +105,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
101
105
  onRowToggleClick={onRowToggleClick}
102
106
  row={row}
103
107
  />
104
- );
108
+ )
105
109
  }
106
110
  default: {
107
111
  // Handle other depths based on cellAccessors
108
- const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
109
- const accessorValue = rowData[depthAccessor];
112
+ const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
113
+ const accessorValue = rowData[depthAccessor]
110
114
  return accessorValue ? (
111
115
  <CustomCell
112
116
  onRowToggleClick={onRowToggleClick}
@@ -115,13 +119,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
115
119
  />
116
120
  ) : (
117
121
  "N/A"
118
- );
122
+ )
119
123
  }
120
124
  }
121
- };
125
+ }
122
126
 
123
- return columnCells;
124
- };
127
+ return columnCells
128
+ }
125
129
 
126
130
  //Create column array in format needed by Tanstack
127
131
  const columns =
@@ -132,12 +136,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
132
136
  ...columnHelper.accessor(column.accessor, {
133
137
  header: column.label,
134
138
  }),
135
- };
139
+ }
136
140
  if (column.cellAccessors) {
137
- columnStructure.cell = createCellFunction(column.cellAccessors);
141
+ columnStructure.cell = createCellFunction(column.cellAccessors)
138
142
  }
139
- return columnStructure;
140
- });
143
+ return columnStructure
144
+ })
141
145
 
142
146
  //Syntax for sorting Array if we want to manage state ourselves
143
147
  const sorting = [
@@ -148,22 +152,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
148
152
  ? !sortControl.value.desc
149
153
  : false,
150
154
  },
151
- ];
155
+ ]
152
156
 
153
157
  const expandAndSortState = () => {
154
158
  if (sortControl) {
155
- return { state: { expanded, sorting } };
159
+ return { state: { expanded, sorting } }
156
160
  } else {
157
- return { state: { expanded } };
161
+ return { state: { expanded } }
158
162
  }
159
- };
163
+ }
160
164
 
161
165
  //initialize table
162
166
  const table = useReactTable({
163
167
  data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
164
168
  columns,
165
169
  onExpandedChange: setExpanded,
166
- getSubRows: (row) => row.children,
170
+ getSubRows: (row: GenericObject) => row.children,
167
171
  getCoreRowModel: getCoreRowModel(),
168
172
  getExpandedRowModel: getExpandedRowModel(),
169
173
  getSortedRowModel: getSortedRowModel(),
@@ -171,42 +175,42 @@ const AdvancedTable = (props: AdvancedTableProps) => {
171
175
  sortDescFirst: true,
172
176
  ...expandAndSortState(),
173
177
  ...tableOptions,
174
- });
178
+ })
175
179
 
176
- const tableRows = table.getRowModel();
180
+ const tableRows = table.getRowModel()
177
181
 
178
182
  // Set table row count for loading state
179
183
  const updateLoadingStateRowCount = useCallback(() => {
180
- const rowsCount = table.getRowModel().rows.length;
184
+ const rowsCount = table.getRowModel().rows.length
181
185
  if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
182
- setLoadingStateRowCount(rowsCount);
186
+ setLoadingStateRowCount(rowsCount)
183
187
  }
184
- }, [tableData, loadingStateRowCount]);
188
+ }, [tableData, loadingStateRowCount])
185
189
 
186
190
  useEffect(() => {
187
191
  if (!loading) {
188
- updateLoadingStateRowCount();
192
+ updateLoadingStateRowCount()
189
193
  }
190
- }, [loading, updateLoadingStateRowCount]);
194
+ }, [loading, updateLoadingStateRowCount])
191
195
 
192
- const handleExpandOrCollapse = (row: Row<DataType>) => {
193
- onToggleExpansionClick && onToggleExpansionClick(row);
196
+ const handleExpandOrCollapse = (row: Row<GenericObject>) => {
197
+ onToggleExpansionClick && onToggleExpansionClick(row)
194
198
 
195
- const expandedState = expanded as ExpandedStateObject;
196
- const targetParent = row?.parentId;
199
+ const expandedState = expanded
200
+ const targetParent = row?.parentId
197
201
  return setExpanded(
198
202
  updateExpandAndCollapseState(tableRows, expandedState, targetParent)
199
- );
200
- };
203
+ )
204
+ }
201
205
 
202
- const ariaProps = buildAriaProps(aria);
203
- const dataProps = buildDataProps(data);
204
- const htmlProps = buildHtmlProps(htmlOptions);
206
+ const ariaProps = buildAriaProps(aria)
207
+ const dataProps = buildDataProps(data)
208
+ const htmlProps = buildHtmlProps(htmlOptions)
205
209
  const classes = classnames(
206
210
  buildCss("pb_advanced_table"),
207
211
  globalProps(props),
208
212
  className
209
- );
213
+ )
210
214
 
211
215
  return (
212
216
  <div {...ariaProps}
@@ -247,10 +251,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
247
251
  </Table>
248
252
  </AdvancedTableContext.Provider>
249
253
  </div>
250
- );
251
- };
254
+ )
255
+ }
252
256
 
253
- AdvancedTable.Header = TableHeader;
254
- AdvancedTable.Body = TableBody;
257
+ AdvancedTable.Header = TableHeader
258
+ AdvancedTable.Body = TableBody
255
259
 
256
- export default AdvancedTable;
260
+ export default AdvancedTable