playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -4
  3. data/app/pb_kits/playbook/_playbook.scss +1 -0
  4. data/app/pb_kits/playbook/data/menu.yml +1 -0
  5. data/app/pb_kits/playbook/index.js +3 -0
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +1 -0
  7. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +3 -7
  9. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +3 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +2 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +2 -0
  12. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +2 -1
  13. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  14. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  15. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  16. data/app/pb_kits/playbook/pb_date/date.rb +10 -18
  17. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +17 -2
  18. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  19. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -5
  20. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  21. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +39 -0
  22. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +149 -0
  23. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +33 -0
  24. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +85 -0
  25. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +165 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md +1 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb +4 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx +13 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb +37 -0
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx +37 -0
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +1 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +32 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +9 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +17 -0
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md +1 -0
  53. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  54. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  55. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  56. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  57. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb +7 -0
  58. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx +16 -0
  59. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md +1 -0
  60. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +7 -0
  61. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +35 -0
  62. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +14 -0
  63. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +33 -0
  64. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss +53 -0
  65. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +785 -0
  66. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +108 -0
  67. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +44 -0
  68. data/app/pb_kits/playbook/pb_filter/_filter.scss +1 -1
  69. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  70. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -0
  72. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -0
  73. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  74. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +20 -0
  75. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  76. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +0 -1
  77. data/app/pb_kits/playbook/pb_table/table.rb +3 -3
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +1 -0
  79. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +21 -17
  80. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -8
  81. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
  82. data/app/pb_kits/playbook/pb_time/_time.html.erb +23 -17
  83. data/app/pb_kits/playbook/pb_time/_time.jsx +20 -11
  84. data/app/pb_kits/playbook/pb_time/_time.scss +16 -8
  85. data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb +18 -0
  86. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +3 -3
  87. data/app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb +70 -0
  88. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +1 -6
  89. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +47 -3
  90. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +33 -4
  91. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb +11 -0
  92. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +19 -0
  93. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +0 -7
  95. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +42 -0
  96. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +12 -14
  97. data/app/pb_kits/playbook/pb_time/docs/example.yml +7 -2
  98. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_time/time.rb +14 -2
  100. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +60 -0
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +20 -3
  102. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +30 -0
  103. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx +13 -0
  104. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx +12 -0
  105. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +51 -0
  106. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +34 -0
  107. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +13 -0
  108. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx +13 -0
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +22 -0
  110. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +29 -0
  111. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +84 -0
  112. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
  113. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +101 -0
  114. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
  115. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +8 -2
  116. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +4 -0
  117. data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
  118. data/app/pb_kits/playbook/vendor.js +6 -0
  119. data/lib/playbook/version.rb +1 -1
  120. metadata +71 -8
  121. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  122. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  123. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  124. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  125. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  126. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ picker_id: "date-picker-read-only"
4
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../..'
3
+
4
+ const DatePickerAllowInput = () => (
5
+ <div>
6
+ <DatePicker
7
+ allowInput
8
+ pickerId="date-picker-read-only"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DatePickerAllowInput
@@ -0,0 +1 @@
1
+ By default the date picker input can only be modified by picking a date on the calendar. This prop allows your users to manually type in the date.
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ dark: true,
3
+ picker_id: "date-picker-dark"
4
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerDark = () => (
5
+ <div>
6
+ <DatePicker
7
+ dark
8
+ pickerId="date-picker-dark"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DatePickerDark
@@ -0,0 +1 @@
1
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerDefault = () => (
5
+ <div>
6
+ <DatePicker
7
+ pickerId="date-picker-default"
8
+ />
9
+ </div>
10
+ )
11
+
12
+ export default DatePickerDefault
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ default_date: "07/31/2020",
3
+ label: "Default Date String",
4
+ picker_id: "date-picker-default-date1"
5
+ }) %>
6
+
7
+ <%= pb_rails("date_picker", props: {
8
+ default_date: (Date.today + 2).httpdate,
9
+ label: "Default Date Dynamic",
10
+ picker_id: "date-picker-default-date2"
11
+ }) %>
12
+
13
+ <%= pb_rails("date_picker", props: {
14
+ default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
15
+ label: "Default Date Range",
16
+ mode: "range",
17
+ picker_id: "date-picker-default-date3"
18
+ }) %>
19
+
20
+ <%= pb_rails("date_picker", props: {
21
+ default_date: "blank",
22
+ label: "Blank",
23
+ picker_id: "date-picker-default-date4"
24
+ }) %>
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerDefaultDate = () => (
5
+ <div>
6
+ <DatePicker
7
+ defaultDate="07/31/2020"
8
+ label="Default Date String"
9
+ pickerId="date-picker-default-date1"
10
+ />
11
+ <DatePicker
12
+ defaultDate={new Date().fp_incr(1)}
13
+ label="Default Date Dynamic"
14
+ pickerId="date-picker-default-date2"
15
+ />
16
+ <DatePicker
17
+ defaultDate={[new Date(), new Date().fp_incr(6)]}
18
+ label="Default Date Range"
19
+ mode="range"
20
+ pickerId="date-picker-default-date3"
21
+ />
22
+ <DatePicker
23
+ defaultDate="blank"
24
+ label="Blank"
25
+ pickerId="date-picker-default-date4"
26
+ />
27
+ </div>
28
+ )
29
+
30
+ export default DatePickerDefaultDate
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ disable_date: [(Date.today + 1).httpdate],
3
+ label: "Disable Single Date",
4
+ picker_id: "single-disabled-date"
5
+ }) %>
6
+
7
+ <%= pb_rails("date_picker", props: {
8
+ disable_date: [(Date.today + 1).httpdate, (Date.today + 3).httpdate],
9
+ label: "Disable Multiple Dates",
10
+ picker_id: "multiple-disabled-dates"
11
+ }) %>
12
+
13
+ <%= pb_rails("date_picker", props: {
14
+ disable_range: [
15
+ {
16
+ from: (Date.today + 1).httpdate,
17
+ to: (Date.today + 7).httpdate,
18
+ },
19
+ ],
20
+ label: "Disable Single Range",
21
+ picker_id: "single-date-range"
22
+ }) %>
23
+
24
+ <%= pb_rails("date_picker", props: {
25
+ disable_range: [
26
+ {
27
+ from: (Date.today + 1).httpdate,
28
+ to: (Date.today + 3).httpdate,
29
+ },
30
+ {
31
+ from: (Date.today + 7).httpdate,
32
+ to: (Date.today + 14).httpdate,
33
+ },
34
+ ],
35
+ label: "Disable Multiple Ranges",
36
+ picker_id: "multiple-date-ranges"
37
+ }) %>
38
+
39
+ <%= pb_rails("date_picker", props: {
40
+ disable_weekdays: ['Sunday', 'Saturday'],
41
+ label: "Disable Specific Weekdays",
42
+ picker_id: "disabled-weekdays"
43
+ }) %>
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerDisabled = () => (
5
+ <div>
6
+ <DatePicker
7
+ disableDate={[new Date().fp_incr(1)]}
8
+ label="Disable Single Date"
9
+ pickerId="single-disabled-date"
10
+ />
11
+ <DatePicker
12
+ disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
13
+ label="Disable Multiple Dates"
14
+ pickerId="multiple-disabled-dates"
15
+ />
16
+ <DatePicker
17
+ disableRange={[
18
+ {
19
+ from: new Date().fp_incr(1),
20
+ to: new Date().fp_incr(7),
21
+ },
22
+ ]}
23
+ label="Disable Single Range"
24
+ pickerId="single-date-range"
25
+ />
26
+ <DatePicker
27
+ disableRange={[
28
+ {
29
+ from: new Date().fp_incr(1),
30
+ to: new Date().fp_incr(3),
31
+ },
32
+ {
33
+ from: new Date().fp_incr(7),
34
+ to: new Date().fp_incr(14),
35
+ },
36
+ ]}
37
+ label="Disable Multiple Ranges"
38
+ pickerId="multiple-date-ranges"
39
+ />
40
+ <DatePicker
41
+ disableWeekdays={['Sunday', 'Saturday']}
42
+ label="Disable Specific Weekdays"
43
+ pickerId="disabled-weekdays"
44
+ />
45
+ </div>
46
+ )
47
+
48
+ export default DatePickerDisabled
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ error: "Invalid date. Please pick a valid date.",
3
+ picker_id: "date-picker-error"
4
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerError = () => (
5
+ <div>
6
+ <DatePicker
7
+ error="Invalid date. Please pick a valid date."
8
+ pickerId="date-picker-error"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DatePickerError
@@ -0,0 +1,19 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ format: "m-d-Y",
3
+ picker_id: "date-picker-format1"
4
+ }) %>
5
+
6
+ <%= pb_rails("date_picker", props: {
7
+ format: "m/d/y",
8
+ picker_id: "date-picker-format2"
9
+ }) %>
10
+
11
+ <%= pb_rails("date_picker", props: {
12
+ format: "n-j-y",
13
+ picker_id: "date-picker-format3"
14
+ }) %>
15
+
16
+ <%= pb_rails("date_picker", props: {
17
+ format: "Y-d-m",
18
+ picker_id: "date-picker-format4"
19
+ }) %>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerFormat = () => (
5
+ <div>
6
+ <DatePicker
7
+ format="m-d-Y"
8
+ pickerId="date-picker-format1"
9
+ />
10
+ <DatePicker
11
+ format="m/d/y"
12
+ pickerId="date-picker-format2"
13
+ />
14
+ <DatePicker
15
+ format="n-j-y"
16
+ pickerId="date-picker-format3"
17
+ />
18
+ <DatePicker
19
+ format="Y-d-m"
20
+ pickerId="date-picker-format4"
21
+ />
22
+ </div>
23
+ )
24
+
25
+ export default DatePickerFormat
@@ -0,0 +1 @@
1
+ A full list of formatting tokens, i.e. `"m/d/Y"` can be found [here](https://flatpickr.js.org/formatting/).
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ hide_icon: true,
3
+ picker_id: "date-picker-hide-icon"
4
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerHideIcon = () => (
5
+ <div>
6
+ <DatePicker
7
+ hideIcon
8
+ pickerId="date-picker-hide-icon"
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DatePickerHideIcon
@@ -0,0 +1,37 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ label: "onChange",
3
+ picker_id: "date-picker-hooks-onchange"
4
+ }) %>
5
+
6
+ <%= javascript_tag do %>
7
+ window.addEventListener("DOMContentLoaded", () => {
8
+ <%# Access flatpickr instance with picker id and assign it a variable %>
9
+ const fp = document.querySelector("#date-picker-hooks-onchange")._flatpickr
10
+
11
+ <%# Define Hook %>
12
+ const changeHook = () => {
13
+ alert('date changed')
14
+ }
15
+ <%# Push one or more hooks to onChange config array %>
16
+ fp.config.onChange.push(changeHook)
17
+ })
18
+ <% end %>
19
+
20
+ <%= pb_rails("date_picker", props: {
21
+ label: "onOpen",
22
+ picker_id: "date-picker-hooks-onopen"
23
+ }) %>
24
+
25
+ <%= javascript_tag do %>
26
+ window.addEventListener("DOMContentLoaded", () => {
27
+ <%# Access flatpickr instance with picker id and assign it a variable %>
28
+ const fp = document.querySelector("#date-picker-hooks-onopen")._flatpickr
29
+
30
+ <%# Define Hook %>
31
+ const openHook = () => {
32
+ alert('calendar opened')
33
+ }
34
+ <%# Push one or more hooks to onOpen config array %>
35
+ fp.config.onOpen.push(openHook)
36
+ })
37
+ <% end %>
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerHooks = () => {
5
+ // Define hooks
6
+ const changeHook = () => {
7
+ alert('date changed')
8
+ }
9
+ const openHook = () => {
10
+ alert('calendar opened')
11
+ }
12
+
13
+ // Access flatpickr instances with picker ids and assign them variables
14
+ window.addEventListener('DOMContentLoaded', () => {
15
+ const fpChange = document.querySelector('#date-picker-hooks-onchange')._flatpickr
16
+ const fpOpen = document.querySelector('#date-picker-hooks-onopen')._flatpickr
17
+
18
+ // Push one or more hooks to flatpickr instance's Event config arrays
19
+ fpChange.config.onChange.push(changeHook)
20
+ fpOpen.config.onOpen.push(openHook)
21
+ })
22
+
23
+ return (
24
+ <div>
25
+ <DatePicker
26
+ label="onChange"
27
+ pickerId="date-picker-hooks-onchange"
28
+ />
29
+ <DatePicker
30
+ label="onOpen"
31
+ pickerId="date-picker-hooks-onopen"
32
+ />
33
+ </div>
34
+ )
35
+ }
36
+
37
+ export default DatePickerHooks
@@ -0,0 +1 @@
1
+ You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
@@ -0,0 +1,26 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ input_aria: { label: "input-field" },
3
+ input_data: { key: "value", key2: "value2" },
4
+ name: "date-field",
5
+ picker_id: "date-picker-input1",
6
+ type: "date"
7
+ }) %>
8
+
9
+ <%= pb_rails("date_picker", props: {
10
+ default_date: "blank",
11
+ picker_id: "date-picker-input2",
12
+ placeholder: "Select Date",
13
+ }) %>
14
+
15
+ <%= pb_rails("date_picker", props: {
16
+ default_date: "blank",
17
+ disable_input: true,
18
+ picker_id: "date-picker-input3",
19
+ placeholder: "Disabled Input"
20
+ }) %>
21
+
22
+ <%= pb_rails("date_picker", props: {
23
+ dark: true,
24
+ hide_label: true,
25
+ picker_id: "date-picker-input4"
26
+ }) %>
@@ -0,0 +1,32 @@
1
+ import React from 'react'
2
+ import { DatePicker } from '../../'
3
+
4
+ const DatePickerInput = () => (
5
+ <div>
6
+ <DatePicker
7
+ inputAria={{ label: 'input-field' }}
8
+ inputData={{ key: 'value', key2: 'value2' }}
9
+ name="date-field"
10
+ pickerId="date-picker-input1"
11
+ type="date"
12
+ />
13
+ <DatePicker
14
+ defaultDate="blank"
15
+ pickerId="date-picker-input2"
16
+ placeholder="Select Date"
17
+ />
18
+ <DatePicker
19
+ defaultDate="blank"
20
+ disableInput
21
+ pickerId="date-picker-input3"
22
+ placeholder="Disabled Input"
23
+ />
24
+ <DatePicker
25
+ dark
26
+ hideLabel
27
+ pickerId="date-picker-input4"
28
+ />
29
+ </div>
30
+ )
31
+
32
+ export default DatePickerInput
@@ -0,0 +1,3 @@
1
+ The date picker is built with the text input kit. Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions. The `value` attribute is automatically handled and bound to whatever date string is contained by the input field. You cannot pass a custom value prop. `id` props passed to the date picker kit will be assigned to it's parent/wrapper div. The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
2
+
3
+ You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit. If you use `data` or `aria` props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.