playbook_ui 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335906
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_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
|