playbook_ui 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159
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_advanced_table/docs/_advanced_table_beta_sort.html.erb +59 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +4 -4
- data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/_card.tsx +4 -3
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
- data/app/pb_kits/playbook/pb_collapsible/index.js +6 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md +33 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md +18 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +6 -1
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +30 -35
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +2 -4
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +70 -50
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +26 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +5 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +11 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +4 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +7 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +6 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +142 -15
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -5
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +18 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +228 -218
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +14 -12
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +7 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +17 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -3
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb +32 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx +48 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +16 -11
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +72 -0
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +37 -6
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +2 -3
- data/app/pb_kits/playbook/pb_icon/icon.rb +21 -1
- data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
- data/app/pb_kits/playbook/pb_list/_list.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +7 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +3 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +24 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +4 -4
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.html.erb +27 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.rb +110 -0
- data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +7 -3
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +3 -3
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +16 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -0
- data/dist/menu.yml +2 -2
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +18 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d2f47afcafc63550e85b7c500375e2c173a285ff40b3d83bb61a99a345c20b18
|
4
|
+
data.tar.gz: 4742a835d7345a6d7440baaa8924f1d550fd483aed74c5926fff117022b216cd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5fb9276248e90b14c01c791ad899de5f47e663c86ed5d7296a7897532a2a972613f6b81953c1c946c459f164157c811f1c62e6d17370bf3d78e8154bcb1d490b
|
7
|
+
data.tar.gz: a487ea6d13567b83e9fba345ae000f60e13d3b15c65d854f80d7085fd5c74424ca441679f3880d082ac13fdc2d12eea337643bc0f31371d30e96666ee6acd0a8
|
@@ -0,0 +1,59 @@
|
|
1
|
+
<%# Example sort method for demonstration purposes %>
|
2
|
+
<% if params["sort"] %>
|
3
|
+
<% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
|
4
|
+
<% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
|
5
|
+
<% @table_data.sort! do |a, b|
|
6
|
+
value_a = a[sort_param]
|
7
|
+
value_b = b[sort_param]
|
8
|
+
|
9
|
+
value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
|
10
|
+
value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
|
11
|
+
|
12
|
+
sort_direction * (value_a <=> value_b)
|
13
|
+
end %>
|
14
|
+
<% end %>
|
15
|
+
|
16
|
+
<%
|
17
|
+
column_definitions = [
|
18
|
+
{
|
19
|
+
accessor: "year",
|
20
|
+
label: "Year",
|
21
|
+
cellAccessors: ["quarter", "month", "day"],
|
22
|
+
sort_menu: [
|
23
|
+
{ item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" },
|
24
|
+
{ item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" }
|
25
|
+
],
|
26
|
+
},
|
27
|
+
{
|
28
|
+
accessor: "newEnrollments",
|
29
|
+
label: "New Enrollments",
|
30
|
+
},
|
31
|
+
{
|
32
|
+
accessor: "scheduledMeetings",
|
33
|
+
label: "Scheduled Meetings",
|
34
|
+
},
|
35
|
+
{
|
36
|
+
accessor: "attendanceRate",
|
37
|
+
label: "Attendance Rate",
|
38
|
+
},
|
39
|
+
{
|
40
|
+
accessor: "completedClasses",
|
41
|
+
label: "Completed Classes",
|
42
|
+
},
|
43
|
+
{
|
44
|
+
accessor: "classCompletionRate",
|
45
|
+
label: "Class Completion Rate",
|
46
|
+
},
|
47
|
+
{
|
48
|
+
accessor: "graduatedStudents",
|
49
|
+
label: "Graduated Students",
|
50
|
+
}
|
51
|
+
]
|
52
|
+
|
53
|
+
subrow_headers = ["Quarter", "Month", "Day"]
|
54
|
+
%>
|
55
|
+
|
56
|
+
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
57
|
+
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
58
|
+
<%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
|
59
|
+
<% end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
Optionally enable sorting by passing `sort_menu` to any `column_definition`(s). Sort options are determined by an array of `item` objects passed to the `sort_menu` prop.
|
2
|
+
|
3
|
+
</br>
|
4
|
+
<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
|
5
|
+
|
6
|
+
This example uses a custom sort method that may need to be modified or replaced within your project.
|
@@ -2,14 +2,15 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
5
|
+
- advanced_table_beta_sort: Enable Sorting
|
5
6
|
react:
|
6
7
|
- advanced_table_default: Default (Required Props)
|
7
8
|
- advanced_table_loading: Loading State
|
8
|
-
- advanced_table_sort:
|
9
|
+
- advanced_table_sort: Enable Sorting
|
9
10
|
- advanced_table_sort_control: Sort Control
|
10
11
|
- advanced_table_expanded_control: Expanded Control
|
11
12
|
- advanced_table_subrow_headers: SubRow Headers
|
12
13
|
- advanced_table_collapsible_trail: Collapsible Trail
|
13
14
|
- advanced_table_table_options: Table Options
|
14
15
|
- advanced_table_table_props: Table Props
|
15
|
-
- advanced_table_inline_row_loading:
|
16
|
+
- advanced_table_inline_row_loading: Inline Row Loading
|
@@ -1,11 +1,11 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
|
-
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
2
|
+
<%= pb_rails("table/table_row", props: { tag: "div" }) do %>
|
3
3
|
<% object.column_definitions.each_with_index do |item, index| %>
|
4
|
-
<%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
|
5
|
-
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
|
4
|
+
<%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
|
5
|
+
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
|
6
6
|
<% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
|
7
7
|
<button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
|
8
|
-
<%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
|
8
|
+
<%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
|
9
9
|
</button>
|
10
10
|
<% end %>
|
11
11
|
<%= item[:label] %>
|
@@ -1,23 +1,14 @@
|
|
1
1
|
<% if object.image_url.present? %>
|
2
|
-
<%=
|
3
|
-
aria: object.aria,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
class: object.classname,
|
2
|
+
<%= pb_content_tag(object.tag,
|
7
3
|
style: "background-image: url('#{object.image_url}');
|
8
4
|
background-repeat: #{object.background_repeat};
|
9
5
|
background-size: #{object.background_size};
|
10
6
|
background-position: #{object.background_position};",
|
11
|
-
**combined_html_options
|
12
7
|
) do %>
|
13
8
|
<%= content.presence %>
|
14
9
|
<% end %>
|
15
10
|
<% else %>
|
16
|
-
<%=
|
17
|
-
aria: object.aria,
|
18
|
-
data: object.data,
|
19
|
-
id: object.id,
|
20
|
-
class: object.classname,
|
11
|
+
<%= pb_content_tag(object.tag,
|
21
12
|
style: object.custom_background_color
|
22
13
|
) do %>
|
23
14
|
<%= content.presence %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
aria: object.aria,
|
6
|
-
**combined_html_options) do%>
|
1
|
+
<%= pb_content_tag do%>
|
7
2
|
<%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
|
8
3
|
<%= content.presence %>
|
9
4
|
<% end %>
|
@@ -20,6 +20,7 @@ type CardPropTypes = {
|
|
20
20
|
children: React.ReactChild[] | React.ReactChild | number,
|
21
21
|
className?: string,
|
22
22
|
data?: {[key: string]: string},
|
23
|
+
dragId?: string,
|
23
24
|
draggableItem?: boolean,
|
24
25
|
dragHandle?: boolean,
|
25
26
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -85,11 +86,11 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
85
86
|
children,
|
86
87
|
className,
|
87
88
|
data = {},
|
89
|
+
dragId,
|
88
90
|
dragHandle = true,
|
89
91
|
draggableItem = false,
|
90
92
|
highlight = {},
|
91
93
|
htmlOptions = {},
|
92
|
-
id,
|
93
94
|
selected = false,
|
94
95
|
tag = 'div',
|
95
96
|
} = props
|
@@ -126,8 +127,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
126
127
|
<>
|
127
128
|
{
|
128
129
|
draggableItem ? (
|
129
|
-
<Draggable.Item
|
130
|
-
key={
|
130
|
+
<Draggable.Item dragId={dragId}
|
131
|
+
key={dragId}
|
131
132
|
>
|
132
133
|
<Tag
|
133
134
|
{...ariaProps}
|
@@ -14,7 +14,12 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
14
14
|
this.element.addEventListener('click', () => {
|
15
15
|
this.toggleElement(this.target)
|
16
16
|
})
|
17
|
-
|
17
|
+
// Check the initial state of the collapsible content and set the arrow accordingly
|
18
|
+
if (this.target.classList.contains('is-visible')) {
|
19
|
+
this.displayUpArrow()
|
20
|
+
} else {
|
21
|
+
this.displayDownArrow()
|
22
|
+
}
|
18
23
|
// Listen for a custom event to toggle the collapsible
|
19
24
|
document.addEventListener(`${this.target.id}`, () => {
|
20
25
|
this.toggleElement(this.target)
|
@@ -0,0 +1,33 @@
|
|
1
|
+
![Date-Time-Stacked-Default](https://github.com/powerhome/playbook/assets/54749071/b877dd01-32fa-49ff-af2d-1f8d819f6f39)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
5
|
+
PBDateTimeStacked(
|
6
|
+
timeZoneIdentifier: "EDT",
|
7
|
+
isLowercase: true,
|
8
|
+
isMonthStacked: true,
|
9
|
+
isMonthBold: true
|
10
|
+
)
|
11
|
+
PBDateTimeStacked(
|
12
|
+
timeZoneIdentifier: "EDT",
|
13
|
+
isYearDisplayed: true,
|
14
|
+
isLowercase: true,
|
15
|
+
isMonthStacked: true,
|
16
|
+
isMonthBold: true,
|
17
|
+
isYearBold: true,
|
18
|
+
dateVariant: .standard
|
19
|
+
)
|
20
|
+
PBDateTimeStacked(
|
21
|
+
timeZoneIdentifier: "GMT+9",
|
22
|
+
isLowercase: true,
|
23
|
+
isMonthStacked: true,
|
24
|
+
isMonthBold: true
|
25
|
+
)
|
26
|
+
PBDateTimeStacked(
|
27
|
+
timeZoneIdentifier: "MDT",
|
28
|
+
isLowercase: true,
|
29
|
+
isMonthStacked: true,
|
30
|
+
isMonthBold: true
|
31
|
+
)
|
32
|
+
}
|
33
|
+
```
|
@@ -0,0 +1,18 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **dateTime** | `Date` | Takes a date type to calculate the current date | `Date()` | |
|
5
|
+
| **timeDate** | `Date` | Takes a date type to calculate the current time | `Date()` | |
|
6
|
+
| **timeZoneIdentifier** | `String` | A string value that is used in a function to get the correct time in the corrresponding time zone. This value is also used to display the time zone next to the time | | |
|
7
|
+
| **isYearDisplayed** | `Bool` | Determines whether or not the year is displayed with the month and day | `false` | `true` `false` |
|
8
|
+
| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
|
9
|
+
| **isMonthStacked** | `Bool` | Determines whether or not the value for month is stacked over the date | `false` | `true` `false` |
|
10
|
+
| **isMonthBold** | `Bool` | Determines whether or not the month is in bold | `false` | `true` `false` |
|
11
|
+
| **isYearBold** | `Bool` | Determines whether or not the year is in bold | `false` | `true` `false` |
|
12
|
+
| **dateAlignment** | `HorizontalAlignment` | Sets alignment of date | `.trailing` | `leading` `center` `trailing` |
|
13
|
+
| **timeAlignment** | `HorizontalAlignment` | Sets alignment of the time zone | `.leading` | `leading` `center` `trailing` |
|
14
|
+
| **dateVariant** | `Variant` | Allows user to choose the style in which the date is displayed | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate(showYear: false)` `.standard` ` .withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
|
15
|
+
| **timeVariant** | `Variant` | Allows user to choose the style in which the time is displayed | `.time` | `.time` `.iconTimeZone` `.withTimeZoneHeader` |
|
16
|
+
| **dateSize** | `String` | Allows user to choose the size of the date that is being displayed | `.title4` | `title4` `body` `caption` `large` `subcaption` |
|
17
|
+
| **timeStyle** | `PBFont` | Allows user to choose the size of the time that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
|
18
|
+
| **timeZoneStyle** | `PBFont` | Allows user to choose the size of the time zone that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
|
@@ -1,42 +1,37 @@
|
|
1
1
|
<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
cancel_button: object.cancel_button,
|
30
|
-
confirm_button: object.confirm_button,
|
31
|
-
id: object.id
|
32
|
-
}) %>
|
33
|
-
<% end %>
|
2
|
+
<%= pb_content_tag(:dialog) do %>
|
3
|
+
<% if object.status === "" && object.title %>
|
4
|
+
<%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
|
5
|
+
<% end %>
|
6
|
+
<% if object.status === "" && object.text %>
|
7
|
+
<%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
|
8
|
+
<% end %>
|
9
|
+
<% if object.status != "" %>
|
10
|
+
<%= pb_rails("dialog/dialog_body", props: { classname: "dialog_status_text_align" ,padding: "md" }) do %>
|
11
|
+
<%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
|
12
|
+
<%= pb_rails("icon_circle", props: {
|
13
|
+
icon: object.status_alerts[0],
|
14
|
+
variant: object.status_alerts[1],
|
15
|
+
size: "lg"
|
16
|
+
}) %>
|
17
|
+
<%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
|
18
|
+
<%= pb_rails("body", props: { text: object.text, margin_top: "sm" }) %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
<% end %>
|
22
|
+
<% if object.cancel_button && object.confirm_button %>
|
23
|
+
<%= pb_rails("dialog/dialog_footer", props: {
|
24
|
+
cancel_button: object.cancel_button,
|
25
|
+
confirm_button: object.confirm_button,
|
26
|
+
id: object.id
|
27
|
+
}) %>
|
28
|
+
<% end %>
|
34
29
|
|
35
|
-
|
30
|
+
<%= content %>
|
36
31
|
<% end %>
|
37
32
|
</div>
|
38
33
|
|
39
34
|
<%= javascript_tag do %>
|
40
|
-
|
41
|
-
|
35
|
+
window.addEventListener("DOMContentLoaded", () => dialogHelper())
|
36
|
+
window.addEventListener("turbo:frame-load", () => dialogHelper())
|
42
37
|
<% end %>
|
@@ -1,8 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
aria: object.aria,
|
5
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
6
2
|
<% if object.confirm_button && object.cancel_button %>
|
7
3
|
<div class="dialog-pseudo-footer"></div>
|
8
4
|
<%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%= content_tag(:div,
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.sticky_header,
|
5
|
-
aria: object.aria,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= content_tag(:div, class: object.sticky_header) do %>
|
7
2
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
8
3
|
<%= content.presence || object.title %>
|
9
4
|
|
@@ -1,90 +1,110 @@
|
|
1
|
-
import React, { createContext,
|
1
|
+
import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
|
2
|
+
import { InitialStateType, ActionType, DraggableProviderType } from "./types";
|
3
|
+
|
4
|
+
const initialState: InitialStateType = {
|
5
|
+
items: [],
|
6
|
+
dragData: { id: "", initialGroup: "" },
|
7
|
+
isDragging: "",
|
8
|
+
activeContainer: ""
|
9
|
+
};
|
10
|
+
|
11
|
+
const reducer = (state: InitialStateType, action: ActionType) => {
|
12
|
+
switch (action.type) {
|
13
|
+
case 'SET_ITEMS':
|
14
|
+
return { ...state, items: action.payload };
|
15
|
+
case 'SET_DRAG_DATA':
|
16
|
+
return { ...state, dragData: action.payload };
|
17
|
+
case 'SET_IS_DRAGGING':
|
18
|
+
return { ...state, isDragging: action.payload };
|
19
|
+
case 'SET_ACTIVE_CONTAINER':
|
20
|
+
return { ...state, activeContainer: action.payload };
|
21
|
+
case 'CHANGE_CATEGORY':
|
22
|
+
return {
|
23
|
+
...state,
|
24
|
+
items: state.items.map(item =>
|
25
|
+
item.id === action.payload.itemId
|
26
|
+
? { ...item, container: action.payload.container }
|
27
|
+
: item
|
28
|
+
)
|
29
|
+
};
|
30
|
+
case 'REORDER_ITEMS': {
|
31
|
+
const { dragId, targetId } = action.payload;
|
32
|
+
const newItems = [...state.items];
|
33
|
+
const draggedItem = newItems.find(item => item.id === dragId);
|
34
|
+
const draggedIndex = newItems.indexOf(draggedItem);
|
35
|
+
const targetIndex = newItems.findIndex(item => item.id === targetId);
|
36
|
+
|
37
|
+
newItems.splice(draggedIndex, 1);
|
38
|
+
newItems.splice(targetIndex, 0, draggedItem);
|
2
39
|
|
40
|
+
return { ...state, items: newItems };
|
41
|
+
}
|
42
|
+
default:
|
43
|
+
return state;
|
44
|
+
}
|
45
|
+
};
|
46
|
+
|
47
|
+
// Context and Provider
|
3
48
|
const DragContext = createContext<any>({});
|
4
49
|
|
5
50
|
export const DraggableContext = () => {
|
6
51
|
return useContext(DragContext);
|
7
52
|
};
|
8
53
|
|
9
|
-
export const DraggableProvider = ({ children, initialItems, onReorder }:
|
10
|
-
const [
|
11
|
-
const [dragData, setDragData] = useState<{ [key: string]: any }>({});
|
12
|
-
const [isDragging, setIsDragging] = useState("");
|
13
|
-
const [activeContainer, setActiveContainer] = useState("");
|
54
|
+
export const DraggableProvider = ({ children, initialItems, onReorder }: DraggableProviderType) => {
|
55
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
14
56
|
|
15
57
|
useEffect(() => {
|
16
|
-
|
58
|
+
dispatch({ type: 'SET_ITEMS', payload: initialItems });
|
17
59
|
}, [initialItems]);
|
18
60
|
|
19
61
|
useEffect(() => {
|
20
|
-
onReorder(items);
|
21
|
-
}, [items]);
|
62
|
+
onReorder(state.items);
|
63
|
+
}, [state.items]);
|
22
64
|
|
23
65
|
const handleDragStart = (id: string, container: string) => {
|
24
|
-
|
25
|
-
|
66
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
|
67
|
+
dispatch({ type: 'SET_IS_DRAGGING', payload: id });
|
26
68
|
};
|
27
69
|
|
28
70
|
const handleDragEnter = (id: string, container: string) => {
|
29
|
-
if (dragData
|
30
|
-
|
31
|
-
|
32
|
-
const draggedIndex = newItems.indexOf(draggedItem);
|
33
|
-
const targetIndex = newItems.findIndex((item) => item.id === id);
|
34
|
-
|
35
|
-
newItems.splice(draggedIndex, 1);
|
36
|
-
newItems.splice(targetIndex, 0, draggedItem);
|
37
|
-
|
38
|
-
setItems(newItems);
|
39
|
-
setDragData({ id: dragData.id, initialGroup: container });
|
71
|
+
if (state.dragData.id !== id) {
|
72
|
+
dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
|
73
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
|
40
74
|
}
|
41
75
|
};
|
42
76
|
|
43
77
|
const handleDragEnd = () => {
|
44
|
-
|
45
|
-
|
78
|
+
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
79
|
+
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
46
80
|
};
|
47
81
|
|
48
82
|
const changeCategory = (itemId: string, container: string) => {
|
49
|
-
|
50
|
-
if (item.id === itemId) {
|
51
|
-
return { ...item, container: container };
|
52
|
-
}
|
53
|
-
return item;
|
54
|
-
});
|
55
|
-
|
56
|
-
setItems(updatedItems);
|
83
|
+
dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
|
57
84
|
};
|
58
85
|
|
59
86
|
const handleDrop = (container: string) => {
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
changeCategory(selected, container);
|
87
|
+
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
88
|
+
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
89
|
+
changeCategory(state.dragData.id, container);
|
64
90
|
};
|
65
91
|
|
66
92
|
const handleDragOver = (e: Event, container: string) => {
|
67
93
|
e.preventDefault();
|
68
|
-
|
94
|
+
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
|
69
95
|
};
|
70
96
|
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
dragData,
|
77
|
-
setDragData,
|
78
|
-
isDragging,
|
79
|
-
setIsDragging,
|
80
|
-
activeContainer,
|
81
|
-
setActiveContainer,
|
97
|
+
const contextValue = useMemo(() => ({
|
98
|
+
items: state.items,
|
99
|
+
dragData: state.dragData,
|
100
|
+
isDragging: state.isDragging,
|
101
|
+
activeContainer: state.activeContainer,
|
82
102
|
handleDragStart,
|
83
103
|
handleDragEnter,
|
84
104
|
handleDragEnd,
|
85
105
|
handleDrop,
|
86
|
-
handleDragOver
|
87
|
-
};
|
106
|
+
handleDragOver
|
107
|
+
}), [state]);
|
88
108
|
|
89
109
|
return (
|
90
110
|
<DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
export interface ItemType {
|
2
|
+
id: string;
|
3
|
+
container: string;
|
4
|
+
[key: string]: any;
|
5
|
+
}
|
6
|
+
|
7
|
+
export interface InitialStateType {
|
8
|
+
items: ItemType[];
|
9
|
+
dragData: { id: string; initialGroup: string };
|
10
|
+
isDragging: string;
|
11
|
+
activeContainer: string;
|
12
|
+
}
|
13
|
+
|
14
|
+
export type ActionType =
|
15
|
+
| { type: 'SET_ITEMS'; payload: ItemType[] }
|
16
|
+
| { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
|
17
|
+
| { type: 'SET_IS_DRAGGING'; payload: string }
|
18
|
+
| { type: 'SET_ACTIVE_CONTAINER'; payload: string }
|
19
|
+
| { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
|
20
|
+
| { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
|
21
|
+
|
22
|
+
export interface DraggableProviderType {
|
23
|
+
children: React.ReactNode;
|
24
|
+
initialItems: ItemType[];
|
25
|
+
onReorder: (items: ItemType[]) => void;
|
26
|
+
}
|