playbook_ui 9.10.0 → 9.14.1
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +26 -22
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_background/background.rb +0 -1
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +26 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx +51 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx +49 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +55 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +9 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.rb +12 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +7 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.rb +11 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js +35 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb +17 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +56 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +9 -10
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +4 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +6 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +3 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +45 -11
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +17 -6
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +18 -13
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb +5 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +38 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +32 -16
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +23 -4
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +12 -8
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb +9 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +35 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb +8 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +19 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +6 -1
- data/app/pb_kits/playbook/pb_flex/flex.rb +4 -4
- data/app/pb_kits/playbook/pb_form/form.rb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +12 -2
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +13 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +25 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +4 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -6
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +5 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +6 -2
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +14 -11
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +18 -13
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -0
- data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +2 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +61 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +16 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb +4 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +14 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +9 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +7 -3
- data/app/pb_kits/playbook/pb_select/_select.jsx +5 -5
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +8 -12
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +83 -31
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +106 -0
- data/app/pb_kits/playbook/pb_text_input/add_on.html.erb +13 -0
- data/app/pb_kits/playbook/pb_text_input/add_on.rb +30 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +82 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx +22 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +7 -16
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +43 -3
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -2
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +11 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +23 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +23 -11
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +17 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb +36 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +43 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +35 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +44 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +8 -5
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +18 -2
- data/app/pb_kits/playbook/pb_user_badge/user_badge.rb +1 -1
- data/lib/playbook/forms/builder/action_area.rb +2 -2
- data/lib/playbook/forms/builder/collection_select_field.rb +2 -2
- data/lib/playbook/forms/builder/select_field.rb +1 -1
- data/lib/playbook/kit_resolver.rb +1 -1
- data/lib/playbook/markdown/template_handler.rb +4 -2
- data/lib/playbook/pb_doc_helper.rb +4 -2
- data/lib/playbook/props.rb +2 -4
- data/lib/playbook/props/base.rb +1 -2
- data/lib/playbook/props/nested_props.rb +23 -0
- data/lib/playbook/version.rb +2 -1
- metadata +62 -29
@@ -0,0 +1,30 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbTextInput
|
5
|
+
class AddOn < Playbook::KitBase
|
6
|
+
prop :icon, type: Playbook::Props::String, required: true
|
7
|
+
prop :alignment, type: Playbook::Props::Enum, values: %w[right left], default: "right"
|
8
|
+
prop :border, type: Playbook::Props::Boolean, default: true
|
9
|
+
|
10
|
+
def border_css
|
11
|
+
border_toggle = border ? "on" : "off"
|
12
|
+
border_to_change = if alignment == "left"
|
13
|
+
"right"
|
14
|
+
else
|
15
|
+
"left"
|
16
|
+
end
|
17
|
+
|
18
|
+
"border_#{border_to_change}_#{border_toggle}"
|
19
|
+
end
|
20
|
+
|
21
|
+
def left_aligned?
|
22
|
+
alignment == "left"
|
23
|
+
end
|
24
|
+
|
25
|
+
def dark_mode_css
|
26
|
+
dark ? "add-on-card-dark" : nil
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("text_input", props: {
|
2
|
+
label: "Add On With Defaults",
|
3
|
+
add_on: { icon: "bat" }
|
4
|
+
}) %>
|
5
|
+
|
6
|
+
<%= pb_rails("text_input", props: {
|
7
|
+
label: "Right-Aligned Add On With Border",
|
8
|
+
add_on: { icon: "user", alignment: 'right', border: true }
|
9
|
+
}) %>
|
10
|
+
|
11
|
+
<%= pb_rails("text_input", props: {
|
12
|
+
label: "Left-Aligned Add On With No Border",
|
13
|
+
add_on: { icon: "percent", alignment: 'left', border: false }
|
14
|
+
}) %>
|
15
|
+
|
16
|
+
<%= pb_rails("text_input", props: {
|
17
|
+
label: "Left-Aligned Add On With Border",
|
18
|
+
add_on: { icon: "user", alignment: 'left', border: true }
|
19
|
+
}) %>
|
20
|
+
|
21
|
+
<%= pb_rails("text_input", props: {
|
22
|
+
label: "Right-Aligned Add On With No Border",
|
23
|
+
add_on: { icon: "percent", alignment: 'right', border: false }
|
24
|
+
}) %>
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { TextInput } from '../../'
|
3
|
+
|
4
|
+
const TextInputAddOn = (props) => {
|
5
|
+
const [defaultInput, setDefaultInput] = useState('')
|
6
|
+
const [firstInput, setFirstInput] = useState('')
|
7
|
+
const [secondInput, setSecondInput] = useState('')
|
8
|
+
const [thirdInput, setThirdInput] = useState('')
|
9
|
+
const [fourthInput, setFourthInput] = useState('')
|
10
|
+
|
11
|
+
const handleUpdateDefaultInput = ({ target }) => {
|
12
|
+
setDefaultInput(target.value)
|
13
|
+
}
|
14
|
+
|
15
|
+
const handleUpdateFirstInput = ({ target }) => {
|
16
|
+
setFirstInput(target.value)
|
17
|
+
}
|
18
|
+
|
19
|
+
const handleUpdateSecondInput = ({ target }) => {
|
20
|
+
setSecondInput(target.value)
|
21
|
+
}
|
22
|
+
|
23
|
+
const handleUpdateThirdInput = ({ target }) => {
|
24
|
+
setThirdInput(target.value)
|
25
|
+
}
|
26
|
+
|
27
|
+
const handleUpdateFourthInput = ({ target }) => {
|
28
|
+
setFourthInput(target.value)
|
29
|
+
}
|
30
|
+
|
31
|
+
return (
|
32
|
+
<>
|
33
|
+
<div>
|
34
|
+
<TextInput
|
35
|
+
addOn={{ icon: 'bat' }}
|
36
|
+
label="Add On With Defaults"
|
37
|
+
onChange={handleUpdateDefaultInput}
|
38
|
+
value={defaultInput}
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</div>
|
42
|
+
<div>
|
43
|
+
<TextInput
|
44
|
+
addOn={{ icon: 'user', alignment: 'right', border: true }}
|
45
|
+
label="Right-Aligned Add On With Border"
|
46
|
+
onChange={handleUpdateFirstInput}
|
47
|
+
value={firstInput}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
<div>
|
52
|
+
<TextInput
|
53
|
+
addOn={{ icon: 'percent', alignment: 'left', border: false }}
|
54
|
+
label="Left-Aligned Add On With No Border"
|
55
|
+
onChange={handleUpdateSecondInput}
|
56
|
+
value={secondInput}
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
</div>
|
60
|
+
<div>
|
61
|
+
<TextInput
|
62
|
+
addOn={{ icon: 'percent', alignment: 'right', border: false }}
|
63
|
+
label="Right-Aligned Add On With No Border"
|
64
|
+
onChange={handleUpdateThirdInput}
|
65
|
+
value={thirdInput}
|
66
|
+
{...props}
|
67
|
+
/>
|
68
|
+
</div>
|
69
|
+
<div>
|
70
|
+
<TextInput
|
71
|
+
addOn={{ icon: 'percent', alignment: 'left', border: true }}
|
72
|
+
label="Left-Aligned Add On With Border"
|
73
|
+
onChange={handleUpdateFourthInput}
|
74
|
+
value={fourthInput}
|
75
|
+
{...props}
|
76
|
+
/>
|
77
|
+
</div>
|
78
|
+
</>
|
79
|
+
)
|
80
|
+
}
|
81
|
+
|
82
|
+
export default TextInputAddOn
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { TextInput } from '../../'
|
3
|
+
|
4
|
+
const TextInputInline = (props) => {
|
5
|
+
const [value, setValue] = useState('Inline Input')
|
6
|
+
const handleValueChange = ({ target }) => {
|
7
|
+
setValue(target.value)
|
8
|
+
}
|
9
|
+
return (
|
10
|
+
<div>
|
11
|
+
<TextInput
|
12
|
+
inline
|
13
|
+
label="Hover Over Text Below"
|
14
|
+
onChange={handleValueChange}
|
15
|
+
value={value}
|
16
|
+
{...props}
|
17
|
+
/>
|
18
|
+
</div>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default TextInputInline
|
@@ -4,8 +4,12 @@ examples:
|
|
4
4
|
- text_input_error: With Error
|
5
5
|
- text_input_custom: Custom
|
6
6
|
- text_input_disabled: Disabled
|
7
|
+
- text_input_add_on: Add On
|
8
|
+
- text_input_inline: Inline
|
7
9
|
react:
|
8
10
|
- text_input_default: Default
|
9
11
|
- text_input_error: With Error
|
10
12
|
- text_input_custom: Custom
|
11
13
|
- text_input_disabled: Disabled
|
14
|
+
- text_input_add_on: Add On
|
15
|
+
- text_input_inline: Inline
|
@@ -2,3 +2,5 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
|
|
2
2
|
export { default as TextInputCustom } from './_text_input_custom.jsx'
|
3
3
|
export { default as TextInputError } from './_text_input_error.jsx'
|
4
4
|
export { default as TextInputDisabled } from './_text_input_disabled.jsx'
|
5
|
+
export { default as TextInputAddOn } from './_text_input_add_on.jsx'
|
6
|
+
export { default as TextInputInline } from './_text_input_inline.jsx'
|
@@ -5,25 +5,16 @@
|
|
5
5
|
<% if object.label.present? %>
|
6
6
|
<%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
|
7
7
|
<% end %>
|
8
|
-
<%= content_tag(:div, class: "text_input_wrapper") do %>
|
8
|
+
<%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
|
9
9
|
<% if content.present? %>
|
10
10
|
<%= content %>
|
11
|
+
<% elsif has_add_on? %>
|
12
|
+
<%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
|
13
|
+
<%= input_tag %>
|
14
|
+
<% end %>
|
11
15
|
<% else %>
|
12
|
-
<%=
|
13
|
-
autocomplete: object.autocomplete ? nil : "off",
|
14
|
-
class: "text_input",
|
15
|
-
data: object.validation_data,
|
16
|
-
disabled: object.disabled,
|
17
|
-
id: object.id,
|
18
|
-
name: object.name,
|
19
|
-
pattern: object.validation_pattern,
|
20
|
-
placeholder: object.placeholder,
|
21
|
-
required: object.required,
|
22
|
-
type: object.type,
|
23
|
-
value: object.value) %>
|
24
|
-
<% end %>
|
25
|
-
<% if object.error %>
|
26
|
-
<%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
|
16
|
+
<%= input_tag %>
|
27
17
|
<% end %>
|
18
|
+
<%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
|
28
19
|
<% end %>
|
29
20
|
<% end %>
|
@@ -8,6 +8,8 @@ module Playbook
|
|
8
8
|
prop :disabled, type: Playbook::Props::Boolean,
|
9
9
|
default: false
|
10
10
|
prop :error
|
11
|
+
prop :inline, type: Playbook::Props::Boolean,
|
12
|
+
default: false
|
11
13
|
prop :label
|
12
14
|
prop :name
|
13
15
|
prop :placeholder
|
@@ -17,9 +19,45 @@ module Playbook
|
|
17
19
|
prop :validation, type: Playbook::Props::Hash,
|
18
20
|
default: {}
|
19
21
|
prop :value
|
22
|
+
prop :add_on, type: Playbook::Props::NestedProps,
|
23
|
+
nested_kit: Playbook::PbTextInput::AddOn
|
20
24
|
|
21
25
|
def classname
|
22
|
-
generate_classname("pb_text_input_kit") + error_class
|
26
|
+
generate_classname("pb_text_input_kit") + error_class + inline_class
|
27
|
+
end
|
28
|
+
|
29
|
+
def input_tag
|
30
|
+
tag(:input, input_options)
|
31
|
+
end
|
32
|
+
|
33
|
+
def has_add_on?
|
34
|
+
add_on.present?
|
35
|
+
end
|
36
|
+
|
37
|
+
def add_on_class
|
38
|
+
has_add_on? ? "text_input_wrapper_add_on" : nil
|
39
|
+
end
|
40
|
+
|
41
|
+
def add_on_props
|
42
|
+
{ dark: dark }.merge(add_on || {})
|
43
|
+
end
|
44
|
+
|
45
|
+
private
|
46
|
+
|
47
|
+
def input_options
|
48
|
+
{
|
49
|
+
autocomplete: autocomplete ? nil : "off",
|
50
|
+
class: "text_input",
|
51
|
+
data: validation_data,
|
52
|
+
disabled: disabled,
|
53
|
+
id: id,
|
54
|
+
name: name,
|
55
|
+
pattern: validation_pattern,
|
56
|
+
placeholder: placeholder,
|
57
|
+
required: required,
|
58
|
+
type: type,
|
59
|
+
value: value,
|
60
|
+
}
|
23
61
|
end
|
24
62
|
|
25
63
|
def validation_message
|
@@ -36,11 +74,13 @@ module Playbook
|
|
36
74
|
fields
|
37
75
|
end
|
38
76
|
|
39
|
-
private
|
40
|
-
|
41
77
|
def error_class
|
42
78
|
error ? " error" : ""
|
43
79
|
end
|
80
|
+
|
81
|
+
def inline_class
|
82
|
+
inline ? " inline" : ""
|
83
|
+
end
|
44
84
|
end
|
45
85
|
end
|
46
86
|
end
|
@@ -3,10 +3,10 @@
|
|
3
3
|
data: object.data,
|
4
4
|
class: object.classname) do %>
|
5
5
|
|
6
|
-
<%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
|
6
|
+
<%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
|
7
7
|
<time>
|
8
8
|
<%= object.format_time_string %>
|
9
|
-
<%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
|
9
|
+
<%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
|
10
10
|
</time>
|
11
11
|
<% end %>
|
12
12
|
<% end %>
|
@@ -3,8 +3,10 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import Select from 'react-select'
|
5
5
|
import AsyncSelect from 'react-select/async'
|
6
|
+
import CreateableSelect from 'react-select/creatable'
|
6
7
|
import { get } from 'lodash'
|
7
8
|
import { globalProps } from '../utilities/globalProps.js'
|
9
|
+
import classnames from 'classnames'
|
8
10
|
|
9
11
|
import Control from './components/Control'
|
10
12
|
import ClearIndicator from './components/ClearIndicator'
|
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
|
|
26
28
|
|
27
29
|
type Props = {
|
28
30
|
async?: boolean,
|
31
|
+
createable?: boolean,
|
29
32
|
dark?: boolean,
|
30
33
|
label?: string,
|
31
34
|
loadOptions?: noop | string,
|
@@ -55,9 +58,13 @@ const Typeahead = (props: Props) => {
|
|
55
58
|
},
|
56
59
|
defaultOptions: true,
|
57
60
|
id: 'react-select-input',
|
61
|
+
inline: false,
|
58
62
|
isClearable: true,
|
59
63
|
isSearchable: true,
|
60
64
|
name,
|
65
|
+
multiKit: '',
|
66
|
+
onCreateOption: null,
|
67
|
+
plusIcon: false,
|
61
68
|
...props,
|
62
69
|
}
|
63
70
|
|
@@ -65,7 +72,8 @@ const Typeahead = (props: Props) => {
|
|
65
72
|
if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
|
66
73
|
if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
|
67
74
|
|
68
|
-
|
75
|
+
let Tag = props.async ? AsyncSelect : Select
|
76
|
+
if (props.createable) Tag = CreateableSelect
|
69
77
|
|
70
78
|
const handleOnChange = (data, { action, option, removedValue }) => {
|
71
79
|
if (action === 'select-option') {
|
@@ -84,9 +92,10 @@ const Typeahead = (props: Props) => {
|
|
84
92
|
}
|
85
93
|
|
86
94
|
const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
|
95
|
+
const inlineClass = selectProps.inline ? 'inline' : null
|
87
96
|
|
88
97
|
return (
|
89
|
-
<div className={classes}>
|
98
|
+
<div className={classnames(classes, inlineClass)}>
|
90
99
|
<Tag
|
91
100
|
classNamePrefix="typeahead-kit-select"
|
92
101
|
onChange={handleOnChange}
|
@@ -154,4 +154,27 @@
|
|
154
154
|
box-sizing: border-box;
|
155
155
|
}
|
156
156
|
}
|
157
|
+
.placeholder+.input-wrapper .typeahead-plus-icon {
|
158
|
+
display: none;
|
159
|
+
}
|
160
|
+
.typeahead-kit-select__control--is-focused .typeahead-plus-icon {
|
161
|
+
display: none;
|
162
|
+
}
|
163
|
+
.typeahead-plus-icon {
|
164
|
+
color: $text_lt_lighter;
|
165
|
+
}
|
166
|
+
[class^=pb_badge_kit] span {
|
167
|
+
line-height: 16.5px;
|
168
|
+
letter-spacing: normal;
|
169
|
+
}
|
170
|
+
&.inline {
|
171
|
+
&:not(:hover) {
|
172
|
+
.text_input {
|
173
|
+
border-color: transparent;
|
174
|
+
}
|
175
|
+
.text_input_indicators .css-tlfecz-indicatorContainer {
|
176
|
+
color: transparent;
|
177
|
+
}
|
178
|
+
}
|
179
|
+
}
|
157
180
|
}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import { components } from 'react-select'
|
5
5
|
|
6
|
-
import { FormPill } from '../../'
|
6
|
+
import { Badge, FormPill } from '../../'
|
7
7
|
|
8
8
|
type Props = {
|
9
9
|
data: object,
|
@@ -15,6 +15,7 @@ type Props = {
|
|
15
15
|
const MultiValue = (props: Props) => {
|
16
16
|
const { removeProps } = props
|
17
17
|
const { imageUrl, label } = props.data
|
18
|
+
const { multiKit } = props.selectProps
|
18
19
|
|
19
20
|
const formPillProps = {
|
20
21
|
marginRight: 'xs',
|
@@ -28,19 +29,30 @@ const MultiValue = (props: Props) => {
|
|
28
29
|
className="text_input_multivalue_container"
|
29
30
|
{...props}
|
30
31
|
>
|
31
|
-
<If condition={
|
32
|
-
<
|
33
|
-
avatarUrl={imageUrl}
|
32
|
+
<If condition={multiKit === 'badge'}>
|
33
|
+
<Badge
|
34
34
|
closeProps={removeProps}
|
35
|
-
|
36
|
-
name={label}
|
37
|
-
/>
|
38
|
-
<Else />
|
39
|
-
<FormPill
|
40
|
-
closeProps={removeProps}
|
41
|
-
marginRight="xs"
|
35
|
+
removeIcon
|
42
36
|
text={label}
|
37
|
+
variant="primary"
|
43
38
|
/>
|
39
|
+
<Else />
|
40
|
+
<If condition={imageUrl}>
|
41
|
+
<FormPill
|
42
|
+
avatarUrl={imageUrl}
|
43
|
+
closeProps={removeProps}
|
44
|
+
marginRight="xs"
|
45
|
+
name={label}
|
46
|
+
size={multiKit === 'smallPill' ? 'small' : ''}
|
47
|
+
/>
|
48
|
+
<Else />
|
49
|
+
<FormPill
|
50
|
+
closeProps={removeProps}
|
51
|
+
marginRight="xs"
|
52
|
+
size={multiKit === 'smallPill' ? 'small' : ''}
|
53
|
+
text={label}
|
54
|
+
/>
|
55
|
+
</If>
|
44
56
|
</If>
|
45
57
|
</components.MultiValueContainer>
|
46
58
|
)
|