playbook_ui 12.25.0.pre.alpha.play824786 → 12.25.0.pre.alpha.railsmultilevelimprovements758

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +1 -82
  5. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +13 -14
  6. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -3
  7. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +98 -58
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +102 -337
  9. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +31 -0
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +4 -4
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +0 -1
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +87 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +44 -109
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  21. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -6
  22. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +62 -110
  23. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  24. data/dist/menu.yml +0 -1
  25. data/dist/playbook-rails.js +7 -7
  26. data/lib/playbook/forms/builder/{intl_telephone_field.rb → multi_level_select_field.rb} +2 -2
  27. data/lib/playbook/forms/builder.rb +1 -1
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +6 -26
  30. data/app/pb_kits/playbook/pb_detail/_detail.scss +0 -44
  31. data/app/pb_kits/playbook/pb_detail/_detail.tsx +0 -55
  32. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +0 -29
  33. data/app/pb_kits/playbook/pb_detail/detail.html.erb +0 -7
  34. data/app/pb_kits/playbook/pb_detail/detail.rb +0 -31
  35. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +0 -46
  36. data/app/pb_kits/playbook/pb_detail/docs/_description.md +0 -1
  37. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb +0 -34
  38. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +0 -49
  39. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md +0 -1
  40. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb +0 -24
  41. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +0 -38
  42. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md +0 -6
  43. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +0 -3
  44. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +0 -13
  45. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +0 -22
  46. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +0 -32
  47. data/app/pb_kits/playbook/pb_detail/docs/example.yml +0 -11
  48. data/app/pb_kits/playbook/pb_detail/docs/index.js +0 -4
  49. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +0 -212
  50. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +0 -14
  51. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +0 -60
  52. data/app/pb_kits/playbook/utilities/object.ts +0 -3
@@ -1,212 +0,0 @@
1
- //function for unchecking items in formattedData
2
- export const unCheckIt = (
3
- formattedData: { [key: string]: any }[],
4
- id: string
5
- ) => {
6
- formattedData.map((item: { [key: string]: any }) => {
7
- if (item.id === id && item.checked) {
8
- item.checked = false;
9
- }
10
- if (item.children && item.children.length > 0) {
11
- unCheckIt(item.children, id);
12
- }
13
- return item;
14
- });
15
- };
16
-
17
- //function to retrieve all ancestors of unchecked item and set checked to false
18
- export const getAncestorsOfUnchecked = (
19
- formattedData: { [key: string]: any }[],
20
- item: { [key: string]: any }
21
- ) => {
22
- if (item.parent_id) {
23
- const ancestors = filterFormattedDataById(formattedData, item.parent_id);
24
- ancestors[0].checked = false;
25
-
26
- if (ancestors[0].parent_id) {
27
- getAncestorsOfUnchecked(formattedData, ancestors[0]);
28
- }
29
- }
30
- };
31
-
32
- //recursively check all child and grandchild items if parent checked
33
- export const checkedRecursive = (item: { [key: string]: any }) => {
34
- if (!item.checked) {
35
- item.checked = true;
36
- }
37
- if (item.children && item.children.length > 0) {
38
- item.children.forEach((childItem: { [key: string]: any }) => {
39
- checkedRecursive(childItem);
40
- });
41
- }
42
- };
43
-
44
- //recursively uncheck all child and grandchild items if parent unchecked
45
- export const unCheckedRecursive = (item: { [key: string]: any }) => {
46
- if (item.checked) {
47
- item.checked = false;
48
- }
49
- if (item.children && item.children.length > 0) {
50
- item.children.forEach((childItem: { [key: string]: any }) => {
51
- unCheckedRecursive(childItem);
52
- });
53
- }
54
- };
55
-
56
- //function is going over formattedData and returning all objects that match the
57
- //id of the clicked item from the dropdown
58
- export const filterFormattedDataById = (
59
- formattedData: { [key: string]: any }[],
60
- id: string
61
- ) => {
62
- const matched: { [key: string]: any }[] = [];
63
- const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
64
- for (const item of data) {
65
- if (item.id.toLowerCase() === (term.toLowerCase())) {
66
- matched.push(item);
67
- }
68
-
69
- if (item.children && item.children.length > 0) {
70
- recursiveSearch(item.children, term);
71
- }
72
- }
73
- };
74
-
75
- recursiveSearch(formattedData, id);
76
- return matched;
77
- };
78
-
79
- export const findByFilter = (
80
- formattedData: { [key: string]: any }[],
81
- searchTerm: string
82
- ) => {
83
- const matchedItems: { [key: string]: any }[] = [];
84
- const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
85
- for (const item of data) {
86
- if (item.label.toLowerCase().includes(term.toLowerCase())) {
87
- matchedItems.push(item);
88
- }
89
-
90
- if (item.children) {
91
- recursiveSearch(item.children, term);
92
- }
93
- }
94
- };
95
-
96
- recursiveSearch(formattedData, searchTerm);
97
- return matchedItems;
98
- };
99
-
100
- //function to get all items with checked = true
101
- export const getCheckedItems = (
102
- data: { [key: string]: any }[]
103
- ): { [key: string]: any }[] => {
104
- const checkedItems: { [key: string]: any }[] = [];
105
- if (!Array.isArray(data)) {
106
- return;
107
- }
108
- data.forEach((item: { [key: string]: any }) => {
109
- if (item.checked) {
110
- checkedItems.push(item);
111
- }
112
- if (item.children && item.children.length > 0) {
113
- const childCheckedItems = getCheckedItems(item.children);
114
- checkedItems.push(...childCheckedItems);
115
- }
116
- });
117
- return checkedItems;
118
- };
119
-
120
- export const getChildIds = (
121
- item: { [key: string]: any },
122
- defaultArray: { [key: string]: any }[]
123
- ) => {
124
- let childIds: string[] = [];
125
- item.children.forEach((child: { [key: string]: any }) => {
126
- childIds.push(child.id);
127
- if (child.children && child.children.length > 0) {
128
- const childChildIds = getChildIds(child, defaultArray);
129
- childIds.push(...childChildIds);
130
- }
131
- });
132
- return childIds;
133
- };
134
-
135
- export const updateReturnItems = (newChecked: { [key: string]: any }[]) => {
136
- const updatedCheckedItems: { [key: string]: any }[] = [];
137
- for (const item of newChecked) {
138
- if (item.children && item.children.length > 0) {
139
- const allChildrenChecked = item.children.every(
140
- (child: { [key: string]: any }) => child.checked
141
- );
142
- if (allChildrenChecked) {
143
- updatedCheckedItems.push(item);
144
- }
145
- }
146
- const childItem = updatedCheckedItems.some((x) => x.id === item?.parent_id);
147
- if (!childItem) {
148
- updatedCheckedItems.push(item);
149
- }
150
- }
151
- const filteredReturn = updatedCheckedItems.filter((item) => {
152
- return !updatedCheckedItems.find(
153
- (otherItem) => otherItem.id === item.parent_id
154
- );
155
- });
156
- return filteredReturn;
157
- };
158
-
159
- export const recursiveReturnOnlyParent = (
160
- items: { [key: string]: any },
161
- formattedData: { [key: string]: any }[],
162
- defaultReturn: { [key: string]: any }[],
163
- setDefaultReturn: any
164
- ) => {
165
- const parent = filterFormattedDataById(formattedData, items.parent_id);
166
- const allChildrenChecked = parent[0].children.every(
167
- (child: { [key: string]: any }) => child.checked
168
- );
169
- if (allChildrenChecked) {
170
- // Only return the parent and remove its children from defaultReturn
171
- parent[0].checked = true;
172
- const filteredDefaultReturn = defaultReturn.filter((item) => {
173
- // Remove children of the specific parent
174
- if (
175
- parent[0].children.find(
176
- (child: { [key: string]: any }) => child.id === item.id
177
- )
178
- ) {
179
- return false;
180
- }
181
- });
182
- setDefaultReturn([...filteredDefaultReturn, parent[0]]);
183
- // Check if the parent has a parent and its children are all checked
184
- const parentHasParent = parent[0].parent_id !== null;
185
- if (parentHasParent) {
186
- recursiveReturnOnlyParent(
187
- parent[0],
188
- formattedData,
189
- filteredDefaultReturn,
190
- setDefaultReturn
191
- );
192
- }
193
- } else {
194
- const checkedChildren = parent[0].children.filter(
195
- (child: { [key: string]: any }) => child.checked
196
- );
197
- const updatedDefaultReturn = [...defaultReturn, ...checkedChildren];
198
- setDefaultReturn(updatedDefaultReturn);
199
- }
200
- };
201
-
202
- export const removeChildrenIfParentChecked = (
203
- items: { [key: string]: any },
204
- defaultReturn: { [key: string]: any }[],
205
- setDefaultReturn: any
206
- ) => {
207
- const childIds = getChildIds(items, defaultReturn);
208
- const filteredDefaultArray = defaultReturn.filter(
209
- (item: { [key: string]: any }) => childIds !== item.id
210
- );
211
- setDefaultReturn([...filteredDefaultArray, items]);
212
- };
@@ -1,14 +0,0 @@
1
- <form id="example-form-validation" action="" method="get">
2
- <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
3
- <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
- </form>
5
-
6
- <% content_for(:pb_js) do %>
7
- <%= javascript_tag do %>
8
- document.addEventListener('DOMContentLoaded', function () {
9
- document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
10
- if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
11
- })
12
- })
13
- <% end %>
14
- <% end %>
@@ -1,60 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
3
-
4
- const PhoneNumberInputValidation = (props) => {
5
- const [formErrors, setFormErrors] = useState("");
6
- const [showFormErrors, setShowFormErrors] = useState(false);
7
- const [phoneNumber, setPhoneNumber] = useState("");
8
- const [countryCode, setCountryCode] = useState("af");
9
-
10
- const handleOnValidate = (valid) => {
11
- setFormErrors(
12
- valid ? "" : "Please correct the fields below and try again."
13
- );
14
- };
15
-
16
- const handleOnChange = ({ iso2, number }) => {
17
- setCountryCode(iso2);
18
- setPhoneNumber(number);
19
- };
20
-
21
- const handleOnSubmit = (e) => {
22
- if (showFormErrors) e.preventDefault()
23
- }
24
-
25
- useEffect(() => {
26
- setShowFormErrors(formErrors.length > 0);
27
- }, [formErrors]);
28
-
29
- return (
30
- <form
31
- action=""
32
- method="get"
33
- onSubmit={handleOnSubmit}
34
- >
35
- {showFormErrors && (
36
- <FixedConfirmationToast
37
- marginBottom="md"
38
- status="error"
39
- text={formErrors}
40
- />
41
- )}
42
- <PhoneNumberInput
43
- error="Missing phone number."
44
- id="validation"
45
- initialCountry={countryCode}
46
- onChange={handleOnChange}
47
- onValidate={handleOnValidate}
48
- required
49
- value={phoneNumber}
50
- {...props}
51
- />
52
- <Button
53
- htmlType="submit"
54
- text="Save Phone Number"
55
- />
56
- </form>
57
- );
58
- };
59
-
60
- export default PhoneNumberInputValidation;
@@ -1,3 +0,0 @@
1
- /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
2
-
3
- export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1