playbook_ui 9.14.1 → 9.15.0.pre.decouple.website1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
)
|