playbook_ui 6.1.0.pre.alpha2 → 6.1.0.pre.alpha3
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 -1
- data/app/pb_kits/playbook/data/menu.yml +0 -1
- data/app/pb_kits/playbook/index.js +0 -2
- data/app/pb_kits/playbook/packs/examples.js +0 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +5 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +7 -4
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/form_builder.rb +2 -1
- data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +30 -0
- data/app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb +1 -0
- data/app/pb_kits/playbook/vendor.js +0 -6
- data/lib/playbook/version.rb +1 -1
- metadata +3 -26
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +0 -38
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +0 -101
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -846
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -41
- 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_form/form_builder/date_picker_field.rb +0 -41
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5b5f0ebf353807848145db1debca6c328dc6c22d75a3a9895f36fa6d0dd5a718
|
4
|
+
data.tar.gz: ec48bd6d3874cb9324adb62458aa523c50c3e66a6231e4d7bc3822c76eb2e281
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 46fbf75023b2a972d37fa053ae549733887defe7f78475418d58c891839ef1997517091c5b1bebcb413667f986588759612ca8febd50fd3d1197d7ffa7ed3b81
|
7
|
+
data.tar.gz: 90c0f1dda08fdd629c1c36412dff45028934b2d4ac608d5d94836bb6595d541c30c450837087493888c501de987fa14e51469c24ffc427e977bba67a1146b744
|
@@ -15,7 +15,6 @@
|
|
15
15
|
@import 'pb_currency/currency';
|
16
16
|
@import 'pb_dashboard_value/dashboard_value';
|
17
17
|
@import 'pb_date/date';
|
18
|
-
@import 'pb_date_picker/date_picker';
|
19
18
|
@import 'pb_date_range_inline/date_range_inline';
|
20
19
|
@import 'pb_date_range_stacked/date_range_stacked';
|
21
20
|
@import 'pb_date_stacked/date_stacked';
|
@@ -14,7 +14,6 @@ export Contact from './pb_contact/_contact.jsx'
|
|
14
14
|
export Currency from './pb_currency/_currency.jsx'
|
15
15
|
export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
|
16
16
|
export Date from './pb_date/_date.jsx'
|
17
|
-
export DatePicker from './pb_date_picker/_date_picker.jsx'
|
18
17
|
export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
|
19
18
|
export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
|
20
19
|
export DateStacked from './pb_date_stacked/_date_stacked.jsx'
|
@@ -92,7 +91,6 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
|
|
92
91
|
|
93
92
|
// Other JS/Plugins
|
94
93
|
export pbChart from './plugins/pb_chart.js'
|
95
|
-
export datePickerHelper from './pb_date_picker/date_picker_helper.js'
|
96
94
|
export PbTypeahead from './pb_typeahead'
|
97
95
|
export PbPopover from './pb_popover'
|
98
96
|
export PbTable from './pb_table'
|
@@ -28,7 +28,6 @@ import * as Contact from 'pb_contact/docs'
|
|
28
28
|
import * as Currency from 'pb_currency/docs'
|
29
29
|
import * as DashboardValue from 'pb_dashboard_value/docs'
|
30
30
|
import * as Date from 'pb_date/docs'
|
31
|
-
import * as DatePicker from 'pb_date_picker/docs'
|
32
31
|
import * as DateRangeInline from 'pb_date_range_inline/docs'
|
33
32
|
import * as DateRangeStacked from 'pb_date_range_stacked/docs'
|
34
33
|
import * as DateStacked from 'pb_date_stacked/docs'
|
@@ -109,7 +108,6 @@ WebpackerReact.setup({
|
|
109
108
|
...Currency,
|
110
109
|
...DashboardValue,
|
111
110
|
...Date,
|
112
|
-
...DatePicker,
|
113
111
|
...DateRangeInline,
|
114
112
|
...DateRangeStacked,
|
115
113
|
...DateStacked,
|
@@ -11,6 +11,6 @@
|
|
11
11
|
<%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
|
12
12
|
</span>
|
13
13
|
<span class="pb_checkbox_label">
|
14
|
-
<%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
|
14
|
+
<%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
|
15
15
|
</span>
|
16
16
|
<% end %>
|
@@ -15,6 +15,11 @@ module Playbook
|
|
15
15
|
prop :value
|
16
16
|
prop :name
|
17
17
|
|
18
|
+
prop :required, type: Playbook::Props::Boolean,
|
19
|
+
default: false
|
20
|
+
prop :form_spacing, type: Playbook::Props::Boolean,
|
21
|
+
default: false
|
22
|
+
|
18
23
|
def checked_html
|
19
24
|
checked ? "checked='true'" : nil
|
20
25
|
end
|
@@ -27,10 +27,13 @@
|
|
27
27
|
OpenStruct.new(name: "Georgia", value: 10),
|
28
28
|
]
|
29
29
|
%>
|
30
|
-
<%= pb_rails("form", props: { form_system_options: { scope: :
|
31
|
-
<%= form.text_field :example_text_field, props: { label: true } %>
|
32
|
-
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
33
|
-
<%=
|
30
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
31
|
+
<%# <%= form.text_field :example_text_field, props: { label: true } %>
|
32
|
+
<%# <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
33
|
+
<%= pb_rails("caption", props: { text: "Status", margin_bottom: "sm" }) %>
|
34
|
+
<%= form.check_box :example_checkbox, props: { text: "Delivered", margin_right: "md" } %>
|
35
|
+
<%= form.check_box :example_checkbox, props: { text: "Unsubscribed", margin_right: "md" } %>
|
36
|
+
<%= form.check_box :example_checkbox, props: { text: "Failed", margin_right: "md" } %>
|
34
37
|
|
35
38
|
<%= form.actions do |action| %>
|
36
39
|
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
@@ -13,7 +13,7 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%= pb_rails("form", props: { form_system_options: { scope: :
|
16
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
17
17
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
18
18
|
<%= form.telephone_field :example_phone_field, props: { label: true } %>
|
19
19
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
@@ -24,7 +24,7 @@
|
|
24
24
|
<%= form.text_area :example_text_area, props: { label: true } %>
|
25
25
|
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
|
26
26
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
27
|
-
<%= form.
|
27
|
+
<%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true, value: "test-val" } %>
|
28
28
|
|
29
29
|
<%= form.actions do |action| %>
|
30
30
|
<%= action.submit %>
|
@@ -14,7 +14,7 @@
|
|
14
14
|
%>
|
15
15
|
|
16
16
|
<%= pb_rails("form", props: {
|
17
|
-
form_system_options: { scope: :
|
17
|
+
form_system_options: { scope: :example, method: :get },
|
18
18
|
validate: true
|
19
19
|
}) do |form| %>
|
20
20
|
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
@@ -27,7 +27,7 @@
|
|
27
27
|
<%= form.text_area :example_text_area, props: { label: true, required: true } %>
|
28
28
|
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
29
29
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
30
|
-
<%= form.
|
30
|
+
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
31
31
|
|
32
32
|
<%= form.actions do |action| %>
|
33
33
|
<%= action.submit %>
|
@@ -14,7 +14,7 @@
|
|
14
14
|
:example_text_area,
|
15
15
|
:example_select_field,
|
16
16
|
:example_collection_select_field,
|
17
|
-
:
|
17
|
+
:example_checkbox_field
|
18
18
|
|
19
19
|
|
20
20
|
def self.model_name
|
@@ -50,7 +50,7 @@
|
|
50
50
|
<%= form.input :example_text_area, as: :text %>
|
51
51
|
<%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
|
52
52
|
<%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
|
53
|
-
<%= form.
|
53
|
+
<%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
|
54
54
|
|
55
55
|
<%= form.actions do |action| %>
|
56
56
|
<%= action.submit %>
|
@@ -14,7 +14,7 @@
|
|
14
14
|
:example_text_area,
|
15
15
|
:example_select_field,
|
16
16
|
:example_collection_select_field,
|
17
|
-
:
|
17
|
+
:example_checkbox_field
|
18
18
|
|
19
19
|
|
20
20
|
def self.model_name
|
@@ -50,7 +50,7 @@
|
|
50
50
|
<%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
|
51
51
|
<%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
|
52
52
|
<%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
|
53
|
-
<%= form.
|
53
|
+
<%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
|
54
54
|
|
55
55
|
<%= form.actions do |action| %>
|
56
56
|
<%= action.submit %>
|
@@ -14,10 +14,11 @@ module Playbook
|
|
14
14
|
prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
|
15
15
|
prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
|
16
16
|
prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
|
17
|
+
# prepend(FormFieldBuilder.new(:check_box, kit_name: "checkbox"))
|
17
18
|
prepend(TypeaheadField)
|
18
19
|
prepend(SelectField)
|
19
20
|
prepend(CollectionSelectField)
|
20
|
-
prepend(
|
21
|
+
prepend(CheckboxField)
|
21
22
|
|
22
23
|
def actions(&block)
|
23
24
|
ActionArea.new(self).wrapper(&block)
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbForm
|
5
|
+
module FormBuilder
|
6
|
+
module CheckboxField
|
7
|
+
def check_box(name, data: {}, props: {})
|
8
|
+
value = props[:value] ||= 1
|
9
|
+
input = super(name, { required: props[:required], data: data }, value)
|
10
|
+
label_text = name.to_s.gsub("_", " ")
|
11
|
+
|
12
|
+
props[:margin_bottom] = "sm"
|
13
|
+
props[:form_spacing] = true
|
14
|
+
|
15
|
+
# Refactor and dry up, solve adding nil error
|
16
|
+
if props[:label]
|
17
|
+
@template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
|
18
|
+
@template.pb_rails("checkbox", props: props) do
|
19
|
+
input
|
20
|
+
end
|
21
|
+
else
|
22
|
+
@template.pb_rails("checkbox", props: props) do
|
23
|
+
input
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -12,6 +12,7 @@ module Playbook
|
|
12
12
|
options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
|
13
13
|
options[:required] = true if props[:required]
|
14
14
|
options[:placeholder] = props[:placeholder] || ""
|
15
|
+
options[:value] = props[:value]
|
15
16
|
|
16
17
|
if props.key?(:validation)
|
17
18
|
validation = props[:validation]
|
@@ -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
|
|
@@ -23,5 +19,3 @@ PbTypeahead.start()
|
|
23
19
|
|
24
20
|
import PbTable from './pb_table'
|
25
21
|
PbTable.start()
|
26
|
-
|
27
|
-
import 'flatpickr'
|
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: 6.1.0.pre.
|
4
|
+
version: 6.1.0.pre.alpha3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-08-
|
12
|
+
date: 2020-08-10 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -680,29 +680,6 @@ files:
|
|
680
680
|
- app/pb_kits/playbook/pb_date/docs/_description.md
|
681
681
|
- app/pb_kits/playbook/pb_date/docs/example.yml
|
682
682
|
- app/pb_kits/playbook/pb_date/docs/index.js
|
683
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
|
684
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
|
685
|
-
- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
|
686
|
-
- app/pb_kits/playbook/pb_date_picker/date_picker.rb
|
687
|
-
- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
|
688
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
689
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
690
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
691
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
692
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
|
693
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
|
694
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
|
695
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
|
696
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
|
697
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
|
698
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
|
699
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
|
700
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
|
701
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
|
702
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
|
703
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
|
704
|
-
- app/pb_kits/playbook/pb_date_picker/docs/example.yml
|
705
|
-
- app/pb_kits/playbook/pb_date_picker/docs/index.js
|
706
683
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
|
707
684
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
|
708
685
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -867,8 +844,8 @@ files:
|
|
867
844
|
- app/pb_kits/playbook/pb_form/form/simple_form_form.rb
|
868
845
|
- app/pb_kits/playbook/pb_form/form_builder.rb
|
869
846
|
- app/pb_kits/playbook/pb_form/form_builder/action_area.rb
|
847
|
+
- app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
|
870
848
|
- app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
|
871
|
-
- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
|
872
849
|
- app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
|
873
850
|
- app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
|
874
851
|
- app/pb_kits/playbook/pb_form/form_builder/select_field.rb
|
@@ -1,38 +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
|
-
name="<%= object.name %>"
|
12
|
-
<%= object.required ? required="required" : ''%>
|
13
|
-
/>
|
14
|
-
<% if object.error %>
|
15
|
-
<%= pb_rails("body", props: {
|
16
|
-
status: "negative",
|
17
|
-
text: object.error
|
18
|
-
}) %>
|
19
|
-
<% end %>
|
20
|
-
</div>
|
21
|
-
|
22
|
-
<%= javascript_tag do %>
|
23
|
-
document.addEventListener("DOMContentLoaded", () => {
|
24
|
-
datePickerHelper({
|
25
|
-
defaultDate: "<%= object.default_date %>",
|
26
|
-
disableDate: <%=raw object.disable_date %>,
|
27
|
-
disableRange: <%=raw object.disable_range.to_json %>,
|
28
|
-
disableWeekdays: <%=raw object.disable_weekdays %>,
|
29
|
-
format: "<%= object.format %>",
|
30
|
-
maxDate: "<%= object.max_date %>",
|
31
|
-
minDate: "<%= object.min_date %>",
|
32
|
-
mode: "<%= object.mode %>",
|
33
|
-
pickerId: "<%= object.picker_id %>",
|
34
|
-
propModel: "rails"
|
35
|
-
})
|
36
|
-
})
|
37
|
-
<% end %>
|
38
|
-
<% end %>
|
@@ -1,101 +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 { globalProps } from '../utilities/globalProps.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
|
-
name: String,
|
27
|
-
pickerId?: String,
|
28
|
-
}
|
29
|
-
const DatePicker = (props: DatePickerProps) => {
|
30
|
-
const {
|
31
|
-
aria = {},
|
32
|
-
className,
|
33
|
-
data = {},
|
34
|
-
defaultDate = '',
|
35
|
-
disableDate = null,
|
36
|
-
disableRange = null,
|
37
|
-
disableWeekdays = null,
|
38
|
-
error,
|
39
|
-
format = 'm/d/Y',
|
40
|
-
id,
|
41
|
-
label = 'Date Picker',
|
42
|
-
maxDate,
|
43
|
-
minDate,
|
44
|
-
mode = 'single',
|
45
|
-
name,
|
46
|
-
pickerId,
|
47
|
-
} = props
|
48
|
-
|
49
|
-
const ariaProps = buildAriaProps(aria)
|
50
|
-
const dataProps = buildDataProps(data)
|
51
|
-
const classes = classnames(
|
52
|
-
buildCss('pb_date_picker_kit'),
|
53
|
-
className,
|
54
|
-
globalProps(props),
|
55
|
-
error ? 'error' : null,
|
56
|
-
)
|
57
|
-
|
58
|
-
useEffect(() => {
|
59
|
-
datePickerHelper({
|
60
|
-
defaultDate: defaultDate,
|
61
|
-
disableDate: disableDate,
|
62
|
-
disableRange: disableRange,
|
63
|
-
disableWeekdays: disableWeekdays,
|
64
|
-
format: format,
|
65
|
-
maxDate: maxDate,
|
66
|
-
minDate: minDate,
|
67
|
-
mode: mode,
|
68
|
-
pickerId: pickerId,
|
69
|
-
propModel: 'React',
|
70
|
-
})
|
71
|
-
}, [])
|
72
|
-
|
73
|
-
return (
|
74
|
-
<div
|
75
|
-
{...ariaProps}
|
76
|
-
{...dataProps}
|
77
|
-
className={classes}
|
78
|
-
id={id}
|
79
|
-
>
|
80
|
-
{className}
|
81
|
-
<Caption
|
82
|
-
text={label}
|
83
|
-
/>
|
84
|
-
<div className="input_wrapper">
|
85
|
-
<input
|
86
|
-
autoComplete="off"
|
87
|
-
id={pickerId}
|
88
|
-
name={name}
|
89
|
-
/>
|
90
|
-
<If condition={error}>
|
91
|
-
<Body
|
92
|
-
status="negative"
|
93
|
-
text={error}
|
94
|
-
/>
|
95
|
-
</If>
|
96
|
-
</div>
|
97
|
-
</div>
|
98
|
-
)
|
99
|
-
}
|
100
|
-
|
101
|
-
export default DatePicker
|