playbook_ui 5.5.1.pre.alpha1 → 6.0.0
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 +0 -3
- data/app/pb_kits/playbook/data/menu.yml +0 -3
- data/app/pb_kits/playbook/index.js +0 -3
- data/app/pb_kits/playbook/packs/examples.js +0 -6
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +21 -11
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +10 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +14 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +26 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +20 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +22 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -3
- data/app/pb_kits/playbook/pb_form/form_builder.rb +0 -1
- data/app/pb_kits/playbook/pb_image/_image.html.erb +2 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +31 -8
- data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +3 -3
- data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +20 -2
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +109 -5
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +0 -10
- data/app/pb_kits/playbook/pb_label_value/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb +39 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +50 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +43 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +54 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb +72 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +92 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +80 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +101 -0
- data/app/pb_kits/playbook/pb_label_value/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_label_value/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.rb +19 -2
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +5 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +12 -1
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +9 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +26 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +8 -1
- data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
- data/app/pb_kits/playbook/pb_title/title.rb +2 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +49 -4
- data/app/pb_kits/playbook/vendor.js +0 -4
- data/lib/playbook/version.rb +1 -1
- metadata +19 -49
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +0 -36
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +0 -98
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -59
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -38
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +0 -91
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -24
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -30
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +0 -43
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +0 -48
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +0 -19
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +0 -25
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +0 -14
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +0 -22
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -23
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -8
- data/app/pb_kits/playbook/pb_date_picker/index.js +0 -11
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -15
- data/app/pb_kits/playbook/pb_installer/_installer.html.erb +0 -16
- data/app/pb_kits/playbook/pb_installer/_installer.jsx +0 -54
- data/app/pb_kits/playbook/pb_installer/_installer.scss +0 -7
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +0 -8
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +0 -16
- data/app/pb_kits/playbook/pb_installer/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_installer/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_installer/installer.rb +0 -18
- data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +0 -25
- data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +0 -20
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -111
- data/app/pb_kits/playbook/pb_logistic/_logistic.scss +0 -7
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +0 -27
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +0 -39
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +0 -24
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +0 -35
- data/app/pb_kits/playbook/pb_logistic/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_logistic/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_logistic/logistic.rb +0 -31
@@ -5,10 +5,6 @@ window.pbChart = pbChart
|
|
5
5
|
// Forms
|
6
6
|
import './pb_form/pb_form_validation'
|
7
7
|
|
8
|
-
// Date Picker
|
9
|
-
import datePickerHelper from './pb_date_picker/date_picker_helper.js'
|
10
|
-
window.datePickerHelper = datePickerHelper
|
11
|
-
|
12
8
|
// Lazy image loading
|
13
9
|
import 'lazysizes'
|
14
10
|
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 6.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -591,8 +591,11 @@ files:
|
|
591
591
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
|
592
592
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
593
593
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
|
594
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
|
595
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
594
596
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
|
595
597
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
|
598
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
596
599
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
597
600
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
|
598
601
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
@@ -662,30 +665,6 @@ files:
|
|
662
665
|
- app/pb_kits/playbook/pb_date/docs/_description.md
|
663
666
|
- app/pb_kits/playbook/pb_date/docs/example.yml
|
664
667
|
- app/pb_kits/playbook/pb_date/docs/index.js
|
665
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
|
666
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
|
667
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
|
668
|
-
- app/pb_kits/playbook/pb_date_picker/date_picker.rb
|
669
|
-
- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
|
670
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
671
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
672
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
673
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
674
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
|
675
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
|
676
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
|
677
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
|
678
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
|
679
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
|
680
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
|
681
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
|
682
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
|
683
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
|
684
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
|
685
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
|
686
|
-
- app/pb_kits/playbook/pb_date_picker/docs/example.yml
|
687
|
-
- app/pb_kits/playbook/pb_date_picker/docs/index.js
|
688
|
-
- app/pb_kits/playbook/pb_date_picker/index.js
|
689
668
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
|
690
669
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
|
691
670
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -851,7 +830,6 @@ files:
|
|
851
830
|
- app/pb_kits/playbook/pb_form/form_builder.rb
|
852
831
|
- app/pb_kits/playbook/pb_form/form_builder/action_area.rb
|
853
832
|
- app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
|
854
|
-
- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
|
855
833
|
- app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
|
856
834
|
- app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
|
857
835
|
- app/pb_kits/playbook/pb_form/form_builder/select_field.rb
|
@@ -969,14 +947,6 @@ files:
|
|
969
947
|
- app/pb_kits/playbook/pb_image/docs/example.yml
|
970
948
|
- app/pb_kits/playbook/pb_image/docs/index.js
|
971
949
|
- app/pb_kits/playbook/pb_image/image.rb
|
972
|
-
- app/pb_kits/playbook/pb_installer/_installer.html.erb
|
973
|
-
- app/pb_kits/playbook/pb_installer/_installer.jsx
|
974
|
-
- app/pb_kits/playbook/pb_installer/_installer.scss
|
975
|
-
- app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb
|
976
|
-
- app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx
|
977
|
-
- app/pb_kits/playbook/pb_installer/docs/example.yml
|
978
|
-
- app/pb_kits/playbook/pb_installer/docs/index.js
|
979
|
-
- app/pb_kits/playbook/pb_installer/installer.rb
|
980
950
|
- app/pb_kits/playbook/pb_kit/base.rb
|
981
951
|
- app/pb_kits/playbook/pb_kit/dateTime.js
|
982
952
|
- app/pb_kits/playbook/pb_kit/pb_date_time.rb
|
@@ -1001,8 +971,16 @@ files:
|
|
1001
971
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
|
1002
972
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx
|
1003
973
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md
|
974
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb
|
975
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx
|
976
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md
|
977
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb
|
978
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx
|
979
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb
|
980
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx
|
981
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb
|
982
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx
|
1004
983
|
- app/pb_kits/playbook/pb_label_value/docs/example.yml
|
1005
|
-
- app/pb_kits/playbook/pb_label_value/docs/index.html.erb
|
1006
984
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
1007
985
|
- app/pb_kits/playbook/pb_label_value/label_value.rb
|
1008
986
|
- app/pb_kits/playbook/pb_layout/_body.html.erb
|
@@ -1119,16 +1097,6 @@ files:
|
|
1119
1097
|
- app/pb_kits/playbook/pb_loading_inline/docs/example.yml
|
1120
1098
|
- app/pb_kits/playbook/pb_loading_inline/docs/index.js
|
1121
1099
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
1122
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.html.erb
|
1123
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1124
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.scss
|
1125
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb
|
1126
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx
|
1127
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb
|
1128
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx
|
1129
|
-
- app/pb_kits/playbook/pb_logistic/docs/example.yml
|
1130
|
-
- app/pb_kits/playbook/pb_logistic/docs/index.js
|
1131
|
-
- app/pb_kits/playbook/pb_logistic/logistic.rb
|
1132
1100
|
- app/pb_kits/playbook/pb_message/_message.html.erb
|
1133
1101
|
- app/pb_kits/playbook/pb_message/_message.jsx
|
1134
1102
|
- app/pb_kits/playbook/pb_message/_message.scss
|
@@ -1282,6 +1250,9 @@ files:
|
|
1282
1250
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
|
1283
1251
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
|
1284
1252
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx
|
1253
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb
|
1254
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx
|
1255
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md
|
1285
1256
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.html.erb
|
1286
1257
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx
|
1287
1258
|
- app/pb_kits/playbook/pb_progress_simple/docs/example.yml
|
@@ -1841,12 +1812,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
1841
1812
|
version: '0'
|
1842
1813
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
1843
1814
|
requirements:
|
1844
|
-
- - "
|
1815
|
+
- - ">="
|
1845
1816
|
- !ruby/object:Gem::Version
|
1846
|
-
version:
|
1817
|
+
version: '0'
|
1847
1818
|
requirements: []
|
1848
|
-
|
1849
|
-
rubygems_version: 2.7.3
|
1819
|
+
rubygems_version: 3.1.4
|
1850
1820
|
signing_key:
|
1851
1821
|
specification_version: 4
|
1852
1822
|
summary: Playbook Design System
|
@@ -1,36 +0,0 @@
|
|
1
|
-
<%= content_tag(:div,
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname + " " + object.error_class,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id) do %>
|
6
|
-
<%= pb_rails("caption", props: { text: object.label }) %>
|
7
|
-
<div class="input_wrapper">
|
8
|
-
<input
|
9
|
-
autocomplete="off"
|
10
|
-
id="<%= object.picker_id %>"
|
11
|
-
/>
|
12
|
-
<% if object.error %>
|
13
|
-
<%= pb_rails("body", props: {
|
14
|
-
status: "negative",
|
15
|
-
text: object.error
|
16
|
-
}) %>
|
17
|
-
<% end %>
|
18
|
-
</div>
|
19
|
-
|
20
|
-
<%= javascript_tag do %>
|
21
|
-
document.addEventListener("DOMContentLoaded", () => {
|
22
|
-
datePickerHelper({
|
23
|
-
defaultDate: "<%= object.default_date %>",
|
24
|
-
disableDate: <%=raw object.disable_date %>,
|
25
|
-
disableRange: <%=raw object.disable_range.to_json %>,
|
26
|
-
disableWeekdays: <%=raw object.disable_weekdays %>,
|
27
|
-
format: "<%= object.format %>",
|
28
|
-
maxDate: "<%= object.max_date %>",
|
29
|
-
minDate: "<%= object.min_date %>",
|
30
|
-
mode: "<%= object.mode %>",
|
31
|
-
pickerId: "<%= object.picker_id %>",
|
32
|
-
propModel: "rails"
|
33
|
-
})
|
34
|
-
})
|
35
|
-
<% end %>
|
36
|
-
<% end %>
|
@@ -1,98 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React, { useEffect } from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { spacing } from '../utilities/spacing.js'
|
7
|
-
import flatpickr from 'flatpickr'
|
8
|
-
import { Body, Caption } from '../'
|
9
|
-
import datePickerHelper from './date_picker_helper.js'
|
10
|
-
|
11
|
-
type DatePickerProps = {
|
12
|
-
aria?: object,
|
13
|
-
className?: String,
|
14
|
-
data?: object,
|
15
|
-
defaultDate?: String,
|
16
|
-
disableDate?: Array,
|
17
|
-
disableRange?: Array,
|
18
|
-
disableWeekdays?: Array,
|
19
|
-
error?: String,
|
20
|
-
format?: String,
|
21
|
-
id?: String,
|
22
|
-
label?: String,
|
23
|
-
maxDate: String,
|
24
|
-
minDate: String,
|
25
|
-
mode?: String,
|
26
|
-
pickerId?: String,
|
27
|
-
}
|
28
|
-
const DatePicker = (props: DatePickerProps) => {
|
29
|
-
const {
|
30
|
-
aria = {},
|
31
|
-
className,
|
32
|
-
data = {},
|
33
|
-
defaultDate = '',
|
34
|
-
disableDate = null,
|
35
|
-
disableRange = null,
|
36
|
-
disableWeekdays = null,
|
37
|
-
error,
|
38
|
-
format = 'm/d/Y',
|
39
|
-
id,
|
40
|
-
label = 'Date Picker',
|
41
|
-
maxDate,
|
42
|
-
minDate,
|
43
|
-
mode = 'single',
|
44
|
-
pickerId,
|
45
|
-
} = props
|
46
|
-
|
47
|
-
const ariaProps = buildAriaProps(aria)
|
48
|
-
const dataProps = buildDataProps(data)
|
49
|
-
const classes = classnames(
|
50
|
-
buildCss('pb_date_picker'),
|
51
|
-
className,
|
52
|
-
spacing(props),
|
53
|
-
error ? 'error' : null,
|
54
|
-
)
|
55
|
-
|
56
|
-
useEffect(() => {
|
57
|
-
datePickerHelper({
|
58
|
-
defaultDate: defaultDate,
|
59
|
-
disableDate: disableDate,
|
60
|
-
disableRange: disableRange,
|
61
|
-
disableWeekdays: disableWeekdays,
|
62
|
-
format: format,
|
63
|
-
maxDate: maxDate,
|
64
|
-
minDate: minDate,
|
65
|
-
mode: mode,
|
66
|
-
pickerId: pickerId,
|
67
|
-
propModel: 'React',
|
68
|
-
})
|
69
|
-
}, [])
|
70
|
-
|
71
|
-
return (
|
72
|
-
<div
|
73
|
-
{...ariaProps}
|
74
|
-
{...dataProps}
|
75
|
-
className={classes}
|
76
|
-
id={id}
|
77
|
-
>
|
78
|
-
{className}
|
79
|
-
<Caption
|
80
|
-
text={label}
|
81
|
-
/>
|
82
|
-
<div className="input_wrapper">
|
83
|
-
<input
|
84
|
-
autoComplete="off"
|
85
|
-
id={pickerId}
|
86
|
-
/>
|
87
|
-
<If condition={error}>
|
88
|
-
<Body
|
89
|
-
status="negative"
|
90
|
-
text={error}
|
91
|
-
/>
|
92
|
-
</If>
|
93
|
-
</div>
|
94
|
-
</div>
|
95
|
-
)
|
96
|
-
}
|
97
|
-
|
98
|
-
export default DatePicker
|
@@ -1,59 +0,0 @@
|
|
1
|
-
@import "../../../../node_modules/flatpickr/dist/flatpickr.min.css";
|
2
|
-
@import "../pb_textarea/textarea_mixin";
|
3
|
-
@import "../pb_title/title_mixin";
|
4
|
-
@import "../tokens/colors";
|
5
|
-
@import "../pb_caption/caption_mixin";
|
6
|
-
|
7
|
-
[class^=pb_date_picker] {
|
8
|
-
// input styles
|
9
|
-
[class^=pb_caption_kit] {
|
10
|
-
margin-bottom: $space_xs;
|
11
|
-
display: block;
|
12
|
-
}
|
13
|
-
.input_wrapper {
|
14
|
-
margin-bottom: $space_sm;
|
15
|
-
|
16
|
-
.flatpickr-wrapper {
|
17
|
-
display: block;
|
18
|
-
input::placeholder {
|
19
|
-
@include pb_body_light;
|
20
|
-
}
|
21
|
-
|
22
|
-
> input:first-child {
|
23
|
-
@include pb_textarea_light;
|
24
|
-
@include pb_title_4;
|
25
|
-
overflow: hidden;
|
26
|
-
}
|
27
|
-
|
28
|
-
input:focus, input:-webkit-autofill:focus {
|
29
|
-
@include pb_textarea_focus;
|
30
|
-
-webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
|
31
|
-
transition: background-color 5000s ease-in-out 0s;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
&.error {
|
37
|
-
[class^=pb_body_kit] {
|
38
|
-
margin-top: $space_xs / 2;
|
39
|
-
}
|
40
|
-
.flatpickr-wrapper {
|
41
|
-
> input:first-child {
|
42
|
-
border-color: $error;
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
47
|
-
|
48
|
-
// date-picker styles
|
49
|
-
|
50
|
-
div.flatpickr-weekdays {
|
51
|
-
margin-top: 5px;
|
52
|
-
}
|
53
|
-
span.flatpickr-weekday {
|
54
|
-
@include caption;
|
55
|
-
}
|
56
|
-
|
57
|
-
.pb_popover_body {
|
58
|
-
overflow: visible !important;
|
59
|
-
}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbDatePicker
|
5
|
-
class DatePicker
|
6
|
-
include Playbook::Props
|
7
|
-
|
8
|
-
partial "pb_date_picker/date_picker"
|
9
|
-
|
10
|
-
prop :default_date, type: Playbook::Props::String,
|
11
|
-
default: ""
|
12
|
-
prop :disable_date, type: Playbook::Props::Array,
|
13
|
-
default: []
|
14
|
-
prop :disable_range, type: Playbook::Props::Array,
|
15
|
-
default: []
|
16
|
-
prop :disable_weekdays, type: Playbook::Props::Array,
|
17
|
-
default: []
|
18
|
-
prop :error, type: Playbook::Props::String
|
19
|
-
prop :format, type: Playbook::Props::String,
|
20
|
-
default: "m/d/Y"
|
21
|
-
prop :label, type: Playbook::Props::String,
|
22
|
-
default: "Date Picker"
|
23
|
-
prop :max_date, type: Playbook::Props::String
|
24
|
-
prop :min_date, type: Playbook::Props::String
|
25
|
-
prop :mode, type: Playbook::Props::String,
|
26
|
-
default: "single"
|
27
|
-
prop :picker_id, type: Playbook::Props::String
|
28
|
-
|
29
|
-
def classname
|
30
|
-
generate_classname("pb_date_picker")
|
31
|
-
end
|
32
|
-
|
33
|
-
def error_class
|
34
|
-
error ? "error" : ""
|
35
|
-
end
|
36
|
-
end
|
37
|
-
end
|
38
|
-
end
|
@@ -1,91 +0,0 @@
|
|
1
|
-
import flatpickr from 'flatpickr'
|
2
|
-
|
3
|
-
const datePickerHelper = (config) => {
|
4
|
-
const {
|
5
|
-
defaultDate,
|
6
|
-
disableDate,
|
7
|
-
disableRange,
|
8
|
-
disableWeekdays,
|
9
|
-
format,
|
10
|
-
maxDate,
|
11
|
-
minDate,
|
12
|
-
mode,
|
13
|
-
pickerId,
|
14
|
-
propModel,
|
15
|
-
} = config
|
16
|
-
|
17
|
-
const defaultDateGetter = () => {
|
18
|
-
if (defaultDate !== '') {
|
19
|
-
if (propModel === 'rails' && defaultDate.includes('[') == true) {
|
20
|
-
return JSON.parse(defaultDate.replace(/"/g, '"'))
|
21
|
-
} else if (defaultDate === 'blank') {
|
22
|
-
return ''
|
23
|
-
} else {
|
24
|
-
return defaultDate
|
25
|
-
}
|
26
|
-
}
|
27
|
-
if (mode === 'single' && defaultDate === '') {
|
28
|
-
return new Date()
|
29
|
-
} else if (mode === 'range' && defaultDate === '') {
|
30
|
-
const today = new Date()
|
31
|
-
const tomorrow = new Date(today)
|
32
|
-
tomorrow.setDate(tomorrow.getDate() + 1)
|
33
|
-
return [today, tomorrow]
|
34
|
-
}
|
35
|
-
}
|
36
|
-
const disabledParser = () => {
|
37
|
-
if (disableDate && disableDate.length > 0) {
|
38
|
-
return disableDate
|
39
|
-
} else if (disableRange && disableRange.length > 0) {
|
40
|
-
return disableRange
|
41
|
-
} else {
|
42
|
-
return []
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
|
-
flatpickr(`#${pickerId}`, {
|
47
|
-
allowInput: true,
|
48
|
-
dateFormat: format,
|
49
|
-
defaultDate: defaultDateGetter(),
|
50
|
-
disable: disableWeekdays && disableWeekdays.length > 0 ? [
|
51
|
-
(date) => {
|
52
|
-
const weekdayObj = {
|
53
|
-
Sunday: 0,
|
54
|
-
Monday: 1,
|
55
|
-
Tuesday: 2,
|
56
|
-
Wednesday: 3,
|
57
|
-
Thursday: 4,
|
58
|
-
Friday: 5,
|
59
|
-
Saturday: 6,
|
60
|
-
}
|
61
|
-
return (
|
62
|
-
// try to refactor with for loop
|
63
|
-
date.getDay() === weekdayObj[disableWeekdays[0]] ||
|
64
|
-
date.getDay() === weekdayObj[disableWeekdays[1]] ||
|
65
|
-
date.getDay() === weekdayObj[disableWeekdays[2]] ||
|
66
|
-
date.getDay() === weekdayObj[disableWeekdays[3]] ||
|
67
|
-
date.getDay() === weekdayObj[disableWeekdays[4]] ||
|
68
|
-
date.getDay() === weekdayObj[disableWeekdays[5]] ||
|
69
|
-
date.getDay() === weekdayObj[disableWeekdays[6]]
|
70
|
-
)
|
71
|
-
},
|
72
|
-
] : disabledParser(),
|
73
|
-
maxDate: maxDate,
|
74
|
-
minDate: minDate,
|
75
|
-
mode: mode,
|
76
|
-
static: true,
|
77
|
-
})
|
78
|
-
|
79
|
-
document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
|
80
|
-
const picker = document.querySelector(`#${pickerId}`)._flatpickr
|
81
|
-
picker.input.setAttribute('value', e.target.value)
|
82
|
-
const variant = picker.config.mode
|
83
|
-
if (variant === 'single' && e.target.value.split('').length === 10) {
|
84
|
-
picker.setDate(e.target.value)
|
85
|
-
} else if (variant === 'range' && e.target.value.split('').length === 24) {
|
86
|
-
picker.setDate(e.target.value)
|
87
|
-
}
|
88
|
-
})
|
89
|
-
}
|
90
|
-
|
91
|
-
export default datePickerHelper
|