playbook_ui 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +12 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
- data/app/pb_kits/playbook/pb_draggable/index.js +4 -2
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +5 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +5 -16
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +4 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +12 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +3 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +57 -0
- data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +26 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +1 -2
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +4 -4
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +1 -7
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +1 -5
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
- data/dist/chunks/{_typeahead-D8CsVBZO.js → _typeahead-Bc1SPP0-.js} +2 -2
- data/dist/chunks/_weekday_stacked-DDrCiip0.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +20 -15
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +0 -30
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +0 -8
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +0 -13
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +0 -23
- data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +0 -24
- data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +0 -123
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e7e02f6056cf5d449821788a9db3fff002aa00f98232248d71a34f52fd6bbfb6
|
4
|
+
data.tar.gz: 3cefb2724e67a2cd949bce8d70f13c967948646d2f12caf2bd2c505797e5d6c9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 426e7eab37e1aa6d083a0735645756eecef1e2a668aa65743d581c838fa49c699ba12003806139a8115eda0c592ab7fc2be69b96c9cb1139eff834c057bfb50f
|
7
|
+
data.tar.gz: d0ad4e75dfef2a9e2dff087c84a6fc980ac3ec0d092488ef58bf6cc9605986784a2f6c6236ca7301acd07e3c318fb676b83161662e52fb8dda43246f32bb8c08
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<% if object.draggable_item %>
|
2
|
-
<%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
|
2
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id, classname: drop_zone_line_color ? line_color_class : nil}) do %>
|
3
3
|
<%= pb_content_tag(object.tag) do %>
|
4
4
|
<% if object.draggable_item %>
|
5
5
|
<%= pb_rails("flex", props: { align: "center" }) do %>
|
@@ -24,6 +24,9 @@ module Playbook
|
|
24
24
|
default: true
|
25
25
|
prop :items, type: Playbook::Props::Array,
|
26
26
|
default: []
|
27
|
+
prop :drop_zone_line_color, type: Playbook::Props::Enum,
|
28
|
+
values: ["primary", "purple", nil],
|
29
|
+
default: nil
|
27
30
|
|
28
31
|
def classname
|
29
32
|
generate_classname("pb_card_kit",
|
@@ -60,6 +63,15 @@ module Playbook
|
|
60
63
|
def border_radius_class
|
61
64
|
border_radius != "md" ? "border_radius_#{border_radius}" : nil
|
62
65
|
end
|
66
|
+
|
67
|
+
def line_color_class
|
68
|
+
case drop_zone_line_color
|
69
|
+
when "primary"
|
70
|
+
"drop_zone_color_primary"
|
71
|
+
when "purple"
|
72
|
+
"drop_zone_color_purple"
|
73
|
+
end
|
74
|
+
end
|
63
75
|
end
|
64
76
|
end
|
65
77
|
end
|
@@ -10,7 +10,13 @@
|
|
10
10
|
{ id: "63", text: "Task 3" }
|
11
11
|
] %>
|
12
12
|
|
13
|
-
|
13
|
+
<% data_line = [
|
14
|
+
{ id: "71", text: "Task 1" },
|
15
|
+
{ id: "72", text: "Task 2" },
|
16
|
+
{ id: "73", text: "Task 3" }
|
17
|
+
] %>
|
18
|
+
|
19
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
14
20
|
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
15
21
|
<%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
|
16
22
|
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
|
@@ -40,4 +46,19 @@
|
|
40
46
|
<% end %>
|
41
47
|
<% end %>
|
42
48
|
<% end %>
|
49
|
+
|
50
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
51
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
|
52
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
|
53
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
|
54
|
+
<% data_line.each do |item| %>
|
55
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl", drop_zone_line_color: "primary" }) do %>
|
56
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
57
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
58
|
+
<% end %>
|
59
|
+
<% end %>
|
60
|
+
<% end %>
|
61
|
+
<% end %>
|
62
|
+
<% end %>
|
63
|
+
<% end %>
|
43
64
|
<% end %>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "211",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "212",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "213",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "2111",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "2112",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "2113",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
|
2
|
+
|
3
|
+
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
|
4
|
+
|
5
|
+
Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
|
2
|
+
|
3
|
+
By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
|
4
|
+
|
5
|
+
When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
4
|
+
import Image from '../../pb_image/_image'
|
5
|
+
import Draggable from '../../pb_draggable/_draggable'
|
6
|
+
import { DraggableProvider } from '../../pb_draggable/context'
|
7
|
+
|
8
|
+
const data = [
|
9
|
+
{
|
10
|
+
id: "100",
|
11
|
+
url: "https://unsplash.it/500/400/?image=638",
|
12
|
+
},
|
13
|
+
{
|
14
|
+
id: "200",
|
15
|
+
url: "https://unsplash.it/500/400/?image=639",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
id: "300",
|
19
|
+
url: "https://unsplash.it/500/400/?image=640",
|
20
|
+
},
|
21
|
+
];
|
22
|
+
|
23
|
+
const DraggableDefault = (props) => {
|
24
|
+
const [initialState, setInitialState] = useState(data);
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<DraggableProvider initialItems={data}
|
29
|
+
onReorder={(items) => setInitialState(items)}
|
30
|
+
>
|
31
|
+
<Draggable.Container {...props}>
|
32
|
+
<Flex>
|
33
|
+
{initialState.map(({ id, url }) => (
|
34
|
+
<Draggable.Item dragId={id}
|
35
|
+
key={id}
|
36
|
+
onDrag={() => console.log(`${id} drag!`)}
|
37
|
+
onDragEnd={() => console.log(`${id} drag end!`)}
|
38
|
+
onDragEnter={() => console.log(`${id} drag enter!`)}
|
39
|
+
onDragLeave={() => console.log(`${id} drag leave!`)}
|
40
|
+
onDragOver={() => console.log(`${id} drag over!`)}
|
41
|
+
onDragStart={() => console.log(`${id} drag start!`)}
|
42
|
+
onDrop={() => console.log(`${id} drop!`)}
|
43
|
+
>
|
44
|
+
<Image alt={id}
|
45
|
+
margin="xs"
|
46
|
+
size="md"
|
47
|
+
url={url}
|
48
|
+
/>
|
49
|
+
</Draggable.Item>
|
50
|
+
))}
|
51
|
+
</Flex>
|
52
|
+
</Draggable.Container>
|
53
|
+
</DraggableProvider>
|
54
|
+
</>
|
55
|
+
|
56
|
+
);
|
57
|
+
};
|
58
|
+
|
59
|
+
export default DraggableDefault;
|
@@ -0,0 +1 @@
|
|
1
|
+
You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- draggable_drop_zones: Draggable Drop Zones
|
10
10
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
11
11
|
- draggable_drop_zones_line: Draggable Drop Zones Line
|
12
|
+
- draggable_event_listeners: Draggable Event Listeners
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- draggable_default: Default
|
@@ -19,4 +20,5 @@ examples:
|
|
19
20
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
20
21
|
- draggable_drop_zones: Draggable Drop Zones
|
21
22
|
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
23
|
+
- draggable_drop_zones_line: Draggable Drop Zones Line
|
22
24
|
- draggable_event_listeners: Draggable Event Listeners
|
@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
|
|
6
6
|
export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
7
7
|
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
8
8
|
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
9
|
-
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
9
|
+
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
10
|
+
export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
|
@@ -7,13 +7,23 @@ module Playbook
|
|
7
7
|
default: "div"
|
8
8
|
prop :container, type: Playbook::Props::String,
|
9
9
|
default: ""
|
10
|
+
prop :drop_zone_direction, type: Playbook::Props::Enum,
|
11
|
+
values: ["horizontal", "vertical", nil],
|
12
|
+
default: nil
|
10
13
|
|
11
14
|
def data
|
12
15
|
Hash(prop(:data)).merge(pb_draggable_container: true)
|
13
16
|
end
|
14
17
|
|
15
18
|
def classname
|
16
|
-
|
19
|
+
direction_class = case drop_zone_direction
|
20
|
+
when "horizontal"
|
21
|
+
"line_horizontal"
|
22
|
+
when "vertical"
|
23
|
+
"line_vertical"
|
24
|
+
end
|
25
|
+
|
26
|
+
generate_classname("pb_draggable_container", direction_class, separator: " ")
|
17
27
|
end
|
18
28
|
end
|
19
29
|
end
|
@@ -9,13 +9,23 @@ module Playbook
|
|
9
9
|
default: "div"
|
10
10
|
prop :container, type: Playbook::Props::String,
|
11
11
|
default: ""
|
12
|
+
prop :drop_zone_line_color, type: Playbook::Props::Enum,
|
13
|
+
values: ["primary", "purple", nil],
|
14
|
+
default: nil
|
12
15
|
|
13
16
|
def data
|
14
17
|
Hash(prop(:data)).merge(pb_draggable_item: true)
|
15
18
|
end
|
16
19
|
|
17
20
|
def classname
|
18
|
-
|
21
|
+
line_color_class = case drop_zone_line_color
|
22
|
+
when "primary"
|
23
|
+
"drop_zone_color_primary"
|
24
|
+
when "purple"
|
25
|
+
"drop_zone_color_purple"
|
26
|
+
end
|
27
|
+
|
28
|
+
generate_classname("pb_draggable_item", line_color_class, separator: " ")
|
19
29
|
end
|
20
30
|
end
|
21
31
|
end
|
@@ -2,7 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
|
|
2
2
|
|
3
3
|
const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
|
4
4
|
const DRAGGABLE_CONTAINER = ".pb_draggable_container";
|
5
|
-
const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
|
5
|
+
const NEEDS_CLONE = ["shadow", "outline", "line"]; // clone only for these types
|
6
6
|
|
7
7
|
export default class PbDraggable extends PbEnhancedElement {
|
8
8
|
static get selector() { return DRAGGABLE_SELECTOR; }
|
@@ -116,7 +116,9 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
116
116
|
/* ---------------------------------------------------------------- */
|
117
117
|
}
|
118
118
|
|
119
|
-
|
119
|
+
if (this.dragZoneType !== "line") {
|
120
|
+
requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
|
121
|
+
}
|
120
122
|
}
|
121
123
|
|
122
124
|
/* ---------------- DRAG ENTER ---------------- */
|
@@ -8,6 +8,7 @@ import {
|
|
8
8
|
} from "../../utilities/props";
|
9
9
|
import { globalProps } from "../../utilities/globalProps";
|
10
10
|
import { DraggableContext } from "../context";
|
11
|
+
import { noop } from '../../utilities/object'
|
11
12
|
|
12
13
|
type DraggableItemProps = {
|
13
14
|
aria?: { [key: string]: string };
|
@@ -17,6 +18,13 @@ type DraggableItemProps = {
|
|
17
18
|
data?: { [key: string]: string };
|
18
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
20
|
id?: string;
|
21
|
+
onDrag?: () => void,
|
22
|
+
onDragEnd?: () => void,
|
23
|
+
onDragEnter?: () => void,
|
24
|
+
onDragLeave?: () => void,
|
25
|
+
onDragOver?: () => void,
|
26
|
+
onDragStart?: () => void,
|
27
|
+
onDrop?: () => void,
|
20
28
|
dragId?: string;
|
21
29
|
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
|
22
30
|
};
|
@@ -31,7 +39,14 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
31
39
|
htmlOptions = {},
|
32
40
|
id,
|
33
41
|
dragId,
|
34
|
-
tag="div"
|
42
|
+
tag="div",
|
43
|
+
onDrag = noop,
|
44
|
+
onDragEnd = noop,
|
45
|
+
onDragEnter = noop,
|
46
|
+
onDragLeave = noop,
|
47
|
+
onDragOver = noop,
|
48
|
+
onDragStart = noop,
|
49
|
+
onDrop = noop,
|
35
50
|
} = props;
|
36
51
|
|
37
52
|
const {
|
@@ -61,7 +76,7 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
61
76
|
);
|
62
77
|
|
63
78
|
// Enhanced drag start handler that preserves dimensions
|
64
|
-
const
|
79
|
+
const handleDragStartWithCustom = (e: React.DragEvent) => {
|
65
80
|
if (dropZone !== 'ghost' && itemRef.current) {
|
66
81
|
// Create a clone for the drag image
|
67
82
|
const clone = itemRef.current.cloneNode(true) as HTMLElement;
|
@@ -96,6 +111,9 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
96
111
|
|
97
112
|
// Call the original handler
|
98
113
|
handleDragStart(dragId, container);
|
114
|
+
|
115
|
+
// Custom event handler
|
116
|
+
onDragStart()
|
99
117
|
};
|
100
118
|
|
101
119
|
return (
|
@@ -107,9 +125,19 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
107
125
|
draggable
|
108
126
|
id={id}
|
109
127
|
key={dragId}
|
110
|
-
|
111
|
-
|
112
|
-
|
128
|
+
onDrag={onDrag}
|
129
|
+
onDragEnd={() => {
|
130
|
+
handleDragEnd()
|
131
|
+
onDragEnd()
|
132
|
+
}}
|
133
|
+
onDragEnter={() => {
|
134
|
+
handleDragEnter(dragId, container)
|
135
|
+
onDragEnter()
|
136
|
+
}}
|
137
|
+
onDragLeave={onDragLeave}
|
138
|
+
onDragOver={onDragOver}
|
139
|
+
onDragStart={handleDragStartWithCustom}
|
140
|
+
onDrop={onDrop}
|
113
141
|
ref={itemRef}
|
114
142
|
>
|
115
143
|
{children}
|
@@ -41,6 +41,11 @@
|
|
41
41
|
outline: unset;
|
42
42
|
transition: box-shadow 0.15s ease-in-out;
|
43
43
|
}
|
44
|
+
&:focus-within {
|
45
|
+
box-shadow: 0px 0px 0 1px $primary !important;
|
46
|
+
outline: unset;
|
47
|
+
transition: box-shadow 0.15s ease-in-out;
|
48
|
+
}
|
44
49
|
|
45
50
|
&[class*="_select_only"] {
|
46
51
|
box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
|
@@ -36,7 +36,6 @@ type DropdownProps = {
|
|
36
36
|
onSelect?: (arg: GenericObject) => null;
|
37
37
|
options: GenericObject;
|
38
38
|
separators?: boolean;
|
39
|
-
triggerRef?: any;
|
40
39
|
variant?: "default" | "subtle";
|
41
40
|
};
|
42
41
|
|
@@ -65,7 +64,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
65
64
|
onSelect,
|
66
65
|
options,
|
67
66
|
separators = true,
|
68
|
-
triggerRef,
|
69
67
|
variant = "default",
|
70
68
|
} = props;
|
71
69
|
|
@@ -91,7 +89,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
91
89
|
const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
|
92
90
|
|
93
91
|
const dropdownRef = useRef(null);
|
94
|
-
const inputRef = useRef(null);
|
92
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
95
93
|
const inputWrapperRef = useRef(null);
|
96
94
|
const dropdownContainerRef = useRef(null);
|
97
95
|
|
@@ -99,15 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
99
97
|
separateChildComponents(children);
|
100
98
|
|
101
99
|
useEffect(() => {
|
102
|
-
|
103
|
-
//Only needed for when useDropdown hook used with external trigger
|
104
|
-
if (triggerRef?.current) {
|
105
|
-
const parentElement = triggerRef.current.parentNode;
|
106
|
-
if (parentElement) {
|
107
|
-
parentElement.style.position = 'relative';
|
108
|
-
}
|
109
|
-
}
|
110
|
-
// Handle clicks outside the dropdown
|
100
|
+
// Handle clicks outside the dropdown
|
111
101
|
const handleClick = handleClickOutside({
|
112
102
|
inputWrapperRef,
|
113
103
|
dropdownContainerRef,
|
@@ -167,7 +157,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
167
157
|
};
|
168
158
|
|
169
159
|
const handleWrapperClick = () => {
|
170
|
-
autocomplete && inputRef
|
160
|
+
autocomplete && inputRef?.current?.focus();
|
171
161
|
toggleDropdown();
|
172
162
|
};
|
173
163
|
|
@@ -202,7 +192,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
202
192
|
{...htmlProps}
|
203
193
|
className={classes}
|
204
194
|
id={id}
|
205
|
-
style={
|
195
|
+
style={{position: "relative"}}
|
206
196
|
>
|
207
197
|
<DropdownContext.Provider
|
208
198
|
value={{
|
@@ -225,8 +215,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
225
215
|
setIsDropDownClosed,
|
226
216
|
setIsInputFocused,
|
227
217
|
setSelected,
|
228
|
-
toggleDropdown
|
229
|
-
triggerRef
|
218
|
+
toggleDropdown
|
230
219
|
}}
|
231
220
|
>
|
232
221
|
{label &&
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "United Kingdom",
|
12
|
+
value: "United Kingdom",
|
13
|
+
areaCode: "+44",
|
14
|
+
icon: "🇬🇧",
|
15
|
+
id: "gb"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pk"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
|
26
|
+
%>
|
27
|
+
|
28
|
+
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
@@ -1,86 +1,39 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
4
|
-
import Badge from '../../pb_badge/_badge'
|
5
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
6
|
-
import User from '../../pb_user/_user'
|
7
4
|
|
8
5
|
const DropdownWithAutocomplete = (props) => {
|
9
6
|
|
10
7
|
const options = [
|
11
8
|
{
|
12
|
-
label: "
|
13
|
-
value: "
|
14
|
-
|
15
|
-
|
16
|
-
id: "
|
17
|
-
status: "Offline"
|
9
|
+
label: "United States",
|
10
|
+
value: "United States",
|
11
|
+
areaCode: "+1",
|
12
|
+
icon: "🇺🇸",
|
13
|
+
id: "us"
|
18
14
|
},
|
19
15
|
{
|
20
|
-
label: "
|
21
|
-
value: "
|
22
|
-
|
23
|
-
|
24
|
-
id: "
|
25
|
-
status: "Away"
|
16
|
+
label: "United Kingdom",
|
17
|
+
value: "United Kingdom",
|
18
|
+
areaCode: "+44",
|
19
|
+
icon: "🇬🇧",
|
20
|
+
id: "gb"
|
26
21
|
},
|
27
22
|
{
|
28
|
-
label: "
|
29
|
-
value: "
|
30
|
-
|
31
|
-
|
32
|
-
id: "
|
33
|
-
status: "Online"
|
34
|
-
},
|
35
|
-
{
|
36
|
-
label: "Courtney Long",
|
37
|
-
value: "Courtney Long",
|
38
|
-
territory: "PHL",
|
39
|
-
title: "Lead UX Designer",
|
40
|
-
id: "courtney-long",
|
41
|
-
status: "Online"
|
23
|
+
label: "Pakistan",
|
24
|
+
value: "Pakistan",
|
25
|
+
areaCode: "+92",
|
26
|
+
icon: "🇵🇰",
|
27
|
+
id: "pk"
|
42
28
|
}
|
43
|
-
]
|
44
|
-
|
29
|
+
]
|
45
30
|
|
46
31
|
return (
|
47
32
|
<div>
|
48
33
|
<Dropdown autocomplete
|
49
34
|
options={options}
|
50
35
|
{...props}
|
51
|
-
|
52
|
-
{options.map((option) => (
|
53
|
-
<Dropdown.Option key={option.id}
|
54
|
-
option={option}
|
55
|
-
>
|
56
|
-
<>
|
57
|
-
<FlexItem>
|
58
|
-
<User
|
59
|
-
align="left"
|
60
|
-
avatar
|
61
|
-
name={option.label}
|
62
|
-
orientation="horizontal"
|
63
|
-
territory={option.territory}
|
64
|
-
title={option.title}
|
65
|
-
/>
|
66
|
-
</FlexItem>
|
67
|
-
<FlexItem>
|
68
|
-
<Badge
|
69
|
-
rounded
|
70
|
-
text={option.status}
|
71
|
-
variant={`${
|
72
|
-
option.status === "Offline"
|
73
|
-
? "neutral"
|
74
|
-
: option.status === "Online"
|
75
|
-
? "success"
|
76
|
-
: "warning"
|
77
|
-
}`}
|
78
|
-
/>
|
79
|
-
</FlexItem>
|
80
|
-
</>
|
81
|
-
</Dropdown.Option>
|
82
|
-
))}
|
83
|
-
</Dropdown>
|
36
|
+
/>
|
84
37
|
</div>
|
85
38
|
)
|
86
39
|
}
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "Jasper Furniss",
|
5
|
+
value: "Jasper Furniss",
|
6
|
+
territory: "PHL",
|
7
|
+
title: "Lead UX Engineer",
|
8
|
+
id: "jasper-furniss",
|
9
|
+
status: "Offline"
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: "Ramon Ruiz",
|
13
|
+
value: "Ramon Ruiz",
|
14
|
+
territory: "PHL",
|
15
|
+
title: "Senior UX Designer",
|
16
|
+
id: "ramon-ruiz",
|
17
|
+
status: "Away"
|
18
|
+
},
|
19
|
+
{
|
20
|
+
label: "Carlos Lima",
|
21
|
+
value: "Carlos Lima",
|
22
|
+
territory: "PHL",
|
23
|
+
title: "Nitro Developer",
|
24
|
+
id: "carlos-lima",
|
25
|
+
status: "Online"
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: "Courtney Long",
|
29
|
+
value: "Courtney Long",
|
30
|
+
territory: "PHL",
|
31
|
+
title: "Lead UX Designer",
|
32
|
+
id: "courtney-long",
|
33
|
+
status: "Online"
|
34
|
+
}
|
35
|
+
];
|
36
|
+
|
37
|
+
%>
|
38
|
+
|
39
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
40
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
|
41
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
42
|
+
<% options.each do |option| %>
|
43
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
44
|
+
<%= pb_rails("flex", props: {
|
45
|
+
align: "center",
|
46
|
+
justify: "between",
|
47
|
+
}) do %>
|
48
|
+
<%= pb_rails("flex/flex_item") do %>
|
49
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
50
|
+
<% end %>
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
52
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
56
|
+
<% end %>
|
57
|
+
<% end %>
|
58
|
+
<% end %>
|