playbook_ui 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335906
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/Components/TableHeaderCell.tsx +10 -3
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts +26 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -6
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +34 -21
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +2 -1
- data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +15 -0
- data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +28 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_copy_button/index.js +47 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +0 -3
- data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +0 -2
- data/app/pb_kits/playbook/pb_draggable/index.js +16 -88
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +7 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +2 -11
- data/app/pb_kits/playbook/pb_link/_link.tsx +18 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_link/link.rb +6 -0
- data/app/pb_kits/playbook/pb_link/link.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +45 -27
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +5 -1
- data/dist/chunks/{_typeahead-W0hatdPs.js → _typeahead-CkemExmL.js} +1 -1
- data/dist/chunks/_weekday_stacked-CtSzPEH0.js +45 -0
- data/dist/chunks/{lib-kMuhBuU7.js → lib-DjpLC8uO.js} +1 -1
- data/dist/chunks/{pb_form_validation-DBJ0wZuS.js → pb_form_validation-S56UaHZl.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- 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 +14 -12
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +0 -193
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +0 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +0 -22
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +0 -1
- data/dist/chunks/_weekday_stacked-C98LOqgG.js +0 -45
@@ -19,7 +19,9 @@ type LinkProps = {
|
|
19
19
|
icon?: string,
|
20
20
|
iconRight?: string,
|
21
21
|
id?: string,
|
22
|
+
tabIndex?: number,
|
22
23
|
tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
24
|
+
target?: string,
|
23
25
|
text?: string,
|
24
26
|
underline?: boolean,
|
25
27
|
} & GlobalProps
|
@@ -37,7 +39,9 @@ const Link = (props: LinkProps): React.ReactElement => {
|
|
37
39
|
icon = '',
|
38
40
|
iconRight = '',
|
39
41
|
id = '',
|
42
|
+
tabIndex,
|
40
43
|
tag = 'a',
|
44
|
+
target = '',
|
41
45
|
text = '',
|
42
46
|
underline = false,
|
43
47
|
} = props
|
@@ -52,6 +56,14 @@ const Link = (props: LinkProps): React.ReactElement => {
|
|
52
56
|
)
|
53
57
|
const Tag = tag as keyof JSX.IntrinsicElements
|
54
58
|
|
59
|
+
const getTargetAttribute = () => {
|
60
|
+
if (target && href) {
|
61
|
+
return target
|
62
|
+
}
|
63
|
+
|
64
|
+
return undefined
|
65
|
+
}
|
66
|
+
|
55
67
|
const renderContent = () => (
|
56
68
|
<>
|
57
69
|
{icon && (
|
@@ -87,6 +99,9 @@ const Link = (props: LinkProps): React.ReactElement => {
|
|
87
99
|
<a
|
88
100
|
{...commonProps}
|
89
101
|
href={href}
|
102
|
+
rel={target !== 'child' ? 'noreferrer' : undefined}
|
103
|
+
tabIndex={tabIndex}
|
104
|
+
target={getTargetAttribute()}
|
90
105
|
>
|
91
106
|
{renderContent()}
|
92
107
|
</a>
|
@@ -96,6 +111,9 @@ const Link = (props: LinkProps): React.ReactElement => {
|
|
96
111
|
<a
|
97
112
|
{...commonProps}
|
98
113
|
href={href}
|
114
|
+
rel={target !== 'child' ? 'noreferrer' : undefined}
|
115
|
+
tabIndex={tabIndex}
|
116
|
+
target={getTargetAttribute()}
|
99
117
|
>
|
100
118
|
<Tag>{renderContent()}</Tag>
|
101
119
|
</a>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<div>
|
2
|
+
<%= pb_rails("link", props: {
|
3
|
+
href: "http://google.com",
|
4
|
+
target: "blank",
|
5
|
+
text: "Open In New Window"
|
6
|
+
}) %>
|
7
|
+
</div>
|
8
|
+
|
9
|
+
<div>
|
10
|
+
<%= pb_rails("link", props: {
|
11
|
+
href: "https://playbook.powerapp.cloud/",
|
12
|
+
target: "child",
|
13
|
+
text: "Open In Child Tab",
|
14
|
+
}) %>
|
15
|
+
</div>
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Link } from 'playbook-ui'
|
3
|
+
|
4
|
+
const LinkTarget = (props) => (
|
5
|
+
<div>
|
6
|
+
<div>
|
7
|
+
<Link
|
8
|
+
aria={{ label: 'Link to Google in new window' }}
|
9
|
+
href="https://google.com"
|
10
|
+
tabIndex={0}
|
11
|
+
target='blank'
|
12
|
+
text="Open In New Window"
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
</div>
|
16
|
+
<div>
|
17
|
+
<Link
|
18
|
+
aria={{ label: 'Link to Playbook in a child tab' }}
|
19
|
+
href="https://playbook.powerapp.cloud/"
|
20
|
+
tabIndex={0}
|
21
|
+
target='child'
|
22
|
+
text="Open In Child Tab"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
)
|
28
|
+
|
29
|
+
export default LinkTarget
|
@@ -1,16 +1,18 @@
|
|
1
1
|
examples:
|
2
|
-
|
2
|
+
|
3
3
|
rails:
|
4
4
|
- link_color: Color
|
5
5
|
- link_underline: Underline
|
6
6
|
- link_icon: Icon
|
7
7
|
- link_disabled: Disabled
|
8
8
|
- link_tag: Tag
|
9
|
-
|
10
|
-
|
9
|
+
- link_target: Target
|
10
|
+
|
11
|
+
|
11
12
|
react:
|
12
13
|
- link_color: Color
|
13
14
|
- link_underline: Underline
|
14
15
|
- link_icon: Icon
|
15
16
|
- link_disabled: Disabled
|
16
17
|
- link_tag: Tag
|
18
|
+
- link_target: Target
|
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
|
|
2
2
|
export { default as LinkUnderline } from './_link_underline.jsx'
|
3
3
|
export { default as LinkIcon } from './_link_icon.jsx'
|
4
4
|
export { default as LinkDisabled } from './_link_disabled.jsx'
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|
6
|
+
export { default as LinkTarget } from './_link_target.jsx'
|
@@ -11,9 +11,11 @@ module Playbook
|
|
11
11
|
prop :href
|
12
12
|
prop :icon
|
13
13
|
prop :icon_right
|
14
|
+
prop :tabindex
|
14
15
|
prop :tag, type: Playbook::Props::Enum,
|
15
16
|
values: %w[a h1 h2 h3 h4 h5 h6 p span div],
|
16
17
|
default: "a"
|
18
|
+
prop :target
|
17
19
|
prop :text
|
18
20
|
prop :underline, type: Playbook::Props::Boolean,
|
19
21
|
default: false
|
@@ -26,6 +28,10 @@ module Playbook
|
|
26
28
|
text
|
27
29
|
end
|
28
30
|
|
31
|
+
def target_attribute
|
32
|
+
target if target && href
|
33
|
+
end
|
34
|
+
|
29
35
|
private
|
30
36
|
|
31
37
|
def color_class
|
@@ -90,3 +90,33 @@ test('adds icon right', () => {
|
|
90
90
|
const icon = kit.querySelector('.pb_icon_kit')
|
91
91
|
expect(icon).toBeInTheDocument();
|
92
92
|
})
|
93
|
+
|
94
|
+
test('should render target prop', () => {
|
95
|
+
render(
|
96
|
+
<Link
|
97
|
+
data={{ testid: 'target-test' }}
|
98
|
+
href="https://playbook.powerapp.cloud/"
|
99
|
+
target="blank"
|
100
|
+
/>
|
101
|
+
)
|
102
|
+
|
103
|
+
const kit = screen.getByTestId('target-test')
|
104
|
+
|
105
|
+
expect(kit).toHaveAttribute('target', 'blank')
|
106
|
+
})
|
107
|
+
|
108
|
+
|
109
|
+
test('should render child target prop', () => {
|
110
|
+
render(
|
111
|
+
<Link
|
112
|
+
data={{ testid: 'target-test' }}
|
113
|
+
href="https://playbook.powerapp.cloud/"
|
114
|
+
tabIndex={0}
|
115
|
+
target="child"
|
116
|
+
/>
|
117
|
+
)
|
118
|
+
|
119
|
+
const kit = screen.getByTestId('target-test')
|
120
|
+
|
121
|
+
expect(kit).toHaveAttribute('target', 'child')
|
122
|
+
})
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
|
3
3
|
step 1
|
4
4
|
<% end %>
|
5
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
|
5
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
6
6
|
step 2
|
7
7
|
<% end %>
|
8
8
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
@@ -11,7 +11,7 @@
|
|
11
11
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
|
12
12
|
step 4
|
13
13
|
<% end %>
|
14
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
|
15
15
|
step 5
|
16
16
|
<% end %>
|
17
17
|
<% end %>
|
@@ -19,7 +19,7 @@
|
|
19
19
|
<br /><br />
|
20
20
|
|
21
21
|
<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
|
22
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
|
22
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
|
23
23
|
<% end %>
|
24
24
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
25
25
|
<% end %>
|
@@ -31,10 +31,10 @@
|
|
31
31
|
|
32
32
|
<br /><br>
|
33
33
|
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
34
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"
|
34
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
|
35
35
|
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
36
36
|
<% end %>
|
37
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
|
38
38
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
39
39
|
<% end %>
|
40
40
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
|
@@ -50,7 +50,7 @@
|
|
50
50
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
|
51
51
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
52
52
|
<% end %>
|
53
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
|
54
54
|
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
55
55
|
<% end %>
|
56
56
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
2
|
-
|
3
2
|
import {
|
4
3
|
createPopperLite as createPopper,
|
5
4
|
flip,
|
@@ -17,27 +16,34 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
17
16
|
|
18
17
|
connect() {
|
19
18
|
this.triggerElements.forEach((trigger) => {
|
20
|
-
|
21
|
-
this.mouseenterTimeout = setTimeout(() => {
|
22
|
-
this.showTooltip(trigger)
|
23
|
-
this.checkCloseTooltip(trigger)
|
24
|
-
}, TOOLTIP_TIMEOUT)
|
19
|
+
const method = this.triggerMethod
|
25
20
|
|
26
|
-
|
21
|
+
if (method === 'click') {
|
22
|
+
trigger.addEventListener('click', () => {
|
23
|
+
this.showTooltip(trigger)
|
24
|
+
})
|
25
|
+
} else {
|
26
|
+
trigger.addEventListener('mouseenter', () => {
|
27
|
+
this.mouseenterTimeout = setTimeout(() => {
|
28
|
+
this.showTooltip(trigger)
|
29
|
+
this.checkCloseTooltip(trigger)
|
30
|
+
}, TOOLTIP_TIMEOUT)
|
31
|
+
|
32
|
+
trigger.addEventListener('mouseleave', () => {
|
33
|
+
clearTimeout(this.mouseenterTimeout)
|
34
|
+
setTimeout(() => {
|
35
|
+
this.hideTooltip()
|
36
|
+
}, 0)
|
37
|
+
}, { once: true })
|
38
|
+
})
|
39
|
+
|
40
|
+
this.tooltip.addEventListener('mouseenter', () => {
|
27
41
|
clearTimeout(this.mouseenterTimeout)
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
})
|
34
|
-
})
|
35
|
-
|
36
|
-
this.tooltip.addEventListener('mouseenter', () => {
|
37
|
-
clearTimeout(this.mouseenterTimeout)
|
38
|
-
})
|
39
|
-
this.tooltip.addEventListener('mouseleave', () => {
|
40
|
-
this.hideTooltip()
|
42
|
+
})
|
43
|
+
this.tooltip.addEventListener('mouseleave', () => {
|
44
|
+
this.hideTooltip()
|
45
|
+
})
|
46
|
+
}
|
41
47
|
})
|
42
48
|
}
|
43
49
|
|
@@ -54,7 +60,7 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
54
60
|
}
|
55
61
|
|
56
62
|
showTooltip(trigger) {
|
57
|
-
if (this.shouldShowTooltip ===
|
63
|
+
if (this.shouldShowTooltip === 'false') return
|
58
64
|
|
59
65
|
this.popper = createPopper(trigger, this.tooltip, {
|
60
66
|
placement: this.position,
|
@@ -78,6 +84,13 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
78
84
|
],
|
79
85
|
})
|
80
86
|
this.tooltip.classList.add('show')
|
87
|
+
|
88
|
+
if (this.triggerMethod === 'click') {
|
89
|
+
clearTimeout(this.autoHideTimeout)
|
90
|
+
this.autoHideTimeout = setTimeout(() => {
|
91
|
+
this.hideTooltip()
|
92
|
+
}, 1000)
|
93
|
+
}
|
81
94
|
}
|
82
95
|
|
83
96
|
hideTooltip() {
|
@@ -94,25 +107,26 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
94
107
|
let triggerEl
|
95
108
|
|
96
109
|
if (this.triggerElementId) {
|
97
|
-
triggerEl = document.querySelector(`#${this.triggerElementId}`)
|
110
|
+
triggerEl = document.querySelector(`#${this.triggerElementId}`)
|
98
111
|
} else {
|
99
112
|
const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
|
100
|
-
triggerEl = selectorIsId
|
101
|
-
document.
|
113
|
+
triggerEl = selectorIsId
|
114
|
+
? document.querySelector(`${this.triggerElementSelector}`)
|
115
|
+
: document.querySelectorAll(`${this.triggerElementSelector}`)
|
102
116
|
}
|
103
117
|
|
104
118
|
if (!triggerEl) {
|
105
|
-
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
|
106
119
|
console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
|
107
120
|
return []
|
108
121
|
}
|
109
122
|
|
110
123
|
if (!triggerEl.length) triggerEl = [triggerEl]
|
111
|
-
return this._triggerElements =
|
124
|
+
return (this._triggerElements = this._triggerElements || triggerEl)
|
112
125
|
}
|
113
126
|
|
114
127
|
get tooltip() {
|
115
|
-
return this._tooltip =
|
128
|
+
return (this._tooltip =
|
129
|
+
this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
|
116
130
|
}
|
117
131
|
|
118
132
|
get position() {
|
@@ -134,4 +148,8 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
134
148
|
get shouldShowTooltip() {
|
135
149
|
return this.element.dataset.pbTooltipShowTooltip
|
136
150
|
}
|
151
|
+
|
152
|
+
get triggerMethod() {
|
153
|
+
return this.element.dataset.pbTooltipTriggerMethod || 'hover'
|
154
|
+
}
|
137
155
|
}
|
@@ -9,6 +9,9 @@ module Playbook
|
|
9
9
|
prop :tooltip_id
|
10
10
|
prop :dark, type: Playbook::Props::Boolean,
|
11
11
|
default: false
|
12
|
+
prop :trigger_method, type: Playbook::Props::Enum,
|
13
|
+
values: %w[hover click],
|
14
|
+
default: "hover"
|
12
15
|
|
13
16
|
def classname
|
14
17
|
generate_classname("pb_tooltip_kit", dark_class)
|
@@ -21,7 +24,8 @@ module Playbook
|
|
21
24
|
pb_tooltip_trigger_element_selector: trigger_element_selector,
|
22
25
|
pb_tooltip_trigger_element_id: trigger_element_id,
|
23
26
|
pb_tooltip_tooltip_id: tooltip_id,
|
24
|
-
pb_tooltip_show_tooltip: true
|
27
|
+
pb_tooltip_show_tooltip: true,
|
28
|
+
pb_tooltip_trigger_method: trigger_method
|
25
29
|
)
|
26
30
|
end
|
27
31
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-DjpLC8uO.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|