playbook_ui 7.0.1 → 7.1.0.pre.alpha1
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/data/menu.yml +4 -3
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
- data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
- data/app/pb_kits/playbook/pb_popover/index.js +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +32 -28
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
- data/lib/generators/kit/USAGE +0 -5
- data/lib/generators/kit/kit_generator.rb +0 -95
- data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
- data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
- data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
- data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
- data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_scss.erb +0 -3
- data/lib/tasks/pb_release.rake +0 -88
- data/lib/tasks/playbook_tasks.rake +0 -26
@@ -3,6 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import Select from 'react-select'
|
5
5
|
import AsyncSelect from 'react-select/async'
|
6
|
+
import { get } from 'lodash'
|
6
7
|
|
7
8
|
import Control from './components/Control'
|
8
9
|
import IndicatorsContainer from './components/IndicatorsContainer'
|
@@ -12,6 +13,8 @@ import Option from './components/Option'
|
|
12
13
|
import Placeholder from './components/Placeholder'
|
13
14
|
import ValueContainer from './components/ValueContainer'
|
14
15
|
|
16
|
+
import { noop } from '../utilities/props'
|
17
|
+
|
15
18
|
/**
|
16
19
|
* @typedef {object} Props
|
17
20
|
* @prop {boolean} async - whether Typeahead should fetch data from
|
@@ -22,6 +25,8 @@ import ValueContainer from './components/ValueContainer'
|
|
22
25
|
type Props = {
|
23
26
|
async?: boolean,
|
24
27
|
label?: string,
|
28
|
+
loadOptions?: noop | string,
|
29
|
+
name?: string,
|
25
30
|
}
|
26
31
|
|
27
32
|
/**
|
@@ -45,14 +50,27 @@ const Typeahead = (props: Props) => {
|
|
45
50
|
},
|
46
51
|
isClearable: true,
|
47
52
|
isSearchable: true,
|
53
|
+
name,
|
48
54
|
...props,
|
49
55
|
}
|
50
56
|
|
57
|
+
if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
|
58
|
+
|
51
59
|
const Tag = props.async ? AsyncSelect : Select
|
52
60
|
|
61
|
+
const handleOnChange = (data, { action }) => {
|
62
|
+
if (action === 'clear') {
|
63
|
+
const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
|
64
|
+
document.dispatchEvent(multiValueClearEvent)
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
53
68
|
return (
|
54
69
|
<div className="pb_typeahead_kit react-select">
|
55
|
-
<Tag
|
70
|
+
<Tag
|
71
|
+
onChange={handleOnChange}
|
72
|
+
{...selectProps}
|
73
|
+
/>
|
56
74
|
</div>
|
57
75
|
)
|
58
76
|
}
|
@@ -19,11 +19,18 @@ const MultiValue = (props: Props) => {
|
|
19
19
|
selectProps,
|
20
20
|
} = props
|
21
21
|
|
22
|
+
const { imageUrl, label } = data
|
23
|
+
|
24
|
+
const handleOnMultiValueRemove = () => {
|
25
|
+
const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
|
26
|
+
document.dispatchEvent(multiValueRemoveEvent)
|
27
|
+
}
|
28
|
+
|
22
29
|
const handleOnClick = () => {
|
23
30
|
if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
|
31
|
+
handleOnMultiValueRemove()
|
24
32
|
removeProps.onClick()
|
25
33
|
}
|
26
|
-
const { imageUrl, label } = data
|
27
34
|
|
28
35
|
return (
|
29
36
|
<components.MultiValueContainer
|
@@ -12,21 +12,29 @@ const Option = (props: any) => {
|
|
12
12
|
imageUrl,
|
13
13
|
label,
|
14
14
|
} = props.data
|
15
|
+
|
16
|
+
const handleOptionClicked = () => {
|
17
|
+
const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
|
18
|
+
document.dispatchEvent(resultSelectedEvent)
|
19
|
+
}
|
20
|
+
|
15
21
|
return (
|
16
22
|
<components.Option {...props}>
|
17
|
-
<
|
18
|
-
<
|
19
|
-
<
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
{
|
28
|
-
|
29
|
-
|
23
|
+
<div onClick={handleOptionClicked}>
|
24
|
+
<Choose>
|
25
|
+
<When condition={imageUrl}>
|
26
|
+
<User
|
27
|
+
align="left"
|
28
|
+
avatarUrl={imageUrl}
|
29
|
+
name={label}
|
30
|
+
orientation="horizontal"
|
31
|
+
/>
|
32
|
+
</When>
|
33
|
+
<When condition={!imageUrl}>
|
34
|
+
{label}
|
35
|
+
</When>
|
36
|
+
</Choose>
|
37
|
+
</div>
|
30
38
|
</components.Option>
|
31
39
|
)
|
32
40
|
}
|
@@ -25,7 +25,7 @@
|
|
25
25
|
|
26
26
|
<%= javascript_tag defer: "defer" do %>
|
27
27
|
document.addEventListener("pb-typeahead-kit-search", function(event) {
|
28
|
-
if (!event.target.dataset.typeaheadExample) return;
|
28
|
+
if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
|
29
29
|
|
30
30
|
fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
|
31
31
|
.then(response => response.json())
|
@@ -18,7 +18,7 @@
|
|
18
18
|
|
19
19
|
<%= javascript_tag defer: "defer" do %>
|
20
20
|
document.addEventListener("pb-typeahead-kit-search", function(event) {
|
21
|
-
if (!event.target.dataset.typeaheadExample2) return;
|
21
|
+
if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
|
22
22
|
|
23
23
|
const fuzzyMatch = function(string, term) {
|
24
24
|
const ratio = 0.5;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'Windows', value: '#FFA500' },
|
4
|
+
{ label: 'Siding', value: '#FF0000' },
|
5
|
+
{ label: 'Doors', value: '#00FF00' },
|
6
|
+
{ label: 'Roofs', value: '#0000FF' },
|
7
|
+
]
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
|
11
|
+
|
12
|
+
<!-- This section is an example of the available JavaScript event hooks -->
|
13
|
+
<%= javascript_tag defer: "defer" do %>
|
14
|
+
document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
|
15
|
+
console.log('Option selected')
|
16
|
+
console.dir(event.detail)
|
17
|
+
})
|
18
|
+
document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
|
19
|
+
console.log('Option removed')
|
20
|
+
console.dir(event.detail)
|
21
|
+
})
|
22
|
+
document.addEventListener("pb-typeahead-kit-result-clear", function() {
|
23
|
+
console.log('All options cleared')
|
24
|
+
})
|
25
|
+
<% end %>
|
@@ -10,12 +10,9 @@ const options = [
|
|
10
10
|
{ label: 'Roofs', value: '#0000FF' },
|
11
11
|
]
|
12
12
|
|
13
|
-
import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
|
14
|
-
|
15
13
|
const TypeaheadWithPills = () => {
|
16
14
|
return (
|
17
15
|
<>
|
18
|
-
<TypeaheadWithPillsSummary />
|
19
16
|
<Typeahead
|
20
17
|
isMulti
|
21
18
|
label="Colors"
|
@@ -0,0 +1,8 @@
|
|
1
|
+
Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
|
2
|
+
|
3
|
+
`{ label: "Foo", value: "bar" }`
|
4
|
+
|
5
|
+
#### Rails: Subscribing to JS Events
|
6
|
+
`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
|
7
|
+
`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
|
8
|
+
`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
|
2
|
+
|
3
|
+
<!-- This section is an example of how to provide load_options prop for using dynamic options -->
|
4
|
+
<%= javascript_tag defer: "defer" do %>
|
5
|
+
// Simple filter function, providing a list of results in the expected data format
|
6
|
+
|
7
|
+
const filterResults = function(results) {
|
8
|
+
return results.items.map(function(result) {
|
9
|
+
return {
|
10
|
+
label: result.login,
|
11
|
+
value: result.id,
|
12
|
+
}
|
13
|
+
})
|
14
|
+
}
|
15
|
+
|
16
|
+
/* Note: Make sure you assign this to window or a namespace within window
|
17
|
+
or it will not be accessible to the kit! */
|
18
|
+
|
19
|
+
window.asyncPillsPromiseOptions = function(inputValue) {
|
20
|
+
return new Promise(function(resolve) {
|
21
|
+
if (inputValue) {
|
22
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
23
|
+
.then(function(response) { return response.json() })
|
24
|
+
.then(function(results) { resolve(filterResults(results))})
|
25
|
+
} else {
|
26
|
+
resolve([])
|
27
|
+
}
|
28
|
+
})
|
29
|
+
}
|
30
|
+
<% end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
#### Rails: Providing the `load_options` Promise
|
2
|
+
|
3
|
+
**Additional required props: ** `async: true`, `pills: true`
|
4
|
+
|
5
|
+
The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
|
6
|
+
|
7
|
+
#### React: `loadOptions`
|
8
|
+
|
9
|
+
**Additional required props: ** `async: true`
|
10
|
+
|
11
|
+
[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
|
2
|
+
|
3
|
+
<%= javascript_tag defer: "defer" do %>
|
4
|
+
const filterUserResults = function(results) {
|
5
|
+
return results.items.map(function(result) {
|
6
|
+
return {
|
7
|
+
imageUrl: result.avatar_url,
|
8
|
+
label: result.login,
|
9
|
+
value: result.id,
|
10
|
+
}
|
11
|
+
})
|
12
|
+
}
|
13
|
+
|
14
|
+
window.asyncPillsPromiseOptionsUsers = function(inputValue) {
|
15
|
+
return new Promise(function(resolve) {
|
16
|
+
if (inputValue) {
|
17
|
+
fetch(`https://api.github.com/search/users?q=${inputValue}`)
|
18
|
+
.then(function(response) { return response.json() })
|
19
|
+
.then(function(results) { resolve(filterUserResults(results))})
|
20
|
+
} else {
|
21
|
+
resolve([])
|
22
|
+
}
|
23
|
+
})
|
24
|
+
}
|
25
|
+
<% end %>
|
@@ -8,8 +8,6 @@ import {
|
|
8
8
|
User,
|
9
9
|
} from '../..'
|
10
10
|
|
11
|
-
import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
|
12
|
-
|
13
11
|
/**
|
14
12
|
*
|
15
13
|
* @const filterResults
|
@@ -65,7 +63,6 @@ const TypeaheadWithPillsAsyncUsers = () => {
|
|
65
63
|
|
66
64
|
return (
|
67
65
|
<>
|
68
|
-
<TypeaheadWithPillsAsyncSummary />
|
69
66
|
<If condition={users && users.length > 0}>
|
70
67
|
<Caption
|
71
68
|
marginBottom="xs"
|
@@ -0,0 +1 @@
|
|
1
|
+
If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.
|
@@ -2,6 +2,9 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- typeahead_default: Default
|
4
4
|
- typeahead_with_context_dark: With Context
|
5
|
+
- typeahead_with_pills: With Pills
|
6
|
+
- typeahead_with_pills_async: With Pills (Async Data)
|
7
|
+
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
5
8
|
|
6
9
|
react:
|
7
10
|
- typeahead_default: Default
|
@@ -5,12 +5,19 @@ module Playbook
|
|
5
5
|
class Typeahead
|
6
6
|
include Playbook::Props
|
7
7
|
|
8
|
+
prop :async, type: Playbook::Props::Boolean,
|
9
|
+
default: false
|
8
10
|
prop :label
|
11
|
+
prop :load_options
|
9
12
|
prop :name
|
10
|
-
prop :
|
13
|
+
prop :options, type: Playbook::Props::HashArray, default: []
|
14
|
+
prop :pills, type: Playbook::Props::Boolean,
|
15
|
+
default: false
|
16
|
+
|
11
17
|
prop :placeholder
|
12
18
|
prop :search_term_minimum_length, default: 3
|
13
19
|
prop :search_debounce_timeout, default: 250
|
20
|
+
prop :value
|
14
21
|
|
15
22
|
partial "pb_typeahead/typeahead"
|
16
23
|
|
@@ -25,6 +32,22 @@ module Playbook
|
|
25
32
|
pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
|
26
33
|
)
|
27
34
|
end
|
35
|
+
|
36
|
+
def typeahead_with_pills_options
|
37
|
+
base_options = {
|
38
|
+
isMulti: true,
|
39
|
+
label: label,
|
40
|
+
options: options,
|
41
|
+
placeholder: placeholder
|
42
|
+
}
|
43
|
+
|
44
|
+
base_options.merge!({
|
45
|
+
async: true,
|
46
|
+
loadOptions: load_options,
|
47
|
+
}) if async
|
48
|
+
|
49
|
+
base_options
|
50
|
+
end
|
28
51
|
end
|
29
52
|
end
|
30
53
|
end
|
@@ -3,3 +3,4 @@ export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
|
|
3
3
|
export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
|
4
4
|
export { default as Legend } from './pb_legend/_legend.jsx'
|
5
5
|
export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
|
6
|
+
export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
|
@@ -18,6 +18,9 @@ PbPopover.start()
|
|
18
18
|
import PbTooltip from './pb_tooltip'
|
19
19
|
PbTooltip.start()
|
20
20
|
|
21
|
+
import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
|
22
|
+
PbFixedConfirmationToast.start()
|
23
|
+
|
21
24
|
import PbTypeahead from './pb_typeahead'
|
22
25
|
PbTypeahead.start()
|
23
26
|
|
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.0.
|
4
|
+
version: 7.1.0.pre.alpha1
|
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-09 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -515,15 +515,13 @@ files:
|
|
515
515
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb
|
516
516
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
|
517
517
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
|
518
|
+
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
|
519
|
+
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
|
518
520
|
- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
|
519
521
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
|
520
522
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
|
521
523
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
|
522
524
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx
|
523
|
-
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb
|
524
|
-
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx
|
525
|
-
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb
|
526
|
-
- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx
|
527
525
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
|
528
526
|
- app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
|
529
527
|
- app/pb_kits/playbook/pb_button_toolbar/docs/index.js
|
@@ -680,15 +678,11 @@ files:
|
|
680
678
|
- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
|
681
679
|
- app/pb_kits/playbook/pb_date_picker/date_picker.rb
|
682
680
|
- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
|
683
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
|
684
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
|
685
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
|
686
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
|
687
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
|
688
681
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
689
682
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
690
683
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
691
684
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
685
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
692
686
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
|
693
687
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
|
694
688
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
|
@@ -836,6 +830,8 @@ files:
|
|
836
830
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
|
837
831
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
|
838
832
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
|
833
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
|
834
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
|
839
835
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb
|
840
836
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx
|
841
837
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
|
@@ -848,6 +844,7 @@ files:
|
|
848
844
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
|
849
845
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
|
850
846
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
|
847
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
|
851
848
|
- app/pb_kits/playbook/pb_flex/_flex.html.erb
|
852
849
|
- app/pb_kits/playbook/pb_flex/_flex.jsx
|
853
850
|
- app/pb_kits/playbook/pb_flex/_flex.scss
|
@@ -1506,12 +1503,18 @@ files:
|
|
1506
1503
|
- app/pb_kits/playbook/pb_table/_table_row.html.erb
|
1507
1504
|
- app/pb_kits/playbook/pb_table/_table_row.jsx
|
1508
1505
|
- app/pb_kits/playbook/pb_table/docs/_description.md
|
1506
|
+
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
1507
|
+
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
1508
|
+
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
|
1509
1509
|
- app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
|
1510
1510
|
- app/pb_kits/playbook/pb_table/docs/_table_container.jsx
|
1511
1511
|
- app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
|
1512
1512
|
- app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx
|
1513
1513
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
|
1514
1514
|
- app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
|
1515
|
+
- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
|
1516
|
+
- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx
|
1517
|
+
- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md
|
1515
1518
|
- app/pb_kits/playbook/pb_table/docs/_table_lg.html.erb
|
1516
1519
|
- app/pb_kits/playbook/pb_table/docs/_table_lg.jsx
|
1517
1520
|
- app/pb_kits/playbook/pb_table/docs/_table_lg.md
|
@@ -1520,6 +1523,9 @@ files:
|
|
1520
1523
|
- app/pb_kits/playbook/pb_table/docs/_table_md.md
|
1521
1524
|
- app/pb_kits/playbook/pb_table/docs/_table_multiline.html.erb
|
1522
1525
|
- app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx
|
1526
|
+
- app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
|
1527
|
+
- app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
|
1528
|
+
- app/pb_kits/playbook/pb_table/docs/_table_one_action.md
|
1523
1529
|
- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
|
1524
1530
|
- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
|
1525
1531
|
- app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
|
@@ -1530,6 +1536,12 @@ files:
|
|
1530
1536
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
|
1531
1537
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
|
1532
1538
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.md
|
1539
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
|
1540
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
|
1541
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
|
1542
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
|
1543
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
|
1544
|
+
- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
|
1533
1545
|
- app/pb_kits/playbook/pb_table/docs/example.yml
|
1534
1546
|
- app/pb_kits/playbook/pb_table/docs/index.js
|
1535
1547
|
- app/pb_kits/playbook/pb_table/index.js
|
@@ -1699,6 +1711,7 @@ files:
|
|
1699
1711
|
- app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
|
1700
1712
|
- app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
|
1701
1713
|
- app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
|
1714
|
+
- app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb
|
1702
1715
|
- app/pb_kits/playbook/pb_toggle/docs/example.yml
|
1703
1716
|
- app/pb_kits/playbook/pb_toggle/docs/index.js
|
1704
1717
|
- app/pb_kits/playbook/pb_toggle/toggle.rb
|
@@ -1724,11 +1737,15 @@ files:
|
|
1724
1737
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
|
1725
1738
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
|
1726
1739
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
|
1740
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
1727
1741
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
1742
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
|
1743
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
|
1728
1744
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
|
1729
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
1745
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md
|
1746
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
|
1730
1747
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
|
1731
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
1748
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
|
1732
1749
|
- app/pb_kits/playbook/pb_typeahead/docs/example.yml
|
1733
1750
|
- app/pb_kits/playbook/pb_typeahead/docs/index.js
|
1734
1751
|
- app/pb_kits/playbook/pb_typeahead/index.js
|
@@ -1819,23 +1836,10 @@ files:
|
|
1819
1836
|
- app/pb_kits/playbook/vendor.js
|
1820
1837
|
- fonts/fontawesome-min.js
|
1821
1838
|
- fonts/regular-min.js
|
1822
|
-
- lib/generators/kit/USAGE
|
1823
|
-
- lib/generators/kit/kit_generator.rb
|
1824
|
-
- lib/generators/kit/templates/kit_example_rails.erb.tt
|
1825
|
-
- lib/generators/kit/templates/kit_example_react.erb.tt
|
1826
|
-
- lib/generators/kit/templates/kit_example_yml.erb.tt
|
1827
|
-
- lib/generators/kit/templates/kit_html.erb.tt
|
1828
|
-
- lib/generators/kit/templates/kit_js.erb.tt
|
1829
|
-
- lib/generators/kit/templates/kit_jsx.erb.tt
|
1830
|
-
- lib/generators/kit/templates/kit_ruby.erb.tt
|
1831
|
-
- lib/generators/kit/templates/kit_ruby_spec.erb.tt
|
1832
|
-
- lib/generators/kit/templates/kit_scss.erb
|
1833
1839
|
- lib/playbook.rb
|
1834
1840
|
- lib/playbook/engine.rb
|
1835
1841
|
- lib/playbook/version.rb
|
1836
1842
|
- lib/playbook_ui.rb
|
1837
|
-
- lib/tasks/pb_release.rake
|
1838
|
-
- lib/tasks/playbook_tasks.rake
|
1839
1843
|
homepage: http://playbook.powerapp.cloud
|
1840
1844
|
licenses:
|
1841
1845
|
- MIT
|
@@ -1851,9 +1855,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
1851
1855
|
version: '0'
|
1852
1856
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
1853
1857
|
requirements:
|
1854
|
-
- - "
|
1858
|
+
- - ">"
|
1855
1859
|
- !ruby/object:Gem::Version
|
1856
|
-
version:
|
1860
|
+
version: 1.3.1
|
1857
1861
|
requirements: []
|
1858
1862
|
rubygems_version: 3.1.4
|
1859
1863
|
signing_key:
|