playbook_ui 14.11.0.pre.rc.6 → 14.11.0.pre.rc.8
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_skeleton_loading/_skeleton_loading.scss +2 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb +8 -12
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb +48 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +67 -18
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +4 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +5 -0
- data/app/pb_kits/playbook/pb_table/index.ts +17 -17
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +18 -2
- data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +17 -3
- data/dist/chunks/{_typeahead-CSAeYYPT.js → _typeahead-gJLWiR0r.js} +1 -1
- data/dist/chunks/_weekday_stacked-7XLAG_Yz.js +45 -0
- data/dist/chunks/{lib-sMFo2JZy.js → lib-B7sgJtGS.js} +1 -1
- data/dist/chunks/{pb_form_validation-CgvjWbOK.js → pb_form_validation-C5Cc0-1v.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +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 +20 -7
- data/dist/chunks/_weekday_stacked-CelCROXn.js +0 -45
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyLeftColumn={["a"]}
|
|
10
|
+
stickyRightColumn={["b"]}
|
|
11
|
+
>
|
|
12
|
+
<thead>
|
|
13
|
+
<tr>
|
|
14
|
+
<th id="a">{'Column 1'}</th>
|
|
15
|
+
<th>{'Column 2'}</th>
|
|
16
|
+
<th>{'Column 3'}</th>
|
|
17
|
+
<th>{'Column 4'}</th>
|
|
18
|
+
<th>{'Column 5'}</th>
|
|
19
|
+
<th>{'Column 6'}</th>
|
|
20
|
+
<th>{'Column 7'}</th>
|
|
21
|
+
<th>{'Column 8'}</th>
|
|
22
|
+
<th>{'Column 9'}</th>
|
|
23
|
+
<th>{'Column 10'}</th>
|
|
24
|
+
<th>{'Column 11'}</th>
|
|
25
|
+
<th>{'Column 12'}</th>
|
|
26
|
+
<th>{'Column 13'}</th>
|
|
27
|
+
<th>{'Column 14'}</th>
|
|
28
|
+
<th id="b">{'Column 15'}</th>
|
|
29
|
+
</tr>
|
|
30
|
+
</thead>
|
|
31
|
+
<tbody>
|
|
32
|
+
<tr>
|
|
33
|
+
<td id="a">{'Value 1'}</td>
|
|
34
|
+
<td>{'Value 2'}</td>
|
|
35
|
+
<td>{'Value 3'}</td>
|
|
36
|
+
<td>{'Value 4'}</td>
|
|
37
|
+
<td>{'Value 5'}</td>
|
|
38
|
+
<td>{'Value 6'}</td>
|
|
39
|
+
<td>{'Value 7'}</td>
|
|
40
|
+
<td>{'Value 8'}</td>
|
|
41
|
+
<td>{'Value 9'}</td>
|
|
42
|
+
<td>{'Value 10'}</td>
|
|
43
|
+
<td>{'Value 11'}</td>
|
|
44
|
+
<td>{'Value 12'}</td>
|
|
45
|
+
<td>{'Value 13'}</td>
|
|
46
|
+
<td>{'Value 14'}</td>
|
|
47
|
+
<td id="b">{'Value 15'}</td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td id="a">{'Value 1'}</td>
|
|
51
|
+
<td>{'Value 2'}</td>
|
|
52
|
+
<td>{'Value 3'}</td>
|
|
53
|
+
<td>{'Value 4'}</td>
|
|
54
|
+
<td>{'Value 5'}</td>
|
|
55
|
+
<td>{'Value 6'}</td>
|
|
56
|
+
<td>{'Value 7'}</td>
|
|
57
|
+
<td>{'Value 8'}</td>
|
|
58
|
+
<td>{'Value 9'}</td>
|
|
59
|
+
<td>{'Value 10'}</td>
|
|
60
|
+
<td>{'Value 11'}</td>
|
|
61
|
+
<td>{'Value 12'}</td>
|
|
62
|
+
<td>{'Value 13'}</td>
|
|
63
|
+
<td>{'Value 14'}</td>
|
|
64
|
+
<td id="b">{'Value 15'}</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td id="a">{'Value 1'}</td>
|
|
68
|
+
<td>{'Value 2'}</td>
|
|
69
|
+
<td>{'Value 3'}</td>
|
|
70
|
+
<td>{'Value 4'}</td>
|
|
71
|
+
<td>{'Value 5'}</td>
|
|
72
|
+
<td>{'Value 6'}</td>
|
|
73
|
+
<td>{'Value 7'}</td>
|
|
74
|
+
<td>{'Value 8'}</td>
|
|
75
|
+
<td>{'Value 9'}</td>
|
|
76
|
+
<td>{'Value 10'}</td>
|
|
77
|
+
<td>{'Value 11'}</td>
|
|
78
|
+
<td>{'Value 12'}</td>
|
|
79
|
+
<td>{'Value 13'}</td>
|
|
80
|
+
<td>{'Value 14'}</td>
|
|
81
|
+
<td id="b">{'Value 15'}</td>
|
|
82
|
+
</tr>
|
|
83
|
+
</tbody>
|
|
84
|
+
</Table>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default TableStickyColumns
|
|
@@ -1 +1,3 @@
|
|
|
1
1
|
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
+
|
|
3
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
|
|
4
|
+
|
|
5
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyRightColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyRightColumn={["13", "14", "15"]}
|
|
10
|
+
>
|
|
11
|
+
<thead>
|
|
12
|
+
<tr>
|
|
13
|
+
<th>{'Column 1'}</th>
|
|
14
|
+
<th>{'Column 2'}</th>
|
|
15
|
+
<th>{'Column 3'}</th>
|
|
16
|
+
<th>{'Column 4'}</th>
|
|
17
|
+
<th>{'Column 5'}</th>
|
|
18
|
+
<th>{'Column 6'}</th>
|
|
19
|
+
<th>{'Column 7'}</th>
|
|
20
|
+
<th>{'Column 8'}</th>
|
|
21
|
+
<th>{'Column 9'}</th>
|
|
22
|
+
<th>{'Column 10'}</th>
|
|
23
|
+
<th>{'Column 11'}</th>
|
|
24
|
+
<th>{'Column 12'}</th>
|
|
25
|
+
<th id="13">{'Column 13'}</th>
|
|
26
|
+
<th id="14">{'Column 14'}</th>
|
|
27
|
+
<th id="15">{'Column 15'}</th>
|
|
28
|
+
</tr>
|
|
29
|
+
</thead>
|
|
30
|
+
<tbody>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>{'Value 1'}</td>
|
|
33
|
+
<td>{'Value 2'}</td>
|
|
34
|
+
<td>{'Value 3'}</td>
|
|
35
|
+
<td>{'Value 4'}</td>
|
|
36
|
+
<td>{'Value 5'}</td>
|
|
37
|
+
<td>{'Value 6'}</td>
|
|
38
|
+
<td>{'Value 7'}</td>
|
|
39
|
+
<td>{'Value 8'}</td>
|
|
40
|
+
<td>{'Value 9'}</td>
|
|
41
|
+
<td>{'Value 10'}</td>
|
|
42
|
+
<td>{'Value 11'}</td>
|
|
43
|
+
<td>{'Value 12'}</td>
|
|
44
|
+
<td id="13">{'Value 13'}</td>
|
|
45
|
+
<td id="14">{'Value 14'}</td>
|
|
46
|
+
<td id="15">{'Value 15'}</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td>{'Value 1'}</td>
|
|
50
|
+
<td>{'Value 2'}</td>
|
|
51
|
+
<td>{'Value 3'}</td>
|
|
52
|
+
<td>{'Value 4'}</td>
|
|
53
|
+
<td>{'Value 5'}</td>
|
|
54
|
+
<td>{'Value 6'}</td>
|
|
55
|
+
<td>{'Value 7'}</td>
|
|
56
|
+
<td>{'Value 8'}</td>
|
|
57
|
+
<td>{'Value 9'}</td>
|
|
58
|
+
<td>{'Value 10'}</td>
|
|
59
|
+
<td>{'Value 11'}</td>
|
|
60
|
+
<td>{'Value 12'}</td>
|
|
61
|
+
<td id="13">{'Value 13'}</td>
|
|
62
|
+
<td id="14">{'Value 14'}</td>
|
|
63
|
+
<td id="15">{'Value 15'}</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>{'Value 1'}</td>
|
|
67
|
+
<td>{'Value 2'}</td>
|
|
68
|
+
<td>{'Value 3'}</td>
|
|
69
|
+
<td>{'Value 4'}</td>
|
|
70
|
+
<td>{'Value 5'}</td>
|
|
71
|
+
<td>{'Value 6'}</td>
|
|
72
|
+
<td>{'Value 7'}</td>
|
|
73
|
+
<td>{'Value 8'}</td>
|
|
74
|
+
<td>{'Value 9'}</td>
|
|
75
|
+
<td>{'Value 10'}</td>
|
|
76
|
+
<td>{'Value 11'}</td>
|
|
77
|
+
<td>{'Value 12'}</td>
|
|
78
|
+
<td id="13">{'Value 13'}</td>
|
|
79
|
+
<td id="14">{'Value 14'}</td>
|
|
80
|
+
<td id="15">{'Value 15'}</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</Table>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default TableStickyRightColumns
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
+
|
|
3
|
+
If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
|
|
4
|
+
|
|
5
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.
|
|
@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
|
|
|
2
2
|
|
|
3
3
|
export default class PbTable extends PbEnhancedElement {
|
|
4
4
|
private stickyLeftColumns: string[] = [];
|
|
5
|
-
private
|
|
5
|
+
private handleStickyLeftColumnsRef: () => void;
|
|
6
6
|
|
|
7
7
|
static get selector(): string {
|
|
8
8
|
return '.table-responsive-collapse'
|
|
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
// New sticky columns logic
|
|
34
|
-
this.
|
|
34
|
+
this.initStickyLeftColumns();
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
private
|
|
37
|
+
private initStickyLeftColumns(): void {
|
|
38
38
|
// Find tables with sticky-left-column class
|
|
39
39
|
const tables = document.querySelectorAll('.sticky-left-column');
|
|
40
40
|
|
|
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
52
52
|
|
|
53
53
|
if (this.stickyLeftColumns.length > 0) {
|
|
54
54
|
setTimeout(() => {
|
|
55
|
-
this.
|
|
56
|
-
this.
|
|
57
|
-
window.addEventListener('resize', this.
|
|
55
|
+
this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
|
|
56
|
+
this.handleStickyLeftColumns();
|
|
57
|
+
window.addEventListener('resize', this.handleStickyLeftColumnsRef);
|
|
58
58
|
}, 10);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
private
|
|
64
|
+
private handleStickyLeftColumns(): void {
|
|
65
65
|
let accumulatedWidth = 0;
|
|
66
66
|
|
|
67
67
|
this.stickyLeftColumns.forEach((colId, index) => {
|
|
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
74
74
|
(header as HTMLElement).style.left = `${accumulatedWidth}px`;
|
|
75
75
|
|
|
76
76
|
if (!isLastColumn) {
|
|
77
|
-
header.classList.add('with-border');
|
|
78
|
-
header.classList.remove('sticky-shadow');
|
|
77
|
+
header.classList.add('with-border-right');
|
|
78
|
+
header.classList.remove('sticky-left-shadow');
|
|
79
79
|
} else {
|
|
80
|
-
header.classList.remove('with-border');
|
|
81
|
-
header.classList.add('sticky-shadow');
|
|
80
|
+
header.classList.remove('with-border-right');
|
|
81
|
+
header.classList.add('sticky-left-shadow');
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
accumulatedWidth += (header as HTMLElement).offsetWidth;
|
|
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
89
89
|
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
|
90
90
|
|
|
91
91
|
if (!isLastColumn) {
|
|
92
|
-
cell.classList.add('with-border');
|
|
93
|
-
cell.classList.remove('sticky-shadow');
|
|
92
|
+
cell.classList.add('with-border-right');
|
|
93
|
+
cell.classList.remove('sticky-left-shadow');
|
|
94
94
|
} else {
|
|
95
|
-
cell.classList.remove('with-border');
|
|
96
|
-
cell.classList.add('sticky-shadow');
|
|
95
|
+
cell.classList.remove('with-border-right');
|
|
96
|
+
cell.classList.add('sticky-left-shadow');
|
|
97
97
|
}
|
|
98
98
|
});
|
|
99
99
|
});
|
|
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
101
101
|
|
|
102
102
|
// Cleanup method to remove event listener
|
|
103
103
|
disconnect(): void {
|
|
104
|
-
if (this.
|
|
105
|
-
window.removeEventListener('resize', this.
|
|
104
|
+
if (this.handleStickyLeftColumnsRef) {
|
|
105
|
+
window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -8,8 +8,24 @@
|
|
|
8
8
|
@media (max-width: 1600px) {
|
|
9
9
|
&[class*="table-responsive-scroll"] {
|
|
10
10
|
border-radius: 4px;
|
|
11
|
-
box-shadow: 1px 0 0 0px $border_light
|
|
12
|
-
|
|
11
|
+
box-shadow: 1px 0 0 0px $border_light,
|
|
12
|
+
-1px 0 0 0px $border_light
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
|
16
|
+
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
|
17
|
+
border-left-width: 0px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&[class^=pb_table].table-md.table-card thead tr th:first-child,
|
|
21
|
+
&[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
|
|
22
|
+
border-left-width: 0px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&[class^=pb_table].table-lg.table-card thead tr th:first-child,
|
|
26
|
+
&[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
|
|
27
|
+
border-left-width: 0px;
|
|
28
|
+
}
|
|
13
29
|
|
|
14
30
|
&[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
|
15
31
|
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
|
@@ -7,11 +7,25 @@
|
|
|
7
7
|
background-color: white;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
// For use with sticky left columns
|
|
11
|
+
.sticky-left-shadow {
|
|
12
|
+
box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
|
|
13
|
+
left: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.with-border-right {
|
|
11
17
|
border-right: 1px solid $border_light !important;
|
|
18
|
+
left: 0;
|
|
12
19
|
}
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
// For use with sticky right columns
|
|
22
|
+
.sticky-right-shadow {
|
|
23
|
+
box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
|
|
24
|
+
right: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.with-border-left {
|
|
28
|
+
border-left: 1px solid $border_light !important;
|
|
29
|
+
right: 0;
|
|
16
30
|
}
|
|
17
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-
|
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-B7sgJtGS.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|