playbook_ui 7.4.0.pre.test3 → 7.4.0.pre.test4
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_typeahead/_typeahead.jsx +4 -3
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +2 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +5 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +11 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1d151ef3cff4768236575ceebde14f0a8c69f98848681e01424a3febc5dc8c7f
|
4
|
+
data.tar.gz: 0fe849875c8dbbb2efdbefdcc2bcd0ec543b716b91fa6772d209c4b9e1844cbd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f774d74a9b4e82ac9849ca8b94ed0f6f1430e43f3433960ad80ec68bf27a40d24d3232a849ec6e8585f9b8346c1309efb790a59f2a3edb10472988d829623ff0
|
7
|
+
data.tar.gz: b48821c3e44673cbb671c770ce5938c273e0b94937993b429711d99e80bbb0a59a8b75171caeee61065021a4e57b13dc7589c3d0ab06c64f3af1c28ac93c3b5e
|
@@ -50,6 +50,7 @@ const Typeahead = (props: Props) => {
|
|
50
50
|
Placeholder,
|
51
51
|
ValueContainer,
|
52
52
|
},
|
53
|
+
id: 'react-select-input',
|
53
54
|
isClearable: true,
|
54
55
|
isSearchable: true,
|
55
56
|
name,
|
@@ -63,15 +64,15 @@ const Typeahead = (props: Props) => {
|
|
63
64
|
const handleOnChange = (data, { action, option, removedValue }) => {
|
64
65
|
if (action === 'select-option') {
|
65
66
|
if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
|
66
|
-
const multiValueClearEvent = new CustomEvent(
|
67
|
+
const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
|
67
68
|
document.dispatchEvent(multiValueClearEvent)
|
68
69
|
}
|
69
70
|
if (action === 'remove-value' || action === 'pop-value') {
|
70
|
-
const multiValueRemoveEvent = new CustomEvent(
|
71
|
+
const multiValueRemoveEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-remove`, { detail: removedValue })
|
71
72
|
document.dispatchEvent(multiValueRemoveEvent)
|
72
73
|
}
|
73
74
|
if (action === 'clear') {
|
74
|
-
const multiValueClearEvent = new CustomEvent(
|
75
|
+
const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
|
75
76
|
document.dispatchEvent(multiValueClearEvent)
|
76
77
|
}
|
77
78
|
}
|
@@ -4,8 +4,9 @@ import React, { useEffect } from 'react'
|
|
4
4
|
import { components } from 'react-select'
|
5
5
|
|
6
6
|
const ClearContainer = (props: any) => {
|
7
|
+
const { selectProps, clearValue } = props
|
7
8
|
useEffect(() => {
|
8
|
-
document.addEventListener(
|
9
|
+
document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
|
9
10
|
}, true)
|
10
11
|
|
11
12
|
return (
|
@@ -7,25 +7,25 @@
|
|
7
7
|
]
|
8
8
|
%>
|
9
9
|
|
10
|
-
<%= pb_rails("typeahead", props: { default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
|
10
|
+
<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
|
11
11
|
|
12
12
|
<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
|
13
13
|
|
14
14
|
<!-- This section is an example of the available JavaScript event hooks -->
|
15
15
|
<%= javascript_tag defer: "defer" do %>
|
16
|
-
document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
|
16
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
|
17
17
|
console.log('Option selected')
|
18
18
|
console.dir(event.detail)
|
19
19
|
})
|
20
|
-
document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
|
20
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
|
21
21
|
console.log('Option removed')
|
22
22
|
console.dir(event.detail)
|
23
23
|
})
|
24
|
-
document.addEventListener("pb-typeahead-kit-result-clear", function() {
|
24
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
|
25
25
|
console.log('All options cleared')
|
26
26
|
})
|
27
27
|
|
28
28
|
document.querySelector('#clear-pills').addEventListener('click', function() {
|
29
|
-
document.dispatchEvent(new CustomEvent('pb-typeahead-kit:clear'))
|
29
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
|
30
30
|
})
|
31
31
|
<% end %>
|
@@ -9,9 +9,16 @@ You can also pass `default_options` which will populate the initial pill selecti
|
|
9
9
|
`default_options: [{ label: 'Windows', value: '#FFA500' }]`
|
10
10
|
|
11
11
|
#### Rails: Subscribing to JS Events
|
12
|
-
|
13
|
-
|
14
|
-
`
|
12
|
+
|
13
|
+
JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
|
14
|
+
This kit utilizes a default `id` prop named `react-select-input`. It is **highly advised** to send your own unique `id` prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
|
15
|
+
|
16
|
+
`pb-typeahead-kit-typeahead-pills-example1-result-option-select` event to perform custom work when an option is clicked.
|
17
|
+
`pb-typeahead-kit-typeahead-pills-example1-result-option-remove` event to perform custom work when a pill is clicked.
|
18
|
+
`pb-typeahead-kit-typeahead-pills-example1-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
|
15
19
|
|
16
20
|
#### Rails: Publishing JS Events
|
17
|
-
|
21
|
+
|
22
|
+
The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
|
23
|
+
|
24
|
+
`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
|
@@ -8,6 +8,7 @@ module Playbook
|
|
8
8
|
prop :async, type: Playbook::Props::Boolean,
|
9
9
|
default: false
|
10
10
|
prop :default_options, type: Playbook::Props::HashArray, default: []
|
11
|
+
prop :id
|
11
12
|
prop :label
|
12
13
|
prop :load_options
|
13
14
|
prop :name
|
@@ -37,6 +38,7 @@ module Playbook
|
|
37
38
|
def typeahead_with_pills_options
|
38
39
|
base_options = {
|
39
40
|
defaultValue: default_options,
|
41
|
+
id: id,
|
40
42
|
isMulti: true,
|
41
43
|
label: label,
|
42
44
|
options: options,
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 7.4.0.pre.
|
4
|
+
version: 7.4.0.pre.test4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-10-
|
12
|
+
date: 2020-10-29 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|