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.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +59 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md +6 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +4 -4
  6. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  7. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  8. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  9. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
  10. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  11. data/app/pb_kits/playbook/pb_card/_card.tsx +4 -3
  12. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  13. data/app/pb_kits/playbook/pb_collapsible/index.js +6 -1
  14. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md +33 -0
  15. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md +18 -0
  16. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +6 -1
  17. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  18. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +30 -35
  19. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
  20. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
  21. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
  22. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +2 -4
  23. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +70 -50
  24. data/app/pb_kits/playbook/pb_draggable/context/types.ts +26 -0
  25. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +2 -1
  26. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
  27. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +5 -1
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +11 -4
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +4 -2
  30. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +2 -2
  31. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +7 -1
  32. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +6 -4
  33. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +7 -0
  34. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +142 -15
  35. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -5
  36. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +18 -0
  37. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +228 -218
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +9 -0
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +34 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
  41. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
  42. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +14 -12
  43. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +7 -0
  44. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +17 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -3
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb +32 -0
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx +48 -0
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +16 -11
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +72 -0
  52. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  53. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  54. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  55. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  56. data/app/pb_kits/playbook/pb_icon/_icon.tsx +37 -6
  57. data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +2 -3
  59. data/app/pb_kits/playbook/pb_icon/icon.rb +21 -1
  60. data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
  61. data/app/pb_kits/playbook/pb_list/_list.tsx +4 -4
  62. data/app/pb_kits/playbook/pb_list/_list_item.tsx +7 -3
  63. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +1 -1
  64. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +1 -0
  65. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +3 -1
  66. data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
  67. data/app/pb_kits/playbook/pb_nav/item.rb +1 -0
  68. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +24 -0
  69. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +4 -4
  70. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +11 -0
  71. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  72. data/app/pb_kits/playbook/pb_overlay/overlay.html.erb +27 -0
  73. data/app/pb_kits/playbook/pb_overlay/overlay.rb +110 -0
  74. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +7 -3
  75. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +3 -3
  76. data/app/pb_kits/playbook/pb_table/table_header.html.erb +16 -2
  77. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -0
  78. data/dist/menu.yml +2 -2
  79. data/dist/playbook-rails.js +7 -7
  80. data/lib/playbook/version.rb +1 -1
  81. metadata +18 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9bec2adcbbd24c7d8dedcfd434368fd206154d30a3f22011db8fd8c17bd2002b
4
- data.tar.gz: a5afc1f25e3609873b5bb0ba02d8c796ae9060cdd6aff33fcf103ec9fe88b7de
3
+ metadata.gz: d2f47afcafc63550e85b7c500375e2c173a285ff40b3d83bb61a99a345c20b18
4
+ data.tar.gz: 4742a835d7345a6d7440baaa8924f1d550fd483aed74c5926fff117022b216cd
5
5
  SHA512:
6
- metadata.gz: d754acdd73fd036d57ec1fcf6cd21891a5a872268448021ba01d407cdb7c60f990b1a1cfd3680cbd6801e367eb33d919a6725f2747b8f0ba10cbf6657803720f
7
- data.tar.gz: 9bc1f39ec7aa9bcdf8fb27aa9ac0bb50919a4e94b1db0cae50233701639a78b9963c60b2e3c8c39363e2b9548b3909e167c7bcbd486163283f7d9fcf82b1fe18
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: enable Sorting
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: 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
- <%= content_tag(object.tag,
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
- <%= content_tag(object.tag,
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,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
3
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
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 %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:nav,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:nav) do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= content.presence || object.text %>
8
3
  <% 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 id={id}
130
- key={id}
130
+ <Draggable.Item dragId={dragId}
131
+ key={dragId}
131
132
  >
132
133
  <Tag
133
134
  {...ariaProps}
@@ -1,10 +1,4 @@
1
- <%= content_tag(object.tag,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- dark: object.dark,
7
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
8
2
  <%= content.presence %>
9
3
  <% end %>
10
4
 
@@ -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
- this.displayDownArrow()
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`|
@@ -2,6 +2,11 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_time_stacked_default: Default
5
-
5
+
6
6
  react:
7
7
  - date_time_stacked_default: Default
8
+
9
+ swift:
10
+ - date_time_stacked_default_swift: Default
11
+ - date_time_stacked_props_swift: ""
12
+
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
3
  <% end %>
@@ -1,42 +1,37 @@
1
1
  <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
2
- <%= content_tag(:dialog,
3
- aria: object.aria,
4
- data: object.data,
5
- id: object.id,
6
- class: object.classname,
7
- **combined_html_options) do %>
8
- <% if object.status === "" && object.title %>
9
- <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
10
- <% end %>
11
- <% if object.status === "" && object.text %>
12
- <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
13
- <% end %>
14
- <% if object.status != "" %>
15
- <%= pb_rails("dialog/dialog_body", props: { classname: "dialog_status_text_align" ,padding: "md" }) do %>
16
- <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
17
- <%= pb_rails("icon_circle", props: {
18
- icon: object.status_alerts[0],
19
- variant: object.status_alerts[1],
20
- size: "lg"
21
- }) %>
22
- <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
23
- <%= pb_rails("body", props: { text: object.text, margin_top: "sm" }) %>
24
- <% end %>
25
- <% end %>
26
- <% end %>
27
- <% if object.cancel_button && object.confirm_button %>
28
- <%= pb_rails("dialog/dialog_footer", props: {
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
- <%= content %>
30
+ <%= content %>
36
31
  <% end %>
37
32
  </div>
38
33
 
39
34
  <%= javascript_tag do %>
40
- window.addEventListener("DOMContentLoaded", () => dialogHelper())
41
- window.addEventListener("turbo:frame-load", () => dialogHelper())
35
+ window.addEventListener("DOMContentLoaded", () => dialogHelper())
36
+ window.addEventListener("turbo:frame-load", () => dialogHelper())
42
37
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
- <%= content.presence || object.text %>
1
+ <%= pb_content_tag do %>
2
+ <%= content.presence || object.text %>
8
3
  <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
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,11 +1,9 @@
1
1
  @import "../tokens/colors";
2
+ @import "../tokens/opacity";
2
3
 
3
4
  .pb_draggable_container {
4
5
  .is_dragging {
5
- opacity: 40%;
6
- }
7
- .active {
8
- opacity: 60%;
6
+ opacity: $opacity_4;
9
7
  }
10
8
  .pb_draggable_item:hover {
11
9
  cursor: grab;
@@ -1,90 +1,110 @@
1
- import React, { createContext, useState, useContext, useEffect } from "react";
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 }: any) => {
10
- const [items, setItems] = useState([]);
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
- setItems(initialItems);
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
- setDragData({ id: id, initialGroup: container });
25
- setIsDragging(id);
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?.id !== id) {
30
- const newItems = [...items];
31
- const draggedItem = newItems.find((item) => item.id === dragData.id);
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
- setIsDragging("");
45
- setActiveContainer("");
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
- const updatedItems = items.map((item) => {
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
- setIsDragging("");
61
- setActiveContainer("");
62
- const selected = dragData.id;
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
- setActiveContainer(container);
94
+ dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
69
95
  };
70
96
 
71
-
72
-
73
- const contextValue = {
74
- items,
75
- setItems,
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
+ }