playbook_ui 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855 → 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4891
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/pb_collapsible/_collapsible.tsx +4 -9
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +95 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_table/index.ts +100 -26
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -2
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -106
- data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +17 -2
- data/dist/chunks/{_typeahead-ClJHKLj6.js → _typeahead-CkgPmTlB.js} +3 -3
- data/dist/chunks/_weekday_stacked-D8NomRmY.js +45 -0
- data/dist/chunks/{lib-CtS0DLMo.js → lib-NHG8uPxO.js} +3 -3
- data/dist/chunks/{pb_form_validation-C3vQKj7-.js → pb_form_validation-CIf5UBl6.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -17
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -35
- data/dist/chunks/_weekday_stacked-DaVTrOfA.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4f54540e9bd3d9d93f35cca071dc3f78941198c7335eeae31ef7030219a41c56
|
4
|
+
data.tar.gz: 8826cddf997fcc78d25a6d2b87a9c22606c09d5e83d176dd75512744171d4355
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 668cda776eb91450ff0776bb0e3a5e63f58c6fec6225681ecc75a8510fb17835b746ddb3f553e2d31ddb3f7ef3db60ee03fa3a6c9e1152e4fe0e7d1a42568e8e
|
7
|
+
data.tar.gz: a86a619c28c7b955d88b833dae7c80cbe0ce653529d247ec9e75e5093689c5866809db5e250e23b0791a7f90a394ed25f44e69a11a85cfd8082d833449e833f3
|
@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import useCollapsible from './useCollapsible'
|
4
4
|
|
5
|
-
import { globalProps, globalInlineProps
|
5
|
+
import { globalProps, globalInlineProps } from '../utilities/globalProps'
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
7
7
|
|
8
8
|
import CollapsibleContent from './child_kits/CollapsibleContent'
|
@@ -32,7 +32,6 @@ type CollapsibleProps = {
|
|
32
32
|
onClick?: ()=> void,
|
33
33
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
34
34
|
id?: string,
|
35
|
-
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
|
36
35
|
}
|
37
36
|
|
38
37
|
const Collapsible = ({
|
@@ -48,9 +47,8 @@ const Collapsible = ({
|
|
48
47
|
onIconClick,
|
49
48
|
onClick,
|
50
49
|
id,
|
51
|
-
tag = 'div',
|
52
50
|
...props
|
53
|
-
}: CollapsibleProps
|
51
|
+
}: CollapsibleProps): React.ReactElement => {
|
54
52
|
const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
|
55
53
|
|
56
54
|
useEffect(()=> {
|
@@ -78,12 +76,9 @@ const Collapsible = ({
|
|
78
76
|
className
|
79
77
|
)
|
80
78
|
const dynamicInlineProps = globalInlineProps(props)
|
81
|
-
|
82
|
-
const Tag: React.ReactElement | any = `${tag}`;
|
83
|
-
|
84
79
|
return (
|
85
80
|
<CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
|
86
|
-
<
|
81
|
+
<div
|
87
82
|
{...ariaProps}
|
88
83
|
{...dataProps}
|
89
84
|
{...htmlProps}
|
@@ -101,7 +96,7 @@ const Collapsible = ({
|
|
101
96
|
<CollapsibleContent {...contentProps}>
|
102
97
|
{contentChildren}
|
103
98
|
</CollapsibleContent>
|
104
|
-
</
|
99
|
+
</div>
|
105
100
|
</CollapsibleContext.Provider>
|
106
101
|
)
|
107
102
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import classnames from 'classnames'
|
2
2
|
import React, { useContext, useRef, useEffect } from 'react'
|
3
3
|
import { buildCss } from '../../utilities/props'
|
4
|
-
import { globalProps
|
4
|
+
import { globalProps } from '../../utilities/globalProps'
|
5
5
|
import { hideElement, showElement } from '../_helper_functions'
|
6
6
|
|
7
7
|
import CollapsibleContext from '../context'
|
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
|
|
15
15
|
children,
|
16
16
|
className,
|
17
17
|
...props
|
18
|
-
}: CollapsibleContentProps
|
18
|
+
}: CollapsibleContentProps): React.ReactElement => {
|
19
19
|
const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
|
20
20
|
const contentCSS = buildCss('pb_collapsible_content_kit')
|
21
21
|
const contentSpacing = globalProps(props)
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import classnames from 'classnames'
|
4
4
|
import React, { useContext } from 'react'
|
5
5
|
import { buildCss } from '../../utilities/props'
|
6
|
-
import { globalProps
|
6
|
+
import { globalProps } from '../../utilities/globalProps'
|
7
7
|
|
8
8
|
import Flex from '../../pb_flex/_flex'
|
9
9
|
import FlexItem from '../../pb_flex/_flex_item'
|
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
|
|
25
25
|
className,
|
26
26
|
cursor = 'pointer',
|
27
27
|
...props
|
28
|
-
}: CollapsibleMainProps
|
28
|
+
}: CollapsibleMainProps): React.ReactElement=> {
|
29
29
|
const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
|
30
30
|
const mainCSS = buildCss('pb_collapsible_main_kit')
|
31
31
|
const mainSpacing = globalProps(props, { cursor })
|
@@ -251,7 +251,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
251
251
|
picker.monthsDropdownContainer.value = picker.currentMonth
|
252
252
|
|
253
253
|
/* Reset date picker to default value on form.reset() */
|
254
|
-
if (defaultDate){
|
254
|
+
if (defaultDate && !picker.input.value){
|
255
255
|
picker.setDate(defaultDate)
|
256
256
|
yearChangeHook(picker)
|
257
257
|
}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th id="1">Column 1</th>
|
5
|
+
<th id="2">Column 2</th>
|
6
|
+
<th id="3">Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
<th>Column 6</th>
|
10
|
+
<th>Column 7</th>
|
11
|
+
<th>Column 8</th>
|
12
|
+
<th>Column 9</th>
|
13
|
+
<th>Column 10</th>
|
14
|
+
<th>Column 11</th>
|
15
|
+
<th>Column 12</th>
|
16
|
+
<th>Column 13</th>
|
17
|
+
<th>Column 14</th>
|
18
|
+
<th>Column 15</th>
|
19
|
+
</tr>
|
20
|
+
</thead>
|
21
|
+
<tbody>
|
22
|
+
<tr>
|
23
|
+
<td id="1">Value 1</td>
|
24
|
+
<td id="2">Value 2</td>
|
25
|
+
<td id="3">Value 3</td>
|
26
|
+
<td>Value 4</td>
|
27
|
+
<td>Value 5</td>
|
28
|
+
<td>Column 6</td>
|
29
|
+
<td>Column 7</td>
|
30
|
+
<td>Column 8</td>
|
31
|
+
<td>Column 9</td>
|
32
|
+
<td>Column 10</td>
|
33
|
+
<td>Column 11</td>
|
34
|
+
<td>Column 12</td>
|
35
|
+
<td>Column 13</td>
|
36
|
+
<td>Column 14</td>
|
37
|
+
<td>Column 15</td>
|
38
|
+
|
39
|
+
</tr>
|
40
|
+
<tr>
|
41
|
+
<td id="1">Value 1</td>
|
42
|
+
<td id="2">Value 2</td>
|
43
|
+
<td id="3">Value 3</td>
|
44
|
+
<td>Value 4</td>
|
45
|
+
<td>Value 5</td>
|
46
|
+
<td>Column 6</td>
|
47
|
+
<td>Column 7</td>
|
48
|
+
<td>Column 8</td>
|
49
|
+
<td>Column 9</td>
|
50
|
+
<td>Column 10</td>
|
51
|
+
<td>Column 11</td>
|
52
|
+
<td>Column 12</td>
|
53
|
+
<td>Column 13</td>
|
54
|
+
<td>Column 14</td>
|
55
|
+
<td>Column 15</td>
|
56
|
+
|
57
|
+
</tr>
|
58
|
+
<tr>
|
59
|
+
<td id="1">Value 1</td>
|
60
|
+
<td id="2">Value 2</td>
|
61
|
+
<td id="3">Value 3</td>
|
62
|
+
<td>Value 4</td>
|
63
|
+
<td>Value 5</td>
|
64
|
+
<td>Column 6</td>
|
65
|
+
<td>Column 7</td>
|
66
|
+
<td>Column 8</td>
|
67
|
+
<td>Column 9</td>
|
68
|
+
<td>Column 10</td>
|
69
|
+
<td>Column 11</td>
|
70
|
+
<td>Column 12</td>
|
71
|
+
<td>Column 13</td>
|
72
|
+
<td>Column 14</td>
|
73
|
+
<td>Column 15</td>
|
74
|
+
|
75
|
+
</tr>
|
76
|
+
<tr>
|
77
|
+
<td id="1">Value 1</td>
|
78
|
+
<td id="2">Value 2</td>
|
79
|
+
<td id="3">Value 3</td>
|
80
|
+
<td>Value 4</td>
|
81
|
+
<td>Value 5</td>
|
82
|
+
<td>Column 6</td>
|
83
|
+
<td>Column 7</td>
|
84
|
+
<td>Column 8</td>
|
85
|
+
<td>Column 9</td>
|
86
|
+
<td>Column 10</td>
|
87
|
+
<td>Column 11</td>
|
88
|
+
<td>Column 12</td>
|
89
|
+
<td>Column 13</td>
|
90
|
+
<td>Column 14</td>
|
91
|
+
<td>Column 15</td>
|
92
|
+
|
93
|
+
</tr>
|
94
|
+
</tbody>
|
95
|
+
<% end %>
|
@@ -55,8 +55,3 @@ examples:
|
|
55
55
|
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
56
56
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
57
57
|
- table_outer_padding: Outer Padding
|
58
|
-
- table_with_collapsible: Table with Collapsible
|
59
|
-
- table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
|
60
|
-
- table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
|
61
|
-
- table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
|
62
|
-
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
|
|
26
26
|
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
27
27
|
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
|
28
28
|
export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
|
29
|
-
export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
|
30
|
-
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
|
31
|
-
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
|
32
|
-
export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
|
33
|
-
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
@@ -1,32 +1,106 @@
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
2
2
|
|
3
3
|
export default class PbTable extends PbEnhancedElement {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
//
|
14
|
-
|
15
|
-
|
16
|
-
const
|
17
|
-
|
18
|
-
|
4
|
+
private stickyLeftColumns: string[] = [];
|
5
|
+
private handleStickyColumnsRef: () => void;
|
6
|
+
|
7
|
+
static get selector(): string {
|
8
|
+
return '.table-responsive-collapse'
|
9
|
+
}
|
10
|
+
|
11
|
+
connect(): void {
|
12
|
+
const tables = document.querySelectorAll('.table-responsive-collapse');
|
13
|
+
// Each Table
|
14
|
+
[].forEach.call(tables, (table: HTMLTableElement) => {
|
15
|
+
// Header Titles
|
16
|
+
const headers: string[] = [];
|
17
|
+
[].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
|
18
|
+
const colSpan = header.colSpan
|
19
|
+
for (let i = 0; i < colSpan; i++) {
|
20
|
+
headers.push(header.textContent.replace(/\r?\n|\r/, ''));
|
21
|
+
}
|
22
|
+
});
|
23
|
+
// for each row in tbody
|
24
|
+
[].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
|
25
|
+
// for each cell
|
26
|
+
[].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
|
27
|
+
// apply the attribute
|
28
|
+
cell.setAttribute('data-title', headers[headerIndex])
|
29
|
+
})
|
30
|
+
})
|
31
|
+
});
|
32
|
+
|
33
|
+
// New sticky columns logic
|
34
|
+
this.initStickyColumns();
|
35
|
+
}
|
36
|
+
|
37
|
+
private initStickyColumns(): void {
|
38
|
+
// Find tables with sticky-left-column class
|
39
|
+
const tables = document.querySelectorAll('.sticky-left-column');
|
40
|
+
|
41
|
+
tables.forEach((table) => {
|
42
|
+
// Extract sticky left column IDs by looking at the component's class
|
43
|
+
const classList = Array.from(table.classList);
|
44
|
+
|
45
|
+
// Look for classes in the format sticky-left-column-{ids}
|
46
|
+
const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
|
47
|
+
if (stickyColumnClass) {
|
48
|
+
// Extract the IDs from the class name
|
49
|
+
this.stickyLeftColumns = stickyColumnClass
|
50
|
+
.replace('sticky-columns-', '')
|
51
|
+
.split('-');
|
52
|
+
|
53
|
+
if (this.stickyLeftColumns.length > 0) {
|
54
|
+
this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
|
55
|
+
this.handleStickyColumns();
|
56
|
+
window.addEventListener('resize', this.handleStickyColumnsRef);
|
57
|
+
}
|
19
58
|
}
|
20
59
|
});
|
60
|
+
}
|
21
61
|
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
})
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
}
|
62
|
+
private handleStickyColumns(): void {
|
63
|
+
let accumulatedWidth = 0;
|
64
|
+
|
65
|
+
this.stickyLeftColumns.forEach((colId, index) => {
|
66
|
+
const isLastColumn = index === this.stickyLeftColumns.length - 1;
|
67
|
+
const header = document.querySelector(`th[id="${colId}"]`);
|
68
|
+
const cells = document.querySelectorAll(`td[id="${colId}"]`);
|
69
|
+
|
70
|
+
if (header) {
|
71
|
+
header.classList.add('sticky');
|
72
|
+
(header as HTMLElement).style.left = `${accumulatedWidth}px`;
|
73
|
+
|
74
|
+
if (!isLastColumn) {
|
75
|
+
header.classList.add('with-border');
|
76
|
+
header.classList.remove('sticky-shadow');
|
77
|
+
} else {
|
78
|
+
header.classList.remove('with-border');
|
79
|
+
header.classList.add('sticky-shadow');
|
80
|
+
}
|
81
|
+
|
82
|
+
accumulatedWidth += (header as HTMLElement).offsetWidth;
|
83
|
+
}
|
84
|
+
|
85
|
+
cells.forEach((cell) => {
|
86
|
+
cell.classList.add('sticky');
|
87
|
+
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
88
|
+
|
89
|
+
if (!isLastColumn) {
|
90
|
+
cell.classList.add('with-border');
|
91
|
+
cell.classList.remove('sticky-shadow');
|
92
|
+
} else {
|
93
|
+
cell.classList.remove('with-border');
|
94
|
+
cell.classList.add('sticky-shadow');
|
95
|
+
}
|
96
|
+
});
|
97
|
+
});
|
98
|
+
}
|
99
|
+
|
100
|
+
// Cleanup method to remove event listener
|
101
|
+
disconnect(): void {
|
102
|
+
if (this.handleStickyColumnsRef) {
|
103
|
+
window.removeEventListener('resize', this.handleStickyColumnsRef);
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
@@ -7,21 +7,14 @@ import {
|
|
7
7
|
buildHtmlProps,
|
8
8
|
} from "../../utilities/props";
|
9
9
|
import { globalProps } from "../../utilities/globalProps";
|
10
|
-
import Collapsible from "../../pb_collapsible/_collapsible";
|
11
|
-
import useCollapsible from "../../pb_collapsible/useCollapsible";
|
12
10
|
|
13
11
|
type TableRowPropTypes = {
|
14
12
|
aria?: { [key: string]: string };
|
15
13
|
children: React.ReactNode[] | React.ReactNode;
|
16
14
|
className: string;
|
17
|
-
collapsible?: boolean;
|
18
|
-
collapsibleContent?: React.ReactNode[] | React.ReactNode;
|
19
|
-
collapsibleSideHighlight?: boolean;
|
20
15
|
data?: { [key: string]: string };
|
21
|
-
dark?: boolean;
|
22
16
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
23
17
|
id?: string;
|
24
|
-
toggleCellId?: string;
|
25
18
|
sideHighlightColor: string;
|
26
19
|
tag?: "table" | "div";
|
27
20
|
};
|
@@ -30,15 +23,10 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
30
23
|
const {
|
31
24
|
aria = {},
|
32
25
|
children,
|
33
|
-
collapsible,
|
34
|
-
collapsibleContent,
|
35
|
-
collapsibleSideHighlight = true,
|
36
26
|
className,
|
37
27
|
data = {},
|
38
|
-
dark = false,
|
39
28
|
htmlOptions = {},
|
40
29
|
id,
|
41
|
-
toggleCellId,
|
42
30
|
sideHighlightColor = "none",
|
43
31
|
tag = "table",
|
44
32
|
} = props;
|
@@ -48,110 +36,17 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
48
36
|
const htmlProps = buildHtmlProps(htmlOptions);
|
49
37
|
const sideHighlightClass =
|
50
38
|
sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
|
51
|
-
|
52
|
-
const [isCollapsed, setIsCollapsed] = useCollapsible(true);
|
53
|
-
|
54
|
-
const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
|
55
39
|
const classes = classnames(
|
56
40
|
buildCss("pb_table_row_kit", sideHighlightClass),
|
57
41
|
"pb_table_tr",
|
58
|
-
collapsibleRow,
|
59
42
|
globalProps(props),
|
60
43
|
className
|
61
44
|
);
|
62
45
|
const isTableTag = tag === "table";
|
63
46
|
|
64
|
-
// const [isCollapsed, setIsCollapsed] = useCollapsible(true);
|
65
|
-
|
66
|
-
const colSpan = React.Children.count(children);
|
67
|
-
|
68
|
-
const handleRowClick = (event: React.MouseEvent) => {
|
69
|
-
if (toggleCellId) {
|
70
|
-
const target = event.target as HTMLElement;
|
71
|
-
const clickedCell = target.closest(`#${toggleCellId}`);
|
72
|
-
const isIconClick =
|
73
|
-
target instanceof SVGElement &&
|
74
|
-
(target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
|
75
|
-
|
76
|
-
if (clickedCell || isIconClick) {
|
77
|
-
setIsCollapsed(!isCollapsed);
|
78
|
-
}
|
79
|
-
} else {
|
80
|
-
setIsCollapsed(!isCollapsed);
|
81
|
-
}
|
82
|
-
};
|
83
|
-
|
84
47
|
return (
|
85
48
|
<>
|
86
|
-
{
|
87
|
-
isTableTag ? (
|
88
|
-
<>
|
89
|
-
<tr
|
90
|
-
{...ariaProps}
|
91
|
-
{...dataProps}
|
92
|
-
{...htmlProps}
|
93
|
-
className={classes}
|
94
|
-
id={id}
|
95
|
-
onClick={(e)=>handleRowClick(e)}
|
96
|
-
style={{ cursor: toggleCellId ? "default" : "pointer" }}
|
97
|
-
>
|
98
|
-
{children}
|
99
|
-
</tr>
|
100
|
-
<tr>
|
101
|
-
<Collapsible
|
102
|
-
collapsed={isCollapsed}
|
103
|
-
dark={dark}
|
104
|
-
htmlOptions={{ colSpan: colSpan }}
|
105
|
-
padding="none"
|
106
|
-
tag="td"
|
107
|
-
>
|
108
|
-
<tr/>
|
109
|
-
<Collapsible.Content
|
110
|
-
className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
|
111
|
-
dark={dark}
|
112
|
-
margin="none"
|
113
|
-
padding="none"
|
114
|
-
>
|
115
|
-
{collapsibleContent}
|
116
|
-
</Collapsible.Content>
|
117
|
-
</Collapsible>
|
118
|
-
</tr>
|
119
|
-
</>
|
120
|
-
) : (
|
121
|
-
<>
|
122
|
-
<div
|
123
|
-
{...ariaProps}
|
124
|
-
{...dataProps}
|
125
|
-
{...htmlProps}
|
126
|
-
className={classes}
|
127
|
-
id={id}
|
128
|
-
onClick={handleRowClick}
|
129
|
-
style={{ cursor: "pointer" }}
|
130
|
-
>
|
131
|
-
{children}
|
132
|
-
</div>
|
133
|
-
<tr>
|
134
|
-
<Collapsible
|
135
|
-
collapsed={isCollapsed}
|
136
|
-
dark={dark}
|
137
|
-
htmlOptions={{ colSpan: colSpan }}
|
138
|
-
padding="none"
|
139
|
-
tag="td"
|
140
|
-
>
|
141
|
-
<tr/>
|
142
|
-
<Collapsible.Content
|
143
|
-
className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
|
144
|
-
dark={dark}
|
145
|
-
margin="none"
|
146
|
-
padding="none"
|
147
|
-
>
|
148
|
-
{collapsibleContent}
|
149
|
-
</Collapsible.Content>
|
150
|
-
</Collapsible>
|
151
|
-
</tr>
|
152
|
-
</>
|
153
|
-
)
|
154
|
-
) : isTableTag ? (
|
49
|
+
{isTableTag ? (
|
155
50
|
<tr
|
156
51
|
{...ariaProps}
|
157
52
|
{...dataProps}
|
@@ -23,6 +23,8 @@ module Playbook
|
|
23
23
|
prop :text
|
24
24
|
prop :sticky, type: Playbook::Props::Boolean,
|
25
25
|
default: false
|
26
|
+
prop :sticky_left_column, type: Playbook::Props::Array,
|
27
|
+
default: []
|
26
28
|
prop :vertical_border, type: Playbook::Props::Boolean,
|
27
29
|
default: false
|
28
30
|
prop :striped, type: Playbook::Props::Boolean,
|
@@ -37,8 +39,8 @@ module Playbook
|
|
37
39
|
def classname
|
38
40
|
generate_classname(
|
39
41
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
40
|
-
disable_hover_class, container_class, data_table_class, sticky_class,
|
41
|
-
vertical_border_class, striped_class, outer_padding_class,
|
42
|
+
disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
|
43
|
+
collapse_class, vertical_border_class, striped_class, outer_padding_class,
|
42
44
|
"table-responsive-#{responsive}", separator: " "
|
43
45
|
)
|
44
46
|
end
|
@@ -73,6 +75,19 @@ module Playbook
|
|
73
75
|
sticky ? "sticky-header" : nil
|
74
76
|
end
|
75
77
|
|
78
|
+
def sticky_left_column_class
|
79
|
+
if sticky_left_column.empty?
|
80
|
+
nil
|
81
|
+
else
|
82
|
+
sticky_col_classname = "sticky-left-column sticky-columns"
|
83
|
+
sticky_left_column.each do |id|
|
84
|
+
sticky_col_classname += "-#{id}"
|
85
|
+
end
|
86
|
+
|
87
|
+
sticky_col_classname
|
88
|
+
end
|
89
|
+
end
|
90
|
+
|
76
91
|
def striped_class
|
77
92
|
striped ? "striped" : nil
|
78
93
|
end
|