playbook_ui 9.14.1 → 9.15.0.pre.decouple.website1
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/Rakefile +5 -9
- data/app/pb_kits/playbook/_reset.scss +42 -0
- data/app/pb_kits/playbook/index.js +97 -97
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +2 -1
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -2
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +3 -3
- data/app/pb_kits/playbook/pb_title/_title.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +14 -15
- data/app/pb_kits/playbook/playbook-doc.js +195 -0
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +35 -0
- data/app/pb_kits/playbook/{vendor.js → playbook-rails.js} +1 -3
- data/app/pb_kits/playbook/tokens/_colors.scss +4 -0
- data/app/pb_kits/playbook/{pb_title/_title_mixin.scss → tokens/_titles.scss} +3 -5
- data/app/pb_kits/playbook/utilities/_colors.scss +0 -4
- data/lib/playbook.rb +1 -15
- data/lib/playbook/engine.rb +11 -21
- data/lib/playbook/props/nested_props.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +31 -146
- data/app/assets/images/clark.jpg +0 -0
- data/app/assets/images/full_page_samples.svg +0 -7
- data/app/assets/images/giant.jpg +0 -0
- data/app/assets/images/github-brands.svg +0 -1
- data/app/assets/images/landing-background.svg +0 -36
- data/app/assets/images/landing-image.svg +0 -203
- data/app/assets/images/pb-caret.svg +0 -1
- data/app/assets/images/pb-check.svg +0 -11
- data/app/assets/images/pb-logo.svg +0 -28
- data/app/assets/images/pb-white-logo.svg +0 -15
- data/app/assets/images/pb.logo.svg +0 -28
- data/app/pb_kits/playbook/react_rails_kits.js +0 -13
- data/app/pb_kits/playbook/utilities/accessibility.js +0 -22
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 722fb9ff31e345a3c2376891e64c2677d6e202fb8c0b96df78c141125879e4f0
|
|
4
|
+
data.tar.gz: 19cb2da061d984d7e027eaec3636a66a1ec01247e1d34e169395add9e6202e8a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ebcdd900052343af6646edce68f7edd62da73a859434047c24cc5f634d5ce2a2b72005f3ce48a186ad0c972cf0a7924882c8443936e683d8b4ba50332cfe3da6
|
|
7
|
+
data.tar.gz: 87aa9d6997d2b0449938ce5c34b15bcd9ad4d2569882412571c7cd048b1c68f9d02013acf80341ba59a4d63d50c130821ada32398e52f94d7dfdbdeeb688b72f
|
data/Rakefile
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
1
3
|
begin
|
|
2
|
-
require
|
|
4
|
+
require "bundler/setup"
|
|
3
5
|
rescue LoadError
|
|
4
|
-
puts
|
|
6
|
+
puts "You must `gem install bundler` and `bundle install` to run rake tasks"
|
|
5
7
|
end
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
load 'rails/tasks/engine.rake'
|
|
9
|
-
load 'rails/tasks/statistics.rake'
|
|
10
|
-
|
|
11
|
-
require 'bundler/gem_tasks'
|
|
9
|
+
require "bundler/gem_tasks"
|
|
12
10
|
|
|
13
11
|
Dir["private/tasks/*.rake"].each(&method(:load))
|
|
14
|
-
|
|
15
|
-
task default: :test
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@import "./tokens/typography";
|
|
2
|
+
@import "./tokens/colors";
|
|
3
|
+
|
|
4
|
+
* {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
&:before,
|
|
9
|
+
&:after {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
html {
|
|
15
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
16
|
+
height: 100vh;
|
|
17
|
+
overflow-x: hidden;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
font-family: $font_family_base;
|
|
22
|
+
font-size: $font_base;
|
|
23
|
+
line-height: 1.5;
|
|
24
|
+
background-color: $bg-light;
|
|
25
|
+
height: 100%;
|
|
26
|
+
letter-spacing: $lspace_normal;
|
|
27
|
+
font-weight: $regular;
|
|
28
|
+
font-style: normal;
|
|
29
|
+
text-rendering: optimizeLegibility;
|
|
30
|
+
-moz-font-feature-settings: "liga" on;
|
|
31
|
+
color: $charcoal;
|
|
32
|
+
margin: 0 !important;
|
|
33
|
+
padding: 0 !important;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
min-height: 100vh;
|
|
36
|
+
padding: 50px; // REMOVE AFTER STYLED
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
a {
|
|
40
|
+
text-decoration: none;
|
|
41
|
+
color: $primary;
|
|
42
|
+
}
|
|
@@ -4,103 +4,103 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
|
|
|
4
4
|
import 'lazysizes'
|
|
5
5
|
|
|
6
6
|
// vvv React Component JSX Imports from the React Kits vvv
|
|
7
|
-
export Avatar from './pb_avatar/_avatar
|
|
8
|
-
export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button
|
|
9
|
-
export Background from './pb_background/_background
|
|
10
|
-
export Badge from './pb_badge/_badge
|
|
11
|
-
export BarGraph from './pb_bar_graph/_bar_graph
|
|
12
|
-
export Body from './pb_body/_body
|
|
13
|
-
export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs
|
|
14
|
-
export Button from './pb_button/_button
|
|
15
|
-
export ButtonToolbar from './pb_button_toolbar/_button_toolbar
|
|
16
|
-
export Caption from './pb_caption/_caption
|
|
17
|
-
export Card from './pb_card/_card
|
|
18
|
-
export Checkbox from './pb_checkbox/_checkbox
|
|
19
|
-
export CircleChart from './pb_circle_chart/_circle_chart
|
|
20
|
-
export CircleIconButton from './pb_circle_icon_button/_circle_icon_button
|
|
21
|
-
export Collapsible from './pb_collapsible/_collapsible
|
|
22
|
-
export Contact from './pb_contact/_contact
|
|
23
|
-
export Currency from './pb_currency/_currency
|
|
24
|
-
export DashboardValue from './pb_dashboard_value/_dashboard_value
|
|
25
|
-
export Date from './pb_date/_date
|
|
26
|
-
export DatePicker from './pb_date_picker/_date_picker
|
|
27
|
-
export DateRangeInline from './pb_date_range_inline/_date_range_inline
|
|
28
|
-
export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked
|
|
29
|
-
export DateStacked from './pb_date_stacked/_date_stacked
|
|
30
|
-
export DateTime from './pb_date_time/_date_time
|
|
31
|
-
export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked
|
|
32
|
-
export DateYearStacked from './pb_date_year_stacked/_date_year_stacked
|
|
33
|
-
export Dialog from './pb_dialog/_dialog
|
|
34
|
-
export DistributionBar from './pb_distribution_bar/_distribution_bar
|
|
35
|
-
export FileUpload from './pb_file_upload/_file_upload
|
|
36
|
-
export Filter from './pb_filter/_filter
|
|
37
|
-
export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast
|
|
38
|
-
export Flex from './pb_flex/_flex
|
|
39
|
-
export FlexItem from './pb_flex/_flex_item
|
|
40
|
-
export FormGroup from './pb_form_group/_form_group
|
|
41
|
-
export FormPill from './pb_form_pill/_form_pill
|
|
42
|
-
export Gauge from './pb_gauge/_gauge
|
|
43
|
-
export Hashtag from './pb_hashtag/_hashtag
|
|
44
|
-
export Highlight from './pb_highlight/_highlight
|
|
45
|
-
export HomeAddressStreet from './pb_home_address_street/_home_address_street
|
|
46
|
-
export Icon from './pb_icon/_icon
|
|
47
|
-
export IconCircle from './pb_icon_circle/_icon_circle
|
|
48
|
-
export IconStatValue from './pb_icon_stat_value/_icon_stat_value
|
|
49
|
-
export IconValue from './pb_icon_value/_icon_value
|
|
50
|
-
export Image from './pb_image/_image
|
|
51
|
-
export LabelPill from './pb_label_pill/_label_pill
|
|
52
|
-
export LabelValue from './pb_label_value/_label_value
|
|
53
|
-
export Layout from './pb_layout/_layout
|
|
54
|
-
export Legend from './pb_legend/_legend
|
|
55
|
-
export LineGraph from './pb_line_graph/_line_graph
|
|
56
|
-
export List from './pb_list/_list
|
|
57
|
-
export ListItem from './pb_list/_list_item
|
|
58
|
-
export LoadingInline from './pb_loading_inline/_loading_inline
|
|
59
|
-
export Message from './pb_message/_message
|
|
60
|
-
export MultipleUsers from './pb_multiple_users/_multiple_users
|
|
61
|
-
export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked
|
|
62
|
-
export Nav from './pb_nav/_nav
|
|
63
|
-
export NavItem from './pb_nav/_item
|
|
64
|
-
export OnlineStatus from './pb_online_status/_online_status
|
|
65
|
-
export Passphrase from './pb_passphrase/_passphrase
|
|
66
|
-
export PbReactPopover from './pb_popover/_popover
|
|
67
|
-
export Person from './pb_person/_person
|
|
68
|
-
export PersonContact from './pb_person_contact/_person_contact
|
|
69
|
-
export Pill from './pb_pill/_pill
|
|
70
|
-
export ProgressPills from './pb_progress_pills/_progress_pills
|
|
71
|
-
export ProgressSimple from './pb_progress_simple/_progress_simple
|
|
72
|
-
export ProgressStep from './pb_progress_step/_progress_step
|
|
73
|
-
export ProgressStepItem from './pb_progress_step/_progress_step_item
|
|
74
|
-
export Radio from './pb_radio/_radio
|
|
75
|
-
export RichTextEditor from './pb_rich_text_editor/_rich_text_editor
|
|
76
|
-
export SectionSeparator from './pb_section_separator/_section_separator
|
|
77
|
-
export Select from './pb_select/_select
|
|
78
|
-
export SelectableCard from './pb_selectable_card/_selectable_card
|
|
79
|
-
export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon
|
|
80
|
-
export SelectableIcon from './pb_selectable_icon/_selectable_icon
|
|
81
|
-
export SelectableList from './pb_selectable_list/_selectable_list
|
|
82
|
-
export SelectableListItem from './pb_selectable_list/_item
|
|
83
|
-
export Source from './pb_source/_source
|
|
84
|
-
export StarRating from './pb_star_rating/_star_rating
|
|
85
|
-
export StatChange from './pb_stat_change/_stat_change
|
|
86
|
-
export StatValue from './pb_stat_value/_stat_value
|
|
87
|
-
export Table from './pb_table/_table
|
|
88
|
-
export TableRow from './pb_table/_table_row
|
|
89
|
-
export TextInput from './pb_text_input/_text_input
|
|
90
|
-
export Textarea from './pb_textarea/_textarea
|
|
91
|
-
export Time from './pb_time/_time
|
|
92
|
-
export TimeRangeInline from './pb_time_range_inline/_time_range_inline
|
|
93
|
-
export TimeStacked from './pb_time_stacked/_time_stacked
|
|
94
|
-
export Timeline from './pb_timeline/_timeline
|
|
95
|
-
export Timestamp from './pb_timestamp/_timestamp
|
|
96
|
-
export Title from './pb_title/_title
|
|
97
|
-
export TitleCount from './pb_title_count/_title_count
|
|
98
|
-
export TitleDetail from './pb_title_detail/_title_detail
|
|
99
|
-
export Toggle from './pb_toggle/_toggle
|
|
100
|
-
export Typeahead from './pb_typeahead/_typeahead
|
|
101
|
-
export User from './pb_user/_user
|
|
102
|
-
export UserBadge from './pb_user_badge/_user_badge
|
|
103
|
-
export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked
|
|
7
|
+
export Avatar from './pb_avatar/_avatar'
|
|
8
|
+
export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button'
|
|
9
|
+
export Background from './pb_background/_background'
|
|
10
|
+
export Badge from './pb_badge/_badge'
|
|
11
|
+
export BarGraph from './pb_bar_graph/_bar_graph'
|
|
12
|
+
export Body from './pb_body/_body'
|
|
13
|
+
export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs'
|
|
14
|
+
export Button from './pb_button/_button'
|
|
15
|
+
export ButtonToolbar from './pb_button_toolbar/_button_toolbar'
|
|
16
|
+
export Caption from './pb_caption/_caption'
|
|
17
|
+
export Card from './pb_card/_card'
|
|
18
|
+
export Checkbox from './pb_checkbox/_checkbox'
|
|
19
|
+
export CircleChart from './pb_circle_chart/_circle_chart'
|
|
20
|
+
export CircleIconButton from './pb_circle_icon_button/_circle_icon_button'
|
|
21
|
+
export Collapsible from './pb_collapsible/_collapsible'
|
|
22
|
+
export Contact from './pb_contact/_contact'
|
|
23
|
+
export Currency from './pb_currency/_currency'
|
|
24
|
+
export DashboardValue from './pb_dashboard_value/_dashboard_value'
|
|
25
|
+
export Date from './pb_date/_date'
|
|
26
|
+
export DatePicker from './pb_date_picker/_date_picker'
|
|
27
|
+
export DateRangeInline from './pb_date_range_inline/_date_range_inline'
|
|
28
|
+
export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked'
|
|
29
|
+
export DateStacked from './pb_date_stacked/_date_stacked'
|
|
30
|
+
export DateTime from './pb_date_time/_date_time'
|
|
31
|
+
export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked'
|
|
32
|
+
export DateYearStacked from './pb_date_year_stacked/_date_year_stacked'
|
|
33
|
+
export Dialog from './pb_dialog/_dialog'
|
|
34
|
+
export DistributionBar from './pb_distribution_bar/_distribution_bar'
|
|
35
|
+
export FileUpload from './pb_file_upload/_file_upload'
|
|
36
|
+
export Filter from './pb_filter/_filter'
|
|
37
|
+
export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
|
38
|
+
export Flex from './pb_flex/_flex'
|
|
39
|
+
export FlexItem from './pb_flex/_flex_item'
|
|
40
|
+
export FormGroup from './pb_form_group/_form_group'
|
|
41
|
+
export FormPill from './pb_form_pill/_form_pill'
|
|
42
|
+
export Gauge from './pb_gauge/_gauge'
|
|
43
|
+
export Hashtag from './pb_hashtag/_hashtag'
|
|
44
|
+
export Highlight from './pb_highlight/_highlight'
|
|
45
|
+
export HomeAddressStreet from './pb_home_address_street/_home_address_street'
|
|
46
|
+
export Icon from './pb_icon/_icon'
|
|
47
|
+
export IconCircle from './pb_icon_circle/_icon_circle'
|
|
48
|
+
export IconStatValue from './pb_icon_stat_value/_icon_stat_value'
|
|
49
|
+
export IconValue from './pb_icon_value/_icon_value'
|
|
50
|
+
export Image from './pb_image/_image'
|
|
51
|
+
export LabelPill from './pb_label_pill/_label_pill'
|
|
52
|
+
export LabelValue from './pb_label_value/_label_value'
|
|
53
|
+
export Layout from './pb_layout/_layout'
|
|
54
|
+
export Legend from './pb_legend/_legend'
|
|
55
|
+
export LineGraph from './pb_line_graph/_line_graph'
|
|
56
|
+
export List from './pb_list/_list'
|
|
57
|
+
export ListItem from './pb_list/_list_item'
|
|
58
|
+
export LoadingInline from './pb_loading_inline/_loading_inline'
|
|
59
|
+
export Message from './pb_message/_message'
|
|
60
|
+
export MultipleUsers from './pb_multiple_users/_multiple_users'
|
|
61
|
+
export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked'
|
|
62
|
+
export Nav from './pb_nav/_nav'
|
|
63
|
+
export NavItem from './pb_nav/_item'
|
|
64
|
+
export OnlineStatus from './pb_online_status/_online_status'
|
|
65
|
+
export Passphrase from './pb_passphrase/_passphrase'
|
|
66
|
+
export PbReactPopover from './pb_popover/_popover'
|
|
67
|
+
export Person from './pb_person/_person'
|
|
68
|
+
export PersonContact from './pb_person_contact/_person_contact'
|
|
69
|
+
export Pill from './pb_pill/_pill'
|
|
70
|
+
export ProgressPills from './pb_progress_pills/_progress_pills'
|
|
71
|
+
export ProgressSimple from './pb_progress_simple/_progress_simple'
|
|
72
|
+
export ProgressStep from './pb_progress_step/_progress_step'
|
|
73
|
+
export ProgressStepItem from './pb_progress_step/_progress_step_item'
|
|
74
|
+
export Radio from './pb_radio/_radio'
|
|
75
|
+
export RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
|
|
76
|
+
export SectionSeparator from './pb_section_separator/_section_separator'
|
|
77
|
+
export Select from './pb_select/_select'
|
|
78
|
+
export SelectableCard from './pb_selectable_card/_selectable_card'
|
|
79
|
+
export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon'
|
|
80
|
+
export SelectableIcon from './pb_selectable_icon/_selectable_icon'
|
|
81
|
+
export SelectableList from './pb_selectable_list/_selectable_list'
|
|
82
|
+
export SelectableListItem from './pb_selectable_list/_item'
|
|
83
|
+
export Source from './pb_source/_source'
|
|
84
|
+
export StarRating from './pb_star_rating/_star_rating'
|
|
85
|
+
export StatChange from './pb_stat_change/_stat_change'
|
|
86
|
+
export StatValue from './pb_stat_value/_stat_value'
|
|
87
|
+
export Table from './pb_table/_table'
|
|
88
|
+
export TableRow from './pb_table/_table_row'
|
|
89
|
+
export TextInput from './pb_text_input/_text_input'
|
|
90
|
+
export Textarea from './pb_textarea/_textarea'
|
|
91
|
+
export Time from './pb_time/_time'
|
|
92
|
+
export TimeRangeInline from './pb_time_range_inline/_time_range_inline'
|
|
93
|
+
export TimeStacked from './pb_time_stacked/_time_stacked'
|
|
94
|
+
export Timeline from './pb_timeline/_timeline'
|
|
95
|
+
export Timestamp from './pb_timestamp/_timestamp'
|
|
96
|
+
export Title from './pb_title/_title'
|
|
97
|
+
export TitleCount from './pb_title_count/_title_count'
|
|
98
|
+
export TitleDetail from './pb_title_detail/_title_detail'
|
|
99
|
+
export Toggle from './pb_toggle/_toggle'
|
|
100
|
+
export Typeahead from './pb_typeahead/_typeahead'
|
|
101
|
+
export User from './pb_user/_user'
|
|
102
|
+
export UserBadge from './pb_user_badge/_user_badge'
|
|
103
|
+
export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked'
|
|
104
104
|
// ^^^ React Component JSX Imports from the React Kits ^^^
|
|
105
105
|
|
|
106
106
|
// Dashboard Settings
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
@import "../tokens/border_radius";
|
|
4
4
|
@import "../tokens/animation-curves";
|
|
5
5
|
@import "../tokens/typography";
|
|
6
|
+
@import "../tokens/titles";
|
|
6
7
|
@import "../pb_body/body_mixins";
|
|
7
|
-
@import "../pb_title/title_mixin";
|
|
8
8
|
@import "./subtle_mixin";
|
|
9
9
|
|
|
10
10
|
$selector: ".pb_nav_list";
|
|
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
|
|
|
134
134
|
border-bottom: 0;
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
-
|
|
137
|
+
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
//Image Wrapper
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
@import "../pb_body/body_mixins";
|
|
2
2
|
@import "./textarea_mixin";
|
|
3
|
-
@import "../pb_title/title_mixin";
|
|
4
3
|
@import "../tokens/spacing";
|
|
4
|
+
@import "../tokens/titles";
|
|
5
5
|
|
|
6
6
|
[class^=pb_textarea_kit] {
|
|
7
7
|
margin-bottom: $space_sm;
|
|
8
|
-
|
|
8
|
+
|
|
9
9
|
[class^=pb_caption_kit] {
|
|
10
10
|
margin-bottom: $space_xs;
|
|
11
11
|
display: block;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
.pb_text_area_kit:hover {
|
|
29
29
|
background-color: rgba($focus_input_light,$opacity_5);
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
|
|
32
32
|
&.resize_both > textarea {
|
|
33
33
|
resize: both;
|
|
34
34
|
overflow: auto;
|
|
@@ -4,7 +4,7 @@ import React from 'react'
|
|
|
4
4
|
import Select from 'react-select'
|
|
5
5
|
import AsyncSelect from 'react-select/async'
|
|
6
6
|
import CreateableSelect from 'react-select/creatable'
|
|
7
|
-
import { get } from 'lodash'
|
|
7
|
+
import { get, isString, uniqueId } from 'lodash'
|
|
8
8
|
import { globalProps } from '../utilities/globalProps.js'
|
|
9
9
|
import classnames from 'classnames'
|
|
10
10
|
|
|
@@ -26,23 +26,24 @@ import { noop } from '../utilities/props'
|
|
|
26
26
|
* @prop {string} label - the text for the optional typeahead input label
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
|
-
type
|
|
29
|
+
type TypeaheadProps = {
|
|
30
|
+
id?: string,
|
|
30
31
|
async?: boolean,
|
|
31
32
|
createable?: boolean,
|
|
32
33
|
dark?: boolean,
|
|
33
34
|
label?: string,
|
|
34
|
-
loadOptions?:
|
|
35
|
-
getOptionLabel?: () => any,
|
|
36
|
-
getOptionValue?: () => any,
|
|
35
|
+
loadOptions?: string,
|
|
36
|
+
getOptionLabel?: string | (() => any),
|
|
37
|
+
getOptionValue?: string | (() => any),
|
|
37
38
|
name?: string,
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
/**
|
|
41
42
|
* @constant {React.ReactComponent} Typeahead
|
|
42
|
-
* @param {
|
|
43
|
+
* @param {TypeaheadProps} props - props as described at https://react-select.com/props
|
|
43
44
|
*/
|
|
44
45
|
|
|
45
|
-
const Typeahead = (props:
|
|
46
|
+
const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
|
|
46
47
|
const selectProps = {
|
|
47
48
|
cacheOptions: true,
|
|
48
49
|
components: {
|
|
@@ -56,8 +57,11 @@ const Typeahead = (props: Props) => {
|
|
|
56
57
|
Placeholder,
|
|
57
58
|
ValueContainer,
|
|
58
59
|
},
|
|
60
|
+
loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
|
|
61
|
+
getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
|
|
62
|
+
getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
|
|
59
63
|
defaultOptions: true,
|
|
60
|
-
id:
|
|
64
|
+
id: id || uniqueId(),
|
|
61
65
|
inline: false,
|
|
62
66
|
isClearable: true,
|
|
63
67
|
isSearchable: true,
|
|
@@ -68,14 +72,9 @@ const Typeahead = (props: Props) => {
|
|
|
68
72
|
...props,
|
|
69
73
|
}
|
|
70
74
|
|
|
71
|
-
|
|
72
|
-
if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
|
|
73
|
-
if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
|
|
75
|
+
const Tag = createable ? CreateableSelect : (async ? AsyncSelect : Select)
|
|
74
76
|
|
|
75
|
-
|
|
76
|
-
if (props.createable) Tag = CreateableSelect
|
|
77
|
-
|
|
78
|
-
const handleOnChange = (data, { action, option, removedValue }) => {
|
|
77
|
+
const handleOnChange = (_data, { action, option, removedValue }) => {
|
|
79
78
|
if (action === 'select-option') {
|
|
80
79
|
if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
|
|
81
80
|
const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
|
|
2
|
+
import WebpackerReact from 'webpacker-react'
|
|
3
|
+
import ujs from 'webpacker-react/ujs'
|
|
4
|
+
|
|
5
|
+
// KIT EXAMPLES
|
|
6
|
+
import 'pb_form/pb_form_validation'
|
|
7
|
+
import * as Avatar from 'pb_avatar/docs'
|
|
8
|
+
import * as AvatarActionButton from 'pb_avatar_action_button/docs'
|
|
9
|
+
import * as Background from 'pb_background/docs'
|
|
10
|
+
import * as Badge from 'pb_badge/docs'
|
|
11
|
+
import * as BarGraphDocs from 'pb_bar_graph/docs'
|
|
12
|
+
import * as Body from 'pb_body/docs'
|
|
13
|
+
import * as BreadCrumbs from 'pb_bread_crumbs/docs'
|
|
14
|
+
import * as Button from 'pb_button/docs'
|
|
15
|
+
import * as ButtonToolbar from 'pb_button_toolbar/docs'
|
|
16
|
+
import * as Caption from 'pb_caption/docs'
|
|
17
|
+
import * as Card from 'pb_card/docs'
|
|
18
|
+
import * as Checkbox from 'pb_checkbox/docs'
|
|
19
|
+
import * as CircleChart from 'pb_circle_chart/docs'
|
|
20
|
+
import * as CircleIconButton from 'pb_circle_icon_button/docs'
|
|
21
|
+
import * as Collapsible from 'pb_collapsible/docs'
|
|
22
|
+
import * as Contact from 'pb_contact/docs'
|
|
23
|
+
import * as Currency from 'pb_currency/docs'
|
|
24
|
+
import * as DashboardValue from 'pb_dashboard_value/docs'
|
|
25
|
+
import * as Date from 'pb_date/docs'
|
|
26
|
+
import * as DatePicker from 'pb_date_picker/docs'
|
|
27
|
+
import * as DateRangeInline from 'pb_date_range_inline/docs'
|
|
28
|
+
import * as DateRangeStacked from 'pb_date_range_stacked/docs'
|
|
29
|
+
import * as DateStacked from 'pb_date_stacked/docs'
|
|
30
|
+
import * as DateTime from 'pb_date_time/docs'
|
|
31
|
+
import * as DateTimeStacked from 'pb_date_time_stacked/docs'
|
|
32
|
+
import * as DateYearStacked from 'pb_date_year_stacked/docs'
|
|
33
|
+
import * as Dialog from 'pb_dialog/docs'
|
|
34
|
+
import * as DistributionBarDocs from 'pb_distribution_bar/docs'
|
|
35
|
+
import * as FileUpload from 'pb_file_upload/docs'
|
|
36
|
+
import * as Filter from 'pb_filter/docs'
|
|
37
|
+
import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
|
|
38
|
+
import * as Flex from 'pb_flex/docs'
|
|
39
|
+
import * as FormGroup from 'pb_form_group/docs'
|
|
40
|
+
import * as FormPill from 'pb_form_pill/docs'
|
|
41
|
+
import * as Gauge from 'pb_gauge/docs'
|
|
42
|
+
import * as Hashtag from 'pb_hashtag/docs'
|
|
43
|
+
import * as Highlight from 'pb_highlight/docs'
|
|
44
|
+
import * as HomeAddressStreet from 'pb_home_address_street/docs'
|
|
45
|
+
import * as Icon from 'pb_icon/docs'
|
|
46
|
+
import * as IconCircle from 'pb_icon_circle/docs'
|
|
47
|
+
import * as IconStatValue from 'pb_icon_stat_value/docs'
|
|
48
|
+
import * as IconValue from 'pb_icon_value/docs'
|
|
49
|
+
import * as Image from 'pb_image/docs'
|
|
50
|
+
import * as LabelPill from 'pb_label_pill/docs'
|
|
51
|
+
import * as LabelValue from 'pb_label_value/docs'
|
|
52
|
+
import * as Layout from 'pb_layout/docs'
|
|
53
|
+
import * as LegendDocs from 'pb_legend/docs'
|
|
54
|
+
import * as LineGraphDocs from 'pb_line_graph/docs'
|
|
55
|
+
import * as List from 'pb_list/docs'
|
|
56
|
+
import * as LoadingInline from 'pb_loading_inline/docs'
|
|
57
|
+
import * as Message from 'pb_message/docs'
|
|
58
|
+
import * as MultipleUsers from 'pb_multiple_users/docs'
|
|
59
|
+
import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
|
|
60
|
+
import * as Nav from 'pb_nav/docs'
|
|
61
|
+
import * as OnlineStatus from 'pb_online_status/docs'
|
|
62
|
+
import * as Passphrase from 'pb_passphrase/docs'
|
|
63
|
+
import * as PbReactPopover from 'pb_popover/docs'
|
|
64
|
+
import * as Person from 'pb_person/docs'
|
|
65
|
+
import * as PersonContact from 'pb_person_contact/docs'
|
|
66
|
+
import * as Pill from 'pb_pill/docs'
|
|
67
|
+
import * as ProgressPills from 'pb_progress_pills/docs'
|
|
68
|
+
import * as ProgressSimple from 'pb_progress_simple/docs'
|
|
69
|
+
import * as ProgressStep from 'pb_progress_step/docs'
|
|
70
|
+
import * as Radio from 'pb_radio/docs'
|
|
71
|
+
import * as RichTextEditor from 'pb_rich_text_editor/docs'
|
|
72
|
+
import * as SectionSeparator from 'pb_section_separator/docs'
|
|
73
|
+
import * as Select from 'pb_select/docs'
|
|
74
|
+
import * as SelectableCard from 'pb_selectable_card/docs'
|
|
75
|
+
import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
|
|
76
|
+
import * as SelectableIcon from 'pb_selectable_icon/docs'
|
|
77
|
+
import * as SelectableList from 'pb_selectable_list/docs'
|
|
78
|
+
import * as Source from 'pb_source/docs'
|
|
79
|
+
import * as StarRating from 'pb_star_rating/docs'
|
|
80
|
+
import * as StatChange from 'pb_stat_change/docs'
|
|
81
|
+
import * as StatValue from 'pb_stat_value/docs'
|
|
82
|
+
import * as Table from 'pb_table/docs'
|
|
83
|
+
import * as TextInput from 'pb_text_input/docs'
|
|
84
|
+
import * as Textarea from 'pb_textarea/docs'
|
|
85
|
+
import * as Time from 'pb_time/docs'
|
|
86
|
+
import * as TimeRangeInline from 'pb_time_range_inline/docs'
|
|
87
|
+
import * as TimeStacked from 'pb_time_stacked/docs'
|
|
88
|
+
import * as Timeline from 'pb_timeline/docs'
|
|
89
|
+
import * as Timestamp from 'pb_timestamp/docs'
|
|
90
|
+
import * as Title from 'pb_title/docs'
|
|
91
|
+
import * as TitleCount from 'pb_title_count/docs'
|
|
92
|
+
import * as TitleDetail from 'pb_title_detail/docs'
|
|
93
|
+
import * as Toggle from 'pb_toggle/docs'
|
|
94
|
+
import * as Typeahead from 'pb_typeahead/docs'
|
|
95
|
+
import * as User from 'pb_user/docs'
|
|
96
|
+
import * as UserBadge from 'pb_user_badge/docs'
|
|
97
|
+
import * as WeekdayStacked from 'pb_weekday_stacked/docs'
|
|
98
|
+
|
|
99
|
+
WebpackerReact.registerComponents({
|
|
100
|
+
...Avatar,
|
|
101
|
+
...AvatarActionButton,
|
|
102
|
+
...Background,
|
|
103
|
+
...Badge,
|
|
104
|
+
...BarGraphDocs,
|
|
105
|
+
...Body,
|
|
106
|
+
...BreadCrumbs,
|
|
107
|
+
...Button,
|
|
108
|
+
...ButtonToolbar,
|
|
109
|
+
...Caption,
|
|
110
|
+
...Card,
|
|
111
|
+
...Checkbox,
|
|
112
|
+
...CircleChart,
|
|
113
|
+
...CircleIconButton,
|
|
114
|
+
...Collapsible,
|
|
115
|
+
...Contact,
|
|
116
|
+
...Currency,
|
|
117
|
+
...DashboardValue,
|
|
118
|
+
...Date,
|
|
119
|
+
...DatePicker,
|
|
120
|
+
...DateRangeInline,
|
|
121
|
+
...DateRangeStacked,
|
|
122
|
+
...DateStacked,
|
|
123
|
+
...DateTime,
|
|
124
|
+
...DateTimeStacked,
|
|
125
|
+
...DateYearStacked,
|
|
126
|
+
...Dialog,
|
|
127
|
+
...DistributionBarDocs,
|
|
128
|
+
...FileUpload,
|
|
129
|
+
...Filter,
|
|
130
|
+
...FixedConfirmationToast,
|
|
131
|
+
...Flex,
|
|
132
|
+
...FormGroup,
|
|
133
|
+
...FormPill,
|
|
134
|
+
...Gauge,
|
|
135
|
+
...Hashtag,
|
|
136
|
+
...Highlight,
|
|
137
|
+
...HomeAddressStreet,
|
|
138
|
+
...Icon,
|
|
139
|
+
...IconCircle,
|
|
140
|
+
...IconStatValue,
|
|
141
|
+
...IconValue,
|
|
142
|
+
...Image,
|
|
143
|
+
...LabelPill,
|
|
144
|
+
...LabelValue,
|
|
145
|
+
...Layout,
|
|
146
|
+
...LegendDocs,
|
|
147
|
+
...LineGraphDocs,
|
|
148
|
+
...List,
|
|
149
|
+
...LoadingInline,
|
|
150
|
+
...Message,
|
|
151
|
+
...MultipleUsers,
|
|
152
|
+
...MultipleUsersStacked,
|
|
153
|
+
...Nav,
|
|
154
|
+
...OnlineStatus,
|
|
155
|
+
...Passphrase,
|
|
156
|
+
...PbReactPopover,
|
|
157
|
+
...Person,
|
|
158
|
+
...PersonContact,
|
|
159
|
+
...Pill,
|
|
160
|
+
...ProgressPills,
|
|
161
|
+
...ProgressSimple,
|
|
162
|
+
...ProgressStep,
|
|
163
|
+
...Radio,
|
|
164
|
+
...RichTextEditor,
|
|
165
|
+
...SectionSeparator,
|
|
166
|
+
...Select,
|
|
167
|
+
...SelectableCard,
|
|
168
|
+
...SelectableCardIcon,
|
|
169
|
+
...SelectableIcon,
|
|
170
|
+
...SelectableList,
|
|
171
|
+
...Source,
|
|
172
|
+
...StarRating,
|
|
173
|
+
...StatChange,
|
|
174
|
+
...StatValue,
|
|
175
|
+
...Table,
|
|
176
|
+
...TextInput,
|
|
177
|
+
...Textarea,
|
|
178
|
+
...Time,
|
|
179
|
+
...TimeRangeInline,
|
|
180
|
+
...TimeStacked,
|
|
181
|
+
...Timeline,
|
|
182
|
+
...Timestamp,
|
|
183
|
+
...Title,
|
|
184
|
+
...TitleCount,
|
|
185
|
+
...TitleDetail,
|
|
186
|
+
...Toggle,
|
|
187
|
+
...Typeahead,
|
|
188
|
+
...User,
|
|
189
|
+
...UserBadge,
|
|
190
|
+
...WeekdayStacked,
|
|
191
|
+
})
|
|
192
|
+
ujs.setup(
|
|
193
|
+
() => WebpackerReact.mountComponents(),
|
|
194
|
+
() => WebpackerReact.unmountComponents()
|
|
195
|
+
)
|