playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1246 → 13.8.0.pre.alpha.play845allkitsbytypes1254
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_multi_level_select/_helper_functions.tsx +22 -27
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +109 -234
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +7 -6
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +0 -7
- data/dist/menu.yml +281 -110
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/pb_doc_helper.rb +69 -29
- data/lib/playbook/version.rb +1 -1
- metadata +2 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +0 -73
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +0 -87
@@ -1,6 +1,6 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
module
|
3
|
+
module PlaybookWebsite
|
4
4
|
module PbDocHelper
|
5
5
|
def pb_kit_title(title)
|
6
6
|
title.remove("pb_").titleize.tr("_", " ")
|
@@ -26,41 +26,81 @@ module Playbook
|
|
26
26
|
end
|
27
27
|
|
28
28
|
# Deal with lists of kits, used in Playbook doc and Externally
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
kits
|
33
|
-
kits.
|
34
|
-
|
35
|
-
|
36
|
-
display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode)
|
37
|
-
end
|
38
|
-
else
|
39
|
-
display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
|
40
|
-
end
|
41
|
-
end
|
42
|
-
raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
|
29
|
+
def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
|
30
|
+
kits = get_kits(type)
|
31
|
+
|
32
|
+
# Iterate through the filtered kits and render them
|
33
|
+
kits.map do |kit|
|
34
|
+
render_pb_doc_kit(kit["name"], type, limit_examples, true, dark_mode)
|
35
|
+
end.join.html_safe
|
43
36
|
end
|
44
|
-
# rubocop:enable Style/StringConcatenation
|
45
37
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
38
|
+
def get_kits(type = "rails")
|
39
|
+
kits = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml")) || []
|
40
|
+
|
41
|
+
# Filter kits that have at least one component compatible with the type
|
42
|
+
kits.select do |kit|
|
43
|
+
kit["components"].any? { |component| component["platforms"].include?(type) }
|
44
|
+
end
|
50
45
|
end
|
51
46
|
|
52
|
-
def
|
53
|
-
|
54
|
-
|
47
|
+
def aggregate_kits
|
48
|
+
all_kits = []
|
49
|
+
|
50
|
+
YAML.load_file(Playbook::Engine.root.join("dist/menu.yml")).each do |kit|
|
51
|
+
kit_name = kit["name"]
|
52
|
+
components = kit["components"].map { |c| c["name"] }
|
53
|
+
|
54
|
+
all_kits << if components.size == 1
|
55
|
+
components.first
|
56
|
+
else
|
57
|
+
{ kit_name => components }
|
58
|
+
end
|
59
|
+
end
|
60
|
+
|
61
|
+
all_kits
|
55
62
|
end
|
56
|
-
# rubocop:enable Naming/AccessorMethodName
|
57
63
|
|
58
64
|
# rubocop:disable Style/OptionalBooleanParameter
|
59
|
-
def render_pb_doc_kit(
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
65
|
+
def render_pb_doc_kit(kit_name, type, limit_examples, code = true, dark_mode = false)
|
66
|
+
parent_kit = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml")).find { |kit| kit["name"] == kit_name }
|
67
|
+
|
68
|
+
# Initialize component_content as an empty string
|
69
|
+
component_content = ""
|
70
|
+
title = ""
|
71
|
+
|
72
|
+
# Check if parent_kit is nil
|
73
|
+
if parent_kit.nil?
|
74
|
+
title = pb_doc_render_clickable_title(kit_name, type)
|
75
|
+
component_content = raw("<div class='pb--docItem-ui'>
|
76
|
+
#{pb_kit(kit: kit_name, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
|
77
|
+
else
|
78
|
+
# Filter components based on the specified type
|
79
|
+
components = parent_kit["components"].select { |component| component["platforms"].include?(type) }
|
80
|
+
|
81
|
+
# If it's a parent with components, accumulate the UI content for child components
|
82
|
+
if components.any?
|
83
|
+
component_content = components.map do |component|
|
84
|
+
component_name = component["name"]
|
85
|
+
title = pb_doc_render_clickable_title(component_name, type) # Use component_name for the title
|
86
|
+
|
87
|
+
# Render the component UI content with the same styles/tags as the parent
|
88
|
+
component_ui = raw("<div class='pb--docItem-ui'>
|
89
|
+
#{pb_kit(kit: component_name, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}
|
90
|
+
</div>")
|
91
|
+
|
92
|
+
# Combine the component name and component UI content
|
93
|
+
"#{title}#{component_ui}"
|
94
|
+
end.join.to_s
|
95
|
+
end
|
96
|
+
end
|
97
|
+
|
98
|
+
# Combine the component content and UI content for the parent kit
|
99
|
+
if parent_kit.nil?
|
100
|
+
"#{title}#{component_content}".to_s
|
101
|
+
else
|
102
|
+
component_content.to_s.to_s
|
103
|
+
end
|
64
104
|
end
|
65
105
|
# rubocop:enable Style/OptionalBooleanParameter
|
66
106
|
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.8.0.pre.alpha.
|
4
|
+
version: 13.8.0.pre.alpha.play845allkitsbytypes1254
|
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: 2023-10-
|
12
|
+
date: 2023-10-04 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1498,8 +1498,6 @@ files:
|
|
1498
1498
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb
|
1499
1499
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx
|
1500
1500
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md
|
1501
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb
|
1502
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx
|
1503
1501
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
|
1504
1502
|
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1505
1503
|
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
@@ -1,73 +0,0 @@
|
|
1
|
-
<% treeData = [{
|
2
|
-
label: "Power Home Remodeling",
|
3
|
-
value: "Power Home Remodeling",
|
4
|
-
id: "200",
|
5
|
-
expanded: true,
|
6
|
-
children: [
|
7
|
-
{
|
8
|
-
label: "People",
|
9
|
-
value: "People",
|
10
|
-
id: "201",
|
11
|
-
expanded: true,
|
12
|
-
children: [
|
13
|
-
{
|
14
|
-
label: "Talent Acquisition",
|
15
|
-
value: "Talent Acquisition",
|
16
|
-
id: "202",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
label: "Business Affairs",
|
20
|
-
value: "Business Affairs",
|
21
|
-
id: "203",
|
22
|
-
children: [
|
23
|
-
{
|
24
|
-
label: "Initiatives",
|
25
|
-
value: "Initiatives",
|
26
|
-
id: "204",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
label: "Learning & Development",
|
30
|
-
value: "Learning & Development",
|
31
|
-
id: "205",
|
32
|
-
},
|
33
|
-
],
|
34
|
-
},
|
35
|
-
{
|
36
|
-
label: "People Experience",
|
37
|
-
value: "People Experience",
|
38
|
-
id: "206",
|
39
|
-
},
|
40
|
-
],
|
41
|
-
},
|
42
|
-
{
|
43
|
-
label: "Contact Center",
|
44
|
-
value: "Contact Center",
|
45
|
-
id: "207",
|
46
|
-
children: [
|
47
|
-
{
|
48
|
-
label: "Appointment Management",
|
49
|
-
value: "Appointment Management",
|
50
|
-
id: "208",
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Customer Service",
|
54
|
-
value: "Customer Service",
|
55
|
-
id: "209",
|
56
|
-
},
|
57
|
-
{
|
58
|
-
label: "Energy",
|
59
|
-
value: "Energy",
|
60
|
-
id: "210",
|
61
|
-
},
|
62
|
-
],
|
63
|
-
},
|
64
|
-
],
|
65
|
-
}] %>
|
66
|
-
|
67
|
-
<%= pb_rails("multi_level_select", props: {
|
68
|
-
id: "multi-level-select-single-rails",
|
69
|
-
name: "my_single_select_array",
|
70
|
-
tree_data: treeData,
|
71
|
-
input_name: "Power",
|
72
|
-
variant: "single"
|
73
|
-
}) %>
|
@@ -1,87 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
3
|
-
|
4
|
-
const treeData = [
|
5
|
-
{
|
6
|
-
label: "Power Home Remodeling",
|
7
|
-
value: "Power Home Remodeling",
|
8
|
-
id: "powerhome2",
|
9
|
-
expanded: true,
|
10
|
-
children: [
|
11
|
-
{
|
12
|
-
label: "People",
|
13
|
-
value: "People",
|
14
|
-
id: "people2",
|
15
|
-
expanded: true,
|
16
|
-
children: [
|
17
|
-
{
|
18
|
-
label: "Talent Acquisition",
|
19
|
-
value: "Talent Acquisition",
|
20
|
-
id: "talent2",
|
21
|
-
},
|
22
|
-
{
|
23
|
-
label: "Business Affairs",
|
24
|
-
value: "Business Affairs",
|
25
|
-
id: "business2",
|
26
|
-
children: [
|
27
|
-
{
|
28
|
-
label: "Initiatives",
|
29
|
-
value: "Initiatives",
|
30
|
-
id: "initiative2",
|
31
|
-
},
|
32
|
-
{
|
33
|
-
label: "Learning & Development",
|
34
|
-
value: "Learning & Development",
|
35
|
-
id: "development2",
|
36
|
-
},
|
37
|
-
],
|
38
|
-
},
|
39
|
-
{
|
40
|
-
label: "People Experience",
|
41
|
-
value: "People Experience",
|
42
|
-
id: "experience2",
|
43
|
-
},
|
44
|
-
],
|
45
|
-
},
|
46
|
-
{
|
47
|
-
label: "Contact Center",
|
48
|
-
value: "Contact Center",
|
49
|
-
id: "contact2",
|
50
|
-
children: [
|
51
|
-
{
|
52
|
-
label: "Appointment Management",
|
53
|
-
value: "Appointment Management",
|
54
|
-
id: "appointment2",
|
55
|
-
},
|
56
|
-
{
|
57
|
-
label: "Customer Service",
|
58
|
-
value: "Customer Service",
|
59
|
-
id: "customer2",
|
60
|
-
},
|
61
|
-
{
|
62
|
-
label: "Energy",
|
63
|
-
value: "Energy",
|
64
|
-
id: "energy2",
|
65
|
-
},
|
66
|
-
],
|
67
|
-
},
|
68
|
-
],
|
69
|
-
},
|
70
|
-
];
|
71
|
-
|
72
|
-
const MultiLevelSelectSingle = (props) => {
|
73
|
-
return (
|
74
|
-
<div>
|
75
|
-
<MultiLevelSelect
|
76
|
-
id="multiselect-single"
|
77
|
-
inputName="Power"
|
78
|
-
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
79
|
-
treeData={treeData}
|
80
|
-
variant="single"
|
81
|
-
{...props}
|
82
|
-
/>
|
83
|
-
</div>
|
84
|
-
)
|
85
|
-
};
|
86
|
-
|
87
|
-
export default MultiLevelSelectSingle;
|