playbook_ui_docs 14.5.0.pre.alpha.PLAY1510railsformloading3977 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4028

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8e6730f74b93d7a863333af2d49a1523438a51d50710a437888504ecccb8cc2c
4
- data.tar.gz: 4cedd784e25a97bca9986c58ae7f0e6270d8bf61e6a2deb777fb29350e3b0a7a
3
+ metadata.gz: 30c0cbda206c894e4b03c141468f1cb4af6a3c784d99135f7083eee8ae1446a0
4
+ data.tar.gz: f8cf78aa6ef1a3d4bb536e68e835e4de530e01400508d3a50ddb9f6607514a51
5
5
  SHA512:
6
- metadata.gz: bfa8171fd39c6048435124bbe3ec0dcfc1a39942e3c5b6a610415321ac496f6be62720684b75127c0b9e67e77239d6f4436a327877820a4a2f2df8597dc308c1
7
- data.tar.gz: 50dcc4e9fef77a77af324c1954c8d83f3c46a196145ead5029f45b8b9bb42e603d0f93152f9c58986e34c6cee50e79c11f7a26907f273380a886ea01299ec8ae
6
+ metadata.gz: 87d79b15bb9b44ccb929dd053124b9fd8d86542e1c7dbab405f10290f9cfc11bff15fa2c2e3c86bff08cf62f72cdeeff963506debbf501ec9159ee63ffb23b80
7
+ data.tar.gz: 26ee19cde788971baa58e3cac1779158cdfbbe54886905baf462514e21a8cd559627fc4c842a9ec8272e8d0f454fbceb4f4b8f55f4444c87cc1aed9231f032b9
@@ -1,36 +1,13 @@
1
1
  <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
2
2
 
3
- <%= pb_rails("dialog", props: {
4
- id:"dialog-loading",
5
- size: "sm",
6
- title: "Loading Example",
7
- text: "Make a loading request?",
8
- cancel_button: "Cancel Button",
3
+ <%= pb_rails("dialog", props: {
4
+ id:"dialog-loading",
5
+ size: "sm",
6
+ title: "Loading Exmaple",
7
+ text: "Make a loading request?",
8
+ cancel_button: "Cancel Button",
9
9
  cancel_button_id: "cancel-button-loading",
10
- confirm_button: "Okay",
10
+ confirm_button: "Okay",
11
11
  confirm_button_id: "confirm-button-loading",
12
12
  loading: true,
13
13
  }) %>
14
-
15
- <script>
16
- const loadingButton = document.querySelector('[data-disable-with="Loading"]');
17
- if (loadingButton) {
18
- loadingButton.addEventListener("click", function() {
19
- const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
20
- const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
21
- let currentClass = okayLoadingButton.className;
22
- let cancelClass = cancelButton ? cancelButton.className : "";
23
-
24
- setTimeout(function() {
25
- okayLoadingButton.disabled = false;
26
- okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
27
-
28
- if (cancelButton) {
29
- cancelButton.disabled = false;
30
- cancelButton.className = cancelClass.replace("_disabled", "_enabled");
31
- }
32
- }, 5000);
33
-
34
- });
35
- }
36
- </script>
@@ -1 +1,3 @@
1
1
  Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
2
+
3
+ Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.
@@ -3,4 +3,3 @@ examples:
3
3
  rails:
4
4
  - form_form_with: Default
5
5
  - form_form_with_validate: Default + Validation
6
- - form_form_with_loading: Default + Loading
@@ -87,4 +87,4 @@ const MultiLevelSelectDefault = (props) => {
87
87
  )
88
88
  };
89
89
 
90
- export default MultiLevelSelectDefault;
90
+ export default MultiLevelSelectDefault;
@@ -0,0 +1,105 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+ import Badge from "../../pb_badge/_badge";
4
+
5
+ const treeData = [
6
+ {
7
+ label: "Power Home Remodeling",
8
+ value: "Power Home Remodeling",
9
+ id: "powerhome1",
10
+ expanded: true,
11
+ children: [
12
+ {
13
+ label: "People",
14
+ value: "People",
15
+ id: "people1",
16
+ expanded: true,
17
+ status: "active",
18
+ children: [
19
+ {
20
+ label: "Talent Acquisition",
21
+ value: "Talent Acquisition",
22
+ id: "talent1",
23
+ },
24
+ {
25
+ label: "Business Affairs",
26
+ value: "Business Affairs",
27
+ id: "business1",
28
+ status: "active",
29
+ variant: "primary",
30
+
31
+ children: [
32
+ {
33
+ label: "Initiatives",
34
+ value: "Initiatives",
35
+ id: "initiative1",
36
+ },
37
+ {
38
+ label: "Learning & Development",
39
+ value: "Learning & Development",
40
+ id: "development1",
41
+ status: "Inactive",
42
+ },
43
+ ],
44
+ },
45
+ {
46
+ label: "People Experience",
47
+ value: "People Experience",
48
+ id: "experience1",
49
+ },
50
+ ],
51
+ },
52
+ {
53
+ label: "Contact Center",
54
+ value: "Contact Center",
55
+ id: "contact1",
56
+ status: "Inactive",
57
+ variant: "error",
58
+ children: [
59
+ {
60
+ label: "Appointment Management",
61
+ value: "Appointment Management",
62
+ id: "appointment1",
63
+ },
64
+ {
65
+ label: "Customer Service",
66
+ value: "Customer Service",
67
+ id: "customer1",
68
+ },
69
+ {
70
+ label: "Energy",
71
+ value: "Energy",
72
+ id: "energy1",
73
+ },
74
+ ],
75
+ },
76
+ ],
77
+ },
78
+ ];
79
+
80
+ const MultiLevelSelectWithChildren = (props) => {
81
+ return (
82
+ <div>
83
+ <MultiLevelSelect
84
+ id="multiselect-with-children"
85
+ onSelect={(selectedNodes) =>
86
+ console.log("Selected Items", selectedNodes)
87
+ }
88
+ treeData={treeData}
89
+ {...props}
90
+ >
91
+ <MultiLevelSelect.Options>
92
+ {(item) => (
93
+ <Badge
94
+ marginLeft="sm"
95
+ text={item.status}
96
+ variant={item.status === "active" ? "success" : "warning"}
97
+ />
98
+ )}
99
+ </MultiLevelSelect.Options>
100
+ </MultiLevelSelect>
101
+ </div>
102
+ );
103
+ };
104
+
105
+ export default MultiLevelSelectWithChildren;
@@ -0,0 +1 @@
1
+ The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
@@ -0,0 +1,106 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+ import Badge from "../../pb_badge/_badge";
4
+
5
+ const treeData = [
6
+ {
7
+ label: "Power Home Remodeling",
8
+ value: "Power Home Remodeling",
9
+ id: "powerhome1",
10
+ expanded: true,
11
+ children: [
12
+ {
13
+ label: "People",
14
+ value: "People",
15
+ id: "people1",
16
+ expanded: true,
17
+ status: "active",
18
+ children: [
19
+ {
20
+ label: "Talent Acquisition",
21
+ value: "Talent Acquisition",
22
+ id: "talent1",
23
+ },
24
+ {
25
+ label: "Business Affairs",
26
+ value: "Business Affairs",
27
+ id: "business1",
28
+ status: "active",
29
+ variant: "primary",
30
+
31
+ children: [
32
+ {
33
+ label: "Initiatives",
34
+ value: "Initiatives",
35
+ id: "initiative1",
36
+ },
37
+ {
38
+ label: "Learning & Development",
39
+ value: "Learning & Development",
40
+ id: "development1",
41
+ status: "Inactive",
42
+ },
43
+ ],
44
+ },
45
+ {
46
+ label: "People Experience",
47
+ value: "People Experience",
48
+ id: "experience1",
49
+ },
50
+ ],
51
+ },
52
+ {
53
+ label: "Contact Center",
54
+ value: "Contact Center",
55
+ id: "contact1",
56
+ status: "Inactive",
57
+ variant: "error",
58
+ children: [
59
+ {
60
+ label: "Appointment Management",
61
+ value: "Appointment Management",
62
+ id: "appointment1",
63
+ },
64
+ {
65
+ label: "Customer Service",
66
+ value: "Customer Service",
67
+ id: "customer1",
68
+ },
69
+ {
70
+ label: "Energy",
71
+ value: "Energy",
72
+ id: "energy1",
73
+ },
74
+ ],
75
+ },
76
+ ],
77
+ },
78
+ ];
79
+
80
+ const MultiLevelSelectWithChildrenWithRadios = (props) => {
81
+ return (
82
+ <div>
83
+ <MultiLevelSelect
84
+ id="multiselect-with-children"
85
+ onSelect={(selectedNodes) =>
86
+ console.log("Selected Items", selectedNodes)
87
+ }
88
+ treeData={treeData}
89
+ variant="single"
90
+ {...props}
91
+ >
92
+ <MultiLevelSelect.Options>
93
+ {(item) => (
94
+ <Badge
95
+ marginLeft="sm"
96
+ text={item.status}
97
+ variant={item.status === "active" ? "success" : "warning"}
98
+ />
99
+ )}
100
+ </MultiLevelSelect.Options>
101
+ </MultiLevelSelect>
102
+ </div>
103
+ );
104
+ };
105
+
106
+ export default MultiLevelSelectWithChildrenWithRadios;
@@ -0,0 +1 @@
1
+ The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.
@@ -15,3 +15,6 @@ examples:
15
15
  - multi_level_select_return_all_selected: Return All Selected
16
16
  - multi_level_select_selected_ids_react: Selected Ids
17
17
  - multi_level_select_color: With Pills (Custom Color)
18
+ - multi_level_select_with_children: Checkboxes With Children
19
+ - multi_level_select_with_children_with_radios: Single Select With Children
20
+
@@ -4,3 +4,5 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
6
  export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
7
+ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
8
+ export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'