playbook_ui_docs 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 → 14.16.0.pre.alpha.PLAY1929bracketlayout6927
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +0 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +0 -7
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +190 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +0 -90
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +0 -3
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.16.0.pre.alpha.
|
4
|
+
version: 14.16.0.pre.alpha.PLAY1929bracketlayout6927
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2025-03-
|
12
|
+
date: 2025-03-27 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -58,8 +58,6 @@ files:
|
|
58
58
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
59
59
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
60
60
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
61
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
|
62
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
|
63
61
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
64
62
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
|
65
63
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
|
@@ -1149,6 +1147,8 @@ files:
|
|
1149
1147
|
- app/pb_kits/playbook/pb_label_value/docs/example.yml
|
1150
1148
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
1151
1149
|
- app/pb_kits/playbook/pb_layout/docs/_description.md
|
1150
|
+
- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx
|
1151
|
+
- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md
|
1152
1152
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
|
1153
1153
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
|
1154
1154
|
- app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
|
@@ -1,90 +0,0 @@
|
|
1
|
-
import React, { useState } from "react"
|
2
|
-
import { AdvancedTable, Button, Flex } from "playbook-ui"
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
-
import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
|
5
|
-
|
6
|
-
const AdvancedTableFullscreen = (props) => {
|
7
|
-
const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
|
8
|
-
const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
|
9
|
-
|
10
|
-
const columnDefinitions = [
|
11
|
-
{
|
12
|
-
accessor: "year",
|
13
|
-
label: "Year",
|
14
|
-
cellAccessors: ["quarter", "month", "day"],
|
15
|
-
},
|
16
|
-
{
|
17
|
-
accessor: "newEnrollments",
|
18
|
-
label: "New Enrollments",
|
19
|
-
},
|
20
|
-
{
|
21
|
-
accessor: "scheduledMeetings",
|
22
|
-
label: "Scheduled Meetings",
|
23
|
-
},
|
24
|
-
{
|
25
|
-
accessor: "attendanceRate",
|
26
|
-
label: "Attendance Rate",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
accessor: "completedClasses",
|
30
|
-
label: "Completed Classes",
|
31
|
-
},
|
32
|
-
{
|
33
|
-
accessor: "classCompletionRate",
|
34
|
-
label: "Class Completion Rate",
|
35
|
-
},
|
36
|
-
{
|
37
|
-
accessor: "graduatedStudents",
|
38
|
-
label: "Graduated Students",
|
39
|
-
},
|
40
|
-
]
|
41
|
-
|
42
|
-
const tableProps = {
|
43
|
-
sticky: true
|
44
|
-
}
|
45
|
-
|
46
|
-
return (
|
47
|
-
<div>
|
48
|
-
<Flex justify="end">
|
49
|
-
<Button
|
50
|
-
marginBottom="sm"
|
51
|
-
onClick={() => fullscreenToggleSmall?.()}
|
52
|
-
text="Fullscreen Small Table"
|
53
|
-
variant="secondary"
|
54
|
-
/>
|
55
|
-
</Flex>
|
56
|
-
<AdvancedTable
|
57
|
-
columnDefinitions={columnDefinitions}
|
58
|
-
fullscreenable
|
59
|
-
getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
|
60
|
-
tableData={MOCK_DATA}
|
61
|
-
{...props}
|
62
|
-
>
|
63
|
-
<AdvancedTable.Header enableSorting />
|
64
|
-
<AdvancedTable.Body />
|
65
|
-
</AdvancedTable>
|
66
|
-
<Flex justify="end">
|
67
|
-
<Button
|
68
|
-
marginY="sm"
|
69
|
-
onClick={() => fullscreenToggleLarge?.()}
|
70
|
-
text="Fullscreen Large Table"
|
71
|
-
variant="secondary"
|
72
|
-
/>
|
73
|
-
</Flex>
|
74
|
-
<AdvancedTable
|
75
|
-
columnDefinitions={columnDefinitions}
|
76
|
-
fullscreenable
|
77
|
-
getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
|
78
|
-
responsive="none"
|
79
|
-
tableData={PAGINATION_MOCK_DATA}
|
80
|
-
tableProps={tableProps}
|
81
|
-
{...props}
|
82
|
-
>
|
83
|
-
<AdvancedTable.Header enableSorting />
|
84
|
-
<AdvancedTable.Body />
|
85
|
-
</AdvancedTable>
|
86
|
-
</div>
|
87
|
-
)
|
88
|
-
}
|
89
|
-
|
90
|
-
export default AdvancedTableFullscreen
|
@@ -1,3 +0,0 @@
|
|
1
|
-
Trigger Fullscreen mode with the `fullscreenable`and `getFullscreenControls` props. `fullscreenable` is a boolean that enables Fullscreen functionality for an Advanced Table. `getFullscreenControls` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
|
2
|
-
|
3
|
-
Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.
|